电商翻译

src/views/badge/preview.vue

@@ -3,20 +3,20 @@
     <view class="backstyle_1"></view>
     <view class="backstyle_2"></view>
     <div class="header" @click="goBack">
-      <span class="back-icon"><van-icon name="arrow-left" size="16px" /> 效果预览</span>
+      <span class="back-icon"><van-icon name="arrow-left" size="16px" /> {{ toValueWithout("效果预览") }}</span>
     </div>
     <div class="step-container">
       <div class="step-item">
         <div class="step-content">
-          <div class="step-title">正面照片</div>
-          <div class="step-desc">清晰的正面照片</div>
+          <div class="step-title">{{ toValueWithout("正面照片") }}</div>
+          <div class="step-desc">{{ toValueWithout("清晰的正面照片") }}</div>
         </div>
       </div>
       <div class="step-item active">
         <div class="step-num">2</div>
         <div class="step-content">
-          <div class="step-title">确认下单</div>
-          <div class="step-desc">选择一个你喜欢的效果图下单</div>
+          <div class="step-title">{{ toValueWithout("确认下单") }}</div>
+          <div class="step-desc">{{ toValueWithout("选择一个你喜欢的效果图下单") }}</div>
         </div>
       </div>
     </div>
@@ -25,7 +25,7 @@
         <div class="progress-bar-fg" :style="{ width: progress + '%' }"></div>
       </div>
       <div class="progress-text">{{progressText}} {{progress}}%</div>
-      <div class="progress-desc">总计大约需要90秒，请耐心等待...</div>
+      <div class="progress-desc">{{ toValueWithout("总计大约需要90秒，请耐心等待...") }}</div>
     </div>
     <div v-else class="progress-section-picture" style="width: 320px;height: 320px;">
       <div class="progress-section-img" style="width: 320px;height: 320px;">
@@ -41,24 +41,24 @@
       <div class="image-list-item" v-for="item in imageList" :key="item.key">
         <img v-if="item.status == 1" class="image-list-item-img" :class="{ imgActive: item.key == imgKey }" :src="item.origin_url" alt="" @click="changeImage(item)">
         <div v-else-if="item.status == 0" class="image-list-item-loading">
-          设计中
+          {{ toValueWithout("设计中") }}
         </div>
         <div v-else-if="item.status == 2" class="image-list-item-loading">
-          设计失败
+          {{ toValueWithout("设计失败") }}
         </div>
       </div>
     </div>
     <div class="info-section">
       <div class="info-item">
-        <div class="info-title" v-if="typeId == 1">{{ prodId == 7 ? '人物立体徽章' : '宠物立体徽章' }}</div>
-        <div class="info-title" v-if="typeId == 2">{{ prodId == 7 ? '人物浮雕相框' : '宠物浮雕相框' }}</div>
-        <div class="info-title" v-if="typeId == 3">{{ prodId == 7 ? '人物3D冰箱贴' : '宠物3D冰箱贴' }}</div>
-        <div class="info-title" v-if="typeId == 4">{{ prodId == 1 ? '人物卡通手办' : '宠物卡通手办' }}</div>
-        <div class="info-content">产品类型</div>
+        <div class="info-title" v-if="typeId == 1">{{ prodId == 7 ? toValueWithout('人物立体徽章') : toValueWithout('宠物立体徽章') }}</div>
+        <div class="info-title" v-if="typeId == 2">{{ prodId == 7 ? toValueWithout('人物浮雕相框') : toValueWithout('宠物浮雕相框') }}</div>
+        <div class="info-title" v-if="typeId == 3">{{ prodId == 7 ? toValueWithout('人物3D冰箱贴') : toValueWithout('宠物3D冰箱贴') }}</div>
+        <div class="info-title" v-if="typeId == 4">{{ prodId == 1 ? toValueWithout('人物卡通手办') : toValueWithout('宠物卡通手办') }}</div>
+        <div class="info-content">{{ toValueWithout("产品类型") }}</div>
       </div>
       <div class="info-item">
