营销:适配商城装修组件【优惠券】

This commit is contained in:
owen
2023-11-22 16:58:00 +08:00
parent 1bb9df7b3c
commit 253401ace3
14 changed files with 436 additions and 56 deletions

View File

@ -48,7 +48,7 @@
</template>
<script setup lang="ts">
import * as CommentApi from '@/api/mall/product/comment'
import SpuShowcase from "@/views/mall/product/spu/components/SpuShowcase.vue";
import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
import * as ProductSpuApi from '@/api/mall/product/spu'
import SkuTableSelect from '@/views/mall/product/spu/components/SkuTableSelect.vue'

View File

@ -27,7 +27,7 @@ import * as ProductSpuApi from '@/api/mall/product/spu'
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
import { propTypes } from '@/utils/propTypes'
import { oneOfType } from 'vue-types'
import { isArray } from "@/utils/is";
import { isArray } from '@/utils/is'
// 商品橱窗,一般用于与商品建立关系时使用
// 提供功能:展示商品列表、添加商品、移除商品
@ -43,9 +43,9 @@ const props = defineProps({
// 计算是否可以添加
const canAdd = computed(() => {
// 情况一:禁用时不可以添加
if(props.disabled) return false
if (props.disabled) return false
// 情况二:未指定限制数量时,可以添加
if(!props.limit) return true
if (!props.limit) return true
// 情况三:检查已添加数量是否小于限制数量
return productSpus.value.length < props.limit
})
@ -57,20 +57,19 @@ watch(
() => props.modelValue,
async () => {
const ids = isArray(props.modelValue)
// 情况一:多选
? props.modelValue
// 情况二:单选
: props.modelValue ? [props.modelValue]: []
? // 情况一:多选
props.modelValue
: // 情况二:单选
props.modelValue
? [props.modelValue]
: []
// 不需要返显
if(ids.length === 0) {
if (ids.length === 0) {
productSpus.value = []
return
}
// 只有商品发生变化之后,才去查询商品
if (
productSpus.value.length === 0 ||
productSpus.value.some((spu) => !ids.includes(spu.id!))
) {
if (productSpus.value.length === 0 || productSpus.value.some((spu) => !ids.includes(spu.id!))) {
productSpus.value = await ProductSpuApi.getSpuDetailList(ids)
}
},
@ -103,12 +102,15 @@ const handleRemoveSpu = (index: number) => {
}
const emit = defineEmits(['update:modelValue', 'change'])
const emitSpuChange = () => {
if(props.limit === 1) {
if (props.limit === 1) {
const spu = productSpus.value.length > 0 ? productSpus.value[0] : null
emit('update:modelValue', spu?.id || 0)
emit('change', spu)
} else {
emit('update:modelValue', productSpus.value.map((spu) => spu.id))
emit(
'update:modelValue',
productSpus.value.map((spu) => spu.id)
)
emit('change', productSpus.value)
}
}

View File

@ -167,7 +167,7 @@ const open = (spuList?: Spu[]) => {
// 处理已选中
if (spuList && spuList.length > 0) {
checkedSpus.value = [...spuList]
checkedStatus.value = Object.fromEntries(spuList.map(spu => [spu.id, true]))
checkedStatus.value = Object.fromEntries(spuList.map((spu) => [spu.id, true]))
}
dialogVisible.value = true
@ -184,7 +184,9 @@ const getList = async () => {
list.value = data.list
total.value = data.total
// checkbox绑定undefined会有问题需要给一个bool值
list.value.forEach( spu => checkedStatus.value[spu.id] = checkedStatus.value[spu.id] || false)
list.value.forEach(
(spu) => (checkedStatus.value[spu.id] = checkedStatus.value[spu.id] || false)
)
// 计算全选框状态
calculateIsCheckAll()
} finally {
@ -272,23 +274,19 @@ const handleCheckOne = (checked: boolean, spu: Spu, isCalcCheckAll: boolean) =>
}
// 计算全选框状态
if(isCalcCheckAll){
if (isCalcCheckAll) {
calculateIsCheckAll()
}
}
// 查找商品在已选中商品列表中的索引
const findCheckedIndex = (spu: Spu) => checkedSpus.value.findIndex(item => item.id === spu.id)
const findCheckedIndex = (spu: Spu) => checkedSpus.value.findIndex((item) => item.id === spu.id)
// 计算全选框状态
const calculateIsCheckAll = () => {
isCheckAll.value = list.value.every(spu => {
let valueElement = checkedStatus.value[spu.id];
debugger
return valueElement;
});
isCheckAll.value = list.value.every((spu) => checkedStatus.value[spu.id])
// 计算中间状态:不是全部选中 && 任意一个选中
isIndeterminate.value = !isCheckAll.value && list.value.some(spu => checkedStatus.value[spu.id])
isIndeterminate.value = !isCheckAll.value && list.value.some((spu) => checkedStatus.value[spu.id])
}
// 分类列表

View File

@ -150,15 +150,14 @@ 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: GiveCouponTemplate[]
multipleSelection: CouponTemplateApi.CouponTemplateVO[]
}>()
const emit = defineEmits<{
(e: 'update:multipleSelection', v: GiveCouponTemplate[])
(e: 'update:multipleSelection', v: CouponTemplateApi.CouponTemplateVO[])
}>()
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('选择优惠卷') // 弹窗的标题
@ -210,10 +209,7 @@ const open = async () => {
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
emit(
'update:multipleSelection',
val.map((item) => ({ id: item.id, name: item.name }))
)
emit('update:multipleSelection', val)
}
const submitForm = () => {

View File

@ -187,7 +187,7 @@ import {
PromotionDiscountTypeEnum,
PromotionProductScopeEnum
} from '@/utils/constants'
import SpuShowcase from "@/views/mall/product/spu/components/SpuShowcase.vue";
import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
import { convertToInteger, formatToFraction } from '@/utils'
@ -385,5 +385,4 @@ function setProductScopeValues(data: CouponTemplateApi.CouponTemplateVO) {
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>