防止重复点击

src/views/badge/orderDetail.vue

@@ -60,7 +60,7 @@
         </div>
         <div class="product-row">
           <span class="product-label">购买时间</span>
-          <span class="product-value">{{order.pay_at || '未支付'}}</span>
+          <span class="product-value">{{order.pay_at}}</span>
         </div>
       </div>
     </div>

src/views/badge/preview.vue

@@ -16,7 +16,7 @@
         <div class="step-num">2</div>
         <div class="step-content">
           <div class="step-title">确认下单</div>
-          <div class="step-desc">选择一个你喜欢的设计</div>
+          <div class="step-desc">选择一个你喜欢的效果图下单</div>
         </div>
       </div>
     </div>
@@ -49,8 +49,8 @@
       </div>
     </div>
     <div class="info-desc">
-      下单后如对排版要求有变更生产发货。<br>
-      实物3D打印色彩与图片有自然色差，如对产品有疑问，可以联系客服咨询。
+      下单后预计需要7天完成生产发货。<br>
+      实物3D打印色彩与图片有合理色差，如对产品有疑问，可以联系客服咨询。
     </div>
     <div style="padding: 0 16px;">
       <van-divider />
@@ -90,7 +90,7 @@
         <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;">
+          <span class="style-selected" v-if="checkId == 0" style="display: inline-block;">
             <van-icon name="checked" color="#50cf54" size="21px" />
           </span>
         </div>
@@ -305,12 +305,15 @@ const changeValue = (value: number) => {
 }
 
 const key = ref(0)
+const loading = ref(false)
 const confirm = () => {
+  if (loading.value) return
   console.log('confirm')
   if (payAmount.value <= 0) {
     showToast('请先选择下单数量')
     return
   }
+  loading.value = true
   const parms = {
     pid: pid.value,
     key: key.value,
@@ -332,8 +335,8 @@ const confirm = () => {
       message: err.message,
       duration: 2000,
     })
-  }).finally((err) => {
-    
+  }).finally(() => {
+    loading.value = false
   })
 }
 
@@ -508,6 +511,7 @@ onUnmounted(() => {
 .step-content {
   display: flex;
   flex-direction: column;
+  height: 48px;
 }
 .step-item.active .step-title {
   color: #000;
@@ -519,7 +523,7 @@ onUnmounted(() => {
   font-size: 13px;
 }
 .step-title {
-  font-size: 15px;
+  font-size: 16px;
   color: #808080;;
 }
 .step-desc {
@@ -540,7 +544,7 @@ onUnmounted(() => {
 .progress-section-img {
   width: 80vw;
   height: 80vw;
-  border-radius: 12px;
+  border-radius: 50%;
 }
 .progress-bar-bg {
   width: 70%;
@@ -731,7 +735,7 @@ onUnmounted(() => {
 .style-item .style-selected {
   position: absolute;
   right: 4px;
-  bottom: 30px;
+  bottom: 25px;
   width: 20px;
   height: 20px;
   border-radius: 50%;