From 36c0bce1845b288ec1ea2f5f1528c07247502c21 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Wed, 5 Jul 2023 11:32:32 +0800 Subject: [PATCH] fix: mall SeckillActivity --- .../mall/promotion/seckill/seckillActivity.ts | 3 +- .../mall/product/spu/components/SkuList.vue | 1 + .../promotion/components/SpuAndSkuList.vue | 19 +--- .../mall/promotion/components/SpuSelect.vue | 78 ++++++++----- .../seckill/activity/SeckillActivityForm.vue | 107 ++++++++++++------ .../seckill/activity/seckillActivity.data.ts | 29 +++-- 6 files changed, 140 insertions(+), 97 deletions(-) diff --git a/src/api/mall/promotion/seckill/seckillActivity.ts b/src/api/mall/promotion/seckill/seckillActivity.ts index 0f1f08d1..f460b013 100644 --- a/src/api/mall/promotion/seckill/seckillActivity.ts +++ b/src/api/mall/promotion/seckill/seckillActivity.ts @@ -23,14 +23,13 @@ export interface SeckillActivityVO { // 秒杀活动所需属性 export interface SeckillProductVO { - spuId: number skuId: number seckillPrice: number stock: number } // 扩展 Sku 配置 -type SkuExtension = Sku & { +export type SkuExtension = Sku & { productConfig: SeckillProductVO } diff --git a/src/views/mall/product/spu/components/SkuList.vue b/src/views/mall/product/spu/components/SkuList.vue index e033b233..1af341e8 100644 --- a/src/views/mall/product/spu/components/SkuList.vue +++ b/src/views/mall/product/spu/components/SkuList.vue @@ -194,6 +194,7 @@ @@ -56,7 +41,7 @@ import { SpuProperty } from '@/views/mall/promotion/components/index' defineOptions({ name: 'PromotionSpuAndSkuList' }) const props = defineProps<{ - spuList: T[] + spuList: T[] // TODO 为了方便兼容后续可能有需要展示多个 spu 的情况暂时保持，如果后续都是只操作一个 spu 的话则可更改为接受一个 spu 或保持 ruleConfig: RuleConfig[] spuPropertyListP: SpuProperty[] }>() diff --git a/src/views/mall/promotion/components/SpuSelect.vue b/src/views/mall/promotion/components/SpuSelect.vue index 94c60c9c..82935c84 100644 --- a/src/views/mall/promotion/components/SpuSelect.vue +++ b/src/views/mall/promotion/components/SpuSelect.vue @@ -145,17 +145,61 @@ const queryParams = ref({ }) // 查询参数 const propertyList = ref([]) // 商品属性列表 const spuListRef = ref>() -const spuData = ref() // 商品详情 +const spuData = ref() // 商品详情 const isExpand = ref(false) // 控制 SKU 列表显示 const expandRowKeys = ref() // 控制展开行需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 +//============ 商品选择相关 ============ +const selectedSpuId = ref(0) // 选中的商品 spuId +const selectedSkuIds = ref([]) // 选中的商品 skuIds +const selectSku = (val: ProductSpuApi.Sku[]) => { + if (selectedSpuId.value === 0) { + return + } + selectedSkuIds.value = val.map((sku) => sku.id!) +} +const selectSpu = (val: ProductSpuApi.Spu[]) => { + if (val.length === 0) { + selectedSpuId.value = 0 + return + } + // 只选择一个 + selectedSpuId.value = val.map((spu) => spu.id!)[0] + // 切换选择 spu 如果有选择的 sku 则清空,确保选择的 sku 是对应的 spu 下面的 + if (selectedSkuIds.value.length > 0) { + selectedSkuIds.value = [] + } + // 如果大于1个 + if (val.length > 1) { + // 清空选择 + spuListRef.value.clearSelection() + // 变更为最后一次选择的 + spuListRef.value.toggleRowSelection(val.pop(), true) + return + } + expandChange(val[0], val) +} + // 计算商品属性 -const expandChange = async (row: ProductSpuApi.Spu, expandedRows: ProductSpuApi.Spu[]) => { +const expandChange = async (row: ProductSpuApi.Spu, expandedRows?: ProductSpuApi.Spu[]) => { + // 判断需要展开的 spuId === 选择的 spuId。如果选择了 A 就展开 A 的 skuList。如果选择了 A 手动展开 B 则阻断 + // 目的防止误选 sku + if (selectedSpuId.value !== 0) { + if (row.id !== selectedSpuId.value) { + message.warning('你已选择商品请先取消') + expandRowKeys.value = [selectedSpuId.value] + return + } + // 如果以展开 skuList 则选择此对应的 spu 不需要重新获取渲染 skuList + if (isExpand.value && spuData.value?.id === row.id) { + return + } + } spuData.value = {} propertyList.value = [] isExpand.value = false - // 如果展开个数为 0 - if (expandedRows.length === 0) { + if (expandedRows?.length === 0) { + // 如果展开个数为 0 expandRowKeys.value = [] return } @@ -167,33 +211,15 @@ const expandChange = async (row: ProductSpuApi.Spu, expandedRows: ProductSpuApi. expandRowKeys.value = [row.id!] } -//============ 商品选择相关 ============ -const selectedSpuIds = ref([]) // 选中的商品 spuIds -const selectedSkuIds = ref([]) // 选中的商品 skuIds -const selectSku = (val: ProductSpuApi.Sku[]) => { - selectedSkuIds.value = val.map((sku) => sku.id!) -} -const selectSpu = (val: ProductSpuApi.Spu[]) => { - selectedSpuIds.value = val.map((spu) => spu.id!) - // // 只选择一个 - // selectedSpu.value = val[0] - // // 如果大于1个 - // if (val.length > 1) { - // // 清空选择 - // spuListRef.value.clearSelection() - // // 变更为最后一次选择的 - // spuListRef.value.toggleRowSelection(val.pop(), true) - // } -} // 确认选择时的触发事件 const emits = defineEmits<{ - (e: 'confirm', spuIds: number[], skuIds?: number[]): void + (e: 'confirm', spuId: number, skuIds?: number[]): void }>() /** * 确认选择返回选中的 spu 和 sku (如果需要选择sku的话) */ const confirm = () => { - if (selectedSpuIds.value.length === 0) { + if (selectedSpuId.value === 0) { message.warning('没有选择任何商品') return } @@ -203,8 +229,8 @@ const confirm = () => { } // 返回各自 id 列表 props.isSelectSku - ? emits('confirm', selectedSpuIds.value, selectedSkuIds.value) - : emits('confirm', selectedSpuIds.value) + ? emits('confirm', selectedSpuId.value, selectedSkuIds.value) + : emits('confirm', selectedSpuId.value) // 关闭弹窗 dialogVisible.value = false } diff --git a/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue b/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue index c24e508e..ff3ee10a 100644 --- a/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue +++ b/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue @@ -8,14 +8,31 @@ :schema="allSchemas.formSchema" > -