单图徽章代码提交

src/views/badge/index.vue

@@ -2,6 +2,7 @@
 import { useRouter } from 'vue-router'
 import H5Cropper  from 'vue-cropper-h5'
 import "vue-cropper-h5/dist/style.css"
+import { showLoadingToast, showToast, closeToast, showFailToast, showSuccessToast } from 'vant';
 import * as badgeApi from '@/api/badge'
 import { onMounted, ref } from 'vue';
 
@@ -13,23 +14,220 @@ const options = ref({})
 const imgurl = ref('')
 const imgBgUrl = ref('')
 const isBgShow = ref(true)
+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) => {
+    sizeList.value = res
+  })
+}
+
+const orderStat = ref({})
+const getOrderStat = () => {
+  badgeApi.getOrderStat({}).then((res: any) => {
+    orderStat.value = res
+  })
+}
+
+const isLoading = ref(false)
+
 function goToPreview() {
-  router.push('/badge/preview')
+  if (isLoading.value) {
+    return
+  }
+  console.log('goToPreview')
+  if (!imgurl.value) {
+    showToast('请先上传照片')
+    return
+  }
+  if (isBgShow.value == false && !imgBgUrl.value) {
+    showToast('请先上传背景照片')
+    return
+  }
+  if (orderStat.remain_count <= 0) {
+    showToast('剩余次数不足')
+    return
+  }
+  isLoading.value = true
+  getPid()
 }
+const picture = ref(null)
 function getbase64Data(data) {
+  picture.value = data;
+}
+function getBlob(data) {
+  console.log('getBlob', data)
+  if (data.size > 1024 * 1024 * 10) {
+    showToast('照片大小不能超过10M')
+    return
+  }
   imgurl.value = data;
-  console.log('图片地址', data)
 }
+const pictureBg = ref(null)
 function getBgbase64Data(data) {
-  imgBgUrl.value = data;
-  console.log('背景图片地址', data)
+  pictureBg.value = data;
 }
