商品评论、优惠券模板复用组件【商品橱窗】

This commit is contained in:
owen 2023-11-20 10:53:02 +08:00
parent 3198688eb5
commit e0a731dd86
4 changed files with 41 additions and 101 deletions

View File

@ -8,14 +8,7 @@
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="商品" prop="spuId"> <el-form-item label="商品" prop="spuId">
<div @click="handleSelectSpu" class="h-60px w-60px"> <SpuShowcase v-model="formData.spuId" :limit="1" />
<div v-if="spuData && spuData.picUrl">
<el-image :src="spuData.picUrl" />
</div>
<div v-else class="select-box">
<Icon icon="ep:plus" />
</div>
</div>
</el-form-item> </el-form-item>
<el-form-item label="商品规格" prop="skuId" v-if="formData.spuId"> <el-form-item label="商品规格" prop="skuId" v-if="formData.spuId">
<div @click="handleSelectSku" class="h-60px w-60px"> <div @click="handleSelectSku" class="h-60px w-60px">
@ -51,12 +44,11 @@
<el-button @click="dialogVisible = false"> </el-button> <el-button @click="dialogVisible = false"> </el-button>
</template> </template>
</Dialog> </Dialog>
<SpuTableSelect ref="spuTableSelectRef" @change="handleSpuChange" /> <SkuTableSelect ref="skuTableSelectRef" @change="handleSkuChange" :spu-id="formData.spuId" />
<SkuTableSelect ref="skuTableSelectRef" @change="handleSkuChange" :spu-id="spuData.id" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import * as CommentApi from '@/api/mall/product/comment' import * as CommentApi from '@/api/mall/product/comment'
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue' import SpuShowcase from "@/views/mall/product/spu/components/SpuShowcase.vue";
import * as ProductSpuApi from '@/api/mall/product/spu' import * as ProductSpuApi from '@/api/mall/product/spu'
import SkuTableSelect from '@/views/mall/product/spu/components/SkuTableSelect.vue' import SkuTableSelect from '@/views/mall/product/spu/components/SkuTableSelect.vue'
@ -72,8 +64,7 @@ const formData = ref({
userId: undefined, userId: undefined,
userNickname: undefined, userNickname: undefined,
userAvatar: undefined, userAvatar: undefined,
spuId: undefined, spuId: 0,
spuName: undefined,
skuId: undefined, skuId: undefined,
descriptionScores: 5, descriptionScores: 5,
benefitScores: 5, benefitScores: 5,
@ -90,7 +81,6 @@ const formRules = reactive({
benefitScores: [{ required: true, message: '服务星级不能为空', trigger: 'blur' }] benefitScores: [{ required: true, message: '服务星级不能为空', trigger: 'blur' }]
}) })
const formRef = ref() // Ref const formRef = ref() // Ref
const spuData = ref<ProductSpuApi.Spu>({})
const skuData = ref({ const skuData = ref({
id: -1, id: -1,
name: '', name: '',
@ -149,8 +139,7 @@ const resetForm = () => {
userId: undefined, userId: undefined,
userNickname: undefined, userNickname: undefined,
userAvatar: undefined, userAvatar: undefined,
spuId: undefined, spuId: 0,
spuName: undefined,
skuId: undefined, skuId: undefined,
descriptionScores: 5, descriptionScores: 5,
benefitScores: 5, benefitScores: 5,
@ -160,16 +149,6 @@ const resetForm = () => {
formRef.value?.resetFields() formRef.value?.resetFields()
} }
/** SPU 表格选择 */
const spuTableSelectRef = ref()
const handleSelectSpu = () => {
spuTableSelectRef.value.open()
}
const handleSpuChange = (spu: ProductSpuApi.Spu) => {
spuData.value = spu
formData.value.spuId = spu.id
}
/** SKU 表格选择 */ /** SKU 表格选择 */
const skuTableSelectRef = ref() const skuTableSelectRef = ref()
const handleSelectSku = () => { const handleSelectSku = () => {

View File

@ -59,7 +59,7 @@
<!-- 列表 --> <!-- 列表 -->
<ContentWrap> <ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="false"> <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="false">
<el-table-column label="评论编号" align="center" prop="id" min-width="50" /> <el-table-column label="评论编号" align="center" prop="id" min-width="80" />
<el-table-column label="商品信息" align="center" min-width="400"> <el-table-column label="商品信息" align="center" min-width="400">
<template #default="scope"> <template #default="scope">
<div class="row flex items-center gap-x-4px"> <div class="row flex items-center gap-x-4px">

View File

@ -13,13 +13,8 @@
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<el-tooltip content="选择商品"> <el-tooltip content="选择商品" v-if="canAdd">
<div <div class="select-box" @click="openSpuTableSelect">
v-show="!disabled"
v-if="!limit || limit <= productSpus.length"
class="select-box"
@click="openSpuTableSelect"
>
<Icon icon="ep:plus" /> <Icon icon="ep:plus" />
</div> </div>
</el-tooltip> </el-tooltip>
@ -31,35 +26,52 @@
import * as ProductSpuApi from '@/api/mall/product/spu' import * as ProductSpuApi from '@/api/mall/product/spu'
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue' import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { array } from 'vue-types' import { oneOfType } from 'vue-types'
import { isArray } from "@/utils/is";
// 使 // 使
// //
defineOptions({ name: 'SpuShowcase' }) defineOptions({ name: 'SpuShowcase' })
const props = defineProps({ const props = defineProps({
modelValue: array<number>().def([]).isRequired, modelValue: oneOfType<number | Array<number>>([Number, Array]).isRequired,
// //
limit: propTypes.number.def(0), limit: propTypes.number.def(Number.MAX_VALUE),
disabled: propTypes.bool.def(false) disabled: propTypes.bool.def(false)
}) })
//
const canAdd = computed(() => {
//
if(props.disabled) return false
//
if(!props.limit) return true
//
return productSpus.value.length < props.limit
})
// //
const productSpus = ref<ProductSpuApi.Spu[]>([]) const productSpus = ref<ProductSpuApi.Spu[]>([])
watch( watch(
() => props.modelValue, () => props.modelValue,
async () => { async () => {
if (props.modelValue.length === 0) { const ids = isArray(props.modelValue)
//
? props.modelValue
//
: props.modelValue ? [props.modelValue]: []
//
if(ids.length === 0) {
productSpus.value = [] productSpus.value = []
return return
} }
// //
if ( if (
productSpus.value.length === 0 || productSpus.value.length === 0 ||
productSpus.value.some((spu) => !props.modelValue.includes(spu.id)) productSpus.value.some((spu) => !ids.includes(spu.id!))
) { ) {
productSpus.value = await ProductSpuApi.getSpuDetailList(props.modelValue) productSpus.value = await ProductSpuApi.getSpuDetailList(ids)
} }
}, },
{ immediate: true } { immediate: true }
@ -91,11 +103,14 @@ const handleRemoveSpu = (index: number) => {
} }
const emit = defineEmits(['update:modelValue', 'change']) const emit = defineEmits(['update:modelValue', 'change'])
const emitSpuChange = () => { const emitSpuChange = () => {
emit( if(props.limit === 1) {
'update:modelValue', const spu = productSpus.value.length > 0 ? productSpus.value[0] : null
productSpus.value.map((spu) => spu.id) emit('update:modelValue', spu?.id || 0)
) emit('change', spu)
emit('change', productSpus.value) } else {
emit('update:modelValue', productSpus.value.map((spu) => spu.id))
emit('change', productSpus.value)
}
} }
</script> </script>

View File

@ -26,15 +26,7 @@
label="商品" label="商品"
prop="productSpuIds" prop="productSpuIds"
> >
<div class="flex flex-wrap items-center gap-1"> <SpuShowcase v-model="formData.productSpuIds" />
<div v-for="(spu, index) in productSpus" :key="spu.id" class="select-box spu-pic">
<el-image :src="spu.picUrl" />
<Icon class="del-icon" icon="ep:circle-close-filled" @click="handleRemoveSpu(index)" />
</div>
<div class="select-box" @click="openSpuTableSelect">
<Icon icon="ep:plus" />
</div>
</div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="formData.productScope === PromotionProductScopeEnum.CATEGORY.scope" v-if="formData.productScope === PromotionProductScopeEnum.CATEGORY.scope"
@ -186,18 +178,16 @@
<el-button @click="dialogVisible = false"> </el-button> <el-button @click="dialogVisible = false"> </el-button>
</template> </template>
</Dialog> </Dialog>
<SpuTableSelect ref="spuTableSelectRef" multiple @change="handleSpuSelected" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate' import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
import * as ProductSpuApi from '@/api/mall/product/spu'
import { import {
CouponTemplateValidityTypeEnum, CouponTemplateValidityTypeEnum,
PromotionDiscountTypeEnum, PromotionDiscountTypeEnum,
PromotionProductScopeEnum PromotionProductScopeEnum
} from '@/utils/constants' } from '@/utils/constants'
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue' import SpuShowcase from "@/views/mall/product/spu/components/SpuShowcase.vue";
import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue' import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
import { convertToInteger, formatToFraction } from '@/utils' import { convertToInteger, formatToFraction } from '@/utils'
@ -251,7 +241,6 @@ const formRules = reactive({
productCategoryIds: [{ required: true, message: '分类不能为空', trigger: 'blur' }] productCategoryIds: [{ required: true, message: '分类不能为空', trigger: 'blur' }]
}) })
const formRef = ref() // Ref const formRef = ref() // Ref
const productSpus = ref<ProductSpuApi.Spu[]>([]) //
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (type: string, id?: number) => { const open = async (type: string, id?: number) => {
@ -354,7 +343,6 @@ const resetForm = () => {
productCategoryIds: [] productCategoryIds: []
} }
formRef.value?.resetFields() formRef.value?.resetFields()
productSpus.value = []
} }
/** 获得商品范围 */ /** 获得商品范围 */
@ -363,8 +351,6 @@ const getProductScope = async () => {
case PromotionProductScopeEnum.SPU.scope: case PromotionProductScopeEnum.SPU.scope:
// //
formData.value.productSpuIds = formData.value.productScopeValues formData.value.productSpuIds = formData.value.productScopeValues
//
productSpus.value = await ProductSpuApi.getSpuDetailList(formData.value.productScopeValues)
break break
case PromotionProductScopeEnum.CATEGORY.scope: case PromotionProductScopeEnum.CATEGORY.scope:
await nextTick(() => { await nextTick(() => {
@ -397,47 +383,7 @@ function setProductScopeValues(data: CouponTemplateApi.CouponTemplateVO) {
break break
} }
} }
/** 活动商品的按钮 */
const spuTableSelectRef = ref()
const openSpuTableSelect = () => {
spuTableSelectRef.value.open(productSpus.value)
}
/** 选择商品后触发 */
const handleSpuSelected = (spus: ProductSpuApi.Spu[]) => {
productSpus.value = spus
formData.value.productSpuIds = spus.map((spu) => spu.id) as []
}
/** 选择商品后触发 */
const handleRemoveSpu = (index: number) => {
productSpus.value.splice(index, 1)
formData.value.productSpuIds.splice(index, 1)
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.select-box {
display: flex;
width: 60px;
height: 60px;
border: 1px dashed var(--el-border-color-darker);
border-radius: 8px;
align-items: center;
justify-content: center;
}
.spu-pic {
position: relative;
}
.del-icon {
position: absolute;
top: -10px;
right: -10px;
z-index: 1;
width: 20px !important;
height: 20px !important;
}
</style> </style>