ece.suwa3d.com/src/views/badge/record.vue

<template>
  <div>
    <div class="header" @click="goBack" style="text-align: center;">
      <span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> 设计记录</span>
    </div>
    <div class="record-container">
      <div class="record-note">注：可点击效果图进行下单打印</div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="record-images" v-if="images.length > 0">
            <div class="record-image-item" v-for="item in images" :key="item.id">
              <block v-if="item.status == 1" @click="goPreview(item)">
                <img :src="item.path" :alt="item.name" class="record-image">
                <div class="record-image-item-shadow"></div>
              </block>
              <div v-else-if="item.status == 0" class="record-image-item-loading">
                设计中
              </div>
              <div v-else-if="item.status == 2" class="record-image-item-loading">
                设计失败
              </div>
            </div>
          </div>
          <div v-else-if="loading && page.value === 1" class="record-image-item-loading">
            加载中...
          </div>
          <div v-else class="record-image-item-null">
            <img src="@/assets/badge/null-data.png" alt="暂无数据">
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import * as badgeApi from '@/api/badge';
import { onMounted, ref, onUnmounted } from 'vue';
const router = useRouter();
const images = ref([]);
const page = ref(1);
const loading = ref(false);
const finished = ref(false);
const error = ref(null);
const refreshing = ref(false);

// 获取设计记录列表
async function getList() {
  // 如果正在加载或者已经加载完所有数据，则返回
  console.log(loading.value, finished.value);
  if (loading.value || finished.value) return;

  loading.value = true;
  error.value = null;

  try {
    // 修复API调用中的拼写错误
    const res = await badgeApi.getLogOage({
      page: page.value,
      size: 20,
    });

    if (page.value === 1) {
      images.value = res.list || [];
    } else {
      images.value.push(...(res.list || []));
    }

    // 判断是否还有更多数据
    if (!res.list || res.list.length < 20) {
      finished.value = true;
    } else {
      page.value++;
    }
  } catch (err: any) {
    error.value = err.message || '获取数据失败';
    console.error('获取设计记录失败', err);
  } finally {
    loading.value = false;
  }
}

// 查看设计预览
function goPreview(item) {
  router.push({
    path: '/badge/preview',
    query: {
      pid: item.sw_pid,
      group: item.group_count,
      key: item.num,
      prod_id: item.prod_id
    },
  });
}

// 上拉加载更多
function onLoad() {
  loading.value = false;
  getList();
}

// 下拉刷新
async function onRefresh() {
  refreshing.value = true;
  page.value = 1;
  finished.value = false;
  await getList();
  refreshing.value = false;
}

// 返回上一页
function goBack() {
  router.push('/badge');
}

// 组件挂载时获取数据
onMounted(() => {
  getList();
});

// 组件卸载时清理
onUnmounted(() => {
  loading.value = false;
  finished.value = false;
  page.value = 1;
});
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  height: 40px;
  font-size: 14px;
  color: #999;
  padding: 16px 16px 0 16px;
}

.back-icon {
  margin-right: 8px;
  color: #222;
  font-size: 16px;
  cursor: pointer;
}

.record-container {
  padding: 16px;
}

.record-note {
  font-size: 12px;
  color: #999;
  margin-bottom: 16px;
}

.record-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.record-image-item {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 12px;
}

.record-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.record-image-item-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5), inset -2px -2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}

.record-image-item-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 50%;
  font-size: 16px;
  color: #999;
}

.record-image-item-null {
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.record-image-item-null img {
  width: 80vw;
  height: 200px;
}
</style>