商品多媒体及评价系统-需求文档.md 75 KB

商品多媒体及评价系统 - 需求文档

一、需求概述

本次需求涉及以下模块的数据库设计及前后端功能开发:

序号 模块 说明
1 商品多媒体 商品轮播图、商品详情媒体
2 商品富文本描述 商品详情页富文本内容
3 商品参数系统 参数模板、分类关联、商品参数值
4 商品唯一标识 SKU 编码(二维码/条形码)
5 售后评价系统 用户评价、媒体附件、商家回复

二、数据模型设计

2.1 新增/修改的表清单

序号 表名 类型 说明
1 bas_product 修改 商品主表,新增字段
2 bas_product_his 修改 商品主表历史表,同步新增字段
3 bas_product_banner 新增 商品轮播图表
4 bas_product_banner_his 新增 商品轮播图历史表
5 bas_product_detail_media 新增 商品详情媒体表
6 bas_product_detail_media_his 新增 商品详情媒体历史表
7 bas_product_parameter 新增 商品参数码表
8 bas_product_parameter_his 新增 商品参数码表历史表
9 bas_category_parameter 新增 分类-参数关联表
10 bas_category_parameter_his 新增 分类-参数关联历史表
11 bas_product_parameter_value 新增 商品参数值表
12 bas_product_parameter_value_his 新增 商品参数值历史表
13 biz_product_review 新增 售后评价主表
14 biz_product_review_his 新增 售后评价历史表
15 biz_product_review_media 新增 评价媒体子表
16 biz_product_review_media_his 新增 评价媒体历史表

2.2 bas_product 表新增字段

字段名 类型 说明
sku_code VARCHAR(50) 商品SKU编码(唯一标识,用于二维码/条形码)
detail_content TEXT 商品详情富文本内容

2.3 完整 ER 关系图

┌─────────────────────────────────────────────────────────────────────────┐
│                            系统配置层                                     │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌──────────────────────────────┐                                      │
│  │ bas_product_parameter         │ ← 商品参数码表                        │
│  │ 参数模板定义表                  │   定义:等级、产地、包装方式 等        │
│  └──────────────┬───────────────┘                                      │
│                 │ N:M                                                   │
│                 ▼                                                       │
│  ┌──────────────────────────────┐                                      │
│  │ bas_category_parameter        │ ← 分类-参数关联表                      │
│  │ 分类关联参数表                  │   定义每个分类需要哪些参数              │
│  └──────────────┬───────────────┘                                      │
│                 │                                                       │
└─────────────────┼───────────────────────────────────────────────────────┘
                  │ 分类关联商品
                  ▼
┌─────────────────────────────────────────────────────────────────────────┐
│                             商品层                                       │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌─────────────────────────────────────────────────────────────────┐   │
│  │                        bas_product                               │   │
│  │                         商品主表                                  │   │
│  │  ┌───────────────────────────────────────────────────────────┐  │   │
│  │  │ id, sku_code, name, category_id, unit_id, image_url     │  │   │
│  │  │ detail_content(富文本), is_active, is_del ...            │  │   │
│  │  └───────────────────────────────────────────────────────────┘  │   │
│  └────────────────────────────┬────────────────────────────────────┘   │
│                               │                                          │
│           ┌───────────────────┼───────────────────┐                     │
│           │                   │                   │                     │
│           ▼                   ▼                   ▼                     │
│  ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────────────┐  │
│  │bas_product_     │ │bas_product_      │ │bas_product_             │  │
│  │    banner       │ │  detail_media    │ │ parameter_value         │  │
│  │  轮播图表       │ │   详情媒体表     │ │   商品参数值表            │  │
│  │  轮播图/视频    │ │   详情图/视频    │ │   商品参数值              │  │
│  └─────────────────┘ └─────────────────┘ └─────────────────────────┘  │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
                  │
                  │ 商品关联评价
                  ▼
┌─────────────────────────────────────────────────────────────────────────┐
│                             评价层                                       │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌─────────────────────────────────────────────────────────────────┐   │
│  │                    biz_product_review                            │   │
│  │                      售后评价主表                                  │   │
│  │  ┌───────────────────────────────────────────────────────────┐  │   │
│  │  │ id, product_id, order_id, user_id, rating, content       │  │   │
│  │  │ status, reply_content, like_count, is_top ...            │  │   │
│  │  └───────────────────────────────────────────────────────────┘  │   │
│  └────────────────────────────┬────────────────────────────────────┘   │
│                               │ 1:N                                    │
│                               ▼                                        │
│  ┌─────────────────────────────────────────────────────────────────┐   │
│  │                  biz_product_review_media                        │   │
│  │                     评价媒体子表                                   │   │
│  │  评价图片/视频                                                    │   │
│  └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

三、Web 管理端功能设计

3.1 技术选型

技术 说明
Vue 3 + TypeScript 前端框架
Element Plus UI 组件库
Tailwind CSS 样式框架
wangEditor 富文本编辑器
vuedraggable 拖拽排序组件

3.2 新增菜单配置

3.2.1 菜单 SQL 配置

-- ============================================
-- 新增菜单:参数模板管理(放在"基础数据"下)
-- ============================================
INSERT INTO `sanqiang`.`sys_menu` (`id`, `name`, `code`, `path`, `component`, `icon`, `parent_id`, `sort_order`, `redirect`, `menu_type`, `is_visible`, `is_cache`, `is_active`, `is_del`, `remark`, `create_at`, `create_by`, `create_name`, `update_at`, `update_by`) VALUES ('10000000000000000000000000000008', '参数模板', 'parameter', '/parameter', 'parameter/index', 'Operation', '10000000000000000000000000000002', 6, NULL, 'menu', 1, 0, 1, 0, NULL, '2026-03-31 10:00:00', 'system', '系统', NULL, NULL);

-- ============================================
-- 新增菜单分组:售后管理
-- ============================================
INSERT INTO `sanqiang`.`sys_menu` (`id`, `name`, `code`, `path`, `component`, `icon`, `parent_id`, `sort_order`, `redirect`, `menu_type`, `is_visible`, `is_cache`, `is_active`, `is_del`, `remark`, `create_at`, `create_by`, `create_name`, `update_at`, `update_by`) VALUES ('10000000000000000000000000000070', '售后管理', 'after_sale', '', '', NULL, NULL, 8, NULL, 'menu', 1, 0, 1, 0, NULL, '2026-03-31 10:00:00', 'system', '系统', NULL, NULL);

