单图徽章代码提交

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">
-        <span class="order-size">4cm</span>
-        <span class="order-free">(剩余兑换：1)</span>
+      <div class="order-item" v-for="item in sizeList" :key="item.id">
+        <span class="order-size">{{ item.size }}</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')">
-          <img src="@/assets/badge/suiji.png" alt="Q版国风动漫" class="style-img">
-          <div class="style-label">Q版国风动漫</div>
-          <span class="style-selected" v-if="style == 'qban'">
+        <div class="style-item" :class="{'active': item.id == checkId}" v-for="item in kindList" :key="item.id" @click="checkId = item.id">
+          <img :src="item.path" :alt="item.name" class="style-img">
+          <div class="style-label">{{item.name}}</div>
+          <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
-  showBgCompare.value = true
+  getCompareImage()
+}
+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')
-function changeStyle(style: string) {
-  console.log(style)
-  style.value = style
-}
-function confirm() {
-  console.log('confirm')
+const compareList = ref({})
+function getCompareImage() {
+  badgeApi.getCompareImage({
+    pid: pid.value,
+    group: group.value,
+  }).then((res: any) => {
+    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({
-    pid: 0, 
+  badgeApi.getImageList({
+    pid: pid.value, 
     group: group.value
   }).then((res: any) => {
+    console.log('getImageList', res)
     const data = res || []
-    flag.value = data.flag || 1
-    
-    if (flag.value === 2) {
+    flag.value = data.flag
+    if (data.flag === 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)