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

yudao-admin-vue3/src/views/mall/product/spu/form/MarketingForm.vue

@@ -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>

yudao-admin-vue3/src/views/mall/product/spu/form/SkuForm.vue

@@ -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({

yudao-admin-vue3/src/views/mall/product/spu/form/index.vue

@@ -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) => {