Selaa lähdekoodia

change: indent sku选择.商品图片修复.

peter 3 viikkoa sitten
vanhempi
commit
2b4a1945b2
1 muutettua tiedostoa jossa 36 lisäystä ja 19 poistoa
  1. 36 19
      src/pages/indent-manage/indent/components/skuSelect.vue

+ 36 - 19
src/pages/indent-manage/indent/components/skuSelect.vue

@@ -48,7 +48,13 @@
             :key="sku.id"
             class="sku-item"
           >
-            <div class="image"></div>
+            <div class="image flex justify-center">
+              <img
+                v-if="sku.images.length"
+                :src="sku.images[0]"
+                class="h-[100%] w-auto"
+              />
+            </div>
             <div class="sku-name">{{ sku.product_name }}</div>
             <div class="flex justify-between items-center">
               <div class="sku-code">Product Code: {{ sku.product_sku }}</div>
@@ -101,7 +107,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, ref, watch } from 'vue'
+import { defineComponent, ref, inject, watch } from 'vue'
 import { ElButton, ElInput, ElTree, ElDialog, ElPagination } from 'element-plus'
 
 import { getCategoryTree, getSkuList } from '@/api/indent.js'
@@ -109,6 +115,8 @@ import skuApply from './skuApply.vue'
 defineComponent({
   name: 'ComponentSkuSelect',
 })
+
+const $mediaRegExp = inject('mediaRegExp') as RegExp
 const { visible = false } = defineProps<{ visible: boolean }>()
 
 const $emit = defineEmits(['update:visible', 'select'])
@@ -194,7 +202,20 @@ const getSku = () => {
   getSkuList(params)
     .then((response: any) => {
       const res = response.result
-      skuList.value = res.data
+      skuList.value = res.data.map((item: any) => {
+        const t =
+          typeof item.images === 'string'
+            ? `${item.images}`.split(',').filter((i: string) => i.length > 0)
+            : []
+        return {
+          ...item,
+          images: t.map((i: string) => {
+            return $mediaRegExp.test(i)
+              ? i
+              : import.meta.env.VITE_APP_OSS_PREFIX + i
+          }),
+        }
+      })
       total.value = res.total
     })
     .finally(() => {
@@ -212,22 +233,18 @@ watch(
     }
   },
 )
-watch(
-  currentCategory,
-  () => {
-    console.log('watch run bbb')
-    if (!currentCategory.value) return
-    console.log('watch run')
-    keywords.value = ''
-    skuList.value = []
-    pageForm.value = {
-      page: 1,
-      limit: 20,
-    }
-    total.value = 0
-    getSku()
-  },
-)
+watch(currentCategory, () => {
+  if (!currentCategory.value) return
+
+  keywords.value = ''
+  skuList.value = []
+  pageForm.value = {
+    page: 1,
+    limit: 20,
+  }
+  total.value = 0
+  getSku()
+})
 const close = (done = {} as any) => {
   $emit('update:visible', false)
   if (typeof done === 'function') done()