单图徽章代码提交

components.d.ts

@@ -27,6 +27,7 @@ declare module '@vue/runtime-core' {
     VanGridItem: typeof import('vant/es')['GridItem']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
+    VanLoading: typeof import('vant/es')['Loading']
     VanStepper: typeof import('vant/es')['Stepper']
     VanSwipe: typeof import('vant/es')['Swipe']
     VanSwipeItem: typeof import('vant/es')['SwipeItem']

src/api/badge.ts

@@ -16,14 +16,22 @@ export const getKindList = (params: any) => {
   })
 }
 
-// 获取上传图片地址
+// 获取上传pid
-export const getImageUrl = (params: any) => {
+export const getPid = (params: any) => {
-  return request('images/uploadUrl', {
+  return request('images/pid', {
     method: 'GET',
     params,
   })
 }
 
+// 生成的图片记录
+export const createLog = (data: any) => {
+  return request('images/createLog', {
+    method: 'POST',
+    data,
+  })
+}
+
 // 获取图片
 export const getImageList = (params: any) => {
   return request('images/getList', {
@@ -56,9 +64,42 @@ export const getOrderDetail = (params: any) => {
   })
 }
 
+// 推送生成效果图
 export const putMOdeling = (data: any) => {
   return request('images/putModeling', {
     method: 'POST',
     data,
   })
 }
+
+// 获取尺寸剩余次数
+export const getOrderPrice = (params: any) => {
+  return request('orders/price', {
+    method: 'GET',
+    params,
+  })
+}
+
+// 获取对比原图
+export const getCompareImage = (params: any) => {
+  return request('images/getImagesLogDetail', {
+    method: 'GET',
+    params,
+  })
+}
+
+// 获取统计数量
+export const getOrderStat = (params: any) => {
+  return request('orders/stat', {
+    method: 'GET',
+    params,
+  })
+}
+
+// 确认下单
+export const creatOrder = (data: any) => {
+  return request('orders/create', {
+    method: 'POST',
+    data,
+  })
+}

src/router/index.ts

@@ -34,6 +34,10 @@ router.beforeEach((_to, _from, next) => {
   // const tokenStore = useTokenStore()
   const store = useStore()
   const code = _to.query.code
+  if (code) {
+    localStorage.setItem('code', code as string);
+  }
+  console.log('code===>', code);
   if (code) {
     let url = store.redirectUrl()
 

src/utils/request.ts

@@ -49,11 +49,12 @@ const errorHandler = (error: RequestError): Promise<any> => {
 
 // 请求拦截器
 const requestHandler = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig> => {
-  const savedToken = localStorage.get(STORAGE_TOKEN_KEY)
+  // const savedToken = localStorage.get(STORAGE_TOKEN_KEY)
   // 如果 token 存在
+  const code = localStorage.get('code')
   // 让每个请求携带自定义 token, 请根据实际情况修改
-  if (savedToken)
+  if (code)
-    config.headers[REQUEST_TOKEN_KEY] = savedToken
+    config.headers['Authorization'] = code
 
   return config
 }

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;
+  pictureBg.value = data;
-  console.log('背景图片地址', 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">
+        <div class="style-item" v-for="item in kindList" :key="item.id" @click="checkId = item.id">
-          <img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫">
+          <img class="style-img" :src="item.path" :alt="item.name">
           <div class="style-label">
-            Q版国风动漫
+            {{ item.name }}
           </div>
-          <span class="style-selected" />
+          <span class="style-selected" v-if="item.id == checkId" />
-        </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" />
         </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;">
+        <img :src="sundryList[0].path" alt="照片上传指南" style="width: 90vw; 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>
       </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 {

src/views/badge/myOrder.vue

@@ -5,12 +5,8 @@
     </div>
     <div class="order-list">
       <div class="order-item" @click="OrderDetail(item.id)" v-for="item in orders" :key="item.id">
-        <img class="order-img" src="@/assets/badge/suiji.png" alt="order1" />
+        <img class="order-img" :src="item.path" alt="order1" />
-        <span class="order-status status-processing">生产中</span>
+        <span class="order-status status-processing">{{ getStatus(item.status) }}</span>
-      </div>
-      <div class="order-item">
-        <img class="order-img" src="@/assets/badge/suiji.png" alt="order2" />
-        <span class="order-status status-finished">已完成</span>
       </div>
     </div>
   </div>
@@ -32,6 +28,7 @@ function getOrder() {
   badgeApi.getMyOrder({
     page: page.value,
     pageSize: 10,
+    status: 0,
   }).then(res => {
     if(page.value === 1) {
       orders.value = res.data.list
@@ -59,6 +56,19 @@ function OrderDetail(id: number) {
     },
   })
 }
+function getStatus(status: number) {
+  if(status == 1) {
+    return '待支付'
+  } else if(status == 2) {
+    return '已取消'
+  } else if(status == 100) {
+    return '生产中'
+  } else if(status == 200) {
+    return '待收货'
+  } else if(status == 300) {
+    return '已完成'
+  }
+}
 </script>
 <style scoped>
   .header {

src/views/badge/orderDetail.vue

@@ -5,11 +5,11 @@
     </div>
     <div class="order-status">
       <div class="avatar-wrapper">
-        <img class="avatar-img" src="@/assets/badge/suiji.png" alt="生产中" />
+        <img class="avatar-img" :src="order.path" :alt="order.kind_name" />
       </div>
     </div>
     <div class="status-info">
-      <div class="status-title">生产中</div>
+      <div class="status-title">{{ getStatus(order.status) }}</div>
       <div class="status-desc">
         下单后预计需要7天完成生产发货。如对产品有疑问，可以联系客服咨询。
       </div>
@@ -26,18 +26,18 @@
         </div>
         <div class="product-row">
       <span class="product-label">尺寸</span>
-      <span class="product-value">5cm</span>
+      <span class="product-value">{{order.model_size}}</span>
         </div>
         <div class="product-row">
       <span class="product-label">购买数量</span>
-      <span class="product-value">1</span>
+      <span class="product-value">{{order.count}}</span>
         </div>
       </div>
     </div>
-    <div style="padding: 0 16px;">
+    <!-- <div style="padding: 0 16px;">
       <van-divider />
-    </div>
+    </div> -->
-    <div class="address-info" style="padding: 0 16px;">
+    <!-- <div class="address-info" style="padding: 0 16px;">
       <div class="address-title">收货信息</div>
       <div class="address-row">
         <img class="address-img" src="@/assets/badge/location.png" alt="" >
@@ -47,7 +47,7 @@
       <div class="address-detail">
         详细地址详细地址详细地址详细地址详细地址详细地址
       </div>
-    </div>
+    </div> -->
     <div style="padding: 0 16px;">
       <van-divider />
     </div>
@@ -56,11 +56,11 @@
       <div class="product-details">
         <div class="product-row">
           <span class="product-label">购买订单id</span>
-          <span class="product-value">O98462</span>
+          <span class="product-value">{{order.sw_oid}}</span>
         </div>
         <div class="product-row">
           <span class="product-label">购买时间</span>
-          <span class="product-value">2025-03-24 16:12:46</span>
+          <span class="product-value">{{order.pay_at || '未支付'}}</span>
         </div>
       </div>
     </div>
@@ -83,12 +83,25 @@ function getOrderDetail() {
   badgeApi.getOrderDetail({
     id: id.value,
   }).then(res => {
-    order.value = res.data
+    order.value = res
   })
 }
 const router = useRouter();
 function goBack() {
-  router.push('/badge/myOrder');
+  router.back()
+}
+function getStatus(status: number) {
+  if(status == 1) {
+    return '待支付'
+  } else if(status == 2) {
+    return '已取消'
+  } else if(status == 100) {
+    return '生产中'
+  } else if(status == 200) {
+    return '待收货'
+  } else if(status == 300) {
+    return '已完成'
+  }
 }
 </script>
 <style scoped>

src/views/badge/preview.vue

@@ -3,7 +3,7 @@
     <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" /> 效果预览</span>
     </div>
     <div class="step-container">
       <div class="step-item">
@@ -28,7 +28,11 @@
       <div class="progress-desc">总计大约需要60秒，请耐心等待...</div>
     </div>
     <div v-else class="progress-section">
-      <img class="progress-section-img" :src="imageUrl" alt="">
+      <van-swipe v-model="currentIndex" class="progress-section-img" :autoplay="3000" :show-indicators="false">
+        <van-swipe-item v-for="item in imageList" :key="item.id">
+          <img class="progress-section-img" :src="item.origin_url" alt="">
+        </van-swipe-item>
+      </van-swipe>
     </div>
     <div class="info-section">
       <div class="info-item">
@@ -53,24 +57,24 @@
     </div>
     <div class="order-section">
       <div class="order-title">订购数量</div>
-      <div class="order-item">
+      <div class="order-item" v-for="item in sizeList" :key="item.id">
-        <span class="order-size">4cm</span>
+        <span class="order-size">{{ item.size }}</span>
-        <span class="order-free">(剩余兑换：1)</span>
+        <span class="order-free">(剩余兑换：{{ item.count }})</span>
         <div class="order-ctrl">
-          <van-stepper v-model="value" @change="changeValue" />
+          <van-stepper v-model="value" :min="0" :max="item.count" @change="changeValue" />
         </div>
       </div>
-      <div class="order-item">
+      <!-- <div class="order-item">
         <span class="order-size">5cm</span>
         <span class="order-free">(剩余兑换：2)</span>
         <div class="order-ctrl">
           <van-stepper v-model="value" />
         </div>
-      </div>
+      </div> -->
     </div>
     <div class="confirm-box">
       <div class="action-section">
-        <button @click="showReload = true" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
+        <button @click="reload" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
         <button @click="compare" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> 前后对比</button>
         <button @click="save" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> 保存图片</button>
       </div>
@@ -82,45 +86,23 @@
   <van-action-sheet v-model:show="showReload" title="风格样式选择" :close-on-click-overlay="true" closeable>
     <div class="style-selection">
       <div class="style-grid">
-        <div class="style-item" :class="{'active': style == 'suiji'}" @click="changeStyle('suiji')">
+        <div class="style-item" :class="{'active': checkId == 0}" @click="checkId = 0">
           <img src="@/assets/badge/suiji.png" alt="随机风格盲盒" class="style-img">
           <div class="style-label">随机风格盲盒</div>
           <span class="style-selected" v-if="style == 'suiji'" style="display: inline-block;">
             <van-icon name="checked" color="#50cf54" size="21px" />
           </span>
         </div>
-        <div class="style-item" :class="{'active': style == 'qban'}" @click="changeStyle('qban')">
+        <div class="style-item" :class="{'active': item.id == checkId}" v-for="item in kindList" :key="item.id" @click="checkId = item.id">
-          <img src="@/assets/badge/suiji.png" alt="Q版国风动漫" class="style-img">
+          <img :src="item.path" :alt="item.name" class="style-img">
-          <div class="style-label">Q版国风动漫</div>
+          <div class="style-label">{{item.name}}</div>
-          <span class="style-selected" v-if="style == 'qban'">
+          <span class="style-selected" v-if="item.id == checkId">
             <van-icon name="checked" color="#50cf54" size="21px" />
           </span>
         </div>
-        <div class="style-item" :class="{'active': style == 'qkant'}" @click="changeStyle('qkant')">
-          <img src="@/assets/badge/suiji.png" alt="Q版卡通" class="style-img">
-          <div class="style-label">Q版卡通</div>
-          <span class="style-selected" v-if="style == 'qkant'">
-            <van-icon name="checked" color="#50cf54" size="21px" />
-          </span>
-        </div>
-        <div class="style-item" :class="{'active': style == 'babifeng'}" @click="changeStyle('babifeng')">
-          <img src="@/assets/badge/suiji.png" alt="芭比风" class="style-img">
-          <div class="style-label">芭比风</div>
-          <span class="style-selected" v-if="style == 'babifeng'">
-            <van-icon name="checked" color="#50cf54" size="21px" />
-          </span>
-        </div>
-        <div class="style-item">
-          <img src="@/assets/badge/suiji.png" alt="迪士尼皮克斯" class="style-img">
-          <div class="style-label">迪士尼皮克斯</div>
-        </div>
-        <div class="style-item">
-          <img src="@/assets/badge/suiji.png" alt="写实肖像" class="style-img">
-          <div class="style-label">写实肖像</div>
-        </div>
       </div>
       <div class="confirm-wrapper">
-        <button class="confirm-button">
+        <button class="confirm-button" @click="sureReload">
           确认再次生成
         </button>
       </div>
@@ -131,13 +113,13 @@
     <div style="padding: 16px;">
       <div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
         <div style="text-align: center;">
-          <img src="@/assets/badge/suiji.png" alt="随机风格盲盒" style="width: 120px; height: 120px; border-radius: 8px;">
+          <img :src="compareList.origin_path" :alt="compareList.kind_name" style="width: 120px; 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="@/assets/badge/suiji.png" alt="随机风格盲盒" style="width: 120px; height: 120px; border-radius: 8px;">
+          <img :src="imageUrl" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
         </div>
       </div>
       <div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
@@ -152,13 +134,13 @@
     <div style="padding: 16px;">
       <div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
         <div style="text-align: center;">
-          <img src="@/assets/badge/suiji.png" alt="背景对比图" style="width: 120px; height: 120px; border-radius: 8px;">
+          <img :src="compareList.origin_path" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
         </div>
         <div style="font-size: 24px; color: #333;">
           <van-icon name="plus" size="20px" />
         </div>
         <div style="text-align: center;">
-          <img src="@/assets/badge/suiji.png" alt="背景对比图" style="width: 120px; height: 120px; border-radius: 8px;">
+          <img :src="compareList.extend_path" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
         </div>
       </div>
       <div style="font-size: 24px; color: #333;display: flex; align-items: center; justify-content: center; margin: 16px 0;">
@@ -166,7 +148,7 @@
       </div>
       <div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
         <div style="text-align: center;">
-          <img src="@/assets/badge/suiji.png" alt="背景对比图" style="width: 120px; height: 120px; border-radius: 8px;">
+          <img :src="imageUrl" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
         </div>
       </div>
       <div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
@@ -179,16 +161,58 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoutimporter } from 'vue-router';
+import { showSuccessToast } from 'vant';
 import * as badgeApi from '@/api/badge'
 const router = useRouter();
 const value = ref(0);
 const showReload = ref(false)
 const showCompare = ref(false)
 const showBgCompare = ref(false)
+const currentIndex = ref(0)
+const imageList = ref([])
 function compare() {
-  // showCompare.value = true
+  getCompareImage()
-  showBgCompare.value = true
+}
+const kindList = ref([])
+const checkId = ref(0)
+function reload() {
+  badgeApi.getKindList({
+    page: 1,
+    size: 20,
+    scale: 20,
+  }).then((res: any) => {
+    const data = res || []
+    kindList.value = data.list
+  }).catch((err) => {
+    
+  }).finally((err) => {
+    
+  })
+  showReload.value = true
+}
+function sureReload() {
+  console.log('sureReload')
+  imageUrl.value = '';
+  group.value = newGroup.value
+  badgeApi.createLog({
+    pid: pid.value,
+    kind_id: checkId.value,
+    group: group.value,
+  }).then((res: any) => {
+    console.log('createLog', res)
+    showReload.value = false
+    progressTimer.value = null
+    getImageList()
+    progressList()
+    timer.value = setInterval(() => {
+      getImageList()
+    }, 10000)
+  }).catch((err) => {
+    console.log('createLog', err)
+  }).finally((err) => {
+    showReload.value = false
+  })
 }
 function save() {
   // 下载图片到本地
@@ -207,20 +231,66 @@ function save() {
     showReload.value = true
   }
 }
-const style = ref('suiji')
+const compareList = ref({})
-function changeStyle(style: string) {
+function getCompareImage() {
-  console.log(style)
+  badgeApi.getCompareImage({
-  style.value = style
+    pid: pid.value,
-}
+    group: group.value,
-function confirm() {
+  }).then((res: any) => {
-  console.log('confirm')
+    console.log('getCompareImage', res)
+    if (res.extend_value == -1) {
+      showCompare.value = true
+      compareList.value = res
+    } else {
+      showBgCompare.value = true
+      compareList.value = res
+    }
+  }).catch((err) => {
+    console.log('getCompareImage', err)
+  }).finally((err) => {
+    
+  })
 }
 function goBack() {
-  router.push('/badge');
+  router.back()
 }
 
+const sizeList = ref([])
+const getSizeList = () => {
+  badgeApi.getOrderPrice({}).then((res: any) => {
+    sizeList.value = res
+  })
+}
+
+const payAmount = ref(0)
 const changeValue = (value: number) => {
   console.log(value)
+  payAmount.value = value
+}
+
+const key = ref(0)
+const confirm = () => {
+  console.log('confirm')
+  const parms = {
+    pid: pid.value,
+    key: key.value,
+    pay_amount: payAmount.value,
+    products: sizeList.value
+  }
+  badgeApi.creatOrder(parms).then((res: any) => {
+    console.log('creatOrder', res)
+    showSuccessToast({
+      message: '下单成功',
+      duration: 2000,
+    })
+    router.push({
+      path: '/badge/myOrder'
+    })
+  }).catch((err) => {
+    console.log('creatOrder', err)
+  }).finally((err) => {
+    
+  })
 }
 
 const imageUrl = ref('')
@@ -238,19 +308,21 @@ const progressList = () => {
       if (progress.value < 90) {
         progress.value += 1
       }
-    }, 500)
+    }, 300)
   }
 }
 
+const newGroup = ref(0)
 const getImageList = () => {
-  badgeApi.getKindList({
+  badgeApi.getImageList({
-    pid: 0, 
+    pid: pid.value, 
     group: group.value
   }).then((res: any) => {
+    console.log('getImageList', res)
     const data = res || []
-    flag.value = data.flag || 1
+    flag.value = data.flag
-    
+    if (data.flag === 2) {
-    if (flag.value === 2) {
+      newGroup.value = data.next_group
       // 清除轮询和进度条计时器
       clearInterval(timer.value)
       clearInterval(progressTimer.value)
@@ -259,7 +331,9 @@ const getImageList = () => {
       progress.value = 100
       
       // 显示图片
-      imageUrl.value = data.url
+      imageUrl.value = data.list[0].origin_url
+      imageList.value = data.list
+      key.value = data.list[0].key
     }
   }).catch((err) => {
     clearInterval(progressTimer.value)
@@ -269,9 +343,16 @@ const getImageList = () => {
   })
 }
 
+const pid = ref(0)
+const route = useRoute()
 onMounted(() => {
+  pid.value = route.query.pid
+  group.value = route.query.group
+  // pid.value = 281505;
+  // group.value = 1;
   getImageList()
   progressList()
+  getSizeList()
   timer.value = setInterval(() => {
     getImageList()
   }, 10000)

src/views/badge/record.vue

@@ -6,17 +6,14 @@
     <div class="record-container">
       <div class="record-note">注：可点击效果图进行下单打印</div>
       <div class="record-images">
-        <div class="record-image-item">
+        <div class="record-image-item" v-for="item in images" :key="item.id">
-          <img src="@/assets/badge/suiji.png" alt="效果图" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
+          <block v-if="item.status == 1" @click="goPreview(item)">
+            <img :src="item.path" :alt="item.name" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
+            <div class="record-image-item-shadow"></div>
+          </block>
+          <div v-else class="record-image-item-loading" stop-click>
+            设计失败
           </div>
-        <div class="record-image-item">
-          <img src="@/assets/badge/suiji.png" alt="效果图" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
-        </div>
-        <div class="record-image-item">
-          <img src="@/assets/badge/suiji.png" alt="效果图" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
-        </div>
-        <div class="record-image-item">
-          <img src="@/assets/badge/suiji.png" alt="效果图" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
         </div>
       </div>
     </div>
@@ -43,12 +40,12 @@ function getList() {
     pageSize: 10,
   }).then(res => {
     if(page.value === 1) {
-      images.value = res.data.list
+      images.value = res.list
     } else {
-      images.value.push(...res.data.list)
+      images.value.push(...res.list)
     }
     
-    if(res.data.list.length < 10) {
+    if(res.list.length < 10) {
       finished.value = true
     } else {
       page.value++
@@ -58,6 +55,15 @@ function getList() {
   })
 }
 
+function goPreview(item) {
+  router.push({
+    path: '/badge/preview',
+    query: {
+      pid: item.sw_pid,
+      group: item.group_count,
+    },
+  })
+}
 function onLoad() {
   getList()
 }
@@ -98,9 +104,10 @@ function goBack() {
     width: 100%;
     padding-bottom: 100%;
     position: relative;
-    border-radius: 50%;
     overflow: hidden;
     cursor: pointer;
+    background: #f5f5f5;
+    border-radius: 12px;
   }
   .record-image-item img {
     position: absolute;
@@ -108,6 +115,31 @@ function goBack() {
     left: 0;
     width: 100%;
     height: 100%;
+    border-radius: 50%;
     object-fit: cover;
   }
+  .record-image-item-shadow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    box-shadow: inset 2px 2px 4px  rgba(255, 255, 255, 0.5),inset -2px -2px 4px  rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+  }
+  .record-image-item-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f5f5f5;
+    border-radius: 50%;
+    font-size: 16px;
+    color: #999;
+  }
 </style>