-        <div class="info-title">3D全彩打印</div>
-        <div class="info-content">工艺</div>
+        <div class="info-title">{{ toValueWithout("3D全彩打印") }}</div>
+        <div class="info-content">{{ toValueWithout("工艺") }}</div>
       </div>
       <div class="info-item">
         <div class="info-title">ID</div>
@@ -76,12 +76,12 @@
               <img class="shape-item-image" :class="{ 'shape-item-image-round': item.id == 1 || item.id == 2 }" :src="item.cover_path || imageUrl"/>
               <van-icon v-if="item.id == shapeId" class="shape-icon" color="#15CF5F" name="checked" size="18px" />
             </div>
-            <div class="shape-item-text">{{item.name}}</div>
+            <div class="shape-item-text">{{ toValueWithout(item.name) }}</div>
           </div>
         </block>
       </div>
       <div class="shape-box-input" v-if="imageUrl && custom_switch == 1">
-        <input class="shape-box-input-text" type="text" placeholder="请输入文字" v-model="shapeText" @change="changeShapeText" @input="changeShapeText" @onBlur="changeShapeText" />
+        <input class="shape-box-input-text" type="text" :placeholder="toValueWithout('请输入文字')" v-model="shapeText" @change="changeShapeText" @input="changeShapeText" @onBlur="changeShapeText" />
       </div>
     </div>
     <!-- <div class="info-desc">
@@ -92,12 +92,12 @@
       <van-divider />
     </div>
     <div class="order-section" v-if="trialCode == false && imageUrl">
-      <div class="order-title">订购数量</div>
+      <div class="order-title">{{ toValueWithout("订购数量") }}</div>
       <block v-for="item in sizeList" :key="item.id">
         <block>
           <div class="order-item">
             <span class="order-size">{{ item.size }}</span>
-            <span class="order-free">(剩余兑换：{{ item.remaining }})</span>
+            <span class="order-free">({{ toValueWithout("剩余兑换") }}：{{ item.remaining }})</span>
             <div class="order-ctrl">
               <van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" />
             </div>
@@ -106,7 +106,7 @@
         <!-- <block v-if="orderStat.use_type == 2">
           <div class="order-item">
             <span class="order-size">{{ item.size }}</span>
-            <span class="order-free">(剩余兑换：{{ item.remaining }})</span>
+            <span class="order-free">({{ toValueWithout("剩余兑换") }}：{{ item.remaining }})</span>
             <div class="order-ctrl">
               <van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" />
             </div>
@@ -115,29 +115,29 @@
       </block>
     </div>
     <div class="address-box" v-if="orderStat.use_type == 2 && imageUrl && code == 'ACAYOAAC3PFCPO3CD6DVM1'">
-      <div class="order-title" style="padding: 0 16px;">地址识别</div>
+      <div class="order-title" style="padding: 0 16px;">{{ toValueWithout("地址识别") }}</div>
       <div class="address-item">
         <van-field
           v-model="addressInput"
           label=""
-          placeholder="请输入姓名、手机号、详细地址（如：张三 13800138000 广东省深圳市南山区科技园1号）"
+          :placeholder="toValueWithout('请输入姓名、手机号、详细地址（如：张三 13800138000 广东省深圳市南山区科技园1号）')"
           clearable
           right-icon="search"
         >
           <template #button>
-            <van-button size="small" type="primary" @click="handleAddressInput" style="margin-left: 8px;">自动识别</van-button>
+            <van-button size="small" type="primary" @click="handleAddressInput" style="margin-left: 8px;">{{ toValueWithout("自动识别") }}</van-button>
           </template>
         </van-field>
       </div>
       <div class="address-item" style="padding: 0px 16px 16px 16px;" v-if="contact_name && contact_mobile && province_name && city_name && county_name && address">
