目录
- 前情回顾
- 本节目标
- 第一步：数据准备
-
- [1.1 数据源配置](#1.1 数据源配置)
- 第二步：页面布局搭建
-
- [2.1 页面整体布局](#2.1 页面整体布局)
- [2.2 数据表格配置](#2.2 数据表格配置)
- [2.3 配置查询条件](#2.3 配置查询条件)
- [2.4 配置排序字段](#2.4 配置排序字段)
- 第三步：产品功能实现
-
- [3.1 创建新增产品弹窗](#3.1 创建新增产品弹窗)
- [3.2 上下架功能](#3.2 上下架功能)
- 最终效果
- 总结
前情回顾
在上一讲中，我们完成了商机管理功能的开发，实现了销售过程的可视化管理。
本节我们将实现产品中心功能，这是订单模块的"压舱石"。当商机谈到签单阶段时，需要明确"卖什么"------MBA课程有哪些种类？标准单价是多少？产品中心为订单模块提供标准化的产品数据支撑。
本节目标
- 数据模型设计：创建产品表，定义标准化的课程产品库
- 价格标准化：建立标准单价体系，为订单提供自动取价逻辑
- 状态管理：实现产品的上架与下架控制
- 业务联动：打通产品中心与订单信息的数据关联
第一步：数据准备
1.1 数据源配置
首先，创建名为MBA_Products的产品表，包含以下核心字段：
| 字段名称 | 字段标识 | 类型 | 说明 |
|---|---|---|---|
| 产品名称 | name |
单行文本 | 如：2026级MBA联考全程班 |
| 产品分类 | category |
枚举 | 高层管理 MBA/中层管理培训/领导力/战略规划 |
| 标准价格 | standard_price |
数字 | 官方指导价，单位：元 |
| 产品状态 | status |
枚举 | 草稿/已上架/已下架 |
| 产品描述 | description |
多行文本 | 课程包含的具体模块和课时说明 |
| 封面图片 | cover_image |
图片 | 用于门户端展示（可选） |
| 创建时间 | created_at |
日期时间 | 自动生成 |
| 更新时间 | updated_at |
日期时间 | 自动更新 |
第二步：页面布局搭建
2.1 页面整体布局
点击创建页面的图标
输入页面的名称"产品中心"，布局选择管理后台布局
切换到页面布局，选择管理后台布局，添加平级菜单
添加产品中心菜单
2.2 数据表格配置
在管理后台布局的内容插槽下添加布局组件
修改标题，改为"产品中心"
在页面布局中添加数据表格组件，数据模型选择产品表
2.3 配置查询条件
点击筛选器，给表格配置查询条件
添加具体的查询条件：
- 产品名称（模糊搜索）
- 产品分类（下拉选择）
- 产品状态（下拉选择）
2.4 配置排序字段
默认按照产品分类的倒序进行排序
第三步：产品功能实现
3.1 创建新增产品弹窗
在产品中心页面添加一个弹窗组件，用于录入新的产品。
从组件库中拖拽弹窗组件到页面，设置弹窗标题为"新增产品"
在弹窗中添加表单容器组件，数据模型选择产品表
修改表单的布局，改为双列布局
选中产品描述所在的列，改为12
选择产品状态字段，设置选中值为1
配置表单提交成功后关闭弹窗并刷新表格
选中弹窗组件，关闭显示底部按钮
关闭弹窗默认打开状态
修改全局按钮为"新建"，绑定打开弹窗事件
3.2 上下架功能
产品需要支持上架和下架操作，控制产品是否在销售序列中。
在表格操作列添加上下架按钮
编写上架处理方法：
javascript
export default async function publishProduct({ event, data }) {
try {
$w.utils.showLoading({ title: '处理中...' });
const productId = data.target._id;
// 更新产品状态为已上架
await $w.cloud.callDataSource({
dataSourceName: 'MBA_Products',
methodName: 'wedaUpdateV2',
params: {
filter: { where: { _id: { $eq: productId } } },
data: {
status: '2', // 已上架
}
}
});
$w.utils.showToast({ title: '上架成功', icon: 'success' });
$w.table1.refresh();
} catch (error) {
console.error('上架失败:', error);
$w.utils.showToast({ title: '操作失败，请稍后重试', icon: 'error' });
} finally {
$w.utils.hideLoading();
}
}编写下架处理方法：
javascript
export default async function unpublishProduct({ event, data }) {
try {
$w.utils.showModal({
title: '确认下架',
content: `确定将产品【${data.target.name}】下架吗？下架后将无法被新订单选择。`,
success: async (res) => {
if (res.confirm) {
await $w.utils.showLoading({ title: '处理中...' });
await $w.cloud.callDataSource({
dataSourceName: 'MBA_Products',
methodName: 'wedaUpdateV2',
params: {
filter: { where: { _id: { $eq: data.target._id } } },
data: {
status: '3', // 已下架
}
}
});
$w.utils.showToast({ title: '下架成功', icon: 'success' });
$w.table1.refresh();
}
}
});
} catch (error) {
console.error('下架失败:', error);
$w.utils.showToast({ title: '操作失败', icon: 'error' });
}
}给按钮配置点击事件，调用对应的方法，传入所在行数据
最终效果
管理员打开产品中心，可以录入产品信息，设置标准价格，控制产品上下架状态。
总结
本节我们完成了产品中心功能的开发，为订单模块提供了标准化的产品数据支撑：
-
数据模型设计：
- 创建了
MBA_Products产品表，记录产品名称、分类、标准价格等
- 创建了
-
核心功能实现：
- 产品的新增、编辑、查询功能
- 产品上下架状态管理
-
业务价值：
- 统一产品标准，避免销售随意定价
- 价格变动时只需修改产品中心，历史订单不受影响
- 为财务对账和课时核算提供准确数据
通过本讲的实现，我们构建了完整的产品管理体系，订单数据才有了"灵魂"。
下一步，我们将进入订单与合同管理模块，打通L2C（线索到现金）的最后一公里。