宠物徽章

src/views/badge/index.vue

@@ -41,7 +41,6 @@ const openApp = () => {
 
 const imgurl = ref('')
 const imgBgUrl = ref('')
-const isBgShow = ref(true)
 const remaining = ref(0)
 function goToRecord() {
   router.push('/badge/record')
@@ -58,9 +57,12 @@ const getSizeList = () => {
 }
 
 const orderStat = ref({})
+const prodId = ref(7)
 const getOrderStat = () => {
   badgeApi.getOrderStat({}).then((res: any) => {
     orderStat.value = res
+    prodId.value = res.prod_id
+    getSundryList()
   })
 }
 
@@ -75,18 +77,10 @@ function goToPreview() {
     showToast('请先上传照片')
     return
   }
-  if (isBgShow.value == false && !imgBgUrl.value) {
-    showToast('请先上传背景照片')
-    return
-  }
   if (orderStat.value.remain_count <= 0) {
     showToast('剩余次数不足')
     return
   }
-  if (checkId.value == 0) {
-    showToast('请选择风格样式')
-    return
-  }
   isLoading.value = true
   if (trialCode.value) {
     trialPhone()
@@ -117,8 +111,9 @@ const trialPhone = async () => {
       message: err.message,
       duration: 2000,
     })
+    isLoading.value = false
   }).finally(() => {
-    
+    isLoading.value = false
   }) 
 }
 const picture = ref(null)
