ai_uniapp_v2/pages/tool/old-photo-history.vue

<template>
  <view class="page">
    <scroll-view
      class="scroll"
      scroll-y
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="refresh"
      @scrolltolower="loadMore"
    >
      <view class="wrap">
        <view class="studio-head">
          <view>
            <text class="eyebrow">OLD PHOTO GALLERY</text>
            <text class="page-title">我的老照片</text>
            <text class="page-desc">每次修复结果都会保存，完成后可查看对比、保存原图或继续修复。</text>
          </view>
          <view class="create-btn" @click="goCreate">修复</view>
        </view>

        <view class="stats-row">
          <view class="stat-card">
            <text class="stat-num">{{ total || list.length }}</text>
            <text class="stat-label">全部记录</text>
          </view>
          <view class="stat-card">
            <text class="stat-num">{{ pendingCount }}</text>
            <text class="stat-label">生成中</text>
          </view>
          <view class="stat-card">
            <text class="stat-num">{{ successCount }}</text>
            <text class="stat-label">已完成</text>
          </view>
        </view>

        <view v-if="list.length" class="gallery">
          <view v-for="item in list" :key="item.photo_open_id" class="work-card">
            <view class="poster" @click="openItem(item)">
              <image v-if="item.cover" class="poster-img" :src="item.cover" mode="aspectFill" />
              <view v-else class="poster-empty"></view>

              <view class="status-chip" :class="statusClass(item)">{{ item.status_text }}</view>

              <view v-if="isPending(item)" class="progress-mask">
                <view class="spinner"></view>
                <text>{{ Number(item.status) === 10 ? '排队中' : '正在修复' }}</text>
              </view>
              <view v-else-if="Number(item.status) < 0" class="failed-mask">
                <text>{{ item.error_msg || '修复失败' }}</text>
              </view>
            </view>

            <view class="card-info">
              <text class="mode-name">{{ item.mode_name || '老照片修复' }}</text>
              <view class="time-line">
                <text>{{ formatTime(item.add_time) }}</text>
                <view class="delete-btn" @click.stop="deleteItem(item)">删除</view>
              </view>
            </view>
          </view>
        </view>

        <view v-if="!list.length && !loading" class="empty-state">
          <view class="empty-preview">
            <view class="empty-photo"></view>
          </view>
          <text class="empty-title">还没有修复记录</text>
          <text class="empty-desc">上传一张老照片，试试修复和上色的效果。</text>
          <view class="empty-action" @click="goCreate">去修复</view>
        </view>

        <view v-if="loading" class="loading">{{ list.length ? '加载更多...' : '加载中...' }}</view>
        <view v-if="list.length && list.length >= total && !loading" class="end-text">已经到底了</view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
import { oldPhotoApi } from '@/api/index.js'
import { useApp } from '@/utils/useApp.js'

const { toast } = useApp()
const list = ref([])
const page = ref(1)
const total = ref(0)
const loading = ref(false)
const refreshing = ref(false)
let timer = 0

const pendingCount = computed(() => list.value.filter((item) => isPending(item)).length)
const successCount = computed(() => list.value.filter((item) => Number(item.status) === 30).length)

onLoad(() => refresh())
onUnload(() => clearTimeout(timer))

function isPending(item) {
  return [10, 20].includes(Number(item.status))
}

function formatTime(value) {
  if (!value) return ''
  return dayjs(Number(value) * 1000).format('YYYY-MM-DD HH:mm')
}

