leiyun
/
ai_uniapp_v2
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
1 Commit
1 Branch
4.2 MiB
 
 
 
Struktur: 635772c47b
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „635772c47b“
${ noResults }
ai_uniapp_v2/pages/tool/portrait-photo.vue

613 Zeilen
17 KiB
Originalformat Blame Verlauf 

  1. <template>

  2.   <view class="page">

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

  4.       <view class="wrap">

  5.         <view class="hero-card portrait-hero">

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

  7.             <text class="eyebrow">PORTRAIT PHOTO STUDIO</text>

  8.             <text class="hero-title">生成你的职业形象照</text>

  9.             <text class="hero-desc">从商务形象、普通职业到艺术写真，快速得到适合头像和简历的照片。</text>

  10.           </view>

  11.           <view class="hero-preview">

  12.             <view class="portrait-card-mini main">

  13.               <view class="portrait-face"></view>

  14.               <view class="portrait-suit"></view>

  15.             </view>

  16.             <view class="portrait-card-mini sub">

  17.               <view class="portrait-face"></view>

  18.               <view class="portrait-suit"></view>

  19.             </view>

  20.           </view>

  21.         </view>

  22. 

  23.         <view class="upload-card">

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

  25.             <view>

  26.               <text class="card-title"><text class="required">*</text>上传照片</text>

  27.               <text class="card-desc">建议选择五官无遮挡、光线均匀的半身照</text>

  28.             </view>

  29.             <text class="card-tip">0/1</text>

  30.           </view>

  31.           <view class="upload-strip" @click="showTodo('选择人像照片')">

  32.             <view class="upload-thumb"><text class="upload-plus">+</text></view>

  33.             <view class="upload-copy">

  34.               <text class="upload-title">上传正面清晰人像照片</text>

  35.               <text class="upload-sub">支持自拍、半身照，生成商务照、职业照或写真</text>

  36.             </view>

  37.             <view class="upload-action">上传</view>

  38.           </view>

  39.         </view>

  40. 

  41.         <view class="section">

  42.           <view class="section-head">

  43.             <text class="tool-section-title">照片风格</text>

  44.             <text class="section-tip">选择生成方向</text>

  45.           </view>

  46.           <view class="segmented">

  47.             <view

  48.               v-for="item in styleTabs"

  49.               :key="item.key"

  50.               class="segment"

  51.               :class="{ active: activeStyle === item.key }"

  52.               @click="activeStyle = item.key"

  53.             >

  54.               {{ item.name }}

  55.             </view>

  56.           </view>

  57. 

  58.           <view v-if="activeStyle === 'business'" class="config-panel">

  59.             <view class="sub-block">

  60.               <text class="sub-title">纯色背景</text>

  61.               <view class="option-grid">

  62.                 <view v-for="item in businessBg" :key="item.name" class="option" :class="{ 'active-first': item.name === '白色' }">

  63.                   <view class="color-dot" :class="item.className"></view>{{ item.name }}

  64.                 </view>

  65.               </view>

  66.             </view>

  67.             <view class="sub-block">

  68.               <text class="sub-title">服装</text>

  69.               <view class="option-grid two">

  70.                 <view class="option active-first">正装</view>

  71.                 <view class="option">衬衫</view>

  72.               </view>

  73.             </view>

  74.             <view class="sub-block">

  75.               <text class="sub-title">取景范围</text>

  76.               <view class="option-grid three">

  77.                 <view class="option active-first">半身</view>

  78.                 <view class="option">全身</view>

  79.                 <view class="option">胸像</view>

  80.               </view>

  81.             </view>

  82.           </view>

  83. 

  84.           <view v-if="activeStyle === 'career'" class="config-panel">

  85.             <view class="sub-block">

  86.               <text class="sub-title">背景</text>

  87.               <view class="option-grid three">

  88.                 <view v-for="item in careerBg" :key="item" class="option" :class="{ 'active-first': item === '浅灰' }">{{ item }}</view>

  89.               </view>

  90.             </view>

  91.             <view class="sub-block">

  92.               <text class="sub-title">服装</text>

  93.               <view class="option-grid">

  94.                 <view v-for="item in careerOutfit" :key="item" class="option" :class="{ 'active-first': item === '针织衫' }">{{ item }}</view>

  95.               </view>

  96.             </view>

  97.           </view>

  98. 

  99.           <view v-if="activeStyle === 'art'" class="config-panel">

  100.             <view class="option-grid three">

  101.               <view v-for="item in artStyles" :key="item" class="option" :class="{ 'active-first': item === '古风' }">{{ item }}</view>

  102.             </view>

  103.           </view>

  104.         </view>

  105. 

  106.         <view class="section">

  107.           <view class="section-head">

  108.             <text class="tool-section-title">图片比例</text>

  109.             <text class="section-tip">构图尺寸</text>

  110.           </view>

  111.           <view class="ratio-grid">

  112.             <view

  113.               v-for="item in ratios"

  114.               :key="item"

  115.               class="ratio"

  116.               :class="{ active: activeRatio === item }"

  117.               @click="activeRatio = item"

  118.             >

  119.               {{ item }}

  120.             </view>

  121.           </view>

  122.         </view>

  123. 

  124.         <view class="section">

  125.           <view class="section-head">

  126.             <text class="tool-section-title">生成数量</text>

  127.             <text class="price">20点/张，共{{ quantity * 20 }}点</text>

  128.           </view>

  129.           <view class="quantity">

  130.             <view class="quantity-btn" @click="decreaseQuantity">-</view>

  131.             <text class="quantity-value">{{ quantity }}</text>

  132.             <view class="quantity-btn" @click="increaseQuantity">+</view>

  133.           </view>

  134.           <text class="note">按单张收费，每次最多生成10张</text>

  135.         </view>

  136. 

  137.         <view class="section">

  138.           <view class="section-head">

  139.             <text class="tool-section-title">补充描述</text>

  140.             <text class="section-tip">可选</text>

  141.           </view>

  142.           <textarea class="textarea" placeholder="可补充职业、服装、背景、妆发或照片气质要求"></textarea>

  143.         </view>

  144.       </view>

  145.     </scroll-view>

  146. 

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

  148.       <view class="balance">

  149.         <text class="balance-copy">{{ balanceText }}</text>

  150.         <view v-if="isBalanceInsufficient" class="recharge-link" @click="goRecharge">去充值</view>

  151.       </view>

  152.       <view class="buttons">

  153.         <view class="history-btn" @click="showTodo('历史记录')">历史记录</view>

  154.         <view class="submit-btn" @click="showTodo('形象照生成')">

  155.           <image class="submit-icon" src="/static/icons/bolt.svg" mode="aspectFit" />

  156.           <text>{{ submitText }}</text>

  157.         </view>

  158.       </view>

  159.     </view>

  160.   </view>

  161. </template>

  162. 

  163. <script setup>

  164. import { computed, ref, watch } from 'vue'

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

  166. import { billingApi, userApi } from '@/api/index.js'

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

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

  169. 

  170. const userStore = useUserStore()

  171. const { toast } = useApp()

  172. const activeStyle = ref('business')

  173. const activeRatio = ref('1:1')

  174. const quantity = ref(1)

  175. const balance = ref({ points: 0 })

  176. const quote = ref({ points: 0 })

  177. const appKey = 'portrait-photo'

  178. 

  179. const styleTabs = [

  180.   { key: 'business', name: '商务形象照' },

  181.   { key: 'career', name: '普通职业照' },

  182.   { key: 'art', name: '艺术写真' }

  183. ]

  184. const businessBg = [

  185.   { name: '白色', className: 'white' },

  186.   { name: '浅灰', className: 'gray' },

  187.   { name: '商务蓝', className: 'blue' },

  188.   { name: '深蓝', className: 'deep-blue' }

  189. ]

  190. const careerBg = ['浅灰', '米色', '办公室', '书架', '咖啡角', '落地窗']

  191. const careerOutfit = ['针织衫', 'T恤配牛仔裤', '西装外套配T恤']

  192. const artStyles = ['古风', '藏族', '苗族', '都市青年', '潮人', '敦煌飞仙', '港风复古', '新中式', '法式油画']

  193. const ratios = ['1:1', '3:4', '4:3', '9:16', '16:9']

  194. const portraitModel = computed(() => activeStyle.value === 'art' ? 'premium' : 'standard')

  195. const currentPoints = computed(() => Number(balance.value.points || balance.value.point_balance || 0))

  196. const currentCost = computed(() => Number(quote.value.points || 0))

  197. const balanceText = computed(() => {

  198.   const cost = currentCost.value

  199.   if (!userStore.isLogin) return cost ? `形象照 · ${cost}点/次` : '形象照'

  200.   return cost ? `余额${currentPoints.value}点 · 预计消耗${cost}点` : `余额${currentPoints.value}点`

  201. })

  202. const isBalanceInsufficient = computed(() => userStore.isLogin && currentCost.value > 0 && currentPoints.value < currentCost.value)

  203. const submitText = computed(() => currentCost.value ? `立即生成 · ${currentCost.value}点` : '立即生成')

  204. 

  205. onLoad(() => {

  206.   loadBillingConfig()

  207. })

  208. 

  209. onShow(() => {

  210.   if (userStore.isLogin) loadBalance()

  211.   loadBillingConfig()

  212. })

  213. 

  214. watch([activeStyle, quantity], () => {

  215.   loadBillingConfig()

  216. })

  217. 

  218. async function loadBalance() {

  219.   try {

  220.     const res = await userApi.getBalance()

  221.     balance.value = res.data || {}

  222.   } catch (e) {}

  223. }

  224. 

  225. async function loadBillingConfig() {

  226.   try {

  227.     const res = await billingApi.getConfig({

  228.       app_key: appKey,

  229.       model: portraitModel.value,

  230.       count: quantity.value

  231.     })

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

  233.     quote.value = data.quote || {}

  234.     if (data.balance) balance.value = data.balance

  235.   } catch (e) {}

  236. }

  237. 

  238. function goRecharge() {

  239.   uni.navigateTo({ url: '/pages/recharge/recharge' })

  240. }

  241. 

  242. function showTodo(name) {

  243.   toast(`${name}逻辑待接入`)

  244. }

  245. 

  246. function decreaseQuantity() {

  247.   quantity.value = Math.max(1, quantity.value - 1)

  248. }

  249. 

  250. function increaseQuantity() {

  251.   quantity.value = Math.min(10, quantity.value + 1)

  252. }

  253. </script>

  254. 

  255. <style lang="scss" scoped>

  256. .page {

  257.   height: 100vh;

  258.   background: #f3f7fb;

  259.   display: flex;

  260.   flex-direction: column;

  261.   overflow: hidden;

  262. }

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

  264. .wrap { padding: 24rpx 28rpx 300rpx; }

  265. 

  266. .hero-card {

  267.   position: relative;

  268.   min-height: 260rpx;

  269.   padding: 30rpx;

  270.   border-radius: 28rpx;

  271.   color: #fff;

  272.   background: linear-gradient(135deg, #2447d8 0%, #0b8cff 56%, #55d6c6 100%);

  273.   overflow: hidden;

  274.   box-sizing: border-box;

  275. }

  276. .hero-card::before {

  277.   content: '';

  278.   position: absolute;

  279.   right: -90rpx;

  280.   top: -110rpx;

  281.   width: 300rpx;

  282.   height: 300rpx;

  283.   border-radius: 50%;

  284.   background: rgba(255, 255, 255, 0.16);

  285. }

  286. .hero-copy,

  287. .hero-preview {

  288.   position: relative;

  289.   z-index: 1;

  290. }

  291. .eyebrow {

  292.   display: block;

  293.   color: rgba(255, 255, 255, 0.72);

  294.   font-size: 21rpx;

  295.   font-weight: 800;

  296. }

  297. .hero-title {

  298.   display: block;

  299.   margin-top: 16rpx;

  300.   width: 430rpx;

  301.   color: #fff;

  302.   font-size: 40rpx;

  303.   font-weight: 900;

  304.   line-height: 1.24;

  305. }

  306. .hero-desc {

  307.   display: block;

  308.   margin-top: 14rpx;

  309.   width: 420rpx;

  310.   color: rgba(255, 255, 255, 0.86);

  311.   font-size: 24rpx;

  312.   line-height: 1.5;

  313. }

  314. .hero-preview {

  315.   position: absolute;

  316.   right: 30rpx;

  317.   bottom: 28rpx;

  318.   width: 178rpx;

  319.   height: 126rpx;

  320. }

  321. .portrait-card-mini {

  322.   position: absolute;

  323.   width: 92rpx;

  324.   height: 120rpx;

  325.   border-radius: 18rpx;

  326.   overflow: hidden;

  327.   box-shadow: 0 16rpx 30rpx rgba(0, 54, 125, 0.22);

  328. }

  329. .portrait-card-mini.main {

  330.   left: 0;

  331.   top: 0;

  332.   background: linear-gradient(180deg, #e8f4ff 0%, #9bd0ff 100%);

  333. }

  334. .portrait-card-mini.sub {

  335.   right: 0;

  336.   bottom: 0;

  337.   background: linear-gradient(180deg, #fff4e7 0%, #ebb875 100%);

  338. }

  339. .portrait-face {

  340.   width: 38rpx;

  341.   height: 42rpx;

  342.   margin: 22rpx auto 0;

  343.   border-radius: 50% 50% 45% 45%;

  344.   background: #ffe0c4;

  345. }

  346. .portrait-suit {

  347.   width: 70rpx;

  348.   height: 48rpx;

  349.   margin: 4rpx auto 0;

  350.   border-radius: 30rpx 30rpx 12rpx 12rpx;

  351.   background: #1f3a5f;

  352. }

  353. 

  354. .upload-card,

  355. .section {

  356.   margin-top: 22rpx;

  357.   padding: 28rpx;

  358.   border-radius: 24rpx;

  359.   background: #fff;

  360.   box-shadow: 0 8rpx 28rpx rgba(34, 68, 112, 0.05);

  361. }

  362. .upload-card:first-child { margin-top: 0; }

  363. 

  364. .card-head,

  365. .section-head {

  366.   display: flex;

  367.   align-items: baseline;

  368. }

  369. .card-title,

  370. .tool-section-title {

  371.   display: block;

  372.   color: #172033;

  373.   font-size: 31rpx;

  374.   font-weight: 800;

  375. }

  376. .required { margin-right: 4rpx; color: #ef4444; }

  377. .card-desc {

  378.   display: block;

  379.   margin-top: 8rpx;

  380.   color: #8a95a6;

  381.   font-size: 23rpx;

  382.   line-height: 1.35;

  383. }

  384. .card-tip,

  385. .section-tip {

  386.   margin-left: auto;

  387.   color: #8a95a6;

  388.   font-size: 23rpx;

  389. }

  390. .upload-strip {

  391.   margin-top: 22rpx;

  392.   min-height: 142rpx;

  393.   padding: 18rpx;

  394.   border: 2rpx dashed rgba(11, 140, 255, 0.28);

  395.   border-radius: 20rpx;

  396.   background: #f8fbff;

  397.   display: flex;

  398.   align-items: center;

  399.   box-sizing: border-box;

  400. }

  401. .upload-thumb {

  402.   width: 104rpx;

  403.   height: 104rpx;

  404.   border-radius: 18rpx;

  405.   background: #eef6ff;

  406.   display: flex;

  407.   align-items: center;

  408.   justify-content: center;

  409.   flex-shrink: 0;

  410. }

  411. .upload-plus { color: #0b8cff; font-size: 48rpx; line-height: 1; }

  412. .upload-copy { min-width: 0; flex: 1; margin-left: 20rpx; }

  413. .upload-title { display: block; color: #172033; font-size: 29rpx; font-weight: 800; }

  414. .upload-sub { display: block; margin-top: 8rpx; color: #7f8896; font-size: 23rpx; line-height: 1.4; }

  415. .upload-action { margin-left: 18rpx; color: #0b8cff; font-size: 25rpx; font-weight: 800; }

  416. 

  417. .segmented {

  418.   margin-top: 22rpx;

  419.   padding: 6rpx;

  420.   border-radius: 18rpx;

  421.   background: #f7f9fd;

  422.   display: grid;

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

  424.   gap: 6rpx;

  425. }

  426. .segment {

  427.   height: 66rpx;

  428.   border-radius: 16rpx;

  429.   color: #596579;

  430.   font-size: 24rpx;

  431.   font-weight: 800;

  432.   line-height: 66rpx;

  433.   text-align: center;

  434. }

  435. .segment.active {

  436.   color: #0b8cff;

  437.   background: #fff;

  438.   box-shadow: 0 8rpx 18rpx rgba(11, 140, 255, 0.12);

  439. }

  440. .config-panel {

  441.   margin-top: 24rpx;

  442.   padding-top: 22rpx;

  443.   border-top: 1rpx solid #edf2f7;

  444. }

  445. .sub-block + .sub-block { margin-top: 24rpx; }

  446. .sub-title {

  447.   display: block;

  448.   margin-bottom: 14rpx;

  449.   color: #7f8896;

  450.   font-size: 24rpx;

  451.   font-weight: 800;

  452. }

  453. .option-grid {

  454.   display: grid;

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

  456.   gap: 14rpx;

  457. }

  458. .option-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  459. .option-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  460. .option {

  461.   min-height: 66rpx;

  462.   padding: 0 12rpx;

  463.   border-radius: 16rpx;

  464.   color: #596579;

  465.   font-size: 24rpx;

  466.   font-weight: 800;

  467.   background: #f7f9fd;

  468.   border: 2rpx solid transparent;

  469.   display: flex;

  470.   align-items: center;

  471.   justify-content: center;

  472.   gap: 10rpx;

  473.   text-align: center;

  474.   box-sizing: border-box;

  475. }

  476. .option.active-first {

  477.   color: #0b8cff;

  478.   background: #eff8ff;

  479.   border-color: #0b8cff;

  480. }

  481. .color-dot {

  482.   width: 28rpx;

  483.   height: 28rpx;

  484.   border-radius: 50%;

  485.   border: 1rpx solid rgba(15, 23, 42, 0.16);

  486.   flex-shrink: 0;

  487. }

  488. .white { background: #fff; }

  489. .gray { background: #d9dde3; }

  490. .blue { background: #6aa7e8; }

  491. .deep-blue { background: #245a9c; }

  492. 

  493. .ratio-grid {

  494.   margin-top: 20rpx;

  495.   display: grid;

  496.   grid-template-columns: repeat(5, minmax(0, 1fr));

  497.   gap: 10rpx;

  498. }

  499. .ratio {

  500.   height: 64rpx;

  501.   border-radius: 16rpx;

  502.   color: #596579;

  503.   font-size: 24rpx;

  504.   font-weight: 800;

  505.   line-height: 64rpx;

  506.   text-align: center;

  507.   background: #f7f9fd;

  508.   border: 2rpx solid transparent;

  509. }

  510. .ratio.active {

  511.   color: #0b8cff;

  512.   background: #eff8ff;

  513.   border-color: #0b8cff;

  514. }

  515. .price {

  516.   margin-left: auto;

  517.   color: #ff681f;

  518.   font-size: 24rpx;

  519.   font-weight: 800;

  520. }

  521. .quantity {

  522.   margin-top: 22rpx;

  523.   display: grid;

  524.   grid-template-columns: 80rpx minmax(0, 1fr) 80rpx;

  525.   gap: 18rpx;

  526.   align-items: center;

  527. }

  528. .quantity-btn {

  529.   height: 72rpx;

  530.   border-radius: 16rpx;

  531.   color: #fff;

  532.   background: #0b8cff;

  533.   font-size: 40rpx;

  534.   font-weight: 800;

  535.   line-height: 72rpx;

  536.   text-align: center;

  537. }

  538. .quantity-value {

  539.   height: 72rpx;

  540.   border-radius: 16rpx;

  541.   color: #172033;

  542.   background: #f7f9fd;

  543.   font-size: 32rpx;

  544.   font-weight: 800;

  545.   line-height: 72rpx;

  546.   text-align: center;

  547. }

  548. .note {

  549.   display: block;

  550.   margin-top: 14rpx;

  551.   color: #8a95a6;

  552.   font-size: 23rpx;

  553. }

  554. .textarea {

  555.   margin-top: 20rpx;

  556.   width: 100%;

  557.   min-height: 144rpx;

  558.   padding: 22rpx;

  559.   border-radius: 20rpx;

  560.   color: #172033;

  561.   font-size: 25rpx;

  562.   line-height: 1.5;

  563.   background: #f7f9fd;

  564.   box-sizing: border-box;

  565. }

  566. .bottom-bar {

  567.   position: fixed;

  568.   left: 0;

  569.   right: 0;

  570.   bottom: 0;

  571.   z-index: 80;

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

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

  574.   box-shadow: 0 -10rpx 30rpx rgba(32, 56, 92, 0.1);

  575. }

  576. .balance {

  577.   margin-bottom: 14rpx;

  578.   display: flex;

  579.   align-items: center;

  580.   justify-content: space-between;

  581.   gap: 20rpx;

  582.   color: #7b8797;

  583.   font-size: 24rpx;

  584.   line-height: 1.35;

  585. }

  586. .balance-copy { min-width: 0; flex: 1; }

  587. .recharge-link { color: #0b8cff; font-size: 24rpx; font-weight: 800; flex-shrink: 0; }

  588. .buttons { display: flex; gap: 22rpx; }

  589. .history-btn,

  590. .submit-btn {

  591.   height: 86rpx;

  592.   border-radius: 999rpx;

  593.   font-size: 30rpx;

  594.   font-weight: 800;

  595.   display: flex;

  596.   align-items: center;

  597.   justify-content: center;

  598. }

  599. .history-btn { width: 210rpx; color: #1f8cff; background: #eef7ff; }

  600. .submit-btn {

  601.   flex: 1;

  602.   color: #fff;

  603.   background: linear-gradient(135deg, #1f8cff, #41b9ff);

  604.   box-shadow: 0 12rpx 24rpx rgba(31, 140, 255, 0.28);

  605. }

  606. 

  607. .submit-icon {

  608.   width: 24rpx;

  609.   height: 24rpx;

  610.   margin-right: 8rpx;

  611. }

  612. </style>