leiyun
/
ai_uniapp_v2
1
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
8 커밋
1 브렌치
4.2 MiB
 
 
 
트리: 8d76a2ec05
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from '8d76a2ec05'
${ noResults }
ai_uniapp_v2/pages/tool/portrait-detail.vue

532 lines
15 KiB
Raw Blame 히스토리 

  1. <template>

  2.   <view class="page">

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

  4.       <view class="wrap">

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

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

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

  8.           <text class="state-title">{{ stateTitle }}</text>

  9.           <text v-if="isPending" class="count">{{ detail.success_count || 0 }} / {{ detail.count || 0 }} 张 · {{ countDown }}S</text>

  10.           <text v-if="!isPending" class="error">{{ detail.error_msg || '失败的照片不扣点，可以重新生成' }}</text>

  11.         </view>

  12. 

  13.         <template v-else>

  14.           <!-- 主图 + 缩略图切换 -->

  15.           <view class="image-card" @click="preview">

  16.             <image class="work-img" :src="activeUrl" mode="widthFix" />

  17.             <view class="index-chip">{{ activeIndex + 1 }} / {{ resultUrls.length }}</view>

  18.           </view>

  19.           <view v-if="resultUrls.length > 1" class="thumb-row">

  20.             <image

  21.               v-for="(url, index) in resultUrls"

  22.               :key="url"

  23.               class="thumb"

  24.               :class="{ active: index === activeIndex }"

  25.               :src="url"

  26.               mode="aspectFill"

  27.               @click="activeIndex = index"

  28.             />

  29.           </view>

  30.         </template>

  31. 

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

  33.           <view class="title">生成信息</view>

  34.           <view class="cell">

  35.             <text class="cell-label">照片风格：</text>

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

  37.           </view>

  38.           <view v-for="item in optionTexts" :key="item.label" class="cell">

  39.             <text class="cell-label">{{ item.label }}：</text>

  40.             <text class="cell-content">{{ item.value }}</text>

  41.           </view>

  42.           <view class="cell">

  43.             <text class="cell-label">生成模型：</text>

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

  45.           </view>

  46.           <view class="cell">

  47.             <text class="cell-label">图片比例：</text>

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

  49.           </view>

  50.           <view class="cell">

  51.             <text class="cell-label">生成张数：</text>

  52.             <text class="cell-content">

  53.               成功 {{ detail.success_count || 0 }} 张<text v-if="detail.fail_count">，失败 {{ detail.fail_count }} 张</text>

  54.             </text>

  55.           </view>

  56.           <view v-if="detail.extra_prompt" class="cell">

  57.             <text class="cell-label">补充描述：</text>

  58.             <text class="cell-content">{{ detail.extra_prompt }}</text>

  59.           </view>

  60.           <view class="cell">

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

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

  63.           </view>

  64.           <view class="cell">

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

  66.             <text class="link" @click="createAgain">形象照 / 职业照 / 写真</text>

  67.           </view>

  68.           <text class="note">AI 会重绘服装与背景，五官可能出现轻微变化，建议对照原图确认。</text>

  69.         </view>

  70.       </view>

  71.     </scroll-view>

  72. 

  73.     <view v-if="isSuccess" class="bottom-bar">

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

  75.       <view class="bar-btn" @click="save">保存</view>

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

  77.       <view class="main-btn" @click="createAgain">再拍一组</view>

  78.     </view>

  79. 

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

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

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

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

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

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

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

  87.         </view>

  88.         <view

  89.           class="large-compare"

  90.           @touchstart.stop="onCompareTouch"

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

  92.           @click.stop="onCompareTouch"

  93.         >

  94.           <image class="compare-img" :src="activeUrl" mode="aspectFit" />

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

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

  97.           </view>

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

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

  100.               <text>‹</text>

  101.               <text>›</text>

  102.             </view>

  103.           </view>

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

  105.           <view class="compare-tag right">生成图</view>

  106.         </view>

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

  108.       </view>

  109.     </view>

  110.   </view>

  111. </template>

  112. 

  113. <script setup>

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

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

  116. import dayjs from 'dayjs'

  117. import { portraitApi } from '@/api/index.js'

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

  119. 

  120. const { toast } = useApp()

  121. const id = ref('')

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

  123. const activeIndex = ref(0)

  124. const countDown = ref(0)

  125. const compareVisible = ref(false)

  126. const comparePercent = ref(50)

  127. let timer = 0

  128. let countTimer = 0

  129. 

  130. // 后端 options 是 key，这里映射成中文；名称与 utils/portrait.js 的预设保持一致

  131. const OPTION_LABELS = {

  132.   background: '背景',

  133.   outfit: '服装',

  134.   framing: '取景',

  135.   art_style: '写真风格'

  136. }

  137. const OPTION_NAMES = {

  138.   white: '白色', gray: '浅灰', blue: '商务蓝', 'deep-blue': '深蓝', beige: '米色',

  139.   office: '办公室', bookshelf: '书架', cafe: '咖啡角', window: '落地窗',

  140.   formal: '正装', shirt: '衬衫', knit: '针织衫', 'tshirt-jeans': 'T恤配牛仔裤',

  141.   'blazer-tshirt': '西装外套配T恤', bust: '胸像', half: '半身',

  142.   guofeng: '古风', zangzu: '藏族', miaozu: '苗族', urban: '都市青年', trendy: '潮人',

  143.   dunhuang: '敦煌飞仙', hongkong: '港风复古', newchinese: '新中式', french: '法式油画'

  144. }

  145. 

  146. const resultUrls = computed(() => detail.value.result_urls || [])

  147. const activeUrl = computed(() => resultUrls.value[activeIndex.value] || resultUrls.value[0] || '')

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

  149. const isSuccess = computed(() => Number(detail.value.status) === 30 && resultUrls.value.length > 0)

  150. const stateTitle = computed(() => {

  151.   if (Number(detail.value.status) === 10) return '排队中，请耐心等待'

  152.   if (Number(detail.value.status) === 20) return 'AI 正在生成形象照'

  153.   return '生成失败'

  154. })

  155. const optionTexts = computed(() => {

  156.   const options = detail.value.options || {}

  157.   return Object.keys(options).map((key) => ({

  158.     label: OPTION_LABELS[key] || key,

  159.     value: OPTION_NAMES[options[key]] || options[key]

  160.   }))

  161. })

  162. 

  163. onLoad((options) => {

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

  165.   loadDetail()

  166. })

  167. 

  168. onUnload(() => {

  169.   clearTimeout(timer)

  170.   clearInterval(countTimer)

  171. })

  172. 

  173. async function loadDetail() {

  174.   if (!id.value) return

  175.   try {

  176.     const res = await portraitApi.getDetail({ photo_open_id: id.value })

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

  178.     if (activeIndex.value >= resultUrls.value.length) activeIndex.value = 0

  179.     if (isPending.value) waitNext()

  180.   } catch (e) {

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

  182.   }

  183. }

  184. 

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

  186. function waitNext() {

  187.   clearTimeout(timer)

  188.   clearInterval(countTimer)

  189.   countDown.value = 3

  190.   countTimer = setInterval(() => {

  191.     countDown.value -= 1

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

  193.   }, 1000)

  194.   timer = setTimeout(loadDetail, 3000)

  195. }

  196. 

  197. function formatTime(value) {

  198.   if (!value) return '-'

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

  200. }

  201. 

  202. function preview() {

  203.   if (!resultUrls.value.length) return

  204.   uni.previewImage({ urls: resultUrls.value, current: activeUrl.value })

  205. }

  206. 

  207. function save() {

  208.   if (!activeUrl.value) return

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

  210.   uni.downloadFile({

  211.     url: activeUrl.value,

  212.     success: (res) => {

  213.       uni.saveImageToPhotosAlbum({

  214.         filePath: res.tempFilePath,

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

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

  217.       })

  218.     },

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

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

  221.   })

  222. }

  223. 

  224. function deleteRecord() {

  225.   if (!id.value) return

  226.   uni.showModal({

  227.     title: '删除记录',

  228.     content: '删除后将不再展示该形象照记录，是否继续？',

  229.     confirmText: '删除',

  230.     confirmColor: '#f04438',

  231.     success: async (res) => {

  232.       if (!res.confirm) return

  233.       try {

  234.         await portraitApi.delete({ photo_open_id: id.value })

  235.         toast('删除成功')

  236.         const pages = getCurrentPages()

  237.         if (pages.length > 1) {

  238.           uni.navigateBack()

  239.         } else {

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

  241.         }

  242.       } catch (e) {

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

  244.       }

  245.     }

  246.   })

  247. }

  248. 

  249. function openCompare() {

  250.   if (!activeUrl.value || !detail.value.source_url) return

  251.   comparePercent.value = 50

  252.   compareVisible.value = true

  253. }

  254. 

  255. function closeCompare() {

  256.   compareVisible.value = false

  257. }

  258. 

  259. function onCompareTouch(e) {

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

  261.   const x = touch.clientX || 0

  262.   uni.createSelectorQuery()

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

  264.     .boundingClientRect((rect) => {

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

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

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

  268.     })

  269.     .exec()

  270. }

  271. 

  272. function createAgain() {

  273.   const delta = getPageStackDelta('pages/tool/portrait-photo')

  274.   if (delta > 0) {

  275.     uni.navigateBack({ delta })

  276.     return

  277.   }

  278.   uni.navigateTo({ url: '/pages/tool/portrait-photo' })

  279. }

  280. 

  281. function getPageStackDelta(routeName) {

  282.   const pages = getCurrentPages()

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

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

  285. }

  286. </script>

  287. 

  288. <style lang="scss" scoped>

  289. .page {

  290.   height: 100vh;

  291.   background: #f4f7fb;

  292.   display: flex;

  293.   flex-direction: column;

  294.   overflow: hidden;

  295. }

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

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

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

  299. 

  300. .state-card,

  301. .image-card,

  302. .info-card {

  303.   background: #fff;

  304.   border-radius: 18rpx;

  305.   overflow: hidden;

  306. }

  307. 

  308. .state-card {

  309.   min-height: 540rpx;

  310.   display: flex;

  311.   flex-direction: column;

  312.   align-items: center;

  313.   justify-content: center;

  314.   color: #172033;

  315.   font-size: 30rpx;

  316. }

  317. .spinner {

  318.   width: 72rpx;

  319.   height: 72rpx;

  320.   margin-bottom: 28rpx;

  321.   border: 8rpx solid #e9edf5;

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

  323.   border-radius: 50%;

  324.   animation: spin 0.8s linear infinite;

  325. }

  326. .count,

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

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

  329. 

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

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

  332. .index-chip {

  333.   position: absolute;

  334.   right: 18rpx;

  335.   bottom: 18rpx;

  336.   height: 48rpx;

  337.   padding: 0 20rpx;

  338.   border-radius: 999rpx;

  339.   color: #fff;

  340.   font-size: 23rpx;

  341.   font-weight: 800;

  342.   line-height: 48rpx;

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

  344. }

  345. 

  346. .thumb-row {

  347.   margin-top: 18rpx;

  348.   display: flex;

  349.   gap: 14rpx;

  350. }

  351. .thumb {

  352.   width: 150rpx;

  353.   height: 150rpx;

  354.   border-radius: 16rpx;

  355.   background: #eef2f7;

  356.   border: 4rpx solid transparent;

  357. }

  358. .thumb.active { border-color: #0b8cff; }

  359. 

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

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

  362. .cell {

  363.   padding: 10rpx 0;

  364.   display: flex;

  365.   color: #7f8896;

  366.   font-size: 27rpx;

  367.   line-height: 1.6;

  368. }

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

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

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

  372. .note {

  373.   display: block;

  374.   margin-top: 16rpx;

  375.   padding-top: 16rpx;

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

  377.   color: #8a95a6;

  378.   font-size: 23rpx;

  379.   line-height: 1.5;

  380. }

  381. 

  382. .bottom-bar {

  383.   position: fixed;

  384.   left: 0;

  385.   right: 0;

  386.   bottom: 0;

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

  388.   background: #fff;

  389.   display: flex;

  390.   gap: 18rpx;

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

  392. }

  393. .bar-btn,

  394. .delete-btn,

  395. .main-btn {

  396.   height: 82rpx;

  397.   border-radius: 42rpx;

  398.   font-size: 29rpx;

  399.   display: flex;

  400.   align-items: center;

  401.   justify-content: center;

  402. }

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

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

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

  406. 

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

  408. .compare-modal {

  409.   position: fixed;

  410.   left: 0;

  411.   right: 0;

  412.   top: 0;

  413.   bottom: 0;

  414.   z-index: 120;

  415. }

  416. .compare-backdrop {

  417.   position: absolute;

  418.   left: 0;

  419.   right: 0;

  420.   top: 0;

  421.   bottom: 0;

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

  423. }

  424. .compare-panel {

  425.   position: absolute;

  426.   left: 36rpx;

  427.   right: 36rpx;

  428.   top: 50%;

  429.   transform: translateY(-50%);

  430.   padding: 24rpx;

  431.   border-radius: 28rpx;

  432.   background: #ffffff;

  433. }

  434. .compare-panel-head {

  435.   margin-bottom: 20rpx;

  436.   display: flex;

  437.   align-items: center;

  438.   justify-content: space-between;

  439.   color: #172033;

  440.   font-size: 32rpx;

  441.   font-weight: 800;

  442. }

  443. .close-btn {

  444.   width: 56rpx;

  445.   height: 56rpx;

  446.   border-radius: 50%;

  447.   color: #64748b;

  448.   background: #f1f5f9;

  449.   font-size: 42rpx;

  450.   line-height: 50rpx;

  451.   text-align: center;

  452.   font-weight: 300;

  453. }

  454. .large-compare {

  455.   position: relative;

  456.   width: 100%;

  457.   height: 900rpx;

  458.   max-height: 70vh;

  459.   border-radius: 22rpx;

  460.   background: #dfe8f4;

  461.   overflow: hidden;

  462. }

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

  464. .compare-before {

  465.   position: absolute;

  466.   left: 0;

  467.   top: 0;

  468.   bottom: 0;

  469.   overflow: hidden;

  470. }

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

  472. .compare-line {

  473.   position: absolute;

  474.   top: 0;

  475.   bottom: 0;

  476.   width: 4rpx;

  477.   margin-left: -2rpx;

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

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

  480. }

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

  482. .compare-handle {

  483.   position: absolute;

  484.   left: 50%;

  485.   top: 50%;

  486.   width: 38rpx;

  487.   height: 58rpx;

  488.   margin-left: -19rpx;

  489.   margin-top: -29rpx;

  490.   border-radius: 999rpx;

  491.   background: #ffffff;

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

  493.   display: flex;

  494.   align-items: center;

  495.   justify-content: center;

  496.   gap: 1rpx;

  497.   color: #1f8cff;

  498.   font-size: 24rpx;

  499.   font-weight: 900;

  500. }

  501. .compare-handle.large {

  502.   width: 54rpx;

  503.   height: 78rpx;

  504.   margin-left: -27rpx;

  505.   margin-top: -39rpx;

  506.   font-size: 32rpx;

  507. }

  508. .compare-tag {

  509.   position: absolute;

  510.   top: 12rpx;

  511.   padding: 6rpx 12rpx;

  512.   border-radius: 999rpx;

  513.   color: #ffffff;

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

  515.   font-size: 20rpx;

  516.   font-weight: 700;

  517. }

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

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

  520. .compare-guide {

  521.   display: block;

  522.   margin-top: 18rpx;

  523.   color: #64748b;

  524.   font-size: 24rpx;

  525.   text-align: center;

  526. }

  527. 

  528. @keyframes spin {

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

  530. }

  531. </style>