-- ============================================
-- 新增菜单:售后评价管理(放在"售后管理"下)
-- ============================================
INSERT INTO `sanqiang`.`sys_menu` (`id`, `name`, `code`, `path`, `component`, `icon`, `parent_id`, `sort_order`, `redirect`, `menu_type`, `is_visible`, `is_cache`, `is_active`, `is_del`, `remark`, `create_at`, `create_by`, `create_name`, `update_at`, `update_by`) VALUES ('10000000000000000000000000000071', '售后评价', 'review', '/review', 'review/index', 'Star', '10000000000000000000000000000070', 1, NULL, 'menu', 1, 0, 1, 0, NULL, '2026-03-31 10:00:00', 'system', '系统', NULL, NULL);

3.3 功能模块清单

序号 模块 页面路径 说明
1 参数模板管理 /parameter 参数模板列表/新增/编辑(新增页面)
2 售后评价管理 /review 评价列表/审核/回复(新增页面)
3 商品编辑 /product/edit/:id 富文本编辑器(改造)
4 分类编辑 /category/edit/:id 分类参数配置(改造)

3.4 页面功能详细说明

3.4.1 参数模板管理页

路径: /parameter
组件: parameter/index.vue

┌─────────────────────────────────────────────────────────────────┐
│                      参数模板管理                                │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  [新增参数]                                                      │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ 参数名称  │ 参数编码  │ 输入类型  │ 可选值      │ 状态  │ 操作 │  │
│  ├──────────┼──────────┼───────────┼─────────────┼───────┼─────│  │
│  │ 等级     │ grade    │ 单选下拉   │ A级,B级,C级 │ 启用  │ 编辑 │  │
│  │ 产地     │ origin   │ 文本输入   │ -           │ 启用  │ 编辑 │  │
│  │ 包装方式  │ packaging │ 单选下拉   │ 散装,袋装   │ 启用  │ 编辑 │  │
│  │ 规格     │ spec     │ 文本输入   │ -           │ 禁用  │ 编辑 │  │
│  │ 保质期   │ shelf_life│ 文本输入   │ -           │ 启用  │ 编辑 │  │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

新增/编辑参数弹窗:

┌─────────────────────────────────────────────────────────────────┐
│                    新增/编辑参数                                 │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  参数名称:[*] [________________]                               │
│  参数编码:[*] [________________] (如: grade)                   │
│  输入类型:(*) 文本输入  ( ) 单选下拉  ( ) 多选                  │
│                                                                 │
│  可选值:   [当选择下拉时显示]                                    │
│             [每行一个值____________]                             │
│             [____________________]                             │
│             [____________________]                             │
│                                                                 │
│  是否必填:(*) 否  ( ) 是                                        │
│  排序号:   [____10____]                                        │
│  备注:     [____________________]                             │
│                                                                 │
│                            [取消]  [确定]                        │
└─────────────────────────────────────────────────────────────────┘

3.4.2 商品编辑页改造

路径: /product/edit/:id, /product/create
组件: product/form.vue 或 product/edit.vue

┌─────────────────────────────────────────────────────────────────┐
│                      商品编辑                                    │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  基本信息                                                        │
│  ├─ 商品名称:[输入框]                                           │
│  ├─ SKU 编码:[输入框________] + [自动生成] 按钮                  │
│  ├─ 商品分类:[下拉选择]                                         │
│  ├─ 商品单位:[下拉选择]                                         │
│  └─ 商品描述:[简要描述输入框]                                   │
│                                                                 │
│  商品图片                                                        │
│  ├─ [上传图片] 按钮                                              │
│  └─ 图片列表:拖拽排序,支持设为封面                              │
│                                                                 │
│  轮播图/视频                                                     │
│  ├─ [上传媒体] 按钮(支持图片/视频)                              │
│  └─ 媒体列表:拖拽排序,支持预览                                  │
│                                                                 │
│  详情内容(富文本编辑器 - wangEditor)                            │
│  ├─ 富文本编辑器                                                 │
│  │   - 支持文字、图片、视频混排                                   │
│  │   - 支持从媒体库选择图片                                       │
│  │   - 支持直接上传新图片                                         │
│  └─ 详情媒体管理                                                 │
│       - 详情中嵌入的图片/视频单独管理                             │
│                                                                 │
│  参数信息(根据分类自动加载)                                     │
│  ├─ 等级:[下拉选择 A级/B级/C级]                                 │
│  ├─ 产地:[文本输入]                                             │
│  └─ 包装方式:[下拉选择 散装/袋装/盒装]                          │
│                                                                 │
│  [保存] [取消]                                                   │
└─────────────────────────────────────────────────────────────────┘

3.4.3 分类编辑页改造

路径: /category/edit/:id
组件: category/form.vue 或 category/edit.vue

┌─────────────────────────────────────────────────────────────────┐
│                    编辑分类 - 蔬菜类                              │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  基本信息                                                        │
│  ├─ 分类名称:[蔬菜类]                                           │
│  └─ 上级分类:[生鲜]                                             │
│                                                                 │
│  关联参数(勾选该分类需要的参数)                                  │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ ☐ 参数名称     │ 是否必填  │ 默认值      │ 排序  │ 操作    │  │
│  ├───────────────┼───────────┼─────────────┼───────┼────────│  │
│  │ ☑ 等级        │ ☑ 是      │ [空]       │ [1]  │ 删除    │  │
│  │ ☑ 产地        │ ☐ 否      │ [北京]     │ [2]  │ 删除    │  │
│  │ ☑ 包装方式    │ ☐ 否      │ [散装]     │ [3]  │ 删除    │  │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
│  [+ 选择已有参数]                                                │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ [ ] 等级  [ ] 产地  [ ] 包装方式  [ ] 规格  [ ] 保质期   │   │
│  │                          [添加] [取消]                    │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
│                            [取消]  [保存]                        │
└─────────────────────────────────────────────────────────────────┘

3.4.4 售后评价管理页

路径: /review
组件: review/index.vue

