商品推荐和付费会员添加到营销设置页面中
This commit is contained in:
parent
7728cc456a
commit
7a73b09b4c
@ -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" />
|
||||
<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>
|
@ -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({
|
||||
|
@ -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) => {
|
||||
|
Loading…
Reference in New Issue
Block a user