-        <div style="font-size: 16px;color: #387aff;text-align: left;margin-bottom: 8px;">识别结果</div>
+        <div style="font-size: 16px;color: #387aff;text-align: left;margin-bottom: 8px;">{{ toValueWithout("识别结果") }}</div>
         <div style="font-size: 14px;text-align: left;">
           {{ contact_name }} {{ contact_mobile }} {{ province_name }} {{ city_name }} {{ county_name }} {{ address }}
         </div>
       </div>
     </div>
     <div class="address-box" v-if="orderStat.use_type == 2 && imageUrl">
-      <div class="order-title" style="padding: 0 16px;">收货地址</div>
+      <div class="order-title" style="padding: 0 16px;">{{ toValueWithout("收货地址") }}</div>
       <div class="address-item">
         <van-address-edit
           :area-list="areaList"
@@ -146,7 +146,7 @@
           show-delete
           show-search-result
           :search-result="searchResult"
-          :area-columns-placeholder="['请选择', '请选择', '请选择']"
+          :area-columns-placeholder="[toValueWithout('请选择'), toValueWithout('请选择'), toValueWithout('请选择')]"
           @change="nameTelChange"
           @change-area="changeArea"
           @change-detail="onChangeDetail"
@@ -156,41 +156,39 @@
     <div style="height: 130px;"></div>
     <div class="confirm-box">
       <div class="action-section">
-        <button v-if="trialCode == false" @click="sureReload" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
-        <button @click="compare" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> 前后对比</button>
-        <button @click="save" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> 保存图片</button>
+        <button v-if="trialCode == false" @click="sureReload" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> {{ toValueWithout("再次生成") }}</button>
+        <button @click="compare" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> {{ toValueWithout("前后对比") }}</button>
+        <button @click="save" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> {{ toValueWithout("保存图片") }}</button>
       </div>
       <div class="btn-box" v-if="trialCode == false">
-        <button @click="confirm" :disabled="flag < 1" class="confirm-btn">确认选择</button>
+        <button @click="confirm" :disabled="flag < 1" class="confirm-btn">{{ toValueWithout("确认选择") }}</button>
       </div>
     </div>
   </div>
   
-  <van-action-sheet v-model:show="showCompare" title="前后对比" :close-on-click-overlay="true" closeable>
+  <van-action-sheet v-model:show="showCompare" :title="toValueWithout('前后对比')" :close-on-click-overlay="true" closeable>
     <div style="padding: 16px;">
       <div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
         <div style="text-align: center;">
-          <img :src="compareList.origin_path" alt="原图" style="max-width: 120px; max-height: 120px; border-radius: 8px;">
+          <img :src="compareList.origin_path" :alt="toValueWithout('原图')" style="max-width: 120px; max-height: 120px; border-radius: 8px;">
         </div>
         <div style="font-size: 24px; color: #333;">
           <van-icon name="arrow" size="20px" />
         </div>
         <div style="text-align: center;">
-          <img :src="imageUrl" alt="效果图" style="width: 120px; height: 120px; border-radius: 8px;">
+          <img :src="imageUrl" :alt="toValueWithout('效果图')" style="width: 120px; height: 120px; border-radius: 8px;">
         </div>
       </div>
       <div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
-        温馨提示：<br/>
-        AI设计的徽章效果图是根据用户提供的照片机器学习生成的，<br/>
-        多试几次就能找到你满意的徽章~
+        {{ toValueWithout("温馨提示：AI设计的徽章效果图是根据用户提供的照片机器学习生成的，多试几次就能找到你满意的徽章~") }}
       </div>
     </div>
   </van-action-sheet>
 
   <div v-if="showPreview">
     <div class="preview-mask" @click="showPreview = false">
-      <img :src="imageWater" alt="徽章预览" />
-      <p>长按图片 → 保存到相册</p>
+      <img :src="imageWater" :alt="toValueWithout('徽章预览')" />
+      <p>{{ toValueWithout("长按图片 → 保存到相册") }}</p>
     </div>
   </div>
 </template>