@@ -154,7 +149,6 @@ const getRandomNumber = () => {
 
 // 获取Pid
 const pid = ref('')
-const kindId = ref(0)
 const getPid = async () => {
   showLoadingToast({
     message: '上传中...',
@@ -163,46 +157,28 @@ const getPid = async () => {
     duration: 0,
   })
   const params = {
-    extend_value: isBgShow.value ? -1 : 0,
-    kind_id: checkId.value,
+    prod_id: prodId.value
   }
   try {
     const res = await badgeApi.getPid(params)
     console.log('getPid', res)
     isLoading.value = false
     pid.value = res.pid
-    if (isBgShow.value) {
-      try {
-        const uploadTasks = [
-          sendToOss(imgurl.value, res.url),
-          sendToOss(imgurl.value, res.oss_url)
-        ]
-        await Promise.all(uploadTasks)
-      } catch (err) {
-        closeToast()
-        console.error('上传失败:', err)
-        showFailToast({
-          message: '上传失败',
-          duration: 2000,
-        })
-      }
-    } else {
-      try {
-        const uploadTasks = [
-          sendToOss(imgurl.value, res.url),
-          sendToOss(imgurl.value, res.oss_url),
-          sendToOss(imgBgUrl.value, res.extend_url),
-          sendToOss(imgBgUrl.value, res.extend_bg_url)
-        ]
-        await Promise.all(uploadTasks)
-      } catch (err) {
-        closeToast()
-        console.error('上传失败:', err)
-        showFailToast({
-          message: '上传失败',
-          duration: 2000,
-        })
-      }
+    try {
+      const uploadTasks = [
+        sendToOss(imgurl.value, res.url),
+        sendToOss(imgurl.value, res.oss_url)
+      ]
+      await Promise.all(uploadTasks)
+    } catch (err) {
+      closeToast()
+      console.error('上传失败:', err)
+      showFailToast({
+        message: '上传失败',
+        duration: 2000,
+      })
+      isLoading.value = false
+      return
     }
   } catch (err) {
     isLoading.value = false
@@ -240,11 +216,10 @@ const sendToOss = async (src: string, url: string) => {
       isAnotherAPICalled.value = true
       const params = {
         pid: pid.value,
-        kind_id: checkId.value,
-        extend_value: isBgShow.value ? -1 : 0,
         group: 1,
+        prod_id: prodId.value
       }
-      badgeApi.putMOdeling(params).then((res: any) => {
+      badgeApi.putModeling(params).then((res: any) => {
         console.log('putModeling', res)
         createLog()
       }).catch((err) => {
@@ -268,7 +243,7 @@ const createLog = () => {
   const params = {
     pid: pid.value,
     group: 1,
-    kind_id: checkId.value,
+    prod_id: prodId.value
   }
   badgeApi.createLog(params).then((res: any) => {
     console.log('createLog', res)
@@ -283,6 +258,7 @@ const createLog = () => {
         query: {
           pid: pid.value,
           group: 1,
+          prod_id: prodId.value
         },
       })
     }, 1000);
@@ -297,32 +273,12 @@ const createLog = () => {
   })
 }
 
-
-const kindList = ref([])
-const checkId = ref(0)
-const getKindList = () => {
-  badgeApi.getKindList({
-    page: 1,
-    size: 20,
-    scale: 20,
-  }).then((res: any) => {
-    const data = res || []
-    kindList.value = data.list
-  }).catch((err) => {
-    showToast({
-      message: err.message,
-      duration: 2000,
-    })
-  }).finally(() => {
-    
-  })
-}
 const sundryList = ref([])
 const getSundryList = () => {
   badgeApi.getSundryList({
     page: 1,
     size: 6,
-    group: 'gp',
+    group: prodId.value == 7 ? 'gp' : 'pet',
   }).then((res: any) => {
     const data = res || []
     sundryList.value = data.list
@@ -335,25 +291,7 @@ const getSundryList = () => {
     
   })
 }
-const caseList = ref([])
-const getList = () => {
-  badgeApi.getSundryList({
-    page: 1,
-    size: 5,
-    group: 'case',
-    ids: '6,7,8,9,19'
-  }).then((res: any) => {
-    const data = res || []
-    caseList.value = data.list
-  }).catch((err) => {
-    showToast({
-      message: err.message,
-      duration: 2000,
-    })
-  }).finally(() => {
-    
-  })
-}
+
 const trialCode = ref(false)
 const trialCodeValue = ref('')
 const getTrialCode = () => {
@@ -380,6 +318,10 @@ const onBlur = async () => {
     return;
   }
 }
+const styleChange = (id: number) => {
+  prodId.value = id
+  getSundryList()
+}
 const key = CryptoJS.enc.Utf8.parse("123abcdefpua2025");
 const iv = CryptoJS.enc.Utf8.parse('DYgjCEIMVrj2W9xN');
 function Encrypt(word: string): string {  
@@ -387,7 +329,6 @@ function Encrypt(word: string): string {
    let encrypted = CryptoJS.AES.encrypt(srcs, key, {
     iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    return encrypted.ciphertext.toString();
-
 }
 function handleBeforeUnload(_event: BeforeUnloadEvent) {
   localStorage.remove('code')
@@ -395,9 +336,7 @@ function handleBeforeUnload(_event: BeforeUnloadEvent) {
   localStorage.remove('userId')
 }
 onMounted(() => {
-  getKindList()
   getSundryList()
-  getList()
   openApp()
   getTrialCode()
   window.addEventListener('beforeunload', handleBeforeUnload);
@@ -407,6 +346,24 @@ onMounted(() => {
 <template>
   <div class="photo-upload-page">
     <div class="badge-size" v-if="trialCode == false">
+      <div class="order-type">
+        <div class="order-type-item">
+          <div class="order-type-item-title" v-if="orderStat.order_no">
+            订单编号
+          </div>
+          <div class="order-type-item-title">
+            {{ orderStat.order_no }}
+          </div>
+        </div>
+        <div class="order-type-item" v-if="orderStat.prod_id">
+          <div class="order-type-item-title">
+            产品类型
+          </div>
+          <div class="order-type-item-title">
+            {{ orderStat.prod_id == 7 ? '人物立体徽章' : '宠物立体徽章'}}
+          </div>
+        </div>
+      </div>
       <div class="size-title">
         剩余兑换数量
       </div>
@@ -452,8 +409,18 @@ onMounted(() => {
         @confirm="onBlur"
       />
       <p style="font-size: 12px; color: #000; margin-left: 16px;">注：需要先输入手机号才可体验徽章设计</p>
+      <div class="style-box">
+        <div class="style-box-item">
+          <div class="style-item-title" :class="{ styleActive: prodId == 7 }" @click="styleChange(7)">
+            人物立体徽章
+          </div>
+          <div class="style-item-title" :class="{ styleActive: prodId == 8 }" @click="styleChange(8)">
+            宠物立体徽章
+          </div>
+        </div>
+      </div>
     </div>
-    <div style="height: 8px;background: #F2F2F2;" />
+    <div style="height: 8px;background: #F2F2F2;"></div>
     <div class="step-container" v-if="trialCode == false">
       <div class="step-item active">
         <div class="step-num">
@@ -508,75 +475,9 @@ onMounted(() => {
         <h5-cropper :option="option" @getbase64Data="getbase64Data" @getFile="getFile" @getblob='getBlob' ></h5-cropper>
       </div>
     </div>
-    <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;">温馨提示：请上传只有1-2人的照片</div>
-    <div class="style-section">
-      <div class="style-title">
-        风格样式
-      </div>
-      <div class="style-list">
-        <!-- <div class="style-item" @click="checkId = 0">
-          <img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒">
-          <div class="style-label">
-            随机风格盲盒
-          </div>
-          <span class="style-selected" v-if="checkId == 0" />
-        </div> -->
-        <div class="style-item" v-for="item in kindList" :key="item.id" @click="checkId = item.id">
-          <img class="style-img" :src="item.path" :alt="item.name">
-          <div class="style-label">
-            {{ item.name }}
-          </div>
-          <span class="style-selected" v-if="item.id == checkId" />
-        </div>
-      </div>
-    </div>
-    <div class="bg-style-section">
-      <div class="bg-style-header">
-        <span class="bg-style-title">背景样式</span>
-        <span class="bg-style-desc disabled" @click="show = true">
-          <van-icon name="question-o" size="16px" />
-          <span class="iconfont" style="margin-left:5px;font-size:14px;vertical-align:middle;">背景样式说明</span>
-        </span>
-      </div>
-      <div class="bg-style-tabs">
-        <button
-          class="bg-style-tab" :class="isBgShow == true ? 'active' : ''"
-          type="button" @click="isBgShow = true"
-        >
-          照片原图背景
-        </button>
-        <button
-          class="bg-style-tab" :class="isBgShow == false ? 'active' : ''"
-          type="button" @click="isBgShow = false"
-        >
-          补充背景照片
-        </button>
-      </div>
-      <div v-if="isBgShow == true" class="bg-style-tip">
-        选择该选项设计的徽章会根据上传的肖像照片背景进行生成效果
-      </div>
-      <div v-if="isBgShow == false" class="bg-style-tip">
-        选择该选项需要额外上传一张照片作为背景
-      </div>
-    </div>
-    <div class="bg-photo-upload-section" v-if="isBgShow == false">
-      <div class="bg-photo-upload-header">
-        <span>补充背景照片</span>
-      </div>
-      <div class="bg-photo-upload-area">
-        <div v-if="!imgBgUrl" class="bg-photo-upload-label">
-          <div class="bg-photo-upload-box">
-            <div class="bg-photo-upload-plus">+</div>
-            <div class="bg-photo-upload-text">上传照片</div>
-          </div>
-        </div>
-        <img v-if="pictureBg" class="bg-photo-upload-img" :src="pictureBg" alt="">
-        <div class="bg-photo-upload-label-1">
-          <h5-cropper :option="options" @getbase64Data="getBgbase64Data" @getFile="getFile" @getblob='getBlobBg'></h5-cropper>
-        </div>
-      </div>
-    </div>
-    <div style="height: 90px;" />
+    <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7">温馨提示：请上传只有1-2人的照片</div>
+    <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 8">温馨提示：请上传只有1-3只宠物的照片</div>
+    <div style="height: 90px;"></div>
     <div class="design-action-bar">
       <div class="design-left">
         <img class="design-leaf-icon" width="18" height="18" src="@/assets/badge/leaf.png" alt="">
@@ -589,47 +490,6 @@ onMounted(() => {
       </button>
     </div>
   </div>
-  <van-action-sheet v-model:show="show" title="背景样式说明" :close-on-click-overlay="true" closeable>
-    <div style="padding: 24px 16px;">
-      <div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">
-        照片自有背景
-      </div>
-      <div style="font-size: 12px; color: #888; margin-bottom: 12px;">
-        选择该选项设计的徽章会根据上传的人像照片背景进行生成效果
-      </div>
-      <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
-        <img :src="caseList[2].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;">
-        <span style="font-size: 24px; color: #bbb; margin-right: 12px;">
-          <van-icon name="arrow" />
-        </span>
-        <img :src="caseList[3].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
-      </div>
-      <div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">
-        补充背景照片
-      </div>
-      <div style="font-size: 12px; color: #888; margin-bottom: 12px;">
-        选择该选项需要额外上传一张照片作为背景
-      </div>
-      <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
-        <img :src="caseList[0].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;">
-        <span style="font-size: 24px; color: #bbb; margin-right: 12px;">
-          <van-icon name="plus" />
-        </span>
-        <img :src="caseList[1].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
-      </div>
-      <div style="font-size: 24px; color: #bbb;text-align: center;">
-        <van-icon name="arrow-down" />
-      </div>
-      <div style="display: flex; align-items: center; justify-content: center; margin-top: 12px;">
-        <img :src="caseList[4].path" style="width: 120px; height: 120px; border-radius: 16px; object-fit: cover;">
-      </div>
-      <div style="margin-top: 32px; text-align: center;">
-        <button style="width: 90%; height: 44px; background: linear-gradient(90deg, #d6f5b7 0%, #50cf54 100%); border: none; border-radius: 22px; color: #222; font-size: 18px; font-weight: bold; cursor: pointer;" @click="show = false">
-          我已了解
-        </button>
-      </div>
-    </div>
-  </van-action-sheet>
 
   <van-action-sheet v-model:show="imgShow" title="图片上传指南" :close-on-click-overlay="true" closeable>
     <div style="padding: 0 16px 24px 16px;">
@@ -1153,4 +1013,37 @@ onMounted(() => {
     padding-bottom: 120px;
   }
 }
+.order-type-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+  border-radius: 12px;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+.style-box {
+  padding: 0 16px;
+}
+.style-box-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 12px;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+.style-item-title {
+  width: 48%;
+  text-align: center;
+  padding: 10px 0;
+  border-radius: 12px;
+  color: #333;
+  font-size: 14px;
+  background: #f5f5f5;
+}
+.style-item-title.styleActive {
+  background: #50cf54;
+  color: #fff;
+}
 </style>