商品推荐和付费会员添加到营销设置页面中

This commit is contained in:
XinWei 2024-09-27 15:57:11 +08:00
parent 7728cc456a
commit 7a73b09b4c
3 changed files with 139 additions and 42 deletions

View File

@ -0,0 +1,126 @@
<!-- 商品发布 - 库存价格 -->
<template>
<el-form ref="formRef" :disabled="isDetail" :model="formData" :rules="rules" label-width="120px">
<el-form-item label="付费会员专属:" >
<el-switch
v-model="formData.onlyPaidMemberView"
:active-value="1"
:inactive-value="0" />
&nbsp;&nbsp;&nbsp;<el-text class="mx-1" size="small">开启后仅付费会员可以看见并购买此商品</el-text>
</el-form-item>
<el-form-item label="商品推荐">
<el-checkbox
v-model="formData.recommendHot"
:true-value="1"
:false-value="0"
name="productRecommend">
热卖单品
</el-checkbox>
<el-checkbox
v-model="formData.recommendBenefit"
:true-value="1"
:false-value="0"
name="productRecommend">
促销单品
</el-checkbox>
<el-checkbox
v-model="formData.recommendBest"
:true-value="1"
:false-value="0"
name="productRecommend">
精品推荐
</el-checkbox>
<el-checkbox
v-model="formData.recommendNew"
:true-value="1"
:false-value="0"
name="productRecommend">
新品单品
</el-checkbox>
<el-checkbox
v-model="formData.recommendGood"
:true-value="1"
:false-value="0"
name="productRecommend">
优品推荐
</el-checkbox>
</el-form-item>
</el-form>
<!-- 商品属性添加 Form 表单 -->
<ProductPropertyAddForm ref="attributesAddFormRef" :propertyList="propertyList" />
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { copyValueToTarget } from '@/utils'
import { propTypes } from '@/utils/propTypes'
import {
getPropertyList,
PropertyAndValues,
RuleConfig,
SkuList
} from '@/views/mall/product/spu/components/index'
import ProductAttributes from './ProductAttributes.vue'
import ProductPropertyAddForm from './ProductPropertyAddForm.vue'
import type { Spu } from '@/api/mall/product/spu'
defineOptions({ name: 'ProductSpuSkuForm' })
const message = useMessage() //
const props = defineProps({
propFormData: {
type: Object as PropType<Spu>,
default: () => {}
},
isDetail: propTypes.bool.def(false) //
})
const attributesAddFormRef = ref() //
const formRef = ref() // Ref
const propertyList = ref<PropertyAndValues[]>([]) //
const skuListRef = ref() // Ref
const formData = reactive<Spu>({
recommendHot: 0, //
recommendBenefit: 0, //
recommendBest: 0, //
recommendNew: 0, //
recommendGood: 0, //
onlyPaidMemberView: 0 //
})
const rules = reactive({
// specType: [required],
// subCommissionType: [required]
})
/** 将传进来的值赋值给 formData */
watch(
() => props.propFormData,
(data) => {
if (!data) {
return
}
copyValueToTarget(formData, data)
// SKU PropertyAndValues
propertyList.value = getPropertyList(data)
},
{
immediate: true
}
)
/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
if (!formRef) return
try {
//
Object.assign(props.propFormData, formData)
} catch (e) {
throw e //
}
}
defineExpose({ validate })
</script>

View File

@ -17,43 +17,6 @@
<el-radio :label="true">多规格</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="商品推荐">
<el-checkbox
v-model="formData.recommendHot"
:true-value="1"
:false-value="0"
name="productRecommend">
热卖单品
</el-checkbox>
<el-checkbox
v-model="formData.recommendBenefit"
:true-value="1"
:false-value="0"
name="productRecommend">
促销单品
</el-checkbox>
<el-checkbox
v-model="formData.recommendBest"
:true-value="1"
:false-value="0"
name="productRecommend">
精品推荐
</el-checkbox>
<el-checkbox
v-model="formData.recommendNew"
:true-value="1"
:false-value="0"
name="productRecommend">
新品单品
</el-checkbox>
<el-checkbox
v-model="formData.recommendGood"
:true-value="1"
:false-value="0"
name="productRecommend">
优品推荐
</el-checkbox>
</el-form-item>
<!-- 多规格添加-->
<el-form-item v-if="!formData.specType">
<SkuList
@ -146,11 +109,6 @@ const skuListRef = ref() // 商品属性列表 Ref
const formData = reactive<Spu>({
specType: false, //
subCommissionType: false, //
recommendHot: 0, //
recommendBenefit: 0, //
recommendBest: 0, //
recommendNew: 0, //
recommendGood: 0, //
skus: []
})
const rules = reactive({

View File

@ -33,6 +33,14 @@
:propFormData="formData"
/>
</el-tab-pane>
<el-tab-pane label="营销设置" name="marketing">
<MarketingForm
ref="marketingRef"
v-model:activeName="activeName"
:is-detail="isDetail"
:propFormData="formData"
/>
</el-tab-pane>
<el-tab-pane label="其它设置" name="other">
<OtherForm
ref="otherRef"
@ -41,6 +49,7 @@
:propFormData="formData"
/>
</el-tab-pane>
</el-tabs>
<el-form>
<el-form-item style="float: right">
@ -61,6 +70,7 @@ import DescriptionForm from './DescriptionForm.vue'
import OtherForm from './OtherForm.vue'
import SkuForm from './SkuForm.vue'
import DeliveryForm from './DeliveryForm.vue'
import MarketingForm from './MarketingForm.vue'
import { convertToInteger, floatToFixed2, formatToFraction } from '@/utils'
defineOptions({ name: 'ProductSpuForm' })
@ -79,6 +89,7 @@ const skuRef = ref() // 商品规格 Ref
const deliveryRef = ref() // Ref
const descriptionRef = ref() // Ref
const otherRef = ref() // Ref
const marketingRef = ref() // Ref
// SPU
const formData = ref<ProductSpuApi.Spu>({
name: '', //
@ -97,6 +108,7 @@ const formData = ref<ProductSpuApi.Spu>({
recommendBest: 0, //
recommendNew: 0, //
recommendGood: 0, //
onlyPaidMemberView: 0, //
skus: [
{
price: 0, //
@ -164,6 +176,7 @@ const submitForm = async () => {
await unref(deliveryRef)?.validate()
await unref(descriptionRef)?.validate()
await unref(otherRef)?.validate()
await unref(marketingRef)?.validate()
// , server
const deepCopyFormData = cloneDeep(unref(formData.value)) as ProductSpuApi.Spu
deepCopyFormData.skus!.forEach((item) => {