async function fetchList(reset = false) {
  if (loading.value) return
  loading.value = true
  try {
    const res = await oldPhotoApi.getList({ page_no: page.value, page_size: 10 })
    const rows = res.list || []
    total.value = Number((res.data && res.data.total) || rows.length)
    list.value = reset ? rows : list.value.concat(rows)
    scheduleRefresh()
  } catch (e) {
    toast((e && e.msg) || '历史记录加载失败')
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

// 有进行中的任务就轮询：后端 getlist 会顺带推进任务状态
function scheduleRefresh() {
  clearTimeout(timer)
  if (list.value.some((item) => isPending(item))) {
    timer = setTimeout(() => refreshSilent(), 3000)
  }
}

function refresh() {
  refreshing.value = true
  refreshSilent()
}

function refreshSilent() {
  page.value = 1
  fetchList(true)
}

function loadMore() {
  if (loading.value) return
  if (list.value.length >= total.value) return
  page.value += 1
  fetchList()
}

// 进行中的也能进详情页看进度
function openItem(item) {
  if (Number(item.status) < 0) return toast(item.error_msg || '该记录修复失败')
  uni.navigateTo({ url: `/pages/tool/old-photo-detail?id=${item.photo_open_id}` })
}

function statusClass(item) {
  if (isPending(item)) return 'pending'
  if (Number(item.status) < 0) return 'failed'
  return 'done'
}

function goCreate() {
  const delta = getPageStackDelta('pages/tool/old-photo')
  if (delta > 0) {
    uni.navigateBack({ delta })
    return
  }
  uni.navigateTo({ url: '/pages/tool/old-photo' })
}

function getPageStackDelta(routeName) {
  const pages = getCurrentPages()
  const index = pages.findIndex((item) => item.route === routeName)
  return index >= 0 ? pages.length - 1 - index : -1
}

function deleteItem(item) {
  uni.showModal({
    title: '温馨提示',
    content: '是否确认删除该记录？',
    confirmText: '确认删除',
    success: async (res) => {
      if (!res.confirm) return
      try {
        await oldPhotoApi.delete({ photo_open_id: item.photo_open_id })
        toast('删除成功')
        refresh()
      } catch (e) {
        toast((e && e.msg) || '删除失败')
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.page,
.scroll {
  height: 100vh;
  background: #f6f8fc;
}

.wrap { padding: 24rpx 28rpx 70rpx; }

.studio-head {
  padding: 30rpx;
  border-radius: 26rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 24rpx;
  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.05);
}
.studio-head > view:first-child { flex: 1; min-width: 0; }
.eyebrow { display: block; color: #1f8cff; font-size: 20rpx; font-weight: 800; }
.page-title {
  display: block;
  margin-top: 10rpx;
  color: #172033;
  font-size: 40rpx;
  line-height: 1.2;
  font-weight: 900;
}
.page-desc { display: block; margin-top: 12rpx; color: #64748b; font-size: 24rpx; line-height: 1.5; }
.create-btn {
  width: 112rpx;
  height: 68rpx;
  border-radius: 999rpx;
  color: #ffffff;
  background: #1f8cff;
  font-size: 26rpx;
  line-height: 68rpx;
  text-align: center;
  font-weight: 800;
  box-shadow: 0 12rpx 24rpx rgba(31, 140, 255, 0.22);
  flex-shrink: 0;
}

.stats-row {
  margin-top: 18rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14rpx;
}
.stat-card {
  padding: 20rpx 10rpx;
  border-radius: 20rpx;
  background: #ffffff;
  text-align: center;
  box-shadow: 0 8rpx 20rpx rgba(31, 52, 86, 0.04);
}
.stat-num { display: block; color: #172033; font-size: 34rpx; line-height: 1; font-weight: 900; }
.stat-label { display: block; margin-top: 10rpx; color: #7c8a9b; font-size: 22rpx; }

.gallery {
  margin-top: 24rpx;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22rpx;
}
.work-card {
  border-radius: 24rpx;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.06);
}
.poster {
  position: relative;
  width: 100%;
  height: 440rpx;
  background: #dfe7f2;
  overflow: hidden;
}
.poster-img,
.poster-empty { width: 100%; height: 100%; }
.poster-empty { background: linear-gradient(135deg, #eef4fb, #dbe6f4); }

.status-chip {
  position: absolute;
  left: 14rpx;
  top: 14rpx;
  height: 42rpx;
  padding: 0 16rpx;
  border-radius: 999rpx;
  color: #ffffff;
  font-size: 22rpx;
  line-height: 42rpx;
  font-weight: 800;
  background: rgba(15, 23, 42, 0.48);
}
.status-chip.done { background: rgba(31, 140, 255, 0.9); }
.status-chip.pending { background: rgba(249, 115, 22, 0.92); }
.status-chip.failed { background: rgba(239, 68, 68, 0.9); }

.progress-mask,
.failed-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 26rpx;
  text-align: center;
  background: rgba(15, 23, 42, 0.52);
}
.failed-mask { background: rgba(127, 29, 29, 0.72); font-size: 24rpx; }
.spinner {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 18rpx;
  border: 6rpx solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.card-info { padding: 18rpx; }
.mode-name {
  display: block;
  margin-bottom: 10rpx;
  color: #172033;
  font-size: 25rpx;
  font-weight: 800;
}
.time-line { display: flex; align-items: center; gap: 12rpx; color: #64748b; font-size: 22rpx; }
.time-line text { flex: 1; min-width: 0; }
.delete-btn {
  width: 74rpx;
  height: 44rpx;
  border-radius: 999rpx;
  color: #ef4444;
  background: #fff1f2;
  font-size: 22rpx;
  line-height: 44rpx;
  text-align: center;
  flex-shrink: 0;
}

.empty-state {
  margin-top: 86rpx;
  padding: 56rpx 34rpx;
  border-radius: 28rpx;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.05);
}
.empty-preview {
  width: 150rpx;
  height: 200rpx;
  border-radius: 32rpx;
  background: linear-gradient(135deg, #edf6ff, #fff4f0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-photo {
  width: 88rpx;
  height: 108rpx;
  border-radius: 14rpx;
  border: 6rpx solid #1f8cff;
  background: linear-gradient(135deg, #d7d0c6 50%, #5db2d9 50%);
}
.empty-title { margin-top: 28rpx; color: #172033; font-size: 32rpx; font-weight: 900; }
.empty-desc { margin-top: 12rpx; color: #64748b; font-size: 25rpx; line-height: 1.5; }
.empty-action {
  margin-top: 28rpx;
  width: 220rpx;
  height: 72rpx;
  border-radius: 999rpx;
  color: #ffffff;
  background: #1f8cff;
  font-size: 28rpx;
  line-height: 72rpx;
  font-weight: 800;
}

.loading,
.end-text { padding: 46rpx 0 20rpx; color: #7c8a9b; font-size: 24rpx; text-align: center; }

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>