@@ -201,6 +199,7 @@ import { showSuccessToast, showToast, showNotify, showConfirmDialog, AddressEdit
 import { localStorage } from '@/utils/local-storage'
 import * as badgeApi from '@/api/badge'
 import { areaList } from '@/utils/area'
+import { toValueWithout } from '@/lang/utils'
 const router = useRouter();
 const value = ref(0);
 const showReload = ref(false)
@@ -219,14 +218,14 @@ function compare() {
 function sureReload() {
   console.log('orderStat', orderStat.value)
   if (orderStat.value.remain_count <= 0) {
-    showToast('当前次数已用完,请重新购买')
+    showToast(toValueWithout('当前次数已用完,请重新购买'))
     return
   }
   isPreview.value = false
   showConfirmDialog({
-  title: '再次生成',
+  title: toValueWithout('再次生成'),
   message:
-    '请确认是否重新生成。',
+    toValueWithout('请确认是否重新生成。'),
   })
   .then(() => {
     group.value = newGroup.value
@@ -464,31 +463,31 @@ const confirm = () => {
   if (loading.value) return
   console.log('confirm')
   if (payAmount.value <= 0) {
-    showToast('请先选择下单数量')
+    showToast(toValueWithout('请先选择下单数量'))
     return
   }
   if (orderStat.value.use_type == 2 && !contact_name.value) {
-    showToast('请先填写收货人信息')
+    showToast(toValueWithout('请先填写收货人信息'))
     return
   }
   if (orderStat.value.use_type == 2 && !contact_mobile.value) {
-    showToast('请先填写收货人手机号')
+    showToast(toValueWithout('请先填写收货人手机号'))
     return
   }
   if (orderStat.value.use_type == 2 && !province_id.value) {
-    showToast('请先选择地区')
+    showToast(toValueWithout('请先选择地区'))
     return
   }
   if (orderStat.value.use_type == 2 && !address.value) {
-    showToast('请先填写详细地址')
+    showToast(toValueWithout('请先填写详细地址'))
     return
   }
   getPosition()
   loading.value = true
   showConfirmDialog({
-  title: '确认下单',
+  title: toValueWithout('确认下单'),
   message:
-    '请再次确认是否选择这个模型下单，下单后预计需要10天完成生产发货。如对产品有疑问，可以联系客服咨询。',
+    toValueWithout('请再次确认是否选择这个模型下单，下单后预计需要10天完成生产发货。如对产品有疑问，可以联系客服咨询。'),
   })
   .then(() => {
     const parms = {
@@ -517,7 +516,7 @@ const confirm = () => {
     badgeApi.creatOrder(parms).then((res: any) => {
       console.log('creatOrder', res)
       showSuccessToast({
-        message: '下单成功',
+        message: toValueWithout('下单成功'),
         duration: 2000,
       })
       router.push({
@@ -574,13 +573,13 @@ const progressList = () => {
       if (progress.value < 90) {
         progress.value += 1
         if (progress.value < 25) {
-          progressText.value = '照片数据分析中'
+          progressText.value = toValueWithout('照片数据分析中')
         } else if (progress.value < 50) {
-          progressText.value = '提炼图像关键词'
+          progressText.value = toValueWithout('提炼图像关键词')
         } else if (progress.value < 75) {
-          progressText.value = '图像生成中'
+          progressText.value = toValueWithout('图像生成中')
         } else {
-          progressText.value = '图像后处理与优化'
+          progressText.value = toValueWithout('图像后处理与优化')
         }
       }
     }, 300)
@@ -1382,7 +1381,7 @@ onUnmounted(() => {
 }
 .shape-box {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   flex-wrap: wrap;
   justify-content: flex-start;
 }
@@ -1412,11 +1411,12 @@ onUnmounted(() => {
 .shape-icon {
   position: absolute;
   right: 6px;
-  bottom: 24px;
+  top: 14vw;
 }
 .shape-item-text {
   font-size: 12px;
   text-align: center;
+  max-width: 20vw;
 }
 .shape-type {
   display: -webkit-box;