From 3fd9f1b43e42a10feb6fd04b2d9dbc2ab5f6edd6 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 10 Jul 2023 16:39:22 +0800
Subject: [PATCH] fix: mall SeckillConfig

---
 .../mall/promotion/seckill/seckillConfig.ts   |  2 +-
 .../seckill/config/SeckillConfigForm.vue      | 16 ++++++++++--
 .../mall/promotion/seckill/config/index.vue   | 25 +++++++++++++++----
 .../seckill/config/seckillConfig.data.ts      |  9 ++++---
 4 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/api/mall/promotion/seckill/seckillConfig.ts b/src/api/mall/promotion/seckill/seckillConfig.ts
index 07b7d55c..eee82115 100644
--- a/src/api/mall/promotion/seckill/seckillConfig.ts
+++ b/src/api/mall/promotion/seckill/seckillConfig.ts
@@ -5,7 +5,7 @@ export interface SeckillConfigVO {
   name: string
   startTime: string
   endTime: string
-  picUrl: string
+  sliderPicUrls: string[]
   status: number
 }
 
diff --git a/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue b/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
index e25f8fce..22b07d3a 100644
--- a/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
+++ b/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
@@ -10,6 +10,7 @@
 <script lang="ts" name="SeckillConfigForm" setup>
 import * as SeckillConfigApi from '@/api/mall/promotion/seckill/seckillConfig'
 import { allSchemas, rules } from './seckillConfig.data'
+import { cloneDeep } from 'lodash-es'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -30,6 +31,9 @@ const open = async (type: string, id?: number) => {
     formLoading.value = true
     try {
       const data = await SeckillConfigApi.getSeckillConfig(id)
+      data.sliderPicUrls = data['sliderPicUrls']?.map((item) => ({
+        url: item
+      }))
       formRef.value.setValues(data)
     } finally {
       formLoading.value = false
@@ -48,12 +52,20 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
+    // 处理轮播图列表
     const data = formRef.value.formModel as SeckillConfigApi.SeckillConfigVO
+    const cloneData = cloneDeep(data)
+    const newSliderPicUrls = []
+    cloneData.sliderPicUrls.forEach((item) => {
+      // 如果是前端选的图
+      typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item)
+    })
+    cloneData.sliderPicUrls = newSliderPicUrls
     if (formType.value === 'create') {
-      await SeckillConfigApi.createSeckillConfig(data)
+      await SeckillConfigApi.createSeckillConfig(cloneData)
       message.success(t('common.createSuccess'))
     } else {
-      await SeckillConfigApi.updateSeckillConfig(data)
+      await SeckillConfigApi.updateSeckillConfig(cloneData)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
diff --git a/src/views/mall/promotion/seckill/config/index.vue b/src/views/mall/promotion/seckill/config/index.vue
index 60c89d7c..8072b9d3 100644
--- a/src/views/mall/promotion/seckill/config/index.vue
+++ b/src/views/mall/promotion/seckill/config/index.vue
@@ -29,8 +29,14 @@
         total: tableObject.total
       }"
     >
-      <template #picUrl="{ row }">
-        <el-image :src="row.picUrl" class="w-30px h-30px" @click="imagePreview(row.picUrl)" />
+      <template #sliderPicUrls="{ row }">
+        <el-image
+          v-for="(item, index) in row.sliderPicUrls"
+          :key="index"
+          :src="item"
+          class="w-60px h-60px mr-10px"
+          @click="imagePreview(row.sliderPicUrls)"
+        />
       </template>
       <template #status="{ row }">
         <el-switch
@@ -70,6 +76,7 @@ import * as SeckillConfigApi from '@/api/mall/promotion/seckill/seckillConfig'
 import SeckillConfigForm from './SeckillConfigForm.vue'
 import { createImageViewer } from '@/components/ImageViewer'
 import { CommonStatusEnum } from '@/utils/constants'
+import { isArray } from '@/utils/is'
 
 const message = useMessage() // 消息弹窗
 // tableObject：表格的属性对象，可获得分页大小、条数等属性
@@ -82,10 +89,18 @@ const { tableObject, tableMethods } = useTable({
 // 获得表格的各种操作
 const { getList, setSearchParams } = tableMethods
 
-/** 商品图预览 */
-const imagePreview = (imgUrl: string) => {
+/** 轮播图预览预览 */
+const imagePreview = (args) => {
+  const urlList = []
+  if (isArray(args)) {
+    args.forEach((item) => {
+      urlList.push(item)
+    })
+  } else {
+    urlList.push(args)
+  }
   createImageViewer({
-    urlList: [imgUrl]
+    urlList
   })
 }
 
diff --git a/src/views/mall/promotion/seckill/config/seckillConfig.data.ts b/src/views/mall/promotion/seckill/config/seckillConfig.data.ts
index 49bf36af..dbc9b360 100644
--- a/src/views/mall/promotion/seckill/config/seckillConfig.data.ts
+++ b/src/views/mall/promotion/seckill/config/seckillConfig.data.ts
@@ -46,11 +46,14 @@ const crudSchemas = reactive<CrudSchema[]>([
     }
   },
   {
-    label: '秒杀主图',
-    field: 'picUrl',
+    label: '秒杀轮播图',
+    field: 'sliderPicUrls',
     isSearch: false,
     form: {
-      component: 'UploadImg'
+      component: 'UploadImgs'
+    },
+    table: {
+      width: 300
     }
   },
   {