ece.suwa3d.com/src/views/cartoon/photoAlbum.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" /> {{ toValueWithout(config.photoAlbum.messages.title) }}</span>
    </div>
    <div class="record-container">
      <div class="record-note">{{ toValueWithout(config.photoAlbum.messages.note) }}</div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :finished-text="toValueWithout(config.photoAlbum.messages.noMore)"
          @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 == config.photoAlbum.status.success" @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 == config.photoAlbum.status.designing || item.reason" class="record-image-item-loading">
                <div style="font-size: 12px;color: #999;text-align: center;">ID: {{ item.sw_pid }}</div>
                <div style="width: 70%;font-size: 12px;">{{ item.reason || toValueWithout(config.photoAlbum.messages.designing) }}</div>
              </div>
              <div v-else-if="item.status == config.photoAlbum.status.failed || item.reason" class="record-image-item-loading">
                <div style="font-size: 12px;color: #999;text-align: center;">ID: {{ item.sw_pid }}</div>
                <div style="width: 70%;font-size: 12px;">{{ item.reason || toValueWithout(config.photoAlbum.messages.designFailed) }}</div>
              </div>
            </div>
          </div>
          <div v-else-if="loading && page.value === config.photoAlbum.pagination.initialPage" class="record-image-item-loading">
            {{ toValueWithout(config.photoAlbum.messages.loading) }}
          </div>
          <div v-else class="record-image-item-null">
            <img :src="nullDataImage" :alt="toValueWithout(config.photoAlbum.messages.noData)">
          </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';
import { toValueWithout } from '@/lang/utils';
import { cartoonConfig as config } from '@/config/cartoon';
import nullDataImage from '@/assets/badge/null-data.png';

const router = useRouter();
const images = ref([]);
const page = ref(config.photoAlbum.pagination.initialPage);
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 {
    const res = await badgeApi.getLogOage({
      page: page.value,
      size: config.photoAlbum.pagination.pageSize,
    });

    if (page.value === config.photoAlbum.pagination.initialPage) {
      images.value = res.list || [];
    } else {
      images.value.push(...(res.list || []));
    }

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

// 查看设计预览
function goPreview(item) {
  router.push({
    path: config.routes.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 = config.photoAlbum.pagination.initialPage;
  finished.value = false;
  await getList();
  refreshing.value = false;
}

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

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

// 组件卸载时清理
onUnmounted(() => {
  loading.value = false;
  finished.value = false;
  page.value = config.photoAlbum.pagination.initialPage;
});
</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(v-bind('config.photoAlbum.styles.gridColumns'), 1fr);
  gap: v-bind('config.photoAlbum.styles.gap + "px"');
}

.record-image-item {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: v-bind('config.photoAlbum.styles.borderRadius + "px"');
}

.record-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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);
}

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

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

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