SPU: 完善优惠卷选择

Author: puhui999

src/api/mall/product/spu.ts

@@ -25,6 +25,11 @@ export interface Sku {
   salesCount?: number // 商品销量
 }
 
+export interface GiveCouponTemplate {
+  id?: number
+  name?: string // 优惠券名称
+}
+
 export interface Spu {
   id?: number
   name?: string // 商品名称
@@ -55,6 +60,7 @@ export interface Spu {
   stock?: number // 商品库存
   createTime?: Date // 商品创建时间
   status?: number // 商品状态
+  giveCouponTemplate?: GiveCouponTemplate[]
 }
 
 // 获得 Spu 列表

src/views/mall/product/spu/form/CouponSelect.vue

@@ -150,14 +150,15 @@ import {
 } from '@/views/mall/promotion/coupon/formatter'
 import { dateFormatter } from '@/utils/formatTime'
 import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import type { GiveCouponTemplate } from '@/api/mall/product/spu'
 
 defineOptions({ name: 'CouponSelect' })
 
 defineProps<{
-  multipleSelection: { id: number; name: string }[]
+  multipleSelection: GiveCouponTemplate[]
 }>()
 const emit = defineEmits<{
-  (e: 'update:multipleSelection', v: { id: number; name: string }[])
+  (e: 'update:multipleSelection', v: GiveCouponTemplate[])
 }>()
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('选择优惠卷') // 弹窗的标题
@@ -212,6 +213,8 @@ const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
     val.map((item) => ({ id: item.id, name: item.name }))
   )
 }
-const submitForm = async () => {}
+const submitForm = () => {
+  dialogVisible.value = false
+}
 </script>
 <style lang="scss" scoped></style>

src/views/mall/product/spu/form/OtherSettingsForm.vue

@@ -82,16 +82,15 @@
       {{ row.recommendGood ? '是' : '否' }}
     </template>
     <template #activityOrders>
-      <el-tag>默认</el-tag>
-      <el-tag class="ml-2" type="success">秒杀</el-tag>
-      <el-tag class="ml-2" type="info">砍价</el-tag>
-      <el-tag class="ml-2" type="warning">拼团</el-tag>
+      <el-tag v-for="coupon in couponTemplateList" :key="coupon.id as number" class="mr-[10px]">
+        {{ coupon.name }}
+      </el-tag>
     </template>
   </Descriptions>
-  <CouponSelect ref="couponSelectRef" />
+  <CouponSelect ref="couponSelectRef" v-model:multiple-selection="couponTemplateList" />
 </template>
 <script lang="ts" setup>
-import type { Spu } from '@/api/mall/product/spu'
+import type { GiveCouponTemplate, Spu } from '@/api/mall/product/spu'
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { copyValueToTarget } from '@/utils'
@@ -113,8 +112,8 @@ const props = defineProps({
   activeName: propTypes.string.def(''),
   isDetail: propTypes.bool.def(false) // 是否作为详情组件
 })
-const couponSelectRef = ref() // 优惠卷模版选择
-const couponTemplateList = ref<{ id: number; name: string }[]>([]) // 选择的优惠卷
+const couponSelectRef = ref() // 优惠卷模版选择 Ref
+const couponTemplateList = ref<GiveCouponTemplate[]>([]) // 选择的优惠卷
 const openCouponSelect = () => {
   couponSelectRef.value?.open()
 }
@@ -129,7 +128,8 @@ const formData = ref<Spu>({
   recommendBenefit: false, // 是否优惠
   recommendBest: false, // 是否精品
   recommendNew: false, // 是否新品
-  recommendGood: false // 是否优品
+  recommendGood: false, // 是否优品
+  giveCouponTemplate: [] // 赠送的优惠券
 })
 // 表单规则
 const rules = reactive({
@@ -163,6 +163,9 @@ watch(
       return
     }
     copyValueToTarget(formData.value, data)
+    if (data.giveCouponTemplate) {
+      couponTemplateList.value = data.giveCouponTemplate
+    }
     recommendOptions.forEach(({ value }) => {
       if (formData.value[value] && !checkboxGroup.value.includes(value)) {
         checkboxGroup.value.push(value)
@@ -189,6 +192,7 @@ const validate = async () => {
       throw new Error('商品其他设置未完善！！')
     } else {
       // 校验通过更新数据
+      formData.value.giveCouponTemplate = couponTemplateList.value
       Object.assign(props.propFormData, formData.value)
     }
   })

src/views/mall/product/spu/form/index.vue

@@ -62,14 +62,14 @@ const otherSettingsRef = ref() // 其他设置Ref
 // spu 表单数据
 const formData = ref<ProductSpuApi.Spu>({
   name: '', // 商品名称
-  categoryId: null, // 商品分类
+  categoryId: undefined, // 商品分类
   keyword: '', // 关键字
-  unit: null, // 单位
+  unit: undefined, // 单位
   picUrl: '', // 商品封面图
   sliderPicUrls: [], // 商品轮播图
   introduction: '', // 商品简介
-  deliveryTemplateId: null, // 运费模版
-  brandId: null, // 商品品牌
+  deliveryTemplateId: undefined, // 运费模版
+  brandId: undefined, // 商品品牌
   specType: false, // 商品规格
   subCommissionType: false, // 分销类型
   skus: [
@@ -94,7 +94,8 @@ const formData = ref<ProductSpuApi.Spu>({
   recommendBenefit: false, // 是否优惠
   recommendBest: false, // 是否精品
   recommendNew: false, // 是否新品
-  recommendGood: false // 是否优品
+  recommendGood: false, // 是否优品
+  giveCouponTemplate: [] // 赠送的优惠券
 })
 
 /** 获得详情 */

src/views/mall/product/spu/form/spu.data.ts

@@ -96,7 +96,7 @@ export const otherSettingsSchema = reactive<CrudSchema[]>([
   },
   {
     label: '赠送的优惠劵',
-    field: 'giveCouponTemplateIds'
+    field: 'giveCouponTemplate'
   },
   {
     label: '活动显示排序',