Skip to content

Commit 4947716

Browse files
author
puhui999
committed
feat: 完善砍价活动管理
1 parent c327f79 commit 4947716

File tree

4 files changed

+564
-0
lines changed

4 files changed

+564
-0
lines changed

‎src/api/mall/promotion/bargain/bargainActivity.ts

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import request from '@/config/axios'
2+
import { Sku, Spu } from '@/api/mall/product/spu'
3+
4+
export interface BargainActivityVO {
5+
id?: number
6+
name?: string
7+
startTime?: Date
8+
endTime?: Date
9+
status?: number
10+
spuId?: number
11+
userSize?: number // 达到该人数，才能砍到低价
12+
bargainCount?: number // 最大帮砍次数
13+
totalLimitCount?: number // 最大购买次数
14+
stock?: number // 活动总库存
15+
randomMinPrice?: number // 用户每次砍价的最小金额，单位：分
16+
randomMaxPrice?: number // 用户每次砍价的最大金额，单位：分
17+
successCount?: number // 砍价成功数量
18+
products?: BargainProductVO[]
19+
}
20+
21+
// 砍价活动所需属性
22+
export interface BargainProductVO {
23+
spuId: number
24+
skuId: number
25+
bargainFirstPrice: number // 砍价起始价格，单位分
26+
bargainPrice: number // 砍价底价
27+
stock: number // 活动库存
28+
}
29+
30+
// 扩展 Sku 配置
31+
export type SkuExtension = Sku & {
32+
productConfig: BargainProductVO
33+
}
34+
35+
export interface SpuExtension extends Spu {
36+
skus: SkuExtension[] // 重写类型
37+
}
38+
39+
// 查询砍价活动列表
40+
export const getBargainActivityPage = async (params: any) => {
41+
return await request.get({ url: '/promotion/bargain-activity/page', params })
42+
}
43+
44+
// 查询砍价活动详情
45+
export const getBargainActivity = async (id: number) => {
46+
return await request.get({ url: '/promotion/bargain-activity/get?id=' + id })
47+
}
48+
49+
// 新增砍价活动
50+
export const createBargainActivity = async (data: BargainActivityVO) => {
51+
return await request.post({ url: '/promotion/bargain-activity/create', data })
52+
}
53+
54+
// 修改砍价活动
55+
export const updateBargainActivity = async (data: BargainActivityVO) => {
56+
return await request.put({ url: '/promotion/bargain-activity/update', data })
57+
}
58+
59+
// 删除砍价活动
60+
export const deleteBargainActivity = async (id: number) => {
61+
return await request.delete({ url: '/promotion/bargain-activity/delete?id=' + id })
62+
}

