兼容四张效果图

src/views/badge/index.vue

@@ -251,6 +251,7 @@ const options = ref({
   info: true
 })
 
+// 判断是否是APP
 const openApp = () => {
   const ua = navigator.userAgent;
   const isIOS = /iPhone|iPad|iPod/i.test(ua);
@@ -270,13 +271,17 @@ const openApp = () => {
 const imgurl = ref('')
 const imgBgUrl = ref('')
 const remaining = ref(0)
+
+// 跳转设计图集
 function goToRecord() {
   router.push('/badge/record')
 }
+// 跳转我的订单
 function goToMyOrder() {
   router.push('/badge/myOrder')
 }
 
+// 获取兑换数量
 const sizeList = ref([])
 const getSizeList = () => {
   badgeApi.getOrderPrice({}).then((res: any) => {
@@ -290,6 +295,7 @@ const getSizeList = () => {
   })
 }
 
+// 获取首页显示的数量和类型
 const orderStat = ref({})
 const prodId = ref(7)
 const prop = ref('')
@@ -304,6 +310,7 @@ const getOrderStat = () => {
 
 const isLoading = ref(false)
 
+// 生成图片
 function goToPreview() {
   if (isLoading.value) {
     return
@@ -324,6 +331,8 @@ function goToPreview() {
     getPid()
   }
 }
+
+// 一次性体验链接
 const trialPhone = async () => {
   if (!mobile.value) {
     showToast('请输入手机号');
@@ -432,6 +441,7 @@ const getUploadUrl = () => {
   })
 }
 
+// 人脸识别上传
 const sendFaceToOss = async (src: string, url: string, path: string) => {
   try {
     const response = await fetch(url, {
@@ -577,6 +587,7 @@ const sendToOss = async (src: string, url: string) => {
     console.log("uploadImage----err", err)
   }
 }
+// 创建日志
 const createLog = () => {
   const params = {
     pid: pid.value,
@@ -612,6 +623,7 @@ const createLog = () => {
   })
 }
 
+// 获取首页图片上传指南图片
 const sundryList = ref([])
 const getSundryList = () => {
   badgeApi.getSundryList({
@@ -631,6 +643,7 @@ const getSundryList = () => {
   })
 }
 
+// 判断是否是一次性体验链接
 const trialCode = ref(false)
 const trialCodeValue = ref('')
 const getTrialCode = () => {
@@ -643,6 +656,8 @@ const getTrialCode = () => {
     getSizeList()
   }
 }
+
+// 手机号输入框
 const mobile = ref('')
 const userId = ref('')
 const onBlur = async () => {

src/views/badge/preview.vue

@@ -36,15 +36,15 @@
         </div>
         <div class="shape-text" :style="shapeTextStyle" v-if="shapeText">{{shapeText}}</div>
       </div>
-      <div class="image-list-box" v-if="imageList.length > 1">
+    </div>
-        <div class="image-list-item" v-for="item in imageList" :key="item.key">
+    <div class="image-list-box" v-if="imageList.length > 1">
-          <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 class="image-list-item" v-for="item in imageList" :key="item.key">
-          <div v-else-if="item.status == 0" class="image-list-item-loading">
+        <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">
-          </div>
+          设计中
-          <div v-else-if="item.status == 2" class="image-list-item-loading">
+        </div>
-            设计失败
+        <div v-else-if="item.status == 2" class="image-list-item-loading">
-          </div>
+          设计失败
         </div>
       </div>
     </div>