┌─────────────────────────────────────────────────────────────────┐
│                   售后评价管理                                    │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  筛选条件                                                        │
│  ├─ 商品名称:[输入框]                                           │
│  ├─ 评价状态:[下拉 全部/待审核/已通过/已拒绝]                   │
│  ├─ 评分:[下拉 全部/5星/4星/3星/2星/1星]                        │
│  └─ 评价时间:[日期范围选择]                                     │
│                                                                 │
│  [查询] [重置]                                                   │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ 商品    │ 用户    │ 评分 │ 评价内容   │ 媒体 │ 状态  │ 操作 │  │
│  ├─────────┼────────┼───────┼───────────┼──────┼───────┼──────│  │
│  │ 大白菜  │ 张三   │ ★★★★★ │ 很新鲜... │ [3图] │ 待审核│ 详情 │  │
│  │ 西红柿  │ 李四   │ ★★★★☆ │ 不错...   │ [1图] │ 已通过│ 详情 │  │
│  │ 黄瓜    │ 王五   │ ★★★☆☆ │ 一般...   │ 无   │ 已拒绝│ 详情 │  │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

评价详情弹窗:

┌─────────────────────────────────────────────────────────────────┐
│                    评价详情                                      │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  商品信息:大白菜                                                │
│  订单编号:ORD202603310001                                       │
│  用户信息:张三 (138****8888)                                    │
│  评价时间:2026-03-31 10:30:00                                   │
│  评分:★★★★★ (5星)                                               │
│  评价标签:新鲜、准时                                             │
│  评价内容:                                                       │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ 菜很新鲜,配送也很准时,包装很好!                          │   │
│  └──────────────────────────────────────────────────────────┘   │
│  评价图片/视频:                                                  │
│  ┌────┐ ┌────┐ ┌────┐                                          │
│  │img1│ │img2│ │img3│  [点击查看大图/播放视频]                   │
│  └────┘ └────┘ └────┘                                          │
│                                                                 │
│  ──────────────────────────────────────────                      │
│  商家回复:                                                       │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ 感谢您的好评,我们会继续努力为您提供更好的服务!              │   │
│  └──────────────────────────────────────────────────────────┘   │
│  回复时间:2026-03-31 14:00:00                                   │
│                                                                 │
│  ──────────────────────────────────────────                      │
│  审核状态:☐ 待审核  ☐ 已通过  ☐ 已拒绝                          │
│                                                                 │
│                            [拒绝] [通过] [回复] [置顶]           │
└─────────────────────────────────────────────────────────────────┘

3.5 wangEditor 富文本编辑器集成

3.5.1 安装依赖

npm install @wangeditor/editor @wangeditor/editor-for-vue

3.5.2 组件封装

<!-- components/Editor/WangEditor.vue -->
<template>
  <div class="editor-wrapper">
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
      class="editor-toolbar"
    />
    <Editor
      v-model="value"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onChange="handleChange"
      class="editor-content"
    />
  </div>
</template>

<script setup>
import { ref, watch, onBeforeUnmount } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入内容...'
  },
  height: {
    type: Number,
    default: 400
  }
})

const emit = defineEmits(['update:modelValue'])

// 编辑器实例
const editorRef = ref()
const mode = ref('default') // 或 'simple'
const value = ref(props.modelValue)

// 工具栏配置
const toolbarConfig = {
  excludeKeys: [
    'group-video' // 如不需要视频功能可排除
  ]
}

// 编辑器配置
const editorConfig = {
  placeholder: props.placeholder,
  MENU_CONF: {
    uploadImage: {
      server: '/api/upload/image',
      fieldName: 'file',
      maxFileSize: 5 * 1024 * 1024 // 5MB
    },
    insertImage: {
      checkImage(src) {
        return true
      }
    }
  }
}

// 内容变化
const handleChange = (editor) => {
  emit('update:modelValue', editor.getHtml())
}

// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
  if (newVal !== value.value) {
    value.value = newVal
  }
})

// 组件销毁
onBeforeUnmount(() => {
  if (editorRef.value) {
    editorRef.value.destroy()
  }
})
</script>

