形状修改

src/views/badge/preview.vue

@@ -31,8 +31,8 @@
       <div class="progress-section-img" style="width: 320px;height: 320px;">
         <img v-if="shapeImage" class="box1-back-image" :src="shapeImage" style="width: 320px;height: 320px;"  alt="">
         <div class="box1-front-box" :style="getStyle">
-          <img class="box1-front-image" :class="{ 'box1-round-image': shapeId == 1 && shapeImage == '' }" :src="imageUrl" alt="">
-          <div class="box1-round-shadow" v-if="shapeId == 1 && shapeImage == ''" style="width: 320px;height: 320px;"></div>
+          <img class="box1-front-image" :src="imageUrl" alt="">
+          <!-- <div class="box1-round-shadow" v-if="shapeId == 1 && shapeImage == ''" style="width: 320px;height: 320px;"></div> -->
         </div>
         <div class="shape-text" :style="shapeTextStyle" v-if="shapeText">{{shapeText}}</div>
       </div>
@@ -63,19 +63,21 @@
       </div>
     </div>
     <div class="shape-body">
-      <div class="shape-type">
+      <!-- <div class="shape-type">
         <div class="shape-type-item" :class="{ 'shape-active': item.id == typeId }" v-for="item in typesList" :key="item.id" @click="typeChange(item.id)">{{item.name}}</div>
-      </div>
-      <div class="shape-box">
-        <div class="shape-item" v-for="item in shapeList" :key="item.id" @click="shapeChange(item)">
-          <div class="shape-item-list">
-            <img class="shape-item-image" :src="item.cover_path || imageUrl"/>
-            <van-icon v-if="item.id == shapeId" class="shape-icon" color="#15CF5F" name="checked" size="18px" />
+      </div> -->
+      <div class="shape-box" v-if="imageUrl">
+        <block v-for="item in shapeList" :key="item.id">
+          <div class="shape-item" @click="shapeChange(item)">
+            <div class="shape-item-list">
+              <img class="shape-item-image" :src="item.cover_path || imageUrl"/>
+              <van-icon v-if="item.id == shapeId" class="shape-icon" color="#15CF5F" name="checked" size="18px" />
+            </div>
+            <div class="shape-item-text">{{item.name}}</div>
           </div>
-          <div class="shape-item-text">{{item.name}}</div>
-        </div>
+        </block>
       </div>
-      <div class="shape-box-input" v-if="custom_switch == 1">
+      <div class="shape-box-input" v-if="imageUrl && custom_switch == 1">
         <input class="shape-box-input-text" type="text" placeholder="请输入文字" v-model="shapeText" @change="changeShapeText" @input="changeShapeText" @onBlur="changeShapeText" />
       </div>
     </div>
@@ -86,15 +88,17 @@
     <div style="padding: 0 16px;">
       <van-divider />
     </div>
-    <div class="order-section" v-if="trialCode == false">
+    <div class="order-section" v-if="trialCode == false && imageUrl">
       <div class="order-title">订购数量</div>
-      <div class="order-item" v-for="item in sizeList" :key="item.id">
-        <span class="order-size">{{ item.size }}</span>
-        <span class="order-free">(剩余兑换：{{ item.remaining }})</span>
-        <div class="order-ctrl">
-          <van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" />
+      <block v-for="item in sizeList" :key="item.id">
+        <div class="order-item" v-show="item.shape_id == shapeId">
+          <span class="order-size">{{ item.size }}</span>
+          <span class="order-free">(剩余兑换：{{ item.remaining }})</span>
+          <div class="order-ctrl">
+            <van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" />
+          </div>
         </div>
-      </div>
+      </block>
     </div>
     <div style="height: 110px;"></div>
     <div class="confirm-box">
@@ -250,9 +254,22 @@ function goBack() {
 }
 
 const sizeList = ref([])
+const shapeItem = ref({})
 const getSizeList = () => {
   badgeApi.getOrderPrice({}).then((res: any) => {
+    console.log('getSizeList', res);
     sizeList.value = res
+    sizeList.value.forEach((item: any) => {
+      if (item.shape_item) {
+        shapeList.value.push(item.shape_item)
+      } else {
+        showToast('该链接异常，请联系客服')
+        return
+      }
+    })
+    if (shapeList.value.length > 0) {
+      shapeChange(shapeList.value[0])
+    }
   })
 }
 
@@ -276,7 +293,7 @@ const confirm = () => {
   showConfirmDialog({
   title: '确认下单',
   message:
-    '请再次确认是否选择这个模型下单,一个链接只能下单一次。',
+    '请再次确认是否选择这个模型下单，下单后预计需要10天完成生产发货。如对产品有疑问，可以联系客服咨询。',
   })
   .then(() => {
     const parms = {
@@ -461,20 +478,20 @@ const getImageList = () => {
   })
 }
 
-const typeId = ref(1)
-const typesList = ref([])
-const getTypesList = () => {
-  badgeApi.getTypesList({}).then((res: any) => {
-    console.log('getTypesList', res)
-    typesList.value = res.list
-    typeId.value = res.list[0].id
-    getShapeList()
-  }).catch((err) => {
-    console.log('getTypesList', err)
-  }).finally((err) => {
+// const typeId = ref(1)
+// const typesList = ref([])
+// const getTypesList = () => {
+//   badgeApi.getTypesList({}).then((res: any) => {
+//     console.log('getTypesList', res)
+//     typesList.value = res.list
+//     typeId.value = res.list[0].id
+//     getShapeList()
+//   }).catch((err) => {
+//     console.log('getTypesList', err)
+//   }).finally((err) => {
     
-  })
-}
+//   })
+// }
 const shapeId = ref(1)
 const shapeImage = ref('')
 
@@ -483,7 +500,6 @@ const custom_switch = ref(0)
 const limitCount = ref(10)
 const getShapeList = () => {
   badgeApi.getShapeList({
-    type_id: typeId.value,
     prod_id: prodId.value
   }).then((res: any) => {
     console.log('getShapeList', res)
@@ -579,16 +595,21 @@ const calculateByteLength = (str: string) => {
   return len;
 }
 
-const typeChange = (id: number) => {
-  console.log('typeChange', id)
-  typeId.value = id;
-  shapeList.value = [];
-  shapeImage.value = '';
-  getStyle.value = '';
-  getShapeList()
-}
+// const typeChange = (id: number) => {
+//   console.log('typeChange', id)
+//   typeId.value = id;
+//   shapeList.value = [];
+//   shapeImage.value = '';
+//   getStyle.value = '';
+//   getShapeList()
+// }
 
 const shapeChange = (item: any) => {
+  sizeList.value.map((item: any) => {
+    if (item.shape_id !== item.id) {
+      item.count = 0
+    }
+  })
   shapeText.value = '';
   shapeId.value = item.id
   shapeImage.value = item.frame_path
@@ -644,7 +665,7 @@ onMounted(() => {
   // pid.value = 281505;
   // group.value = 1;
   // prodId.value = 7;
-  getTypesList()
+  // getTypesList()
   getImageList()
   progressList()
   getCompareImage()
@@ -1130,7 +1151,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  justify-content: space-between;
+  justify-content: flex-start;
 }
 .shape-title {
   padding-bottom: 12px;
@@ -1140,8 +1161,9 @@ onUnmounted(() => {
 .shape-item {
   position: relative;
   flex: 0 0 24%;
-  margin-right: calc(4% / 3);
+  /* margin-right: calc(4% / 3); */
   margin-bottom: calc(4% / 2);
+  margin-right: 8px!important;
 }
 .shape-item:nth-child(4n){ 
   margin-right: 0;