+function getBlobBg(data) {
+  console.log('getBlobBg', data)
+  if (data.size > 1024 * 1024 * 10) {
+    showToast('照片大小不能超过10M')
+    return
+  }
+  imgBgUrl.value = data;
+}
+const getRandomNumber = (min: number, max: number) => {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+// 获取Pid
+const pid = ref('')
+const kindId = ref(0)
+const getPid = async () => {
+  showLoadingToast({
+    message: '上传中...',
+    forbidClick: true,
+  })
+  kindId.value = checkId.value == 0 ? getRandomNumber(kindList.value[0].id, kindList.value[kindList.value.length - 1].id) : checkId.value
+  const params = {
+    extend_value: isBgShow.value ? -1 : 0,
+    kind_id: kindId.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,
+        })
+      }
+    }
+  } catch (err) {
+    isLoading.value = false
+    console.log(err)
+  } finally {
+    isLoading.value = false
+    closeToast()
+  }
+}
+// 上传到OSS
+const pendingUploads = ref(0)
+const isAnotherAPICalled = ref(false)
+const sendToOss = async (src: string, url: string) => {
+  try {
+    pendingUploads.value++
+    const response = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'image/jpeg'
+      },
+      body: src
+    })
+
+    if (!response.ok) {
+      throw new Error('Upload failed')
+    }
+
+    console.log('图片上传成功--------', response)
+    
+    if (--pendingUploads.value === 0 && !isAnotherAPICalled.value) {
+      const params = {
+        pid: pid.value,
+        kind_id: kindId.value,
+        extend_value: isBgShow.value ? -1 : 0,
+        group: 1,
+      }
+      badgeApi.putMOdeling(params).then((res: any) => {
+        console.log('putModeling', res)
+        createLog()
+      }).catch((err) => {
+        console.log('putModeling', err)
+      }).finally(() => {
+        closeToast()
+      })
+    }
+
+  } catch (err) {
+    closeToast()
+    pendingUploads.value--
+    showFailToast({
+      message: '照片上传失败',
+      duration: 2000,
+    })
+    console.log("uploadImage----err", err)
+  }
+}
+const createLog = () => {
+  const params = {
+    pid: pid.value,
+    group: 1,
+    kind_id: kindId.value,
+  }
+  badgeApi.createLog(params).then((res: any) => {
+    console.log('createLog', res)
+    closeToast()
+    showSuccessToast({
+      message: '照片上传成功',
+      duration: 2000,
+    })
+    setTimeout(() => {
+      router.push({
+        path: '/badge/preview',
+        query: {
+          pid: pid.value,
+          group: 1,
+        },
+      })
+    }, 1000);
+  }).catch((err) => {
+    console.log('getGenImages', err)
+    showFailToast({
+      message: '照片上传失败',
+      duration: 2000,
+    })
+  }).finally(() => {
+    closeToast()
+  })
+}
+
+
+const kindList = ref([])
+const checkId = ref(0)
 const getKindList = () => {
   badgeApi.getKindList({
     page: 1,
@@ -37,12 +235,14 @@ const getKindList = () => {
     scale: 20,
   }).then((res: any) => {
     const data = res || []
+    kindList.value = data.list
   }).catch((err) => {
     
   }).finally((err) => {
     
   })
 }
+const sundryList = ref([])
 const getSundryList = () => {
   badgeApi.getSundryList({
     page: 1,
@@ -50,12 +250,14 @@ const getSundryList = () => {
     group: 'gp',
   }).then((res: any) => {
     const data = res || []
+    sundryList.value = data.list
   }).catch((err) => {
     
   }).finally((err) => {
     
   })
 }
+const caseList = ref([])
 const getList = () => {
   badgeApi.getSundryList({
     page: 1,
@@ -64,6 +266,7 @@ const getList = () => {
     ids: '6,7,8,9,19'
   }).then((res: any) => {
     const data = res || []
+    caseList.value = data.list
   }).catch((err) => {
     
   }).finally((err) => {
@@ -74,6 +277,8 @@ onMounted(() => {
   getKindList()
   getSundryList()
   getList()
+  getOrderStat()
+  getSizeList()
 })
 </script>
 
@@ -84,22 +289,22 @@ onMounted(() => {
         剩余兑换数量
       </div>
       <div class="size-options">
-        <div class="size-item">
+        <div class="size-item" v-for="item in sizeList" :key="item.id">
           <div class="size-text">
-            4cm
+            {{ item.size }}
           </div>
           <div class="size-count">
-            （剩余兑换：1）
+            （剩余兑换：{{ item.count }}）
           </div>
         </div>
-        <div class="size-item">
+        <!-- <div class="size-item">
           <div class="size-text">
             5cm
           </div>
           <div class="size-count">
             （剩余兑换：2）
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="badge-info">
@@ -108,7 +313,7 @@ onMounted(() => {
           设计图集
         </div>
         <div class="badge-count">
-          8张
+          {{ orderStat.create_count }}张
         </div>
       </div>
       <div class="badge-item" @click="goToMyOrder">
@@ -116,7 +321,7 @@ onMounted(() => {
           我的订单
         </div>
         <div class="badge-count">
-          3笔
+          {{ orderStat.order_count }}笔
         </div>
       </div>
     </div>
@@ -150,7 +355,7 @@ onMounted(() => {
       </div>
     </div>
     <div class="photo-upload-body">
-      <div v-if="!imgurl" class="photo-upload-box">
+      <div v-if="!picture" class="photo-upload-box">
         <div class="photo-upload-header" @click="imgShow = true">
           <van-icon name="question-o" size="16px" class="photo-upload-guide-icon" />
           <span class="photo-upload-guide-text">图片上传指南</span>
@@ -170,71 +375,30 @@ onMounted(() => {
           请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务
         </div>
       </div>
-      <img class="photo-upload-img" v-if="imgurl" :src="imgurl" alt="" srcset="">
+      <img class="photo-upload-img" v-if="picture" :src="picture" alt="" srcset="">
       <div class="photo-upload-box-1">
-        <h5-cropper :option="option" @getbase64Data="getbase64Data"></h5-cropper>
+        <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">
+        <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" />
+          <span class="style-selected" v-if="checkId == 0" />
         </div>
-        <div class="style-item">
-          <img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫">
+        <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">
-            Q版国风动漫
+            {{ item.name }}
           </div>
-          <span class="style-selected" />
-        </div>
-        <div class="style-item">
-          <img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通">
-          <div class="style-label">
-            Q版卡通
-          </div>
-          <span class="style-selected" />
-        </div>
-        <div class="style-item">
-          <img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风">
-          <div class="style-label">
-            芭比风
-          </div>
-          <span class="style-selected" />
-        </div>
-        <div class="style-item">
-          <img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒">
-          <div class="style-label">
-            随机风格盲盒
-          </div>
-          <span class="style-selected" />
-        </div>
-        <div class="style-item">
-          <img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫">
-          <div class="style-label">
-            Q版国风动漫
-          </div>
-          <span class="style-selected" />
-        </div>
-        <div class="style-item">
-          <img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通">
-          <div class="style-label">
-            Q版卡通
-          </div>
-          <span class="style-selected" />
-        </div>
-        <div class="style-item">
-          <img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风">
-          <div class="style-label">
-            芭比风
-          </div>
-          <span class="style-selected" />
+          <span class="style-selected" v-if="item.id == checkId" />
         </div>
       </div>
     </div>
@@ -278,9 +442,9 @@ onMounted(() => {
             <div class="bg-photo-upload-text">上传照片</div>
           </div>
         </div>
-        <img v-if="imgBgUrl" class="bg-photo-upload-img" :src="imgBgUrl" alt="">
+        <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"></h5-cropper>
+          <h5-cropper :option="options" @getbase64Data="getBgbase64Data" @getFile="getFile" @getblob='getBlobBg'></h5-cropper>
         </div>
       </div>
     </div>
@@ -288,7 +452,7 @@ onMounted(() => {
     <div class="design-action-bar">
       <div class="design-left">
         <img class="design-leaf-icon" width="18" height="18" src="@/assets/badge/leaf.png" alt="">
-        <span class="design-remaining">剩余12次</span>
+        <span class="design-remaining">剩余{{ orderStat.remain_count }}次</span>
       </div>
       <button class="design-btn" @click="goToPreview">
         <span>开始设计</span>
@@ -305,11 +469,11 @@ onMounted(() => {
         选择该选项设计的徽章会根据上传的人像照片背景进行生成效果
       </div>
       <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
-        <img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;">
+        <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="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
+        <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;">
         补充背景照片
@@ -318,17 +482,17 @@ onMounted(() => {
         选择该选项需要额外上传一张照片作为背景
       </div>
       <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
-        <img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 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="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
+        <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="@/assets/badge/suiji.png" style="width: 120px; height: 120px; border-radius: 16px; object-fit: cover;">
+        <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">
@@ -341,44 +505,37 @@ onMounted(() => {
   <van-action-sheet v-model:show="imgShow" title="图片上传指南" :close-on-click-overlay="true" closeable>
     <div style="padding: 0 16px 24px 16px;">
       <div style="text-align: center;">
-        <img src="@/assets/badge/suiji.png" alt="照片上传指南" style="width: 220px; border-radius: 16px; margin-bottom: 16px;">
-      </div>
-      <div style="display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; margin-bottom: 16px;">
-        <span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">光线均匀</span>
-        <span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">照片清晰</span>
-        <span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">主体明确</span>
-        <span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">面部特征明显</span>
-        <span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">预留充足留白</span>
+        <img :src="sundryList[0].path" alt="照片上传指南" style="width: 90vw; border-radius: 16px; margin-bottom: 16px;">
       </div>
       <div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
         <div style="flex: 1; text-align: center;">
-          <img src="@/assets/badge/suiji.png" alt="多主体" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
+          <img :src="sundryList[1].path" alt="多主体" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
           <div style="font-size: 13px; color: #888; margin-top: 4px;">
             多主体
           </div>
         </div>
         <div style="flex: 1; text-align: center;">
-          <img src="@/assets/badge/suiji.png" alt="光线昏暗" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
+          <img :src="sundryList[2].path" alt="光线昏暗" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
           <div style="font-size: 13px; color: #888; margin-top: 4px;">
             光线昏暗
           </div>
         </div>
         <div style="flex: 1; text-align: center;">
-          <img src="@/assets/badge/suiji.png" alt="后侧面及背影" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
+          <img :src="sundryList[3].path" alt="后侧面及背影" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
           <div style="font-size: 13px; color: #888; margin-top: 4px;">
             后侧面及背影
           </div>
         </div>
       </div>
-      <div style="display: flex; justify-content: space-between; margin-bottom: 24px;">
+      <div style="display: flex; justify-content: space-around; margin-bottom: 24px;">
         <div style="flex: 1; text-align: center;">
-          <img src="@/assets/badge/suiji.png" alt="照片模糊" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
+          <img :src="sundryList[4].path" alt="照片模糊" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
           <div style="font-size: 13px; color: #888; margin-top: 4px;">
             照片模糊
           </div>
         </div>
         <div style="flex: 1; text-align: center;">
-          <img src="@/assets/badge/suiji.png" alt="照片留白过少" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
+          <img :src="sundryList[5].path" alt="照片留白过少" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
           <div style="font-size: 13px; color: #888; margin-top: 4px;">
             照片留白过少
           </div>
@@ -647,9 +804,8 @@ onMounted(() => {
   width: 23vw;
   height: 23vw;
   border-radius: 8px;
-  object-fit: cover;
-  background: #f5f5f5;
   border: 2px solid transparent;
+  object-fit: cover;
   transition: border 0.2s;
 }
 .style-item .style-selected {