fix：完善秒杀活动管理①
puhui999
3 years ago
parent
3d47d6744e
commit
b1e7f14963
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<el-table :data="spuData">
|
||||
<el-table-column type="expand" width="30">
|
||||
<template #default="{ row }">
|
||||
<SkuList
|
||||
ref="skuListRef"
|
||||
:is-activity-component="true"
|
||||
:prop-form-data="spuPropertyList.find((item) => item.spuId === row.id)?.spuDetail"
|
||||
:property-list="spuPropertyList.find((item) => item.spuId === row.id)?.propertyList"
|
||||
:rule-config="ruleConfig"
|
||||
>
|
||||
<template #extension>
|
||||
<el-table-column align="center" label="秒杀库存" min-width="168">
|
||||
<template #default="{ row: sku }">
|
||||
<el-input-number v-model="sku.productConfig.stock" :min="0" class="w-100%" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="秒杀价格(元)" min-width="168">
|
||||
<template #default="{ row: sku }">
|
||||
<el-input-number
|
||||
v-model="sku.productConfig.seckillPrice"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
class="w-100%"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</SkuList>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column key="id" align="center" label="商品编号" prop="id" />
|
||||
<el-table-column label="商品图" min-width="80">
|
||||
<template #default="{ row }">
|
||||
<el-image :src="row.picUrl" class="w-30px h-30px" @click="imagePreview(row.picUrl)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" />
|
||||
<el-table-column align="center" label="商品售价" min-width="90" prop="price">
|
||||
<template #default="{ row }">
|
||||
{{ formatToFraction(row.price) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
|
||||
<el-table-column align="center" label="库存" min-width="90" prop="stock" />
|
||||
</el-table>
|
||||
</template>
|
||||
<script lang="ts" name="SpuAndSkuList" setup>
|
||||
// TODO 后续计划重新封装作为活动商品配置通用组件
|
||||
import { formatToFraction } from '@/utils'
|
||||
import { createImageViewer } from '@/components/ImageViewer'
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
import { SpuRespVO } from '@/api/mall/product/spu'
|
||||
import {
|
||||
getPropertyList,
|
||||
Properties,
|
||||
RuleConfig,
|
||||
SkuList
|
||||
} from '@/views/mall/product/spu/components'
|
||||
import { SeckillProductVO, SpuExtension } from '@/api/mall/promotion/seckill/seckillActivity'
|
||||
|
||||
const props = defineProps({
|
||||
spuList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
const spuData = ref<SpuRespVO[]>([]) // spu 详情数据列表
|
||||
const skuListRef = ref() // 商品属性列表Ref
|
||||
interface spuProperty {
|
||||
spuId: number
|
||||
spuDetail: SpuExtension
|
||||
propertyList: Properties[]
|
||||
}
|
||||
|
||||
const spuPropertyList = ref<spuProperty[]>([]) // spuId 对应的 sku 的属性列表
|
||||
/**
|
||||
* 获取 SPU 详情
|
||||
* @param spuIds
|
||||
*/
|
||||
const getSpuDetails = async (spuIds: number[]) => {
|
||||
const spuProperties: spuProperty[] = []
|
||||
// TODO puhui999: 考虑后端添加通过 spuIds 批量获取
|
||||
for (const spuId of spuIds) {
|
||||
// 获取 SPU 详情
|
||||
const res = (await ProductSpuApi.getSpu(spuId)) as SpuExtension
|
||||
if (!res) {
|
||||
continue
|
||||
}
|
||||
// 初始化每个 sku 秒杀配置
|
||||
res.skus?.forEach((sku) => {
|
||||
const config: SeckillProductVO = {
|
||||
spuId,
|
||||
skuId: sku.id!,
|
||||
stock: 0,
|
||||
seckillPrice: 0
|
||||
}
|
||||
sku.productConfig = config
|
||||
})
|
||||
spuProperties.push({ spuId, spuDetail: res, propertyList: getPropertyList(res) })
|
||||
}
|
||||
spuPropertyList.value = spuProperties
|
||||
}
|
||||
const ruleConfig: RuleConfig[] = [
|
||||
{
|
||||
name: 'stock',
|
||||
geValue: 10
|
||||
},
|
||||
{
|
||||
name: 'seckillPrice',
|
||||
geValue: 0.01
|
||||
}
|
||||
]
|
||||
const message = useMessage() // 消息弹窗
|
||||
/**
|
||||
* 获取所有 sku 秒杀配置
|
||||
*/
|
||||
const getSkuConfigs = (): SeckillProductVO[] => {
|
||||
if (!skuListRef.value.validateSku()) {
|
||||
// TODO 作为通用组件是需要进一步完善
|
||||
message.warning('请检查商品相关属性配置！！')
|
||||
throw new Error('请检查商品相关属性配置！！')
|
||||
}
|
||||
const seckillProducts: SeckillProductVO[] = []
|
||||
spuPropertyList.value.forEach((item) => {
|
||||
item.spuDetail.skus.forEach((sku) => {
|
||||
seckillProducts.push(sku.productConfig)
|
||||
})
|
||||
})
|
||||
return seckillProducts
|
||||
}
|
||||
// 暴露出给表单提交时使用
|
||||
defineExpose({ getSkuConfigs })
|
||||
/** 商品图预览 */
|
||||
const imagePreview = (imgUrl: string) => {
|
||||
createImageViewer({
|
||||
zIndex: 99999999,
|
||||
urlList: [imgUrl]
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 将传进来的值赋值给 skuList
|
||||
*/
|
||||
watch(
|
||||
() => props.spuList,
|
||||
(data) => {
|
||||
if (!data) return
|
||||
spuData.value = data as SpuRespVO[]
|
||||
getSpuDetails(spuData.value.map((spu) => spu.id!))
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
@ -1,3 +1,4 @@
|
||||
import SpuAndSkuSelectForm from './SpuAndSkuSelectForm.vue'
|
||||
import SpuAndSkuList from './SpuAndSkuList.vue'
|
||||
|
||||
export { SpuAndSkuSelectForm }
|
||||
export { SpuAndSkuSelectForm, SpuAndSkuList }
|
||||
|
||||
Loading…
Reference in New Issue