feat: 海外供应

src/views/order/podUs/PodMakeOrder.vue

@@ -401,7 +401,7 @@ watch(
   (val) => {
     if (val && val.productList?.length)
       val.productList.forEach((el) => {
-        if (!el.previewImgs) el.previewImgs = JSON.parse(el.imageAry)
+        if (!el.previewImgs) el.previewImgs = el.imageAry ? JSON.parse(el.imageAry) : [{url: el.variantImage}]
       })
   },
   { deep: true },
@@ -690,7 +690,7 @@ const initOrderDetailBox = async () => {
     boxIndex.value = boxList.find((item) => item.data)?.box || null
 
     podOrderDetailsData.value?.productList?.forEach((el) => {
-      if (!el.previewImgs) el.previewImgs = JSON.parse(el.imageAry)
+      if (!el.previewImgs) el.previewImgs = el.imageAry ? JSON.parse(el.imageAry) : [{url: el.variantImage}]
     })
     coverImage.value =
       podOrderDetailsData.value?.productList?.[0]?.previewImgs?.[0].url || ''

src/views/order/podUs/index.vue

@@ -135,6 +135,7 @@
           >
             <el-radio-button label="single">单面</el-radio-button>
             <el-radio-button label="multiple">多面</el-radio-button>
+            <el-radio-button label="normal">普品</el-radio-button>
           </el-radio-group>
         </ElFormItem>
         <ElFormItem label="数量">
@@ -1093,29 +1094,50 @@
                     class="goods-item-img"
                     style="display: flex; flex-direction: column"
                   >
-                    <div
-                      v-for="img in item.previewImgs"
-                      :key="img"
-                      style="text-align: center"
-                    >
+                    <template v-if="item.previewImgs?.length">
+                      <div
+                        v-for="img in item.previewImgs"
+                        :key="img"
+                        style="text-align: center"
+                      >
+                        <img
+                          :src="img.url"
+                          alt="商品图片"
+                          style="cursor: pointer"
+                          @click="handlePictureCardPreview(img.url)"
+                        />
+                        <div
+                          v-if="item.customizedQuantity"
+                          class="triangle-box"
+                          :title="`类型:${getQuantityText(
+                            item.customizedQuantity,
+                          )}面`"
+                        >
+                          <div class="multi-text">
+                            {{ getQuantityText(item.customizedQuantity) }}
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                    <template v-else>
                       <img
-                        :src="img.url"
+                        :src="item.variantImage"
                         alt="商品图片"
                         style="cursor: pointer"
-                        @click="handlePictureCardPreview(img.url)"
+                        @click="handlePictureCardPreview(item.variantImage)"
                       />
-                      <div
-                        v-if="item.customizedQuantity"
-                        class="triangle-box"
-                        :title="`类型:${getQuantityText(
-                          item.customizedQuantity,
-                        )}面`"
-                      >
-                        <div class="multi-text">
-                          {{ getQuantityText(item.customizedQuantity) }}
+                      <div class="triangle-container-wrap">
+                        <div class="triangle-container">
+                          <div class="triangle-marker"></div>
+                          <div
+                            class="content"
+                            :title="handleMark(item.productMark).label"
+                          >
+                            {{ handleMark(item.productMark).name }}
+                          </div>
                         </div>
                       </div>
-                    </div>
+                    </template>
                   </div>
                   <div class="goods-item-info">
                     <div class="goods-item-info-item">
@@ -5158,7 +5180,58 @@ const resultConfirm = () => {
   search()
   loadTabData()
 }
-
+const handleMark = (mark: string) => {
+  switch (mark) {
+    case 'virtual':
+      return {
+        name: 'VIR',
+        color: '#ff9900',
+        label: '虚拟商品',
+      }
+    case 'normal':
+      return {
+        name: 'G',
+        color: '#67C23A',
+        label: '普通商品',
+      }
+    case 'pod':
+      return {
+        name: 'P',
+        color: '#F56C6C',
+        label: 'pod商品',
+      }
+    case 'custom':
+      return {
+        name: 'C',
+        color: '#6d9eeb',
+        label: '一件定制商品',
+      }
+    case 'custom_part':
+      return {
+        name: 'CP',
+        color: '#6d9eeb',
+        label: '一件定制局部印商品',
+      }
+    case 'custom_full':
+      return {
+        name: 'CF',
+        color: '#6d9eeb',
+        label: '一件定制满印商品',
+      }
+    case 'custom_normal':
+      return {
+        name: 'OS',
+        color: '#67C23A',
+        label: '海外供应',
+      }
+    default:
+      return {
+        name: '',
+        color: '#FFFFFF',
+        width: '0',
+      }
+  }
+}
 /**
  * @description: 更改物流方式
  */
@@ -6250,10 +6323,6 @@ useRouter().beforeEach((to, from, next) => {
     // width: 100px;
     // height: 65px;
     position: relative;
-
-    img {
-      width: 65%;
-    }
   }
 
   &:not(:last-child) {
@@ -6534,12 +6603,29 @@ useRouter().beforeEach((to, from, next) => {
   color: white;
   font-weight: bold;
 }
-.search-form {
-  ::v-deep .el-radio-button {
-    width: 75px;
-    .el-radio-button__inner {
-      width: 100%;
-    }
+.triangle-container-wrap {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.triangle-container {
+  position: relative;
+  .triangle-marker {
+    width: 0;
+    height: 0;
+    border: 18px solid transparent;
+    border-right: 18px solid #e74c3c;
+    border-top: 18px solid #e74c3c;
+  }
+  .content {
+    position: absolute;
+    top: 0;
+    left: 18px;
+    transform: rotate(45deg);
+    color: white;
+    text-align: center;
+    font-weight: bold;
+    font-size: 12px;
   }
 }
 </style>