mall：优惠券 商品选择组件

src/views/mall/promotion/coupon/template/CouponTemplateForm.vue

@@ -29,7 +29,7 @@
         <el-input-number
           v-model="formData.discountPrice"
           placeholder="请输入优惠金额，单位：元"
-          style="width: 400px"
+          class="!w-400px mr-2"
           :precision="2"
           :min="0"
         />
@@ -43,7 +43,7 @@
         <el-input-number
           v-model="formData.discountPercent"
           placeholder="优惠券折扣不能小于 1 折，且不可大于 9.9 折"
-          style="width: 400px"
+          class="!w-400px mr-2"
           :precision="1"
           :min="1"
           :max="9.9"
@@ -58,7 +58,7 @@
         <el-input-number
           v-model="formData.discountLimitPrice"
           placeholder="请输入最多优惠"
-          style="width: 400px"
+          class="!w-400px mr-2"
           :precision="2"
           :min="0"
         />
@@ -68,7 +68,7 @@
         <el-input-number
           v-model="formData.usePrice"
           placeholder="无门槛请设为 0"
-          style="width: 400px"
+          class="!w-400px mr-2"
           :precision="2"
           :min="0"
         />
@@ -84,7 +84,7 @@
         <el-input-number
           v-model="formData.totalCount"
           placeholder="发放数量，没有之后不能领取或发放，-1 为不限制"
-          style="width: 400px"
+          class="!w-400px mr-2"
           :precision="0"
           :min="-1"
         />
@@ -94,7 +94,7 @@
         <el-input-number
           v-model="formData.takeLimitCount"
           placeholder="设置为 -1 时，可无限领取"
-          style="width: 400px"
+          class="!w-400px mr-2"
           :precision="0"
           :min="-1"
         />
@@ -133,7 +133,7 @@
         <el-input-number
           v-model="formData.fixedStartTerm"
           placeholder="0 为今天生效"
-          style="width: 165px"
+          class="mx-2"
           :precision="0"
           :min="0"
         />
@@ -141,7 +141,7 @@
         <el-input-number
           v-model="formData.fixedEndTerm"
           placeholder="请输入结束天数"
-          style="width: 165px"
+          class="mx-2"
           :precision="0"
           :min="0"
         />
@@ -162,21 +162,15 @@
         v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
         prop="productSpuIds"
       >
-        <el-select
-          v-model="formData.productSpuIds"
-          placeholder="请选择活动商品"
-          clearable
-          multiple
-          filterable
-          style="width: 400px"
-        >
-          <el-option v-for="item in productSpus" :key="item.id" :label="item.name" :value="item.id">
-            <span style="float: left">{{ item.name }}</span>
-            <span style="float: right; font-size: 13px; color: #8492a6">
-              ￥{{ (item.minPrice / 100.0).toFixed(2) }}
-            </span>
-          </el-option>
-        </el-select>
+        <div class="flex items-center gap-1 flex-wrap">
+          <div class="select-box spu-pic" v-for="(spu, index) in productSpus" :key="spu.id">
+            <el-image :src="spu.picUrl" />
+            <Icon icon="ep:circle-close-filled" class="del-icon" @click="handleRemoveSpu(index)" />
+          </div>
+          <div class="select-box" @click="openSpuTableSelect">
+            <Icon icon="ep:plus" />
+          </div>
+        </div>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -184,6 +178,7 @@
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+  <SpuTableSelect ref="spuTableSelectRef" multiple @change="handleSpuSelected" />
 </template>
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@@ -194,6 +189,7 @@ import {
   PromotionDiscountTypeEnum,
   PromotionProductScopeEnum
 } from '@/utils/constants'
+import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
 
 defineOptions({ name: 'CouponTemplateForm' })
 
@@ -242,7 +238,7 @@ const formRules = reactive({
   productSpuIds: [{ required: true, message: '商品范围不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
-const productSpus = ref([]) // 商品列表
+const productSpus = ref<ProductSpuApi.Spu[]>([]) // 商品列表
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -265,12 +261,12 @@ const open = async (type: string, id?: number) => {
         usePrice: data.usePrice !== undefined ? data.usePrice / 100.0 : undefined,
         validTimes: [data.validStartTime, data.validEndTime]
       }
+      // 获得商品范围
+      await getProductScope()
     } finally {
       formLoading.value = false
     }
   }
-  // 获得商品列表
-  productSpus.value = await ProductSpuApi.getSpuSimpleList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -344,5 +340,59 @@ const resetForm = () => {
     productSpuIds: []
   }
   formRef.value?.resetFields()
+  productSpus.value = []
+}
+
+/** 获得商品范围 */
+const getProductScope = async () => {
+  switch (formData.value.productScope) {
+    case PromotionProductScopeEnum.SPU.scope:
+      // 获得商品列表
+      productSpus.value = await ProductSpuApi.getSpuDetailList(formData.value.productSpuIds)
+      break
+    default:
+      break
+  }
+}
+
+/** 活动商品 按钮 */
+const spuTableSelectRef = ref()
+const openSpuTableSelect = () => {
+  spuTableSelectRef.value.open(productSpus.value)
+}
+
+/** 选择商品后触发 */
+const handleSpuSelected = (spus: ProductSpuApi.Spu[]) => {
+  productSpus.value = spus
+  formData.value.productSpuIds = spus.map((spu) => spu.id) as []
+}
+
+/** 选择商品后触发 */
+const handleRemoveSpu = (index: number) => {
+  productSpus.value.splice(index, 1)
+  formData.value.productSpuIds.splice(index, 1)
 }
 </script>
+
+<style scoped lang="scss">
+.select-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+  width: 60px;
+  height: 60px;
+}
+.spu-pic {
+  position: relative;
+}
+.del-icon {
+  position: absolute;
+  z-index: 1;
+  width: 20px !important;
+  height: 20px !important;
+  right: -10px;
+  top: -10px;
+}
+</style>