leiyun
/
ai_uniapp_v2
1
0
Разклонения 0
Код Задачи 0 Заявки за сливане 0 Версии 0 Уики Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
10 Ревизии
1 Клон
4.2 MiB
 
 
 
Клон: main
Клонове Маркери
${ item.name }
Create branch ${ searchTerm }
от 'main'
${ noResults }
ai_uniapp_v2/pages/tool/old-photo-detail.vue

463 lines
12 KiB
Директен файл Постоянна връзка Blame История 

  1. <template>

  2.   <view class="page">

  3.     <scroll-view class="scroll" scroll-y>

  4.       <view class="wrap">

  5.         <!-- 处理中 / 失败 -->

  6.         <view v-if="isLoadingState" class="state-card">

  7.           <view v-if="isPending" class="spinner"></view>

  8.           <text class="state-title">{{ isPending ? (Number(detail.status) === 10 ? '排队中，请耐心等待' : 'AI 正在修复上色') : '修复失败' }}</text>

  9.           <text v-if="isPending && countDown > 0" class="count">{{ countDown }} S</text>

  10.           <text v-if="!isPending" class="error">{{ detail.error_msg || '本次未扣点，可以换一张更清晰的照片重试' }}</text>

  11.         </view>

  12. 

  13.         <!-- 成品：默认直接看修复后的图 -->

  14.         <view v-else class="image-card" @click="preview">

  15.           <image class="work-img" :src="detail.result_url" mode="widthFix" />

  16.           <view class="compare-entry" @click.stop="openCompare">查看对比</view>

  17.         </view>

  18. 

  19.         <view class="info-card">

  20.           <view class="title">修复信息</view>

  21.           <view class="cell">

  22.             <text class="cell-label">修复档位：</text>

  23.             <text class="cell-content">{{ detail.mode_name || '-' }}</text>

  24.           </view>

  25.           <view class="cell">

  26.             <text class="cell-label">当前状态：</text>

  27.             <text class="cell-content">{{ detail.status_text || '-' }}</text>

  28.           </view>

  29.           <view v-if="detail.source_width && detail.source_height" class="cell">

  30.             <text class="cell-label">原图尺寸：</text>

  31.             <text class="cell-content">{{ detail.source_width }} × {{ detail.source_height }}px</text>

  32.           </view>

  33.           <view v-if="Number(detail.refine) === 1" class="cell">

  34.             <text class="cell-label">清晰度：</text>

  35.             <text class="cell-content">已做高清增强</text>

  36.           </view>

  37.           <view class="cell">

  38.             <text class="cell-label">创建时间：</text>

  39.             <text class="cell-content">{{ formatTime(detail.add_time) }}</text>

  40.           </view>

  41.           <view class="cell">

  42.             <text class="cell-label">功能来源：</text>

  43.             <text class="link" @click="createAgain">老照片修复 / 上色</text>

  44.           </view>

  45.           <text class="note">AI 会重绘上色，五官可能出现轻微变化，建议对照原图确认。</text>

  46.         </view>

  47.       </view>

  48.     </scroll-view>

  49. 

  50.     <view v-if="!isLoadingState" class="bottom-bar">

  51.       <view class="delete-btn" @click="deleteRecord">删除</view>

  52.       <view class="bar-btn" @click="download">保存</view>

  53.       <view class="bar-btn" @click="openCompare">对比</view>

  54.       <view class="main-btn" @click="createAgain">再修一张</view>

  55.     </view>

  56. 

  57.     <!-- 前后对比：样式与动漫头像一致 -->

  58.     <view v-if="compareVisible" class="compare-modal">

  59.       <view class="compare-backdrop" @click="closeCompare"></view>

  60.       <view class="compare-panel">

  61.         <view class="compare-panel-head">

  62.           <text>效果对比</text>

  63.           <view class="close-btn" @click="closeCompare">×</view>

  64.         </view>

  65.         <view

  66.           class="large-compare"

  67.           @touchstart.stop="onCompareTouch"

  68.           @touchmove.stop.prevent="onCompareTouch"

  69.           @click.stop="onCompareTouch"

  70.         >

  71.           <image class="compare-img" :src="detail.result_url" mode="aspectFit" />

  72.           <view class="compare-before" :style="{ width: comparePercent + '%' }">

  73.             <image class="compare-img" :src="detail.source_url" mode="aspectFit" />

  74.           </view>

  75.           <view class="compare-line large" :style="{ left: comparePercent + '%' }">

  76.             <view class="compare-handle large">

  77.               <text>‹</text>

  78.               <text>›</text>

  79.             </view>

  80.           </view>

  81.           <view class="compare-tag left">原图</view>

  82.           <view class="compare-tag right">修复后</view>

  83.         </view>

  84.         <text class="compare-guide">左右滑动中间按钮查看变化</text>

  85.       </view>

  86.     </view>

  87.   </view>

  88. </template>

  89. 

  90. <script setup>

  91. import { computed, ref } from 'vue'

  92. import { onLoad, onUnload } from '@dcloudio/uni-app'

  93. import dayjs from 'dayjs'

  94. import { oldPhotoApi } from '@/api/index.js'

  95. import { useApp } from '@/utils/useApp.js'

  96. 

  97. const { toast } = useApp()

  98. const id = ref('')

  99. const detail = ref({ status: 10 })

  100. const countDown = ref(0)

  101. const compareVisible = ref(false)

  102. const comparePercent = ref(50)

  103. let timer = 0

  104. let countTimer = 0

  105. 

  106. const isPending = computed(() => [10, 20].includes(Number(detail.value.status)))

  107. const isLoadingState = computed(() => Number(detail.value.status) !== 30)

  108. 

  109. onLoad((options) => {

  110.   id.value = (options && options.id) || ''

  111.   loadDetail()

  112. })

  113. 

  114. onUnload(() => {

  115.   clearTimeout(timer)

  116.   clearInterval(countTimer)

  117. })

  118. 

  119. async function loadDetail() {

  120.   if (!id.value) return

  121.   try {

  122.     const res = await oldPhotoApi.getDetail({ photo_open_id: id.value })

  123.     detail.value = res.data || {}

  124.     if (isPending.value) waitNext()

  125.   } catch (e) {

  126.     toast((e && e.msg) || '记录加载失败')

  127.   }

  128. }

  129. 

  130. // 处理中就 3 秒拉一次，后端会在这一步推进任务并转存结果

  131. function waitNext() {

  132.   clearTimeout(timer)

  133.   clearInterval(countTimer)

  134.   countDown.value = 3

  135.   countTimer = setInterval(() => {

  136.     countDown.value -= 1

  137.     if (countDown.value <= 0) clearInterval(countTimer)

  138.   }, 1000)

  139.   timer = setTimeout(loadDetail, 3000)

  140. }

  141. 

  142. function formatTime(value) {

  143.   if (!value) return '-'

  144.   return dayjs(Number(value) * 1000).format('YYYY-MM-DD HH:mm')

  145. }

  146. 

  147. function preview() {

  148.   if (!detail.value.result_url) return

  149.   uni.previewImage({ urls: [detail.value.result_url], current: detail.value.result_url })

  150. }

  151. 

  152. function download() {

  153.   if (!detail.value.result_url) return

  154.   uni.showLoading({ title: '保存中...', mask: true })

  155.   uni.downloadFile({

  156.     url: detail.value.result_url,

  157.     success: (res) => {

  158.       uni.saveImageToPhotosAlbum({

  159.         filePath: res.tempFilePath,

  160.         success: () => toast('已保存到相册'),

  161.         fail: () => toast('保存失败，请检查相册权限')

  162.       })

  163.     },

  164.     fail: () => toast('图片下载失败'),

  165.     complete: () => uni.hideLoading()

  166.   })

  167. }

  168. 

  169. function deleteRecord() {

  170.   if (!id.value) return

  171.   uni.showModal({

  172.     title: '删除记录',

  173.     content: '删除后将不再展示该老照片记录，是否继续？',

  174.     confirmText: '删除',

  175.     confirmColor: '#f04438',

  176.     success: async (res) => {

  177.       if (!res.confirm) return

  178.       try {

  179.         await oldPhotoApi.delete({ photo_open_id: id.value })

  180.         toast('删除成功')

  181.         const pages = getCurrentPages()

  182.         if (pages.length > 1) {

  183.           uni.navigateBack()

  184.         } else {

  185.           uni.redirectTo({ url: '/pages/works/works' })

  186.         }

  187.       } catch (e) {

  188.         toast((e && e.msg) || '删除失败')

  189.       }

  190.     }

  191.   })

  192. }

  193. 

  194. function openCompare() {

  195.   if (!detail.value.result_url || !detail.value.source_url) return

  196.   comparePercent.value = 50

  197.   compareVisible.value = true

  198. }

  199. 

  200. function closeCompare() {

  201.   compareVisible.value = false

  202. }

  203. 

  204. function onCompareTouch(e) {

  205.   const touch = (e.touches && e.touches[0]) || (e.changedTouches && e.changedTouches[0]) || e

  206.   const x = touch.clientX || 0

  207.   uni.createSelectorQuery()

  208.     .select('.large-compare')

  209.     .boundingClientRect((rect) => {

  210.       if (!rect || !rect.width) return

  211.       const percent = ((x - rect.left) / rect.width) * 100

  212.       comparePercent.value = Math.max(6, Math.min(94, Number(percent.toFixed(1))))

  213.     })

  214.     .exec()

  215. }

  216. 

  217. function createAgain() {

  218.   const delta = getPageStackDelta('pages/tool/old-photo')

  219.   if (delta > 0) {

  220.     uni.navigateBack({ delta })

  221.     return

  222.   }

  223.   uni.navigateTo({ url: '/pages/tool/old-photo' })

  224. }

  225. 

  226. function getPageStackDelta(routeName) {

  227.   const pages = getCurrentPages()

  228.   const index = pages.findIndex((item) => item.route === routeName)

  229.   return index >= 0 ? pages.length - 1 - index : -1

  230. }

  231. </script>

  232. 

  233. <style lang="scss" scoped>

  234. .page {

  235.   height: 100vh;

  236.   background: #f4f7fb;

  237.   display: flex;

  238.   flex-direction: column;

  239.   overflow: hidden;

  240. }

  241. .scroll { flex: 1; height: 0; }

  242. /* 底栏是 fixed 的，留够 300rpx */

  243. .wrap { padding: 28rpx 28rpx 300rpx; }

  244. 

  245. .state-card,

  246. .image-card,

  247. .info-card {

  248.   background: #fff;

  249.   border-radius: 18rpx;

  250.   overflow: hidden;

  251. }

  252. 

  253. .state-card {

  254.   min-height: 540rpx;

  255.   display: flex;

  256.   flex-direction: column;

  257.   align-items: center;

  258.   justify-content: center;

  259.   color: #172033;

  260.   font-size: 30rpx;

  261. }

  262. .spinner {

  263.   width: 72rpx;

  264.   height: 72rpx;

  265.   margin-bottom: 28rpx;

  266.   border: 8rpx solid #e9edf5;

  267.   border-top-color: #0b8cff;

  268.   border-radius: 50%;

  269.   animation: spin 0.8s linear infinite;

  270. }

  271. .count,

  272. .error { margin-top: 18rpx; color: #7f8896; font-size: 26rpx; }

  273. .error { color: #f04438; padding: 0 40rpx; text-align: center; }

  274. 

  275. .image-card { position: relative; }

  276. .work-img { width: 100%; display: block; }

  277. .compare-entry {

  278.   position: absolute;

  279.   right: 18rpx;

  280.   bottom: 18rpx;

  281.   height: 56rpx;

  282.   padding: 0 22rpx;

  283.   border-radius: 999rpx;

  284.   color: #fff;

  285.   font-size: 24rpx;

  286.   font-weight: 800;

  287.   line-height: 56rpx;

  288.   background: rgba(15, 23, 42, 0.55);

  289. }

  290. 

  291. .info-card { margin-top: 24rpx; padding: 28rpx; }

  292. .title { margin-bottom: 16rpx; color: #172033; font-size: 32rpx; font-weight: 700; }

  293. .cell {

  294.   padding: 10rpx 0;

  295.   display: flex;

  296.   color: #7f8896;

  297.   font-size: 27rpx;

  298.   line-height: 1.6;

  299. }

  300. .cell-label { flex-shrink: 0; }

  301. .cell-content { flex: 1; min-width: 0; color: #172033; }

  302. .link { color: #0b8cff; }

  303. .note {

  304.   display: block;

  305.   margin-top: 16rpx;

  306.   padding-top: 16rpx;

  307.   border-top: 2rpx solid #f1f5fa;

  308.   color: #8a95a6;

  309.   font-size: 23rpx;

  310.   line-height: 1.5;

  311. }

  312. 

  313. .bottom-bar {

  314.   position: fixed;

  315.   left: 0;

  316.   right: 0;

  317.   bottom: 0;

  318.   padding: 18rpx 28rpx calc(18rpx + env(safe-area-inset-bottom));

  319.   background: #fff;

  320.   display: flex;

  321.   gap: 18rpx;

  322.   box-shadow: 0 -8rpx 24rpx rgba(35, 55, 90, 0.08);

  323. }

  324. .bar-btn,

  325. .delete-btn,

  326. .main-btn {

  327.   height: 82rpx;

  328.   border-radius: 42rpx;

  329.   font-size: 29rpx;

  330.   display: flex;

  331.   align-items: center;

  332.   justify-content: center;

  333. }

  334. .bar-btn { width: 136rpx; color: #0b8cff; background: #eef6ff; }

  335. .delete-btn { width: 136rpx; color: #f04438; background: #fff1f0; }

  336. .main-btn { flex: 1; color: #fff; background: #0b8cff; }

  337. 

  338. /* 对比弹层：与动漫头像保持一致 */

  339. .compare-modal {

  340.   position: fixed;

  341.   left: 0;

  342.   right: 0;

  343.   top: 0;

  344.   bottom: 0;

  345.   z-index: 120;

  346. }

  347. .compare-backdrop {

  348.   position: absolute;

  349.   left: 0;

  350.   right: 0;

  351.   top: 0;

  352.   bottom: 0;

  353.   background: rgba(15, 23, 42, 0.58);

  354. }

  355. .compare-panel {

  356.   position: absolute;

  357.   left: 36rpx;

  358.   right: 36rpx;

  359.   top: 50%;

  360.   transform: translateY(-50%);

  361.   padding: 24rpx;

  362.   border-radius: 28rpx;

  363.   background: #ffffff;

  364. }

  365. .compare-panel-head {

  366.   margin-bottom: 20rpx;

  367.   display: flex;

  368.   align-items: center;

  369.   justify-content: space-between;

  370.   color: #172033;

  371.   font-size: 32rpx;

  372.   font-weight: 800;

  373. }

  374. .close-btn {

  375.   width: 56rpx;

  376.   height: 56rpx;

  377.   border-radius: 50%;

  378.   color: #64748b;

  379.   background: #f1f5f9;

  380.   font-size: 42rpx;

  381.   line-height: 50rpx;

  382.   text-align: center;

  383.   font-weight: 300;

  384. }

  385. .large-compare {

  386.   position: relative;

  387.   width: 100%;

  388.   height: 900rpx;

  389.   max-height: 70vh;

  390.   border-radius: 22rpx;

  391.   background: #dfe8f4;

  392.   overflow: hidden;

  393. }

  394. .compare-img { width: 100%; height: 100%; }

  395. .compare-before {

  396.   position: absolute;

  397.   left: 0;

  398.   top: 0;

  399.   bottom: 0;

  400.   overflow: hidden;

  401. }

  402. .large-compare .compare-before .compare-img { width: calc(100vw - 120rpx); }

  403. .compare-line {

  404.   position: absolute;

  405.   top: 0;

  406.   bottom: 0;

  407.   width: 4rpx;

  408.   margin-left: -2rpx;

  409.   background: rgba(255, 255, 255, 0.94);

  410.   box-shadow: 0 0 12rpx rgba(20, 37, 66, 0.22);

  411. }

  412. .compare-line.large { width: 6rpx; margin-left: -3rpx; }

  413. .compare-handle {

  414.   position: absolute;

  415.   left: 50%;

  416.   top: 50%;

  417.   width: 38rpx;

  418.   height: 58rpx;

  419.   margin-left: -19rpx;

  420.   margin-top: -29rpx;

  421.   border-radius: 999rpx;

  422.   background: #ffffff;

  423.   box-shadow: 0 8rpx 18rpx rgba(20, 37, 66, 0.22);

  424.   display: flex;

  425.   align-items: center;

  426.   justify-content: center;

  427.   gap: 1rpx;

  428.   color: #1f8cff;

  429.   font-size: 24rpx;

  430.   font-weight: 900;

  431. }

  432. .compare-handle.large {

  433.   width: 54rpx;

  434.   height: 78rpx;

  435.   margin-left: -27rpx;

  436.   margin-top: -39rpx;

  437.   font-size: 32rpx;

  438. }

  439. .compare-tag {

  440.   position: absolute;

  441.   top: 12rpx;

  442.   padding: 6rpx 12rpx;

  443.   border-radius: 999rpx;

  444.   color: #ffffff;

  445.   background: rgba(15, 23, 42, 0.46);

  446.   font-size: 20rpx;

  447.   font-weight: 700;

  448. }

  449. .compare-tag.left { left: 12rpx; }

  450. .compare-tag.right { right: 12rpx; }

  451. .compare-guide {

  452.   display: block;

  453.   margin-top: 18rpx;

  454.   color: #64748b;

  455.   font-size: 24rpx;

  456.   text-align: center;

  457. }

  458. 

  459. @keyframes spin {

  460.   to { transform: rotate(360deg); }

  461. }

  462. </style>