‎src/views/mall/promotion/bargain/BargainActivityForm.vue

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
<template>
2+
<Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
3+
<Form
4+
ref="formRef"
5+
v-loading="formLoading"
6+
:is-col="true"
7+
:rules="rules"
8+
:schema="allSchemas.formSchema"
9+
class="mt-10px"
10+
>
11+
<template #spuId>
12+
<el-button @click="spuSelectRef.open()">选择商品</el-button>
13+
<SpuAndSkuList
14+
ref="spuAndSkuListRef"
15+
:rule-config="ruleConfig"
16+
:spu-list="spuList"
17+
:spu-property-list-p="spuPropertyList"
18+
>
19+
<el-table-column align="center" label="砍价起始价格(元)" min-width="168">
20+
<template #default="{ row: sku }">
21+
<el-input-number
22+
v-model="sku.productConfig.bargainFirstPrice"
23+
:min="0"
24+
:precision="2"
25+
:step="0.1"
26+
class="w-100%"
27+
/>
28+
</template>
29+
</el-table-column>
30+
<el-table-column align="center" label="砍价底价(元)" min-width="168">
31+
<template #default="{ row: sku }">
32+
<el-input-number
33+
v-model="sku.productConfig.bargainPrice"
34+
:min="0"
35+
:precision="2"
36+
:step="0.1"
37+
class="w-100%"
38+
/>
39+
</template>
40+
</el-table-column>
41+
<el-table-column align="center" label="活动库存" min-width="168">
42+
<template #default="{ row: sku }">
43+
<el-input-number v-model="sku.productConfig.stock" class="w-100%" />
44+
</template>
45+
</el-table-column>
46+
</SpuAndSkuList>
47+
</template>
48+
</Form>
49+
<template #footer>
50+
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
51+
<el-button @click="dialogVisible = false">取 消</el-button>
52+
</template>
53+
</Dialog>
54+
<SpuSelect ref="spuSelectRef" :isSelectSku="true" @confirm="selectSpu" />
55+
</template>
56+
<script lang="ts" setup>
57+
import * as BargainActivityApi from '@/api/mall/promotion/bargain/bargainActivity'
58+
import { BargainProductVO } from '@/api/mall/promotion/bargain/bargainActivity'
59+
import { allSchemas, rules } from './bargainActivity.data'
60+
import { SpuAndSkuList, SpuProperty, SpuSelect } from '@/views/mall/promotion/components'
61+
import { getPropertyList, RuleConfig } from '@/views/mall/product/spu/components'
62+
import * as ProductSpuApi from '@/api/mall/product/spu'
63+
import { convertToInteger, formatToFraction } from '@/utils'
64+
65+
defineOptions({ name: 'PromotionBargainActivityForm' })
66+
67+
const { t } = useI18n() // 国际化
68+
const message = useMessage() // 消息弹窗
69+
70+
const dialogVisible = ref(false) // 弹窗的是否展示
71+
const dialogTitle = ref('') // 弹窗的标题
72+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
73+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
74+
const formRef = ref() // 表单 Ref
75+
76+
// ================= 商品选择相关 =================
77+
78+
const spuSelectRef = ref() // 商品和属性选择 Ref
79+
const spuAndSkuListRef = ref() // sku 秒杀配置组件Ref
80+
const spuList = ref<BargainActivityApi.SpuExtension[]>([]) // 选择的 spu
81+
const spuPropertyList = ref<SpuProperty<BargainActivityApi.SpuExtension>[]>([])
82+
const ruleConfig: RuleConfig[] = [
83+
{
84+
name: 'productConfig.bargainFirstPrice',
85+
rule: (arg) => arg > 0,
86+
message: '商品砍价起始价格不能小于0 ！！！'
87+
},
88+
{
89+
name: 'productConfig.bargainPrice',
90+
rule: (arg) => arg > 0,
91+
message: '商品砍价底价不能小于0 ！！！'
92+
},
93+
{
94+
name: 'productConfig.stock',
95+
rule: (arg) => arg > 1,
96+
message: '商品活动库存不能小于1 ！！！'
97+
}
98+
]
99+
const selectSpu = (spuId: number, skuIds: number[]) => {
100+
formRef.value.setValues({ spuId })
101+
getSpuDetails(spuId, skuIds)
102+
}
103+
/**
104+
* 获取 SPU 详情
105+
*/
106+
const getSpuDetails = async (
107+
spuId: number,
108+
skuIds: number[] | undefined,
109+
products?: BargainProductVO[]
110+
) => {
111+
const spuProperties: SpuProperty<BargainActivityApi.SpuExtension>[] = []
112+
const res = (await ProductSpuApi.getSpuDetailList([spuId])) as BargainActivityApi.SpuExtension[]
113+
if (res.length == 0) {
114+
return
115+
}
116+
spuList.value = []
117+
// 因为只能选择一个
118+
const spu = res[0]
119+
const selectSkus =
120+
typeof skuIds === 'undefined' ? spu?.skus : spu?.skus?.filter((sku) => skuIds.includes(sku.id!))
121+
selectSkus?.forEach((sku) => {
122+
let config: BargainProductVO = {
123+
spuId: spu.id!,
124+
skuId: sku.id!,
125+
bargainFirstPrice: 1,
126+
bargainPrice: 1,
127+
stock: 1
128+
}
129+
if (typeof products !== 'undefined') {
130+
const product = products.find((item) => item.skuId === sku.id)
131+
if (product) {
132+
// 分转元
133+
product.bargainFirstPrice = formatToFraction(product.bargainFirstPrice)
134+
product.bargainPrice = formatToFraction(product.bargainPrice)
135+
}
136+
config = product || config
137+
}
138+
sku.productConfig = config
139+
})
140+
spu.skus = selectSkus as BargainActivityApi.SkuExtension[]
141+
spuProperties.push({
142+
spuId: spu.id!,
143+
spuDetail: spu,
144+
propertyList: getPropertyList(spu)
145+
})
146+
spuList.value.push(spu)
147+
spuPropertyList.value = spuProperties
148+
}
149+
150+
// ================= end =================
151+
152+
/** 打开弹窗 */
153+
const open = async (type: string, id?: number) => {
154+
dialogVisible.value = true
155+
dialogTitle.value = t('action.' + type)
156+
formType.value = type
157+
await resetForm()
158+
// 修改时，设置数据
159+
if (id) {
160+
formLoading.value = true
161+
try {
162+
const data = (await BargainActivityApi.getBargainActivity(
163+
id
164+
)) as BargainActivityApi.BargainActivityVO
165+
// 用户每次砍价金额分转元, 分转元
166+
data.randomMinPrice = formatToFraction(data.randomMinPrice)
167+
data.randomMaxPrice = formatToFraction(data.randomMaxPrice)
168+
await getSpuDetails(data.spuId!, data.products?.map((sku) => sku.skuId), data.products)
169+
formRef.value.setValues(data)
170+
} finally {
171+
formLoading.value = false
172+
}
173+
}
174+
}
175+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
176+
177+
/** 重置表单 */
178+
const resetForm = async () => {
179+
spuList.value = []
180+
spuPropertyList.value = []
181+
await nextTick()
182+
formRef.value.getElFormRef().resetFields()
183+
}
184+
185+
/** 提交表单 */
186+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
187+
const submitForm = async () => {
188+
// 校验表单
189+
if (!formRef) return
190+
const valid = await formRef.value.getElFormRef().validate()
191+
if (!valid) return
192+
// 提交请求
193+
formLoading.value = true
194+
try {
195+
const data = formRef.value.formModel as BargainActivityApi.BargainActivityVO
196+
const products = spuAndSkuListRef.value.getSkuConfigs('productConfig')
197+
products.forEach((item: BargainProductVO) => {
198+
// 砍价价格元转分
199+
item.bargainFirstPrice = convertToInteger(item.bargainFirstPrice)
200+
item.bargainPrice = convertToInteger(item.bargainPrice)
201+
})
202+
// 用户每次砍价金额分转元, 元转分
203+
data.randomMinPrice = convertToInteger(data.randomMinPrice)
204+
data.randomMaxPrice = convertToInteger(data.randomMaxPrice)
205+
data.products = products
206+
if (formType.value === 'create') {
207+
await BargainActivityApi.createBargainActivity(data)
208+
message.success(t('common.createSuccess'))
209+
} else {
210+
await BargainActivityApi.updateBargainActivity(data)
211+
message.success(t('common.updateSuccess'))
212+
}
213+
dialogVisible.value = false
214+
// 发送操作成功的事件
215+
emit('success')
216+
} finally {
217+
formLoading.value = false
218+
}
219+
}
220+
</script>

0 commit comments

Comments
 (0)