<style scoped>
.editor-wrapper {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.editor-toolbar {
  border-bottom: 1px solid #dcdfe6;
}

.editor-content {
  height: v-bind('props.height + "px"');
  overflow-y: auto;
}
</style>

3.5.3 使用示例

<template>
  <el-form-item label="商品详情">
    <WangEditor v-model="form.detail_content" :height="400" />
  </el-form-item>
</template>

<script setup>
import WangEditor from '@/components/Editor/WangEditor.vue'
</script>

四、小程序端功能设计

4.1 技术选型

技术 说明
uni-app + Vue 3 前端框架
TypeScript 类型支持
Vant Weapp UI 组件库
mp-html 富文本渲染组件

4.2 新增页面清单

序号 页面路径 说明
1 /pages/client/review/list 商品评价列表页
2 /pages/client/review/create 提交评价页

4.3 页面功能详细说明

4.3.1 商品详情页改造

路径: /pages/client/product/detail
组件: detail.vue

┌─────────────────────────────────────────────────────────────────┐
│  ┌──────────────────────────────────────────────────────────┐   │
│  │                                                          │   │
│  │                     轮播图区域                            │   │
│  │         (bas_product_banner 多图/视频)                   │   │
│  │                                                          │   │
│  │                    < 1/5 >                               │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
│  ¥ 3.50 / 500g                                                 │
│  大白菜                                                         │
│  SKU: SQ-20260331-0001                                         │
│                                                                 │
│  ┌─────────────────────────┐                                  │
│  │ 商品参数                  │                                  │
│  │ 等级:A级   产地:北京顺义  │                                  │
│  │ 包装方式:袋装            │                                  │
│  └─────────────────────────┘                                  │
│                                                                 │
│  ┌─────────────────────────┐                                  │
│  │ 商品详情                  │                                  │
│  │ ┌─────────────────────┐  │                                  │
│  │ │ (富文本内容渲染)       │  │                                  │
│  │ │ - 文字描述            │  │                                  │
│  │ │ - 图片展示            │  │                                  │
│  │ │ - 视频展示            │  │                                  │
│  │ └─────────────────────┘  │                                  │
│  └─────────────────────────┘                                  │
│                                                                 │
│  ┌─────────────────────────┐                                  │
│  │ 商品评价 (128条)   [查看全部]│                                  │
│  │ ┌─────────────────────┐  │                                  │
│  │ │ ★★★★★ 张三  03-31  │  │                                  │
│  │ │ 很新鲜,配送很准时...  │  │                                  │
│  │ │ [图片] [图片] [图片]  │  │                                  │
│  │ │ 👍 12                │  │                                  │
│  │ └─────────────────────┘  │                                  │
│  └─────────────────────────┘                                  │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

4.3.2 评价列表页

路径: /pages/client/review/list
组件: list.vue

┌─────────────────────────────────────────────────────────────────┐
│  < 返回                    商品评价                              │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ [图片] 大白菜                              ¥3.50/500g     │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
│  全部(128)  |  有图(45)  |  视频(3)                              │
│  ─────────────────────────────────────                         │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ ⭐⭐⭐⭐⭐                                               │   │
│  │ 张三 👤 03-31                                    👍 12   │   │
│  │ 标签:新鲜 | 准时                                         │   │
│  │ 菜很新鲜,配送也很准时,包装很好!                        │   │
│  │ ┌────┐ ┌────┐ ┌────┐                                   │   │
│  │ │img1│ │img2│ │img3│                                   │   │
│  │ └────┘ └────┘ └────┘                                   │   │
│  │                                                          │   │
│  │ ┌─ 商家回复 ──────────────────────────────┐              │   │
│  │ │ 感谢您的好评,我们会继续努力... 03-31    │              │   │
│  │ └─────────────────────────────────────────┘              │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ ⭐⭐⭐⭐                                                │   │
│  │ 匿名用户 👤 03-30                                    👍 8│   │
│  │ 不错的水果,包装完好无损...                               │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

4.3.3 提交评价页

路径: /pages/client/review/create
组件: create.vue

┌─────────────────────────────────────────────────────────────────┐
│  < 返回                    发表评价                              │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  商品信息                                                        │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ [图片] 大白菜                                    ¥3.50   │   │
│  │              500g / 袋装                                 │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
│  评分                                                            │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │                                                          │   │
│  │         ⭐  ⭐  ⭐  ⭐  ⭐                                │   │
│  │         (点击选择评分)                                    │   │
│  │                                                          │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
│  评价标签(可选)                                                 │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ [新鲜] [准时] [包装好] [质量好] [性价比高]                 │   │
│  │ (点击选择多个,最多3个)                                    │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
│  评价内容                                                        │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │                                                          │   │
│  │ 请输入评价内容...                                         │   │
│  │ (至少10个字)                                             │   │
│  │                                                          │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
│  上传图片/视频                                                   │
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐                             │
│  │ +  │ │img1│ │img2│ │img3│ │vid │                             │
│  └────┘ └────┘ └────┘ └────┘ └────┘                             │
│  (最多9张图或1个视频)                                            │
│                                                                 │
│  ☐ 匿名评价                                                     │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │                      提交评价                            │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

4.4 mp-html 富文本渲染

4.4.1 安装依赖

npm install mp-html

4.4.2 组件使用

<!-- components/RichText.vue -->
<template>
  <view class="rich-text-wrapper">
    <mp-html :content="content" />
  </view>
</template>

<script setup>
defineProps({
  content: {
    type: String,
    default: ''
  }
})
</script>

<style scoped>
.rich-text-wrapper {
  width: 100%;
}
</style>

4.4.3 页面中使用

<template>
  <view class="detail-content">
    <RichText :content="product.detail_content" />
  </view>
</template>

<script setup>
import RichText from '@/components/RichText.vue'
</script>

五、后端服务设计

5.1 接口清单

5.1.1 商品相关接口

方法 路径 说明 变更
GET /products 商品列表 新增 SKU 编码字段
GET /products/{id} 商品详情 新增 banner、detail_media、parameter_value、sku_code、detail_content
POST /products 创建商品 新增字段
PUT /products/{id} 更新商品 新增字段

5.1.2 轮播图接口

方法 路径 说明
GET /products/{id}/banners 获取轮播图列表
POST /products/{id}/banners 批量添加轮播图
PUT /products/{id}/banners 更新轮播图排序
DELETE /products/{id}/banners/{bannerId} 删除轮播图

5.1.3 详情媒体接口

方法 路径 说明
GET /products/{id}/detail-media 获取详情媒体列表
POST /products/{id}/detail-media 批量添加详情媒体
PUT /products/{id}/detail-media 更新详情媒体
DELETE /products/{id}/detail-media/{mediaId} 删除详情媒体

5.1.4 参数模板接口

方法 路径 说明
GET /parameters 参数模板列表
GET /parameters/{id} 参数模板详情
POST /parameters 创建参数模板
PUT /parameters/{id} 更新参数模板
DELETE /parameters/{id} 删除参数模板

5.1.5 分类参数接口

方法 路径 说明
GET /categories/{id}/parameters 获取分类关联的参数
PUT /categories/{id}/parameters 更新分类关联的参数

5.1.6 商品参数值接口

方法 路径 说明
GET /products/{id}/parameter-values 获取商品参数值
POST /products/{id}/parameter-values 批量保存商品参数值

5.1.7 评价接口

方法 路径 说明 端
GET /mini/products/{id}/reviews 获取商品评价列表 小程序
POST /mini/reviews 用户提交评价 小程序
POST /mini/reviews/{id}/like 点赞评价 小程序
GET /admin/reviews 评价列表(运营) 管理端
GET /admin/reviews/{id} 评价详情 管理端
PUT /admin/reviews/{id}/approve 审核通过 管理端
PUT /admin/reviews/{id}/reject 审核拒绝 管理端
PUT /admin/reviews/{id}/reply 回复评价 管理端
PUT /admin/reviews/{id}/top 置顶/取消置顶 管理端

5.2 后端模型层文件结构

backend/app/models/
├── __init__.py
├── models.py                    # 修改:bas_product 新增 sku_code, detail_content
├── product_banner.py           # 新增:商品轮播图模型
├── product_detail_media.py     # 新增:商品详情媒体模型
├── product_parameter.py         # 新增:商品参数码表模型
├── category_parameter.py        # 新增:分类参数关联模型
├── product_parameter_value.py   # 新增:商品参数值模型
├── product_review.py            # 新增:售后评价模型
└── product_review_media.py      # 新增:评价媒体模型

5.3 后端 Schema 层文件结构

backend/app/schemas/
├── __init__.py
├── product.py                   # 修改:增加 sku_code, detail_content, 关联数据
├── product_banner.py            # 新增:轮播图 Schema
├── product_detail_media.py      # 新增:详情媒体 Schema
├── product_parameter.py         # 新增:参数码表 Schema
├── category_parameter.py        # 新增:分类参数关联 Schema
├── product_parameter_value.py   # 新增:商品参数值 Schema
├── product_review.py             # 新增:评价 Schema
└── product_review_media.py       # 新增:评价媒体 Schema

5.4 后端 CRUD 层文件结构

backend/app/crud/
├── __init__.py
├── product.py                   # 修改:增加关联查询
├── product_banner.py            # 新增:轮播图 CRUD
├── product_detail_media.py      # 新增:详情媒体 CRUD
├── product_parameter.py         # 新增:参数码表 CRUD
├── category_parameter.py        # 新增:分类参数关联 CRUD
├── product_parameter_value.py   # 新增:商品参数值 CRUD
├── product_review.py             # 新增:评价 CRUD
└── product_review_media.py       # 新增:评价媒体 CRUD

5.5 后端 API 层文件结构

backend/app/api/
├── __init__.py
├── product.py                   # 修改:增加多媒体、参数相关路由
├── product_banner.py            # 新增:轮播图路由
├── product_detail_media.py      # 新增:详情媒体路由
├── product_parameter.py         # 新增:参数模板路由
├── category.py                  # 修改:增加分类参数路由
└── product_review.py             # 新增:评价路由

六、数据库迁移 SQL

6.1 迁移文件清单

docs/sql/migrations/
├── 001_add_sort_order_to_bas_product_unit.sql  (已有)
├── 002_add_product_multimedia_and_sku.sql      (新增)
├── 003_add_product_parameter.sql               (新增)
└── 004_add_product_review.sql                  (新增)

6.2 迁移 SQL 内容

6.2.1 002_add_product_multimedia_and_sku.sql

-- ============================================
-- 文件: docs/sql/migrations/002_add_product_multimedia_and_sku.sql
-- 说明: 商品多媒体和SKU编码相关表
-- ============================================

-- 1. 商品表增加字段
ALTER TABLE bas_product ADD COLUMN sku_code VARCHAR(50) COMMENT '商品SKU编码(唯一标识,用于生成二维码/条形码)';
ALTER TABLE bas_product ADD COLUMN detail_content TEXT COMMENT '商品详情富文本内容';
ALTER TABLE bas_product_his ADD COLUMN sku_code VARCHAR(50) COMMENT '商品SKU编码';
ALTER TABLE bas_product_his ADD COLUMN detail_content TEXT COMMENT '商品详情富文本内容';

-- 添加唯一索引
ALTER TABLE bas_product ADD UNIQUE INDEX uk_sku_code (sku_code);

-- 2. 商品轮播图表
CREATE TABLE bas_product_banner (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    product_id VARCHAR(32) NOT NULL COMMENT '商品ID',
    media_type VARCHAR(20) NOT NULL DEFAULT 'image' COMMENT '媒体类型:image-图片, video-视频',
    file_url VARCHAR(500) NOT NULL COMMENT '文件URL地址',
    thumbnail_url VARCHAR(500) COMMENT '缩略图URL',
    sort_order INTEGER DEFAULT 0 COMMENT '排序',
    is_del INTEGER DEFAULT 0 COMMENT '是否删除',
    create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    INDEX idx_product_id (product_id),
    INDEX idx_sort_order (sort_order)
) COMMENT='商品轮播图表';

CREATE TABLE bas_product_banner_his (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    product_id VARCHAR(32) COMMENT '商品ID',
    media_type VARCHAR(20) DEFAULT 'image' COMMENT '媒体类型',
    file_url VARCHAR(500) COMMENT '文件URL地址',
    thumbnail_url VARCHAR(500) COMMENT '缩略图URL',
    sort_order INTEGER DEFAULT 0 COMMENT '排序',
    create_at DATETIME COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    his_create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '历史记录创建时间'
) COMMENT='商品轮播图历史表';

-- 3. 商品详情媒体表
CREATE TABLE bas_product_detail_media (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    product_id VARCHAR(32) NOT NULL COMMENT '商品ID',
    content_type VARCHAR(20) NOT NULL DEFAULT 'image' COMMENT '内容类型:image-图片, video-视频, text-文本',
    content_text TEXT COMMENT '文本内容',
    file_url VARCHAR(500) COMMENT '文件URL地址',
    thumbnail_url VARCHAR(500) COMMENT '缩略图URL',
    description VARCHAR(500) COMMENT '描述',
    sort_order INTEGER DEFAULT 0 COMMENT '排序',
    is_del INTEGER DEFAULT 0 COMMENT '是否删除',
    create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    INDEX idx_product_id (product_id),
    INDEX idx_sort_order (sort_order)
) COMMENT='商品详情媒体表';

CREATE TABLE bas_product_detail_media_his (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    product_id VARCHAR(32) COMMENT '商品ID',
    content_type VARCHAR(20) DEFAULT 'image' COMMENT '内容类型',
    content_text TEXT COMMENT '文本内容',
    file_url VARCHAR(500) COMMENT '文件URL地址',
    thumbnail_url VARCHAR(500) COMMENT '缩略图URL',
    description VARCHAR(500) COMMENT '描述',
    sort_order INTEGER DEFAULT 0 COMMENT '排序',
    create_at DATETIME COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    his_create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '历史记录创建时间'
) COMMENT='商品详情媒体历史表';

6.2.2 003_add_product_parameter.sql

-- ============================================
-- 文件: docs/sql/migrations/003_add_product_parameter.sql
-- 说明: 商品参数系统相关表
-- ============================================

-- 1. 商品参数码表
CREATE TABLE bas_product_parameter (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    name VARCHAR(100) NOT NULL COMMENT '参数名称',
    code VARCHAR(50) NOT NULL COMMENT '参数编码',
    param_type VARCHAR(20) NOT NULL DEFAULT 'text' COMMENT '参数类型:text-文本输入, select-单选下拉, multi_select-多选',
    options TEXT COMMENT '可选值列表,JSON数组',
    placeholder VARCHAR(100) COMMENT '输入提示文字',
    is_required INTEGER DEFAULT 0 COMMENT '是否必填:0-否, 1-是',
    is_active INTEGER DEFAULT 1 COMMENT '是否启用:0-禁用, 1-启用',
    is_del INTEGER DEFAULT 0 COMMENT '是否删除:0-否, 1-是',
    sort_order INTEGER DEFAULT 0 COMMENT '排序',
    remark VARCHAR(500) COMMENT '备注说明',
    create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    UNIQUE KEY uk_code (code)
) COMMENT='商品参数码表';

CREATE TABLE bas_product_parameter_his (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    name VARCHAR(100) COMMENT '参数名称',
    code VARCHAR(50) COMMENT '参数编码',
    param_type VARCHAR(20) DEFAULT 'text' COMMENT '参数类型',
    options TEXT COMMENT '可选值列表',
    placeholder VARCHAR(100) COMMENT '输入提示文字',
    is_required INTEGER DEFAULT 0 COMMENT '是否必填',
    is_active INTEGER DEFAULT 1 COMMENT '是否启用',
    sort_order INTEGER DEFAULT 0 COMMENT '排序',
    remark VARCHAR(500) COMMENT '备注说明',
    create_at DATETIME COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    his_create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '历史记录创建时间'
) COMMENT='商品参数码表历史表';

-- 2. 分类-参数关联表
CREATE TABLE bas_category_parameter (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    category_id VARCHAR(32) NOT NULL COMMENT '分类ID',
    parameter_id VARCHAR(32) NOT NULL COMMENT '参数ID',
    is_required INTEGER DEFAULT 0 COMMENT '该分类下是否必填:0-否, 1-是',
    default_value VARCHAR(500) COMMENT '默认值',
    sort_order INTEGER DEFAULT 0 COMMENT '排序',
    is_del INTEGER DEFAULT 0 COMMENT '是否删除:0-否, 1-是',
    create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    INDEX idx_category_id (category_id),
    INDEX idx_parameter_id (parameter_id),
    UNIQUE KEY uk_category_parameter (category_id, parameter_id)
) COMMENT='商品分类-参数关联表';

CREATE TABLE bas_category_parameter_his (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    category_id VARCHAR(32) COMMENT '分类ID',
    parameter_id VARCHAR(32) COMMENT '参数ID',
    is_required INTEGER DEFAULT 0 COMMENT '是否必填',
    default_value VARCHAR(500) COMMENT '默认值',
    sort_order INTEGER DEFAULT 0 COMMENT '排序',
    create_at DATETIME COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    his_create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '历史记录创建时间'
) COMMENT='商品分类-参数关联表历史表';

-- 3. 商品参数值表
CREATE TABLE bas_product_parameter_value (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    product_id VARCHAR(32) NOT NULL COMMENT '商品ID',
    parameter_id VARCHAR(32) NOT NULL COMMENT '参数ID',
    parameter_name VARCHAR(100) COMMENT '参数名称快照',
    parameter_code VARCHAR(50) COMMENT '参数编码快照',
    param_type VARCHAR(20) COMMENT '参数类型快照',
    param_value TEXT COMMENT '参数值',
    sort_order INTEGER DEFAULT 0 COMMENT '排序',
    is_del INTEGER DEFAULT 0 COMMENT '是否删除:0-否, 1-是',
    create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    INDEX idx_product_id (product_id),
    INDEX idx_parameter_id (parameter_id)
) COMMENT='商品参数值表';

CREATE TABLE bas_product_parameter_value_his (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    product_id VARCHAR(32) COMMENT '商品ID',
    parameter_id VARCHAR(32) COMMENT '参数ID',
    parameter_name VARCHAR(100) COMMENT '参数名称快照',
    parameter_code VARCHAR(50) COMMENT '参数编码快照',
    param_type VARCHAR(20) COMMENT '参数类型快照',
    param_value TEXT COMMENT '参数值',
    sort_order INTEGER DEFAULT 0 COMMENT '排序',
    create_at DATETIME COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    his_create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '历史记录创建时间'
) COMMENT='商品参数值表历史表';

6.2.3 004_add_product_review.sql

-- ============================================
-- 文件: docs/sql/migrations/004_add_product_review.sql
-- 说明: 商品售后评价相关表
-- ============================================

-- 1. 售后评价主表
CREATE TABLE biz_product_review (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    product_id VARCHAR(32) NOT NULL COMMENT '商品ID',
    order_id VARCHAR(32) COMMENT '订单ID',
    order_item_id VARCHAR(32) COMMENT '订单项ID',
    user_id VARCHAR(32) NOT NULL COMMENT '评价用户ID',
    user_name VARCHAR(100) COMMENT '评价用户姓名',
    rating TINYINT NOT NULL DEFAULT 5 COMMENT '评分(1-5星)',
    rating_tags VARCHAR(500) COMMENT '评价标签,多个逗号分隔',
    content TEXT COMMENT '评价内容',
    is_anonymous INTEGER DEFAULT 0 COMMENT '是否匿名:0-否, 1-是',
    reply_content TEXT COMMENT '商家回复内容',
    reply_time DATETIME COMMENT '商家回复时间',
    reply_by VARCHAR(32) COMMENT '回复人ID',
    reply_by_name VARCHAR(100) COMMENT '回复人姓名',
    like_count INTEGER DEFAULT 0 COMMENT '点赞数',
    is_top INTEGER DEFAULT 0 COMMENT '是否置顶:0-否, 1-是',
    status VARCHAR(20) DEFAULT 'pending' COMMENT '状态:pending-待审核, approved-已通过, rejected-已拒绝',
    reject_reason VARCHAR(500) COMMENT '拒绝原因',
    is_del INTEGER DEFAULT 0 COMMENT '是否删除:0-否, 1-是',
    create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    INDEX idx_product_id (product_id),
    INDEX idx_order_id (order_id),
    INDEX idx_user_id (user_id),
    INDEX idx_rating (rating),
    INDEX idx_status (status),
    INDEX idx_create_at (create_at)
) COMMENT='商品售后评价表';

CREATE TABLE biz_product_review_his (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    product_id VARCHAR(32) COMMENT '商品ID',
    order_id VARCHAR(32) COMMENT '订单ID',
    order_item_id VARCHAR(32) COMMENT '订单项ID',
    user_id VARCHAR(32) COMMENT '评价用户ID',
    user_name VARCHAR(100) COMMENT '评价用户姓名',
    rating TINYINT DEFAULT 5 COMMENT '评分',
    rating_tags VARCHAR(500) COMMENT '评价标签',
    content TEXT COMMENT '评价内容',
    is_anonymous INTEGER DEFAULT 0 COMMENT '是否匿名',
    reply_content TEXT COMMENT '商家回复内容',
    reply_time DATETIME COMMENT '商家回复时间',
    reply_by VARCHAR(32) COMMENT '回复人ID',
    reply_by_name VARCHAR(100) COMMENT '回复人姓名',
    like_count INTEGER DEFAULT 0 COMMENT '点赞数',
    is_top INTEGER DEFAULT 0 COMMENT '是否置顶',
    status VARCHAR(20) DEFAULT 'pending' COMMENT '状态',
    reject_reason VARCHAR(500) COMMENT '拒绝原因',
    create_at DATETIME COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    his_create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '历史记录创建时间'
) COMMENT='商品售后评价历史表';

-- 2. 评价媒体子表
CREATE TABLE biz_product_review_media (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    review_id VARCHAR(32) NOT NULL COMMENT '评价ID',
    media_type VARCHAR(20) NOT NULL DEFAULT 'image' COMMENT '媒体类型:image-图片, video-视频',
    file_url VARCHAR(500) NOT NULL COMMENT '文件URL地址',
    thumbnail_url VARCHAR(500) COMMENT '缩略图URL(视频时使用)',
    sort_order INTEGER DEFAULT 0 COMMENT '排序(数字越小越靠前)',
    is_del INTEGER DEFAULT 0 COMMENT '是否删除:0-否, 1-是',
    create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    INDEX idx_review_id (review_id),
    INDEX idx_sort_order (sort_order)
) COMMENT='商品评价媒体表';

CREATE TABLE biz_product_review_media_his (
    id VARCHAR(32) PRIMARY KEY COMMENT '主键ID',
    review_id VARCHAR(32) COMMENT '评价ID',
    media_type VARCHAR(20) DEFAULT 'image' COMMENT '媒体类型',
    file_url VARCHAR(500) COMMENT '文件URL地址',
    thumbnail_url VARCHAR(500) COMMENT '缩略图URL',
    sort_order INTEGER DEFAULT 0 COMMENT '排序',
    create_at DATETIME COMMENT '创建时间',
    create_by VARCHAR(32) COMMENT '创建人ID',
    create_name VARCHAR(100) COMMENT '创建人姓名',
    update_at DATETIME COMMENT '修改时间',
    update_by VARCHAR(32) COMMENT '修改人ID',
    his_create_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '历史记录创建时间'
) COMMENT='商品评价媒体历史表';

七、种子数据 SQL

7.1 参数模板种子数据

-- ============================================
-- 文件: docs/sql/seed_bas_product_parameter.sql
-- 说明: 商品参数模板种子数据
-- ============================================

INSERT INTO `sanqiang`.`bas_product_parameter` (`id`, `name`, `code`, `param_type`, `options`, `placeholder`, `is_required`, `is_active`, `is_del`, `sort_order`, `remark`, `create_at`, `create_by`, `create_name`) VALUES
('param_001', '等级', 'grade', 'select', '["A级","B级","C级"]', '请选择等级', 0, 1, 0, 1, '商品品质等级', NOW(), 'system', '系统'),
('param_002', '产地', 'origin', 'text', NULL, '请输入产地', 0, 1, 0, 2, '商品产地来源', NOW(), 'system', '系统'),
('param_003', '包装方式', 'packaging', 'select', '["散装","袋装","盒装","瓶装"]', '请选择包装方式', 0, 1, 0, 3, '商品包装形式', NOW(), 'system', '系统'),
('param_004', '规格', 'spec', 'text', NULL, '如:500g/袋', 0, 1, 0, 4, '商品规格描述', NOW(), 'system', '系统'),
('param_005', '保质期', 'shelf_life', 'text', NULL, '如:7天、30天、常温保存', 0, 1, 0, 5, '商品保质期说明', NOW(), 'system', '系统'),
('param_006', '储存方式', 'storage', 'select', '["常温","冷藏","冷冻"]', '请选择储存方式', 0, 1, 0, 6, '商品储存条件', NOW(), 'system', '系统'),
('param_007', '品牌', 'brand', 'text', NULL, '请输入品牌名称', 0, 1, 0, 7, '商品品牌', NOW(), 'system', '系统'),
('param_008', '净含量', 'net_weight', 'text', NULL, '如:500g、1kg', 0, 1, 0, 8, '商品净含量', NOW(), 'system', '系统');

八、任务分解

8.1 数据库任务

序号 任务 优先级 产出物
1 创建迁移 SQL 文件 P0 3个迁移文件
2 执行数据库迁移 P0 -
3 编写种子数据 P1 seed_bas_product_parameter.sql
4 插入菜单数据 P0 sys_menu INSERT 语句

8.2 后端任务

序号 任务 优先级 产出物
1 创建模型文件(8个新文件) P0 8个模型文件
2 修改现有商品模型 P0 models.py
3 创建 Schema 文件(8个新文件) P0 8个 Schema 文件
4 修改现有商品 Schema P0 schemas/product.py
5 创建 CRUD 文件(8个新文件) P0 8个 CRUD 文件
6 修改现有商品 CRUD P0 crud/product.py
7 创建 API 路由(5个新文件) P0 5个路由文件
8 修改现有商品路由 P0 api/product.py
9 编写单元测试 P1 测试文件

8.3 Web 管理端任务

序号 任务 优先级 产出物
1 集成 wangEditor 富文本编辑器 P0 组件封装
2 集成 vuedraggable 拖拽组件 P0 组件封装
3 新增参数模板管理页面 P0 parameter/index.vue
4 新增售后评价管理页面 P0 review/index.vue
5 改造商品编辑页(多媒体+参数+富文本) P0 product/form.vue
6 改造分类编辑页(参数配置) P1 category/form.vue
7 配置菜单路由 P0 -

8.4 小程序端任务

序号 任务 优先级 产出物
1 集成 mp-html 富文本渲染 P0 组件封装
2 改造商品详情页 P0 detail.vue
3 新增评价列表页 P1 review/list.vue
4 新增提交评价页 P1 review/create.vue
5 新增评价点赞功能 P2 -

九、菜单配置 SQL(汇总)

-- ============================================
-- 菜单配置 SQL
-- ============================================

-- 新增菜单:参数模板管理(放在"基础数据"下,排序6)
INSERT INTO `sanqiang`.`sys_menu` (`id`, `name`, `code`, `path`, `component`, `icon`, `parent_id`, `sort_order`, `redirect`, `menu_type`, `is_visible`, `is_cache`, `is_active`, `is_del`, `remark`, `create_at`, `create_by`, `create_name`, `update_at`, `update_by`) VALUES ('10000000000000000000000000000008', '参数模板', 'parameter', '/parameter', 'parameter/index', 'Operation', '10000000000000000000000000000002', 6, NULL, 'menu', 1, 0, 1, 0, NULL, '2026-03-31 10:00:00', 'system', '系统', NULL, NULL);

-- 新增菜单分组:售后管理(排序8)
INSERT INTO `sanqiang`.`sys_menu` (`id`, `name`, `code`, `path`, `component`, `icon`, `parent_id`, `sort_order`, `redirect`, `menu_type`, `is_visible`, `is_cache`, `is_active`, `is_del`, `remark`, `create_at`, `create_by`, `create_name`, `update_at`, `update_by`) VALUES ('10000000000000000000000000000070', '售后管理', 'after_sale', '', '', NULL, NULL, 8, NULL, 'menu', 1, 0, 1, 0, NULL, '2026-03-31 10:00:00', 'system', '系统', NULL, NULL);

-- 新增菜单:售后评价管理(放在"售后管理"下,排序1)
INSERT INTO `sanqiang`.`sys_menu` (`id`, `name`, `code`, `path`, `component`, `icon`, `parent_id`, `sort_order`, `redirect`, `menu_type`, `is_visible`, `is_cache`, `is_active`, `is_del`, `remark`, `create_at`, `create_by`, `create_name`, `update_at`, `update_by`) VALUES ('10000000000000000000000000000071', '售后评价', 'review', '/review', 'review/index', 'Star', '10000000000000000000000000000070', 1, NULL, 'menu', 1, 0, 1, 0, NULL, '2026-03-31 10:00:00', 'system', '系统', NULL, NULL);

十、附录

10.1 表字段汇总

bas_product 新增字段

字段名 类型 说明
sku_code VARCHAR(50) 商品SKU编码
detail_content TEXT 商品详情富文本

bas_product_banner 表

字段名 类型 说明
id VARCHAR(32) 主键
product_id VARCHAR(32) 商品ID
media_type VARCHAR(20) 媒体类型:image/video
file_url VARCHAR(500) 文件URL
thumbnail_url VARCHAR(500) 缩略图URL
sort_order INTEGER 排序

bas_product_detail_media 表

字段名 类型 说明
id VARCHAR(32) 主键
product_id VARCHAR(32) 商品ID
content_type VARCHAR(20) 内容类型:image/video/text
content_text TEXT 文本内容
file_url VARCHAR(500) 文件URL
thumbnail_url VARCHAR(500) 缩略图URL
description VARCHAR(500) 描述
sort_order INTEGER 排序

bas_product_parameter 表

字段名 类型 说明
id VARCHAR(32) 主键
name VARCHAR(100) 参数名称
code VARCHAR(50) 参数编码
param_type VARCHAR(20) 参数类型:text/select/multi_select
options TEXT 可选值JSON数组
placeholder VARCHAR(100) 输入提示
is_required INTEGER 是否必填
is_active INTEGER 是否启用
sort_order INTEGER 排序

bas_category_parameter 表

字段名 类型 说明
id VARCHAR(32) 主键
category_id VARCHAR(32) 分类ID
parameter_id VARCHAR(32) 参数ID
is_required INTEGER 是否必填
default_value VARCHAR(500) 默认值
sort_order INTEGER 排序

bas_product_parameter_value 表

字段名 类型 说明
id VARCHAR(32) 主键
product_id VARCHAR(32) 商品ID
parameter_id VARCHAR(32) 参数ID
parameter_name VARCHAR(100) 参数名称快照
parameter_code VARCHAR(50) 参数编码快照
param_type VARCHAR(20) 参数类型快照
param_value TEXT 参数值
sort_order INTEGER 排序

biz_product_review 表

字段名 类型 说明
id VARCHAR(32) 主键
product_id VARCHAR(32) 商品ID
order_id VARCHAR(32) 订单ID
order_item_id VARCHAR(32) 订单项ID
user_id VARCHAR(32) 用户ID
user_name VARCHAR(100) 用户姓名
rating TINYINT 评分 1-5
rating_tags VARCHAR(500) 评价标签
content TEXT 评价内容
is_anonymous INTEGER 是否匿名
reply_content TEXT 回复内容
reply_time DATETIME 回复时间
reply_by VARCHAR(32) 回复人ID
reply_by_name VARCHAR(100) 回复人姓名
like_count INTEGER 点赞数
is_top INTEGER 是否置顶
status VARCHAR(20) 状态
reject_reason VARCHAR(500) 拒绝原因

biz_product_review_media 表

字段名 类型 说明
id VARCHAR(32) 主键
review_id VARCHAR(32) 评价ID
media_type VARCHAR(20) 媒体类型:image/video
file_url VARCHAR(500) 文件URL
thumbnail_url VARCHAR(500) 缩略图URL
sort_order INTEGER 排序

10.2 评价状态说明

status 说明 说明
pending 待审核 需运营审核后展示
approved 已通过 审核通过,公开显示
rejected 已拒绝 审核拒绝,不显示

10.3 参数类型说明

param_type 说明
text 文本输入
select 单选下拉
multi_select 多选

文档版本: v1.0 创建时间: 2026-03-31 更新内容: 初始版本