浮雕挂饰

src/views/badge/orderDetail.vue

@@ -6,9 +6,13 @@
     <div class="order-status">
       <div class="avatar-wrapper">
         <!-- <img v-if="shapeImage" class="avatar-back-img" :src="shapeImage" alt=""> -->
-        <div class="avatar-front-box">
+        <div class="avatar-front-box" v-if="order.type_id != 6">
           <img class="avatar-font-img" :src="imageUrl" :alt="order.kind_name" />
         </div>
+        <div class="avatar-front-box-double" v-if="order.type_id == 6">
+          <img class="avatar-font-img" :src="imageUrl" />
+          <img class="avatar-font-img" :src="backImageUrl" />
+        </div>
       </div>
     </div>
     <div class="status-info">
@@ -45,12 +49,13 @@
           <span class="product-value" v-if="order.type_id == 2">{{ order.prod_id == 7 ? toValueWithout('人物浮雕相框') : toValueWithout('宠物浮雕相框') }}</span>
           <span class="product-value" v-if="order.type_id == 3">{{ order.prod_id == 7 ? toValueWithout('人物冰箱贴') : toValueWithout('宠物冰箱贴') }}</span>
           <span class="product-value" v-if="order.type_id == 4">{{ order.prod_id == 1 ? toValueWithout('人物卡通手办') : toValueWithout('宠物卡通手办') }}</span>
+          <span class="product-value" v-if="order.type_id == 6">{{ order.prod_id == 25 ? toValueWithout('人物浮雕挂饰') : toValueWithout('宠物浮雕挂饰') }}</span>
         </div>
         <div class="product-row">
           <span class="product-label">{{ toValueWithout("尺寸") }}</span>
           <span class="product-value">{{order.model_size}}</span>
         </div>
-        <div class="product-row" v-if="shape_name">
+        <div class="product-row" v-if="shape_name && order.type_id != 6">
           <span class="product-label">{{ toValueWithout("形状") }}</span>
           <span class="product-value">{{ toValueWithout(shape_name) }}</span>
         </div>
@@ -60,20 +65,6 @@
         </div>
       </div>
     </div>
-    <!-- <div style="padding: 0 16px;">
-      <van-divider />
-    </div> -->
-    <!-- <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="" >
-        <span class="address-name">张先生</span>
-        <span class="address-phone">136****0731</span>
-      </div>
-      <div class="address-detail">
-        详细地址详细地址详细地址详细地址详细地址详细地址
-      </div>
-    </div> -->
     <div style="padding: 0 16px;">
       <van-divider />
     </div>
@@ -99,6 +90,7 @@ import * as badgeApi from '@/api/badge';
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { toValueWithout } from '@/lang/utils';
+
 const route = useRoute();
 const order = ref({})
 const id = ref(0)
@@ -109,17 +101,24 @@ onMounted(() => {
 
 const shapeImage = ref('')
 const imageUrl = ref('')
+const backImageUrl = ref('')
 const getStyle = ref('')
 const shape_name = ref('')
+const imageList = ref([])
 
 function getOrderDetail() {
   badgeApi.getOrderDetail({
     id: id.value,
   }).then(res => {
-    order.value = res
-    imageUrl.value = res.path
-    shapeImage.value = res.shape_details.frame_path
-    shape_name.value = res.shape_details.name
+    order.value = res;
+    imageUrl.value = res.path;
+    backImageUrl.value = res.back_path;
+    shapeImage.value = res.shape_details.frame_path;
+    shape_name.value = res.shape_details.name;
+    imageList.value = [
+      res.path,
+      res.back_path,
+    ];
     // if (res.shape_details) {
     //   ImageShow(res.shape_details)
     // }
@@ -209,6 +208,14 @@ function getStatus(status: number) {
     max-height: 320px;
     border-radius: 10px;
   }
+  .avatar-front-box-double {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    overflow-x: auto;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }
   .progress-image-item-shadow {
     position: absolute;
     top: 0;