商品管理初始界面结构设计

(cherry picked from commit a0014bed65)

src/views/mall/product/management/components/BasicInfoForm.vue

@@ -0,0 +1,191 @@
+<template>
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="商品名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入商品名称" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="商品分类" prop="categoryId">
+          <el-tree-select
+            v-model="formData.categoryId"
+            :data="[]"
+            :props="defaultProps"
+            check-strictly
+            node-key="id"
+            placeholder="请选择商品分类"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="商品关键字" prop="keyword">
+          <el-input v-model="formData.keyword" placeholder="请输入商品关键字" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="单位" prop="unit">
+          <el-input v-model="formData.unit" placeholder="请输入单位" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="商品简介" prop="introduction">
+          <el-input
+            v-model="formData.introduction"
+            :rows="3"
+            placeholder="请输入商品简介"
+            type="textarea"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="商品封面图" prop="picUrl">
+          <div class="demo-image__preview pt-5px pb-5px pl-11x pr-11px">
+            <el-image
+              :initial-index="0"
+              :preview-src-list="srcList"
+              :src="url"
+              :zoom-rate="1.2"
+              fit="cover"
+              style="width: 100%; height: 90px"
+            />
+          </div>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="商品轮播图" prop="sliderPicUrls">
+          <el-button>添加轮播图</el-button>
+          <el-carousel :interval="3000" height="200px" style="width: 100%" type="card">
+            <el-carousel-item v-for="item in 6" :key="item">
+              <h3 justify="center" text="2xl">{{ item }}</h3>
+            </el-carousel-item>
+          </el-carousel>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="运费模板" prop="deliveryTemplateId">
+          <el-select v-model="formData.deliveryTemplateId" placeholder="请选择" style="width: 100%">
+            <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-button class="ml-20px">运费模板</el-button>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="商品规格" props="specType">
+          <el-radio-group v-model="formData.specType" @change="changeSpecType(formData.specType)">
+            <el-radio :label="false" class="radio">单规格</el-radio>
+            <el-radio :label="true">多规格</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <!-- TODO 商品规格和分销类型切换待定    -->
+      <el-col :span="12">
+        <el-form-item label="分销类型" props="subCommissionType">
+          <el-radio-group
+            v-model="formData.subCommissionType"
+            @change="changeSubCommissionType(formData.subCommissionType)"
+          >
+            <el-radio :label="false">默认设置</el-radio>
+            <el-radio :label="true" class="radio">自行设置</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <!-- 多规格添加-->
+      <el-col v-if="formData.specType" :span="24">
+        <el-form-item label="选择规格" prop="">
+          <div class="acea-row">
+            <el-select v-model="formData.selectRule">
+              <el-option
+                v-for="item in []"
+                :key="item.id"
+                :label="item.ruleName"
+                :value="item.id"
+              />
+            </el-select>
+            <el-button class="mr-20px" type="primary" @click="confirm">确认</el-button>
+            <el-button class="mr-15px" @click="addRule">添加规格</el-button>
+          </div>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script lang="ts" name="ProductManagementBasicInfoForm" setup>
+// TODO 商品封面测试数据
+import { defaultProps } from '@/utils/tree'
+
+const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
+const srcList = ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']
+
+const formRef = ref()
+const formData = ref({
+  name: '', // 商品名称
+  categoryId: '', // 商品分类
+  keyword: '', // 关键字
+  unit: '', // 单位
+  picUrl: '', // 商品封面图
+  sliderPicUrls: [], // 商品轮播图
+  introduction: '', // 商品简介
+  deliveryTemplateId: '', // 运费模版
+  selectRule: '',
+  specType: false, // 商品规格
+  subCommissionType: false // 分销类型
+})
+const rules = reactive({
+  name: [required],
+  categoryId: [required],
+  keyword: [required],
+  unit: [required],
+  picUrl: [required],
+  sliderPicUrls: [required],
+  deliveryTemplateId: [required],
+  specType: [required],
+  subCommissionType: [required]
+})
+// 选择规格
+const changeSpecType = (specType) => {
+  console.log(specType)
+}
+// 分销类型
+const changeSubCommissionType = (subCommissionType) => {
+  console.log(subCommissionType)
+}
+// 选择属性确认
+const confirm = () => {}
+// 添加规格
+const addRule = () => {}
+</script>
+<style scoped>
+/*TODO 商品轮播图测试样式*/
+.el-carousel__item h3 {
+  color: #475669;
+  opacity: 0.75;
+  line-height: 200px;
+  margin: 0;
+  text-align: center;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+
+/*TODO 商品封面测试样式*/
+.demo-image__error .image-slot {
+  font-size: 30px;
+}
+
+.demo-image__error .image-slot .el-icon {
+  font-size: 30px;
+}
+
+.demo-image__error .el-image {
+  width: 100%;
+  height: 200px;
+}
+</style>

src/views/mall/product/management/components/DescriptionForm.vue

@@ -0,0 +1,13 @@
+<template>
+  <!--富文本编辑器组件-->
+  <el-row>
+    <Editor v-model="content" :editor-config="editorConfig" />
+  </el-row>
+</template>
+<script lang="ts" name="DescriptionForm" setup>
+import { Editor } from '@/components/Editor'
+import { createEditorConfig } from '@/views/mp/draft/editor-config'
+// TODO 模拟参数
+const content = ref('')
+const editorConfig = createEditorConfig('', 1)
+</script>

src/views/mall/product/management/components/OtherSettingsForm.vue

@@ -0,0 +1,94 @@
+<template>
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="8">
+          <el-form-item label="商品排序">
+            <el-input-number v-model="formData.sort" :min="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="赠送积分">
+            <el-input-number v-model="formData.giveIntegral" :min="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="虚拟销量">
+            <el-input-number
+              v-model="formData.virtualSalesCount"
+              :min="0"
+              placeholder="请输入虚拟销量"
+            />
+          </el-form-item>
+        </el-col>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="商品推荐">
+          <el-checkbox-group v-model="checkboxGroup" @change="onChangeGroup">
+            <el-checkbox v-for="(item, index) in recommend" :key="index" :label="item.value">
+              {{ item.name }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <!--   TODO tag展示暂时不考虑排序     -->
+        <el-form-item label="活动优先级">
+          <el-tag>默认</el-tag>
+          <el-tag class="ml-2" type="success">秒杀</el-tag>
+          <el-tag class="ml-2" type="info">砍价</el-tag>
+          <el-tag class="ml-2" type="warning">拼团</el-tag>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="赠送优惠劵">
+          <el-button>选择优惠券</el-button>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script lang="ts" name="OtherSettingsForm" setup>
+// 商品推荐
+const recommend = [
+  { name: '是否热卖', value: 'recommendHot' },
+  { name: '是否优惠', value: 'recommendBenefit' },
+  { name: '是否精品', value: 'recommendBest' },
+  { name: '是否新品', value: 'recommendNew' },
+  { name: '是否优品', value: 'recommendGood' }
+]
+const checkboxGroup = ref<string[]>([])
+const onChangeGroup = () => {
+  checkboxGroup.value.includes('recommendHot')
+    ? (formData.value.recommendHot = true)
+    : (formData.value.recommendHot = false)
+  checkboxGroup.value.includes('recommendBenefit')
+    ? (formData.value.recommendBenefit = true)
+    : (formData.value.recommendBenefit = false)
+  checkboxGroup.value.includes('recommendBest')
+    ? (formData.value.recommendBest = true)
+    : (formData.value.recommendBest = false)
+  checkboxGroup.value.includes('recommendNew')
+    ? (formData.value.recommendNew = true)
+    : (formData.value.recommendNew = false)
+  checkboxGroup.value.includes('recommendGood')
+    ? (formData.value.recommendGood = true)
+    : (formData.value.recommendGood = false)
+}
+const formRef = ref()
+const formData = ref({
+  sort: '',
+  giveIntegral: 666,
+  virtualSalesCount: 565656,
+  recommendHot: false,
+  recommendBenefit: false,
+  recommendBest: false,
+  recommendNew: false,
+  recommendGood: false
+})
+const rules = reactive({
+  sort: [required],
+  giveIntegral: [required],
+  virtualSalesCount: [required]
+})
+</script>

src/views/mall/product/management/components/index.ts

@@ -0,0 +1,5 @@
+import BasicInfoForm from './BasicInfoForm.vue'
+import DescriptionForm from './DescriptionForm.vue'
+import OtherSettingsForm from './OtherSettingsForm.vue'
+
+export { BasicInfoForm, DescriptionForm, OtherSettingsForm }