leiyun
/
ai_uniapp_v2
1
0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
2 Commits
1 Branch
4.2 MiB
 
 
 
Tag: a514904169
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de a514904169
${ noResults }
ai_uniapp_v2/pages/tool/id-photo.vue

1734 linhas
42 KiB
Original Anotar Histórico 

  1. <template>

  2.   <view class="page">

  3.     <view class="content">

  4.       <view class="hero-card">

  5.         <view class="hero-copy">

  6.           <text class="eyebrow">SMART ID PHOTO</text>

  7.           <text class="hero-title">一张自拍，制作标准证件照</text>

  8.           <text class="hero-desc">上传一张清晰正面照，自动换好底色、裁成所需尺寸，几秒获得可直接下载使用的高清证件照。</text>

  9.           <view class="hero-tags">

  10.             <text>300 DPI</text>

  11.             <text>快速换底色</text>

  12.           </view>

  13.         </view>

  14.         <image

  15.           class="hero-image"

  16.           src="https://cdn.aionline.cc/ai/anime/id-photo-demo.jpg"

  17.           mode="aspectFill"

  18.         />

  19.       </view>

  20. 

  21.       <view id="id-photo-preview" class="id-panel preview-card">

  22.         <view class="card-head">

  23.           <view>

  24.             <text class="card-title">照片预览</text>

  25.             <text class="card-desc">{{ previewDescription }}</text>

  26.           </view>

  27.           <view class="history-link" @click="goHistory">历史记录</view>

  28.         </view>

  29. 

  30.         <view v-if="!localPreview" class="upload-zone" @click="choosePhoto">

  31.           <view class="upload-icon">

  32.             <view class="upload-arrow"></view>

  33.           </view>

  34.           <text class="upload-title">点击上传一张照片</text>

  35.           <text class="upload-desc">支持 JPG、PNG、WebP，不超过 10MB</text>

  36.           <view class="upload-button">选择照片</view>

  37.           <view class="photo-tips">

  38.             <view class="tip-item"><view class="tip-dot"></view><text>正面平视</text></view>

  39.             <view class="tip-item"><view class="tip-dot"></view><text>光线均匀</text></view>

  40.             <view class="tip-item"><view class="tip-dot"></view><text>单人半身</text></view>

  41.           </view>

  42.         </view>

  43. 

  44.         <view v-else class="preview-area">

  45.           <view class="preview-stage">

  46.             <image

  47.               v-if="resultImage"

  48.               class="result-image"

  49.               :style="photoFrameStyle"

  50.               :src="resultImage"

  51.               mode="aspectFill"

  52.             />

  53.             <image v-else class="source-image" :src="localPreview" mode="aspectFit" />

  54. 

  55.             <view v-if="creating" class="progress-mask">

  56.               <view class="progress-panel">

  57.                 <view class="progress-top">

  58.                   <text class="progress-title">正在处理照片</text>

  59.                   <text class="progress-value">{{ progress }}%</text>

  60.                 </view>

  61.                 <view class="progress-track">

  62.                   <view class="progress-bar" :style="{ width: `${progress}%` }"></view>

  63.                 </view>

  64.                 <text class="progress-desc">

  65.                   {{ progressStage }} · 预计还需 {{ estimatedSeconds }} 秒

  66.                 </text>

  67.               </view>

  68.             </view>

  69.           </view>

  70. 

  71.           <view class="preview-meta">

  72.             <text>{{ selectedSpec ? `${selectedSpec.width} × ${selectedSpec.height}px` : photoMetaText }}</text>

  73.             <text v-if="result">已生成 {{ result.dpi || selectedSpec?.dpi || 300 }} DPI</text>

  74.             <text v-else>制作前不会上传原图</text>

  75.           </view>

  76. 

  77.           <view v-if="errorMessage" class="error-box">

  78.             <text>{{ errorMessage }}</text>

  79.           </view>

  80. 

  81.           <view class="preview-actions">

  82.             <view v-if="result" class="primary-action" @click="saveResult">保存照片</view>

  83.             <view class="soft-action" @click="choosePhoto">{{ result ? '制作新照片' : '更换照片' }}</view>

  84.           </view>

  85.         </view>

  86.       </view>

  87. 

  88.       <view class="id-panel">

  89.         <view class="card-head">

  90.           <view>

  91.             <text class="card-title">选择规格</text>

  92.             <text class="card-desc">规格由后台统一配置，成品严格输出所选像素</text>

  93.           </view>

  94.           <view class="dpi-badge">{{ selectedSpec?.dpi || 300 }} DPI</view>

  95.         </view>

  96. 

  97.         <view class="search-box">

  98.           <view class="search-icon"></view>

  99.           <input

  100.             v-model="specKeyword"

  101.             class="search-input"

  102.             placeholder="搜索尺寸或用途"

  103.             placeholder-class="input-placeholder"

  104.           />

  105.           <text v-if="specKeyword" class="search-clear" @click="specKeyword = ''">×</text>

  106.         </view>

  107. 

  108.         <scroll-view class="category-scroll" scroll-x :show-scrollbar="false">

  109.           <view class="category-list">

  110.             <view

  111.               v-for="item in categories"

  112.               :key="item.key"

  113.               class="category-item"

  114.               :class="{ active: activeCategory === item.key }"

  115.               @click="activeCategory = item.key"

  116.             >

  117.               {{ item.name }}

  118.             </view>

  119.           </view>

  120.         </scroll-view>

  121. 

  122.         <view v-if="filteredSpecs.length" class="spec-grid">

  123.           <view

  124.             v-for="item in filteredSpecs"

  125.             :key="item.key"

  126.             class="spec-item"

  127.             :class="{ active: selectedSpecKey === item.key }"

  128.             @click="selectSpec(item)"

  129.           >

  130.             <view class="spec-name-row">

  131.               <text class="spec-name">{{ item.name }}</text>

  132.               <text v-if="item.hot" class="hot-badge">常用</text>

  133.             </view>

  134.             <text class="spec-pixel">{{ item.width }}×{{ item.height }}px</text>

  135.             <text class="spec-print">{{ item.print || item.print_size }}</text>

  136.           </view>

  137.         </view>

  138.         <view v-else class="empty-spec">没有匹配的证件照规格</view>

  139.       </view>

  140. 

  141.       <view class="id-panel">

  142.         <view class="card-head">

  143.           <view>

  144.             <text class="card-title">背景与自然优化</text>

  145.             <text class="card-desc">换色与微调不重复扣点，已生成照片可快速应用</text>

  146.           </view>

  147.           <text v-if="result && settingsDirty" class="dirty-badge">待应用</text>

  148.         </view>

  149. 

  150.         <text class="field-label">背景颜色</text>

  151.         <view class="background-grid">

  152.           <view

  153.             v-for="item in backgrounds"

  154.             :key="item.key"

  155.             class="background-item"

  156.             :class="{ active: settings.background === item.color.toLowerCase() }"

  157.             @click="selectBackground(item.color)"

  158.           >

  159.             <view class="color-dot" :class="{ light: item.light }" :style="{ background: item.color }">

  160.               <view v-if="settings.background === item.color.toLowerCase()" class="check-mark"></view>

  161.             </view>

  162.             <text>{{ item.name }}</text>

  163.           </view>

  164.         </view>

  165. 

  166.         <text class="field-label beauty-label">画面优化</text>

  167.         <view class="beauty-grid">

  168.           <view

  169.             v-for="item in beautyOptions"

  170.             :key="item.key"

  171.             class="beauty-item"

  172.             :class="{ active: settings.beauty === item.key }"

  173.             @click="selectBeauty(item.key)"

  174.           >

  175.             <view class="beauty-radio"><view></view></view>

  176.             <view>

  177.               <text class="beauty-name">{{ item.name }}</text>

  178.               <text class="beauty-desc">{{ item.desc }}</text>

  179.             </view>

  180.           </view>

  181.         </view>

  182. 

  183.         <view v-if="result" class="adjust-section">

  184.           <view class="adjust-head">

  185.             <view>

  186.               <text class="field-label">构图微调</text>

  187.               <text class="adjust-help">拖动后点击应用，不会重新抠图或扣点</text>

  188.             </view>

  189.             <text class="reset-link" @click="resetAdjustments">恢复默认</text>

  190.           </view>

  191. 

  192.           <view class="slider-row">

  193.             <view class="slider-meta">

  194.               <text>人物大小</text>

  195.               <text>{{ Math.round(settings.scale * 100) }}%</text>

  196.             </view>

  197.             <slider

  198.               :value="settings.scale"

  199.               :min="0.75"

  200.               :max="1.4"

  201.               :step="0.01"

  202.               active-color="#168cff"

  203.               background-color="#e6edf5"

  204.               block-color="#168cff"

  205.               :block-size="18"

  206.               @changing="updateSlider('scale', $event)"

  207.               @change="updateSlider('scale', $event)"

  208.             />

  209.           </view>

  210. 

  211.           <view class="slider-row">

  212.             <view class="slider-meta">

  213.               <text>水平位置</text>

  214.               <text>{{ adjustmentText(settings.offset_x, '左', '右') }}</text>

  215.             </view>

  216.             <slider

  217.               :value="settings.offset_x"

  218.               :min="-1"

  219.               :max="1"

  220.               :step="0.01"

  221.               active-color="#168cff"

  222.               background-color="#e6edf5"

  223.               block-color="#168cff"

  224.               :block-size="18"

  225.               @changing="updateSlider('offset_x', $event)"

  226.               @change="updateSlider('offset_x', $event)"

  227.             />

  228.           </view>

  229. 

  230.           <view class="slider-row">

  231.             <view class="slider-meta">

  232.               <text>垂直位置</text>

  233.               <text>{{ adjustmentText(settings.offset_y, '上', '下') }}</text>

  234.             </view>

  235.             <slider

  236.               :value="settings.offset_y"

  237.               :min="-1"

  238.               :max="1"

  239.               :step="0.01"

  240.               active-color="#168cff"

  241.               background-color="#e6edf5"

  242.               block-color="#168cff"

  243.               :block-size="18"

  244.               @changing="updateSlider('offset_y', $event)"

  245.               @change="updateSlider('offset_y', $event)"

  246.             />

  247.           </view>

  248. 

  249.           <view

  250.             class="apply-adjust"

  251.             :class="{ disabled: !settingsDirty || rerendering }"

  252.             @click="applyAdjustments"

  253.           >

  254.             {{ rerendering ? '正在快速应用...' : '应用调整' }}

  255.           </view>

  256.         </view>

  257.       </view>

  258.     </view>

  259. 

  260.     <view class="bottom-bar">

  261.       <view class="billing-copy">

  262.         <text class="billing-label">{{ billingLabel }}</text>

  263.         <text v-if="billingSubtext" class="billing-sub">{{ billingSubtext }}</text>

  264.       </view>

  265.       <view class="bottom-actions">

  266.         <view class="history-button" @click="goHistory">历史记录</view>

  267.         <view

  268.           class="submit-button"

  269.           :class="{ disabled: primaryDisabled }"

  270.           @click="handlePrimaryAction"

  271.         >

  272.           <image

  273.             v-if="!creating && !rerendering && !result"

  274.             class="submit-icon"

  275.             src="/static/icons/bolt.svg"

  276.             mode="aspectFit"

  277.           />

  278.           <text>{{ primaryText }}</text>

  279.         </view>

  280.       </view>

  281.     </view>

  282.   </view>

  283. </template>

  284. 

  285. <script setup>

  286. import { computed, nextTick, reactive, ref } from 'vue'

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

  288. import { idPhotoApi } from '@/api/index.js'

  289. import { createIdPhoto } from '@/utils/upload.js'

  290. import { guid } from '@/utils/util.js'

  291. import { useUserStore } from '@/store/user.js'

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

  293. 

  294. const STANDARD_BACKGROUNDS = [

  295.   { key: 'blue', name: '常用蓝', color: '#438edb' },

  296.   { key: 'white', name: '纯白', color: '#ffffff' },

  297.   { key: 'certificate-red', name: '证件红', color: '#e60012' },

  298.   { key: 'government-blue', name: '政务蓝', color: '#0066cc' },

  299.   { key: 'office-blue', name: '柔和蓝', color: '#5b9bd5' },

  300.   { key: 'visa-blue', name: '签证蓝', color: '#99ccff' },

  301.   { key: 'soft-white', name: '浅灰白', color: '#f5f5f5' },

  302.   { key: 'light-gray', name: '浅灰', color: '#c8c8c8' },

  303.   { key: 'bright-red', name: '正红', color: '#ff0000' },

  304.   { key: 'dark-red', name: '暗红', color: '#dc143c' }

  305. ]

  306. const FALLBACK_BEAUTY = [

  307.   { key: 'none', name: '关闭美化', desc: '保留原始肤色与细节' },

  308.   { key: 'natural', name: '自然优化', desc: '轻微提亮、降噪和锐化' }

  309. ]

  310. const ERROR_MESSAGES = {

  311.   NO_FACE: '没有检测到清晰人脸，请上传正面、无遮挡的照片',

  312.   MULTIPLE_FACES: '照片中检测到多张人脸，请上传单人照片',

  313.   FACE_TOO_SMALL: '人脸在画面中太小，请上传更清晰的半身照',

  314.   FACE_TILTED: '头部倾斜角度较大，请上传正面平视照片',

  315.   QUEUE_FULL: '当前制作人数较多，请稍后再试',

  316.   ID_PHOTO_PROCESSING: '这张照片正在制作中，请勿重复提交',

  317.   INVALID_FACE_DATA: '人脸定位失败，请更换一张清晰照片'

  318. }

  319. 

  320. const userStore = useUserStore()

  321. const { toast } = useApp()

  322. const categories = ref([])

  323. const specs = ref([])

  324. const backgrounds = ref(mergeBackgrounds())

  325. const beautyOptions = ref(FALLBACK_BEAUTY)

  326. const billing = ref({})

  327. const configLoading = ref(true)

  328. const activeCategory = ref('common')

  329. const selectedSpecKey = ref('')

  330. const specKeyword = ref('')

  331. const localPreview = ref('')

  332. const localFileInfo = ref({})

  333. const result = ref(null)

  334. const resultImage = ref('')

  335. const errorMessage = ref('')

  336. const creating = ref(false)

  337. const rerendering = ref(false)

  338. const progress = ref(0)

  339. const estimatedSeconds = ref(12)

  340. const settingsDirty = ref(false)

  341. const settings = reactive({

  342.   background: '#438edb',

  343.   beauty: 'natural',

  344.   scale: 1,

  345.   offset_x: 0,

  346.   offset_y: 0

  347. })

  348. 

  349. let progressTimer = 0

  350. let progressStartedAt = 0

  351. let initialWorkId = ''

  352. let initialized = false

  353. 

  354. const selectedSpec = computed(() => {

  355.   const configured = specs.value.find((item) => item.key === selectedSpecKey.value)

  356.   if (configured) return configured

  357.   if (!result.value) return null

  358.   return normalizeSpec({

  359.     key: result.value.spec_key,

  360.     name: result.value.spec_name,

  361.     width: result.value.width,

  362.     height: result.value.height,

  363.     dpi: result.value.dpi

  364.   })

  365. })

  366. const filteredSpecs = computed(() => {

  367.   const keyword = specKeyword.value.trim().toLowerCase()

  368.   return specs.value.filter((item) => {

  369.     const categoryMatched = keyword || item.category === activeCategory.value

  370.     const keywordMatched = !keyword || `${item.name} ${item.width} ${item.height} ${item.print || item.print_size}`.toLowerCase().includes(keyword)

  371.     return categoryMatched && keywordMatched

  372.   })

  373. })

  374. const quotePoints = computed(() => Number(billing.value.quote?.points || 0))

  375. const balancePoints = computed(() => {

  376.   const value = billing.value.balance?.points ?? billing.value.balance?.point_balance

  377.   return value === undefined || value === null ? Number(userStore.balance || 0) : Number(value)

  378. })

  379. const isFreeUsage = computed(() => !configLoading.value && Boolean(billing.value.quote) && quotePoints.value === 0)

  380. const insufficient = computed(() => (

  381.   userStore.isLogin &&

  382.   quotePoints.value > 0 &&

  383.   balancePoints.value >= 0 &&

  384.   balancePoints.value < quotePoints.value

  385. ))

  386. const primaryDisabled = computed(() => (

  387.   creating.value ||

  388.   rerendering.value ||

  389.   (userStore.isLogin && configLoading.value)

  390. ))

  391. const primaryText = computed(() => {

  392.   if (creating.value) return `制作中 ${progress.value}%`

  393.   if (rerendering.value) return '正在应用'

  394.   if (result.value) return '保存证件照'

  395.   if (!userStore.isLogin) {

  396.     if (isFreeUsage.value) return '登录后制作 · 免费'

  397.     return quotePoints.value > 0 ? `登录后制作 · ${quotePoints.value}点` : '登录后制作'

  398.   }

  399.   if (configLoading.value) return '正在读取配置'

  400.   if (isFreeUsage.value) return '免费制作'

  401.   return '立即生成'

  402. })

  403. const billingLabel = computed(() => {

  404.   if (isFreeUsage.value) return '免费使用'

  405.   if (configLoading.value) return '正在读取价格'

  406.   if (!userStore.isLogin) return quotePoints.value ? `${quotePoints.value}点 / 次` : '登录后制作'

  407.   return `本次 ${quotePoints.value}点`

  408. })

  409. const billingSubtext = computed(() => {

  410.   if (isFreeUsage.value) return '制作成功后可直接保存'

  411.   if (!userStore.isLogin || quotePoints.value <= 0) return ''

  412.   return insufficient.value ? `余额 ${balancePoints.value}点，点数不足` : `当前余额 ${balancePoints.value}点`

  413. })

  414. const previewDescription = computed(() => {

  415.   if (result.value) return '已完成，可继续换底色或微调构图'

  416.   if (localPreview.value) return '确认规格与背景后开始制作'

  417.   return '上传清晰正面照片可获得更稳定的效果'

  418. })

  419. const photoMetaText = computed(() => {

  420.   const width = Number(localFileInfo.value.width || 0)

  421.   const height = Number(localFileInfo.value.height || 0)

  422.   return width && height ? `原图 ${width} × ${height}px` : '原图已就绪'

  423. })

  424. const progressStage = computed(() => {

  425.   if (progress.value < 25) return '正在上传原图'

  426.   if (progress.value < 72) return '正在识别人像并抠图'

  427.   if (progress.value < 94) return '正在换色与标准裁剪'

  428.   return '正在保存高清成品'

  429. })

  430. const photoRatio = computed(() => {

  431.   const width = Number(result.value?.width || selectedSpec.value?.width || 295)

  432.   const height = Number(result.value?.height || selectedSpec.value?.height || 413)

  433.   return width > 0 && height > 0 ? width / height : 295 / 413

  434. })

  435. const photoFrameStyle = computed(() => {

  436.   const maxWidth = 590

  437.   const maxHeight = 620

  438.   let width = maxWidth

  439.   let height = width / photoRatio.value

  440.   if (height > maxHeight) {

  441.     height = maxHeight

  442.     width = height * photoRatio.value

  443.   }

  444.   return {

  445.     width: `${Math.round(width)}rpx`,

  446.     height: `${Math.round(height)}rpx`

  447.   }

  448. })

  449. onLoad((options = {}) => {

  450.   initialWorkId = String(options.work || '')

  451.   initialize()

  452. })

  453. 

  454. onShow(() => {

  455.   if (!initialized) return

  456.   if (userStore.isLogin) {

  457.     refreshBalance()

  458.     if (initialWorkId && !result.value) loadDetail(initialWorkId)

  459.   }

  460.   loadConfig(false)

  461. })

  462. 

  463. onUnload(() => {

  464.   clearProgress()

  465. })

  466. 

  467. async function initialize() {

  468.   await loadConfig(true)

  469.   if (initialWorkId) await loadDetail(initialWorkId)

  470.   initialized = true

  471. }

  472. 

  473. async function loadConfig(showError = false) {

  474.   configLoading.value = true

  475.   try {

  476.     const res = await idPhotoApi.getConfig({ image_count: 1 })

  477.     const data = res.data || {}

  478.     categories.value = Array.isArray(data.categories) ? data.categories : []

  479.     specs.value = Array.isArray(data.specs) ? data.specs.map(normalizeSpec) : []

  480.     backgrounds.value = mergeBackgrounds(data.backgrounds)

  481.     beautyOptions.value = Array.isArray(data.beauty_options) && data.beauty_options.length

  482.       ? data.beauty_options

  483.       : FALLBACK_BEAUTY

  484.     billing.value = data.billing || {}

  485. 

  486.     if (!activeCategory.value || !categories.value.some((item) => item.key === activeCategory.value)) {

  487.       activeCategory.value = categories.value[0]?.key || 'common'

  488.     }

  489.     if (

  490.       !selectedSpecKey.value ||

  491.       (!result.value && !specs.value.some((item) => item.key === selectedSpecKey.value))

  492.     ) {

  493.       selectedSpecKey.value = specs.value.find((item) => item.key === 'one-inch')?.key || specs.value[0]?.key || ''

  494.     }

  495.   } catch (e) {

  496.     if (showError) toast(e.msg || '证件照配置加载失败')

  497.   } finally {

  498.     configLoading.value = false

  499.   }

  500. }

  501. 

  502. function normalizeSpec(item = {}) {

  503.   return {

  504.     ...item,

  505.     key: item.key || item.spec_key,

  506.     width: Number(item.width || 0),

  507.     height: Number(item.height || 0),

  508.     dpi: Number(item.dpi || 300),

  509.     hot: Number(item.hot ?? item.is_hot ?? 0)

  510.   }

  511. }

  512. 

  513. function mergeBackgrounds(configured = []) {

  514.   const list = STANDARD_BACKGROUNDS.concat(Array.isArray(configured) ? configured : [])

  515.   const used = new Set()

  516.   return list

  517.     .map((item, index) => ({

  518.       ...item,

  519.       key: item.key || `background-${index}`,

  520.       color: String(item.color || '').toLowerCase(),

  521.       light: isLightBackground(item.color)

  522.     }))

  523.     .filter((item) => {

  524.       if (!/^#[0-9a-f]{6}$/.test(item.color) || used.has(item.color)) return false

  525.       used.add(item.color)

  526.       return true

  527.     })

  528. }

  529. 

  530. function isLightBackground(color) {

  531.   const value = String(color || '').replace('#', '')

  532.   if (!/^[0-9a-fA-F]{6}$/.test(value)) return false

  533.   const red = parseInt(value.slice(0, 2), 16)

  534.   const green = parseInt(value.slice(2, 4), 16)

  535.   const blue = parseInt(value.slice(4, 6), 16)

  536.   return red * 0.299 + green * 0.587 + blue * 0.114 > 185

  537. }

  538. 

  539. async function loadDetail(photoOpenId) {

  540.   if (!requireLogin()) return

  541.   try {

  542.     uni.showLoading({ mask: true, title: '加载照片...' })

  543.     const res = await idPhotoApi.getDetail({ photo_open_id: photoOpenId })

  544.     await applyResultData(res.data || {})

  545.   } catch (e) {

  546.     toast(e.msg || '照片记录加载失败')

  547.   } finally {

  548.     uni.hideLoading()

  549.   }

  550. }

  551. 

  552. function choosePhoto() {

  553.   if (creating.value || rerendering.value) return

  554.   uni.chooseImage({

  555.     count: 1,

  556.     sizeType: ['original'],

  557.     sourceType: ['album', 'camera'],

  558.     success: async (res) => {

  559.       const file = res.tempFiles?.[0] || {}

  560.       if (Number(file.size || 0) > 10 * 1024 * 1024) {

  561.         toast('图片大小不能超过 10MB')

  562.         return

  563.       }

  564.       const path = res.tempFilePaths?.[0]

  565.       if (!path) return

  566.       let imageInfo = {}

  567.       try {

  568.         imageInfo = await getImageInfo(path)

  569.       } catch (e) {}

  570.       localPreview.value = path

  571.       localFileInfo.value = {

  572.         name: file.name || '',

  573.         size: Number(file.size || 0),

  574.         width: Number(imageInfo.width || 0),

  575.         height: Number(imageInfo.height || 0)

  576.       }

  577.       result.value = null

  578.       resultImage.value = ''

  579.       errorMessage.value = ''

  580.       settingsDirty.value = false

  581.       settings.scale = 1

  582.       settings.offset_x = 0

  583.       settings.offset_y = 0

  584.     }

  585.   })

  586. }

  587. 

  588. function getImageInfo(src) {

  589.   return new Promise((resolve, reject) => {

  590.     uni.getImageInfo({ src, success: resolve, fail: reject })

  591.   })

  592. }

  593. 

  594. function selectSpec(item) {

  595.   if (result.value && result.value.spec_key !== item.key) {

  596.     toast('已生成照片的规格不可直接修改，请选择“制作新照片”')

  597.     return

  598.   }

  599.   selectedSpecKey.value = item.key

  600. }

  601. 

  602. function selectBackground(color) {

  603.   settings.background = String(color || '#438edb').toLowerCase()

  604.   markDirty()

  605. }

  606. 

  607. function selectBeauty(key) {

  608.   settings.beauty = key

  609.   markDirty()

  610. }

  611. 

  612. function updateSlider(key, event) {

  613.   settings[key] = Number(event.detail.value)

  614.   markDirty()

  615. }

  616. 

  617. function resetAdjustments() {

  618.   settings.scale = 1

  619.   settings.offset_x = 0

  620.   settings.offset_y = 0

  621.   markDirty()

  622. }

  623. 

  624. function markDirty() {

  625.   if (result.value) settingsDirty.value = true

  626. }

  627. 

  628. function adjustmentText(value, negativeLabel, positiveLabel) {

  629.   const number = Number(value || 0)

  630.   if (Math.abs(number) < 0.01) return '居中'

  631.   return `${number < 0 ? negativeLabel : positiveLabel} ${Math.round(Math.abs(number) * 100)}%`

  632. }

  633. 

  634. function handlePrimaryAction() {

  635.   if (primaryDisabled.value) return

  636.   if (result.value) {

  637.     saveResult()

  638.     return

  639.   }

  640.   if (!requireLogin()) return

  641.   if (!localPreview.value) {

  642.     choosePhoto()

  643.     return

  644.   }

  645.   createPhoto()

  646. }

  647. 

  648. async function createPhoto() {

  649.   if (!requireLogin()) return

  650.   if (!selectedSpec.value) {

  651.     toast('请选择证件照规格')

  652.     return

  653.   }

  654.   if (insufficient.value) {

  655.     showInsufficientModal()

  656.     return

  657.   }

  658. 

  659.   creating.value = true

  660.   errorMessage.value = ''

  661.   startProgress()

  662.   try {

  663.     const res = await createIdPhoto(localPreview.value, {

  664.       request_id: guid(),

  665.       spec_key: selectedSpec.value.key,

  666.       background: settings.background,

  667.       beauty: settings.beauty,

  668.       scale: settings.scale,

  669.       offset_x: settings.offset_x,

  670.       offset_y: settings.offset_y

  671.     })

  672.     progress.value = 100

  673.     estimatedSeconds.value = 0

  674.     await applyResultData(res.data || {})

  675.     refreshBalance()

  676.     toast('证件照制作完成')

  677.   } catch (e) {

  678.     handleApiError(e, '证件照制作失败，请稍后重试')

  679.   } finally {

  680.     creating.value = false

  681.     setTimeout(clearProgress, 260)

  682.   }

  683. }

  684. 

  685. async function applyAdjustments() {

  686.   if (!result.value || !settingsDirty.value || rerendering.value) return

  687.   if (!requireLogin()) return

  688.   rerendering.value = true

  689.   errorMessage.value = ''

  690.   try {

  691.     const res = await idPhotoApi.rerender({

  692.       photo_open_id: result.value.photo_open_id,

  693.       background: settings.background,

  694.       beauty: settings.beauty,

  695.       scale: settings.scale,

  696.       offset_x: settings.offset_x,

  697.       offset_y: settings.offset_y

  698.     })

  699.     await applyResultData(res.data || {}, true)

  700.     settingsDirty.value = false

  701.     await scrollToPreview()

  702.     toast('调整已应用')

  703.     syncPersistedResult(result.value.photo_open_id)

  704.   } catch (e) {

  705.     handleApiError(e, '应用调整失败，请稍后重试')

  706.   } finally {

  707.     rerendering.value = false

  708.   }

  709. }

  710. 

  711. async function applyResultData(data = {}, keepSelectedSpec = false) {

  712.   result.value = { ...(result.value || {}), ...data }

  713.   resultImage.value = data.result_url || data.answer || data.cover || resultImage.value

  714.   localPreview.value = data.source_url || data.original || localPreview.value

  715.   if (!keepSelectedSpec && data.spec_key) selectedSpecKey.value = data.spec_key

  716.   if (data.background) settings.background = String(data.background).toLowerCase()

  717.   if (data.beauty) settings.beauty = data.beauty

  718.   settings.scale = Number(data.scale ?? settings.scale ?? 1)

  719.   settings.offset_x = Number(data.offset_x ?? settings.offset_x ?? 0)

  720.   settings.offset_y = Number(data.offset_y ?? settings.offset_y ?? 0)

  721.   settingsDirty.value = false

  722. }

  723. 

  724. function handleApiError(error, fallback) {

  725.   if (Number(error?.code) === 1009) {

  726.     userStore.clear()

  727.     requireLogin()

  728.     return

  729.   }

  730.   const errorCode = error?.data?.error || error?.error

  731.   errorMessage.value = ERROR_MESSAGES[errorCode] || error?.msg || fallback

  732.   toast(errorMessage.value)

  733. }

  734. 

  735. function startProgress() {

  736.   clearProgress()

  737.   progress.value = 6

  738.   estimatedSeconds.value = 12

  739.   progressStartedAt = Date.now()

  740.   progressTimer = setInterval(() => {

  741.     const elapsed = Date.now() - progressStartedAt

  742.     const next = Math.round(8 + (1 - Math.exp(-elapsed / 6500)) * 88)

  743.     progress.value = Math.min(96, Math.max(progress.value, next))

  744.     estimatedSeconds.value = Math.max(1, Math.ceil((13000 - elapsed) / 1000))

  745.   }, 360)

  746. }

  747. 

  748. function clearProgress() {

  749.   clearInterval(progressTimer)

  750.   progressTimer = 0

  751.   if (!creating.value) {

  752.     progress.value = 0

  753.     estimatedSeconds.value = 12

  754.   }

  755. }

  756. 

  757. function requireLogin() {

  758.   if (userStore.isLogin) return true

  759.   let url = '/pages/login/login'

  760.   // #ifdef H5

  761.   url += `?redirect=${encodeURIComponent(location.pathname + location.search)}`

  762.   // #endif

  763.   uni.navigateTo({ url })

  764.   return false

  765. }

  766. 

  767. function showInsufficientModal() {

  768.   uni.showModal({

  769.     title: '点数不足',

  770.     content: `当前余额 ${balancePoints.value} 点，本次制作需要 ${quotePoints.value} 点。`,

  771.     confirmText: '去充值',

  772.     success: (res) => {

  773.       if (res.confirm) uni.navigateTo({ url: '/pages/recharge/recharge' })

  774.     }

  775.   })

  776. }

  777. 

  778. function goHistory() {

  779.   if (!requireLogin()) return

  780.   uni.navigateTo({ url: '/pages/tool/id-photo-history' })

  781. }

  782. 

  783. async function scrollToPreview() {

  784.   await nextTick()

  785.   uni.pageScrollTo({

  786.     selector: '#id-photo-preview',

  787.     duration: 320

  788.   })

  789. }

  790. 

  791. async function syncPersistedResult(photoOpenId, attempts = 8) {

  792.   if (!photoOpenId) return ''

  793.   for (let index = 0; index < attempts; index += 1) {

  794.     if (index) await delay(700)

  795.     try {

  796.       const res = await idPhotoApi.getDetail({ photo_open_id: photoOpenId })

  797.       const data = res.data || {}

  798.       const url = data.result_url || ''

  799.       if (url && !url.startsWith('data:')) {

  800.         result.value = { ...(result.value || {}), ...data }

  801.         resultImage.value = url

  802.         return url

  803.       }

  804.     } catch (e) {}

  805.   }

  806.   return ''

  807. }

  808. 

  809. async function saveResult() {

  810.   if (!resultImage.value) return

  811.   let url = resultImage.value

  812.   if (url.startsWith('data:')) {

  813.     const persisted = await syncPersistedResult(result.value?.photo_open_id)

  814.     if (persisted) url = persisted

  815.   }

  816. 

  817.   // #ifdef H5

  818.   try {

  819.     let downloadUrl = url

  820.     let objectUrl = ''

  821.     if (!url.startsWith('data:')) {

  822.       const response = await fetch(url)

  823.       if (!response.ok) throw new Error('download failed')

  824.       objectUrl = URL.createObjectURL(await response.blob())

  825.       downloadUrl = objectUrl

  826.     }

  827.     const link = document.createElement('a')

  828.     link.href = downloadUrl

  829.     link.download = `${result.value?.spec_name || '证件照'}.jpg`

  830.     document.body.appendChild(link)

  831.     link.click()

  832.     document.body.removeChild(link)

  833.     if (objectUrl) setTimeout(() => URL.revokeObjectURL(objectUrl), 1000)

  834.     toast('已开始下载')

  835.   } catch (e) {

  836.     window.open(url, '_blank')

  837.     toast('已打开高清照片，可长按保存')

  838.   }

  839.   // #endif

  840. 

  841.   // #ifndef H5

  842.   try {

  843.     uni.showLoading({ mask: true, title: '正在保存...' })

  844.     const filePath = url.startsWith('data:') ? await writeBase64Image(url) : await downloadImage(url)

  845.     await saveToAlbum(filePath)

  846.     toast('已保存到系统相册')

  847.   } catch (e) {

  848.     toast('保存失败，请检查相册权限后重试')

  849.   } finally {

  850.     uni.hideLoading()

  851.   }

  852.   // #endif

  853. }

  854. 

  855. function downloadImage(url) {

  856.   return new Promise((resolve, reject) => {

  857.     uni.downloadFile({

  858.       url,

  859.       success: (res) => res.statusCode === 200 ? resolve(res.tempFilePath) : reject(res),

  860.       fail: reject

  861.     })

  862.   })

  863. }

  864. 

  865. function saveToAlbum(filePath) {

  866.   return new Promise((resolve, reject) => {

  867.     uni.saveImageToPhotosAlbum({ filePath, success: resolve, fail: reject })

  868.   })

  869. }

  870. 

  871. function writeBase64Image(dataUrl) {

  872.   return new Promise((resolve, reject) => {

  873.     // #ifdef MP-WEIXIN

  874.     const match = dataUrl.match(/^data:image\/(\w+);base64,(.+)$/)

  875.     if (!match) {

  876.       reject(new Error('图片数据无效'))

  877.       return

  878.     }

  879.     const filePath = `${wx.env.USER_DATA_PATH}/id-photo-${Date.now()}.${match[1] === 'jpeg' ? 'jpg' : match[1]}`

  880.     uni.getFileSystemManager().writeFile({

  881.       filePath,

  882.       data: match[2],

  883.       encoding: 'base64',

  884.       success: () => resolve(filePath),

  885.       fail: reject

  886.     })

  887.     // #endif

  888.     // #ifndef MP-WEIXIN

  889.     reject(new Error('请稍后等待高清图片保存完成'))

  890.     // #endif

  891.   })

  892. }

  893. 

  894. function delay(ms) {

  895.   return new Promise((resolve) => setTimeout(resolve, ms))

  896. }

  897. 

  898. function refreshBalance() {

  899.   userStore.fetchBalance()

  900.     .then((points) => {

  901.       billing.value = {

  902.         ...billing.value,

  903.         balance: {

  904.           ...(billing.value.balance || {}),

  905.           points

  906.         }

  907.       }

  908.     })

  909.     .catch(() => {})

  910. }

  911. </script>

  912. 

  913. <style lang="scss" scoped>

  914. .page {

  915.   min-height: 100vh;

  916.   color: #172033;

  917.   background:

  918.     radial-gradient(circle at 100% 6%, rgba(67, 190, 255, 0.13), transparent 25%),

  919.     #f3f7fb;

  920. }

  921. 

  922. .content {

  923.   padding: 24rpx 24rpx calc(220rpx + env(safe-area-inset-bottom));

  924. }

  925. 

  926. .hero-card {

  927.   position: relative;

  928.   min-height: 300rpx;

  929.   padding: 34rpx 238rpx 32rpx 30rpx;

  930.   border-radius: 28rpx;

  931.   background: linear-gradient(145deg, #e9f4ff 0%, #f5faff 56%, #e9fbf7 100%);

  932.   box-shadow: 0 14rpx 36rpx rgba(43, 80, 123, 0.08);

  933.   overflow: hidden;

  934.   box-sizing: border-box;

  935. }

  936. 

  937. .hero-copy {

  938.   position: relative;

  939.   z-index: 2;

  940. }

  941. 

  942. .eyebrow {

  943.   display: block;

  944.   color: #0b8cff;

  945.   font-size: 20rpx;

  946.   font-weight: 900;

  947.   letter-spacing: 3rpx;

  948. }

  949. 

  950. .hero-title {

  951.   display: block;

  952.   margin-top: 14rpx;

  953.   color: #071a37;

  954.   font-size: 38rpx;

  955.   font-weight: 900;

  956.   line-height: 1.28;

  957. }

  958. 

  959. .hero-desc {

  960.   display: block;

  961.   margin-top: 12rpx;

  962.   color: #5d7290;

  963.   font-size: 23rpx;

  964.   line-height: 1.55;

  965. }

  966. 

  967. .hero-tags {

  968.   margin-top: 18rpx;

  969.   display: flex;

  970.   gap: 10rpx;

  971. }

  972. 

  973. .hero-tags text {

  974.   padding: 6rpx 12rpx;

  975.   border-radius: 999rpx;

  976.   color: #2770a9;

  977.   background: rgba(255, 255, 255, 0.72);

  978.   font-size: 19rpx;

  979.   font-weight: 800;

  980. }

  981. 

  982. .hero-image {

  983.   position: absolute;

  984.   z-index: 1;

  985.   top: 22rpx;

  986.   right: 30rpx;

  987.   width: 180rpx;

  988.   height: 252rpx;

  989.   border: 8rpx solid rgba(255, 255, 255, 0.86);

  990.   border-radius: 18rpx;

  991.   box-shadow: 0 18rpx 34rpx rgba(26, 76, 118, 0.18);

  992. }

  993. 

  994. .id-panel {

  995.   width: 100%;

  996.   margin-top: 22rpx;

  997.   padding: 28rpx;

  998.   border-radius: 26rpx;

  999.   background: #ffffff;

  1000.   box-shadow: 0 10rpx 34rpx rgba(39, 70, 112, 0.06);

  1001.   box-sizing: border-box;

  1002. }

  1003. 

  1004. .card-head {

  1005.   display: flex;

  1006.   align-items: flex-start;

  1007.   gap: 20rpx;

  1008. }

  1009. 

  1010. .card-head > view:first-child {

  1011.   min-width: 0;

  1012.   flex: 1;

  1013. }

  1014. 

  1015. .card-title {

  1016.   display: block;

  1017.   color: #12213a;

  1018.   font-size: 31rpx;

  1019.   font-weight: 900;

  1020.   line-height: 1.25;

  1021. }

  1022. 

  1023. .card-desc {

  1024.   display: block;

  1025.   margin-top: 7rpx;

  1026.   color: #8794a7;

  1027.   font-size: 22rpx;

  1028.   line-height: 1.45;

  1029. }

  1030. 

  1031. .history-link {

  1032.   color: #168cff;

  1033.   font-size: 23rpx;

  1034.   font-weight: 800;

  1035.   line-height: 42rpx;

  1036.   flex-shrink: 0;

  1037. }

  1038. 

  1039. .upload-zone {

  1040.   margin-top: 24rpx;

  1041.   padding: 42rpx 22rpx 24rpx;

  1042.   border: 2rpx dashed #7bbcff;

  1043.   border-radius: 24rpx;

  1044.   background: #f3f9ff;

  1045.   text-align: center;

  1046. }

  1047. 

  1048. .upload-icon {

  1049.   width: 92rpx;

  1050.   height: 92rpx;

  1051.   margin: 0 auto;

  1052.   border-radius: 26rpx;

  1053.   background: #ffffff;

  1054.   box-shadow: 0 10rpx 26rpx rgba(22, 140, 255, 0.12);

  1055.   display: flex;

  1056.   align-items: center;

  1057.   justify-content: center;

  1058. }

  1059. 

  1060. .upload-arrow {

  1061.   position: relative;

  1062.   width: 32rpx;

  1063.   height: 28rpx;

  1064.   border: 5rpx solid #168cff;

  1065.   border-top: 0;

  1066.   border-radius: 4rpx;

  1067. }

  1068. 

  1069. .upload-arrow::before {

  1070.   content: '';

  1071.   position: absolute;

  1072.   left: 11rpx;

  1073.   top: -20rpx;

  1074.   width: 6rpx;

  1075.   height: 24rpx;

  1076.   border-radius: 4rpx;

  1077.   background: #168cff;

  1078. }

  1079. 

  1080. .upload-arrow::after {

  1081.   content: '';

  1082.   position: absolute;

  1083.   left: 5rpx;

  1084.   top: -20rpx;

  1085.   width: 14rpx;

  1086.   height: 14rpx;

  1087.   border-top: 5rpx solid #168cff;

  1088.   border-left: 5rpx solid #168cff;

  1089.   transform: rotate(45deg);

  1090. }

  1091. 

  1092. .upload-title {

  1093.   display: block;

  1094.   margin-top: 22rpx;

  1095.   color: #10223d;

  1096.   font-size: 30rpx;

  1097.   font-weight: 900;

  1098. }

  1099. 

  1100. .upload-desc {

  1101.   display: block;

  1102.   margin-top: 10rpx;

  1103.   color: #718198;

  1104.   font-size: 22rpx;

  1105. }

  1106. 

  1107. .upload-button {

  1108.   width: 210rpx;

  1109.   height: 72rpx;

  1110.   margin: 26rpx auto 0;

  1111.   border-radius: 999rpx;

  1112.   color: #ffffff;

  1113.   background: linear-gradient(135deg, #0b8cff, #35b1ff);

  1114.   box-shadow: 0 12rpx 26rpx rgba(11, 140, 255, 0.24);

  1115.   font-size: 26rpx;

  1116.   font-weight: 900;

  1117.   line-height: 72rpx;

  1118. }

  1119. 

  1120. .photo-tips {

  1121.   margin-top: 34rpx;

  1122.   display: flex;

  1123.   justify-content: center;

  1124.   gap: 40rpx;

  1125. }

  1126. 

  1127. .tip-item {

  1128.   color: #65758c;

  1129.   font-size: 21rpx;

  1130.   display: flex;

  1131.   align-items: center;

  1132.   gap: 8rpx;

  1133. }

  1134. 

  1135. .tip-dot {

  1136.   width: 12rpx;

  1137.   height: 12rpx;

  1138.   border: 3rpx solid #18ad73;

  1139.   border-radius: 50%;

  1140. }

  1141. 

  1142. .preview-area {

  1143.   margin-top: 24rpx;

  1144. }

  1145. 

  1146. .preview-stage {

  1147.   position: relative;

  1148.   min-height: 620rpx;

  1149.   border-radius: 22rpx;

  1150.   background-color: #eef4f9;

  1151.   background-image: repeating-linear-gradient(

  1152.     135deg,

  1153.     rgba(255, 255, 255, 0.8) 0,

  1154.     rgba(255, 255, 255, 0.8) 18rpx,

  1155.     rgba(224, 234, 243, 0.8) 18rpx,

  1156.     rgba(224, 234, 243, 0.8) 36rpx

  1157.   );

  1158.   display: flex;

  1159.   align-items: center;

  1160.   justify-content: center;

  1161.   overflow: hidden;

  1162. }

  1163. 

  1164. .source-image {

  1165.   width: 100%;

  1166.   height: 620rpx;

  1167. }

  1168. 

  1169. .result-image {

  1170.   display: block;

  1171.   border-radius: 4rpx;

  1172. }

  1173. 

  1174. .progress-mask {

  1175.   position: absolute;

  1176.   left: 0;

  1177.   right: 0;

  1178.   top: 0;

  1179.   bottom: 0;

  1180.   padding: 30rpx;

  1181.   background: rgba(5, 20, 40, 0.5);

  1182.   backdrop-filter: blur(5px);

  1183.   display: flex;

  1184.   align-items: center;

  1185.   justify-content: center;

  1186.   box-sizing: border-box;

  1187. }

  1188. 

  1189. .progress-panel {

  1190.   width: 100%;

  1191.   padding: 28rpx;

  1192.   border-radius: 22rpx;

  1193.   background: rgba(255, 255, 255, 0.96);

  1194.   box-sizing: border-box;

  1195. }

  1196. 

  1197. .progress-top {

  1198.   display: flex;

  1199.   align-items: center;

  1200.   justify-content: space-between;

  1201. }

  1202. 

  1203. .progress-title {

  1204.   color: #11233e;

  1205.   font-size: 27rpx;

  1206.   font-weight: 900;

  1207. }

  1208. 

  1209. .progress-value {

  1210.   color: #168cff;

  1211.   font-size: 29rpx;

  1212.   font-weight: 900;

  1213. }

  1214. 

  1215. .progress-track {

  1216.   height: 14rpx;

  1217.   margin-top: 20rpx;

  1218.   border-radius: 999rpx;

  1219.   background: #e6eff8;

  1220.   overflow: hidden;

  1221. }

  1222. 

  1223. .progress-bar {

  1224.   height: 100%;

  1225.   border-radius: inherit;

  1226.   background: linear-gradient(90deg, #168cff, #42c0ff);

  1227.   transition: width 0.3s ease;

  1228. }

  1229. 

  1230. .progress-desc {

  1231.   display: block;

  1232.   margin-top: 16rpx;

  1233.   color: #758399;

  1234.   font-size: 22rpx;

  1235. }

  1236. 

  1237. .preview-meta {

  1238.   margin-top: 15rpx;

  1239.   color: #7b899b;

  1240.   font-size: 21rpx;

  1241.   display: flex;

  1242.   justify-content: space-between;

  1243.   gap: 20rpx;

  1244. }

  1245. 

  1246. .error-box {

  1247.   margin-top: 16rpx;

  1248.   padding: 18rpx 20rpx;

  1249.   border-radius: 16rpx;

  1250.   color: #c43e3e;

  1251.   background: #fff1f1;

  1252.   font-size: 22rpx;

  1253.   line-height: 1.45;

  1254. }

  1255. 

  1256. .preview-actions {

  1257.   margin-top: 22rpx;

  1258.   display: flex;

  1259.   gap: 14rpx;

  1260. }

  1261. 

  1262. .primary-action,

  1263. .soft-action {

  1264.   height: 72rpx;

  1265.   border-radius: 999rpx;

  1266.   font-size: 23rpx;

  1267.   font-weight: 900;

  1268.   line-height: 72rpx;

  1269.   text-align: center;

  1270. }

  1271. 

  1272. .primary-action {

  1273.   flex: 1;

  1274.   color: #ffffff;

  1275.   background: #168cff;

  1276. }

  1277. 

  1278. .soft-action {

  1279.   flex: 1;

  1280.   color: #48617e;

  1281.   background: #eef4fa;

  1282. }

  1283. 

  1284. .dpi-badge,

  1285. .dirty-badge {

  1286.   padding: 8rpx 13rpx;

  1287.   border-radius: 999rpx;

  1288.   color: #168cff;

  1289.   background: #edf7ff;

  1290.   font-size: 19rpx;

  1291.   font-weight: 900;

  1292.   flex-shrink: 0;

  1293. }

  1294. 

  1295. .dirty-badge {

  1296.   color: #a76108;

  1297.   background: #fff5dc;

  1298. }

  1299. 

  1300. .search-box {

  1301.   height: 72rpx;

  1302.   margin-top: 22rpx;

  1303.   padding: 0 20rpx;

  1304.   border-radius: 16rpx;

  1305.   background: #f4f7fb;

  1306.   display: flex;

  1307.   align-items: center;

  1308. }

  1309. 

  1310. .search-icon {

  1311.   position: relative;

  1312.   width: 22rpx;

  1313.   height: 22rpx;

  1314.   margin-right: 15rpx;

  1315.   border: 3rpx solid #91a0b4;

  1316.   border-radius: 50%;

  1317. }

  1318. 

  1319. .search-icon::after {

  1320.   content: '';

  1321.   position: absolute;

  1322.   right: -9rpx;

  1323.   bottom: -6rpx;

  1324.   width: 11rpx;

  1325.   height: 3rpx;

  1326.   background: #91a0b4;

  1327.   transform: rotate(45deg);

  1328. }

  1329. 

  1330. .search-input {

  1331.   min-width: 0;

  1332.   height: 72rpx;

  1333.   flex: 1;

  1334.   color: #172033;

  1335.   font-size: 24rpx;

  1336. }

  1337. 

  1338. .input-placeholder {

  1339.   color: #9aa6b7;

  1340. }

  1341. 

  1342. .search-clear {

  1343.   width: 48rpx;

  1344.   color: #9aa6b7;

  1345.   font-size: 38rpx;

  1346.   line-height: 48rpx;

  1347.   text-align: right;

  1348. }

  1349. 

  1350. .category-scroll {

  1351.   width: 100%;

  1352.   margin-top: 18rpx;

  1353.   white-space: nowrap;

  1354. }

  1355. 

  1356. .category-list {

  1357.   display: flex;

  1358.   gap: 12rpx;

  1359. }

  1360. 

  1361. .category-item {

  1362.   height: 58rpx;

  1363.   padding: 0 22rpx;

  1364.   border-radius: 999rpx;

  1365.   color: #627187;

  1366.   background: #f4f7fb;

  1367.   font-size: 23rpx;

  1368.   font-weight: 800;

  1369.   line-height: 58rpx;

  1370.   flex-shrink: 0;

  1371. }

  1372. 

  1373. .category-item.active {

  1374.   color: #ffffff;

  1375.   background: #13213a;

  1376. }

  1377. 

  1378. .spec-grid {

  1379.   margin-top: 18rpx;

  1380.   display: grid;

  1381.   grid-template-columns: repeat(2, minmax(0, 1fr));

  1382.   gap: 14rpx;

  1383. }

  1384. 

  1385. .spec-item {

  1386.   min-height: 132rpx;

  1387.   padding: 18rpx;

  1388.   border: 2rpx solid #e5ebf2;

  1389.   border-radius: 18rpx;

  1390.   background: #ffffff;

  1391.   box-sizing: border-box;

  1392. }

  1393. 

  1394. .spec-item.active {

  1395.   border-color: #168cff;

  1396.   background: #edf7ff;

  1397.   box-shadow: 0 8rpx 18rpx rgba(22, 140, 255, 0.08);

  1398. }

  1399. 

  1400. .spec-name-row {

  1401.   display: flex;

  1402.   align-items: center;

  1403.   gap: 8rpx;

  1404. }

  1405. 

  1406. .spec-name {

  1407.   color: #172033;

  1408.   font-size: 25rpx;

  1409.   font-weight: 900;

  1410. }

  1411. 

  1412. .hot-badge {

  1413.   padding: 3rpx 7rpx;

  1414.   border-radius: 999rpx;

  1415.   color: #ff6d24;

  1416.   background: #fff1e7;

  1417.   font-size: 17rpx;

  1418.   font-weight: 800;

  1419. }

  1420. 

  1421. .spec-pixel,

  1422. .spec-print {

  1423.   display: block;

  1424.   margin-top: 9rpx;

  1425.   color: #718198;

  1426.   font-size: 20rpx;

  1427. }

  1428. 

  1429. .spec-print {

  1430.   margin-top: 4rpx;

  1431.   color: #9aa5b5;

  1432. }

  1433. 

  1434. .empty-spec {

  1435.   padding: 48rpx 0 24rpx;

  1436.   color: #95a1b2;

  1437.   font-size: 23rpx;

  1438.   text-align: center;

  1439. }

  1440. 

  1441. .field-label {

  1442.   display: block;

  1443.   margin-top: 26rpx;

  1444.   color: #41516a;

  1445.   font-size: 23rpx;

  1446.   font-weight: 900;

  1447. }

  1448. 

  1449. .background-grid {

  1450.   margin-top: 16rpx;

  1451.   display: grid;

  1452.   grid-template-columns: repeat(3, minmax(0, 1fr));

  1453.   gap: 14rpx;

  1454. }

  1455. 

  1456. .background-item {

  1457.   min-height: 112rpx;

  1458.   padding: 14rpx 8rpx 12rpx;

  1459.   border: 2rpx solid #e5ebf2;

  1460.   border-radius: 18rpx;

  1461.   color: #58677e;

  1462.   background: #ffffff;

  1463.   font-size: 20rpx;

  1464.   font-weight: 800;

  1465.   text-align: center;

  1466.   box-sizing: border-box;

  1467. }

  1468. 

  1469. .background-item.active {

  1470.   color: #168cff;

  1471.   border-color: #168cff;

  1472.   background: #f1f8ff;

  1473. }

  1474. 

  1475. .color-dot {

  1476.   position: relative;

  1477.   width: 50rpx;

  1478.   height: 50rpx;

  1479.   margin: 0 auto 9rpx;

  1480.   border: 2rpx solid rgba(15, 23, 42, 0.1);

  1481.   border-radius: 50%;

  1482.   box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.35);

  1483.   display: flex;

  1484.   align-items: center;

  1485.   justify-content: center;

  1486. }

  1487. 

  1488. .check-mark {

  1489.   position: relative;

  1490.   width: 16rpx;

  1491.   height: 9rpx;

  1492.   border-left: 4rpx solid #ffffff;

  1493.   border-bottom: 4rpx solid #ffffff;

  1494.   transform: translateY(-2rpx) rotate(-45deg);

  1495.   filter: drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.4));

  1496. }

  1497. 

  1498. .color-dot.light .check-mark {

  1499.   border-color: #168cff;

  1500.   filter: none;

  1501. }

  1502. 

  1503. .beauty-label {

  1504.   margin-top: 28rpx;

  1505. }

  1506. 

  1507. .beauty-grid {

  1508.   margin-top: 16rpx;

  1509.   display: grid;

  1510.   grid-template-columns: repeat(2, minmax(0, 1fr));

  1511.   gap: 14rpx;

  1512. }

  1513. 

  1514. .beauty-item {

  1515.   min-height: 102rpx;

  1516.   padding: 16rpx;

  1517.   border: 2rpx solid #e5ebf2;

  1518.   border-radius: 18rpx;

  1519.   display: flex;

  1520.   align-items: flex-start;

  1521.   gap: 12rpx;

  1522.   box-sizing: border-box;

  1523. }

  1524. 

  1525. .beauty-item.active {

  1526.   border-color: #168cff;

  1527.   background: #edf7ff;

  1528. }

  1529. 

  1530. .beauty-radio {

  1531.   width: 25rpx;

  1532.   height: 25rpx;

  1533.   margin-top: 3rpx;

  1534.   border: 3rpx solid #b6c1cf;

  1535.   border-radius: 50%;

  1536.   display: flex;

  1537.   align-items: center;

  1538.   justify-content: center;

  1539.   flex-shrink: 0;

  1540. }

  1541. 

  1542. .beauty-item.active .beauty-radio {

  1543.   border-color: #168cff;

  1544. }

  1545. 

  1546. .beauty-item.active .beauty-radio view {

  1547.   width: 13rpx;

  1548.   height: 13rpx;

  1549.   border-radius: 50%;

  1550.   background: #168cff;

  1551. }

  1552. 

  1553. .beauty-name,

  1554. .beauty-desc {

  1555.   display: block;

  1556. }

  1557. 

  1558. .beauty-name {

  1559.   color: #26364d;

  1560.   font-size: 23rpx;

  1561.   font-weight: 900;

  1562. }

  1563. 

  1564. .beauty-desc {

  1565.   margin-top: 7rpx;

  1566.   color: #8995a7;

  1567.   font-size: 19rpx;

  1568.   line-height: 1.35;

  1569. }

  1570. 

  1571. .adjust-section {

  1572.   margin-top: 28rpx;

  1573.   padding-top: 4rpx;

  1574.   border-top: 2rpx solid #edf1f5;

  1575. }

  1576. 

  1577. .adjust-head {

  1578.   display: flex;

  1579.   align-items: flex-start;

  1580.   justify-content: space-between;

  1581.   gap: 20rpx;

  1582. }

  1583. 

  1584. .adjust-help {

  1585.   display: block;

  1586.   margin-top: 6rpx;

  1587.   color: #919daf;

  1588.   font-size: 20rpx;

  1589. }

  1590. 

  1591. .reset-link {

  1592.   margin-top: 26rpx;

  1593.   color: #168cff;

  1594.   font-size: 21rpx;

  1595.   font-weight: 800;

  1596.   flex-shrink: 0;

  1597. }

  1598. 

  1599. .slider-row {

  1600.   margin-top: 22rpx;

  1601. }

  1602. 

  1603. .slider-meta {

  1604.   padding: 0 2rpx;

  1605.   color: #5f6e83;

  1606.   font-size: 21rpx;

  1607.   display: flex;

  1608.   align-items: center;

  1609.   justify-content: space-between;

  1610. }

  1611. 

  1612. .slider-row slider {

  1613.   margin: 8rpx 0 0;

  1614. }

  1615. 

  1616. .apply-adjust {

  1617.   height: 74rpx;

  1618.   margin-top: 20rpx;

  1619.   border-radius: 999rpx;

  1620.   color: #ffffff;

  1621.   background: #168cff;

  1622.   font-size: 25rpx;

  1623.   font-weight: 900;

  1624.   line-height: 74rpx;

  1625.   text-align: center;

  1626. }

  1627. 

  1628. .apply-adjust.disabled {

  1629.   color: #a0adbd;

  1630.   background: #edf1f5;

  1631. }

  1632. 

  1633. .bottom-bar {

  1634.   position: fixed;

  1635.   z-index: 80;

  1636.   left: 0;

  1637.   right: 0;

  1638.   bottom: 0;

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

  1640.   border-top: 2rpx solid rgba(224, 232, 241, 0.9);

  1641.   background: rgba(255, 255, 255, 0.97);

  1642.   box-shadow: 0 -12rpx 32rpx rgba(35, 61, 96, 0.09);

  1643.   box-sizing: border-box;

  1644. }

  1645. 

  1646. .billing-copy {

  1647.   min-height: 34rpx;

  1648.   margin-bottom: 14rpx;

  1649.   display: flex;

  1650.   align-items: center;

  1651.   justify-content: space-between;

  1652.   gap: 20rpx;

  1653. }

  1654. 

  1655. .billing-label,

  1656. .billing-sub {

  1657.   display: block;

  1658. }

  1659. 

  1660. .billing-label {

  1661.   min-width: 0;

  1662.   flex: 1;

  1663.   color: #162640;

  1664.   font-size: 23rpx;

  1665.   font-weight: 900;

  1666. }

  1667. 

  1668. .billing-sub {

  1669.   flex-shrink: 0;

  1670.   color: #8491a4;

  1671.   font-size: 21rpx;

  1672.   line-height: 1.3;

  1673. }

  1674. 

  1675. .bottom-actions {

  1676.   display: flex;

  1677.   gap: 22rpx;

  1678. }

  1679. 

  1680. .history-button,

  1681. .submit-button {

  1682.   height: 86rpx;

  1683.   border-radius: 999rpx;

  1684.   font-size: 30rpx;

  1685.   font-weight: 900;

  1686.   display: flex;

  1687.   align-items: center;

  1688.   justify-content: center;

  1689. }

  1690. 

  1691. .history-button {

  1692.   width: 210rpx;

  1693.   flex-shrink: 0;

  1694.   color: #168cff;

  1695.   background: #eef7ff;

  1696. }

  1697. 

  1698. .submit-button {

  1699.   flex: 1;

  1700.   color: #ffffff;

  1701.   background: linear-gradient(135deg, #0b8cff, #39b7ff);

  1702.   box-shadow: 0 12rpx 26rpx rgba(11, 140, 255, 0.24);

  1703. }

  1704. 

  1705. .submit-button.disabled {

  1706.   color: #95a6b8;

  1707.   background: #dfe9f3;

  1708.   box-shadow: none;

  1709. }

  1710. 

  1711. .submit-icon {

  1712.   width: 25rpx;

  1713.   height: 25rpx;

  1714.   margin-right: 8rpx;

  1715.   flex-shrink: 0;

  1716. }

  1717. 

  1718. @media (min-width: 768px) {

  1719.   .content {

  1720.     width: 720px;

  1721.     margin: 0 auto;

  1722.     box-sizing: border-box;

  1723.   }

  1724. 

  1725.   .bottom-bar {

  1726.     left: 50%;

  1727.     width: 720px;

  1728.     transform: translateX(-50%);

  1729.     border-left: 1px solid #e6edf5;

  1730.     border-right: 1px solid #e6edf5;

  1731.   }

  1732. }

  1733. </style>