mall：优惠券商品选择组件

60d2e311 · owen · beef6a0a · 60d2e311 · 60d2e311
Commit 60d2e311 authored Aug 30, 2023 by owen
Expand all Hide whitespace changes
Inline Side-by-side

Showing with 253 additions and 119 deletions

src/views/mall/product/spu/components/SpuTableSelect.vue
+177 -93

src/views/mall/promotion/coupon/template/CouponTemplateForm.vue
+76 -26

No files found.
--- a/src/views/mall/product/spu/components/SpuTableSelect.vue
+++ b/src/views/mall/product/spu/components/SpuTableSelect.vue
--- a/src/views/mall/promotion/coupon/template/CouponTemplateForm.vue
+++ b/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
+        <div class="flex items-center gap-1 flex-wrap">
-          v-model="formData.productSpuIds"
+          <div class="select-box spu-pic" v-for="(spu, index) in productSpus" :key="spu.id">
-          placeholder="请选择活动商品"
+            <el-image :src="spu.picUrl" />
-          clearable
+            <Icon icon="ep:circle-close-filled" class="del-icon" @click="handleRemoveSpu(index)" />
-          multiple
+          </div>
-          filterable
+          <div class="select-box" @click="openSpuTableSelect">
-          style="width: 400px"
+            <Icon icon="ep:plus" />
-        >
+          </div>
-          <el-option v-for="item in productSpus" :key="item.id" :label="item.name" :value="item.id">
+        </div>
-            <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>
      </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>