前言
在完成了机构微官网的开发后，我们现在要为小程序增加一个重要的商业化功能——商城。通过商城，机构可以销售课程、商品和套餐，为家长提供更便捷的购买服务。
本篇重点介绍商城数据源的搭建和列表页面的开发。我们将创建商品数据模型、搭建后台管理功能，并开发前端展示页面。
1 创建商品数据模型
首先，我们需要创建商品数据模型来存储商城中的各种商品信息。
1.1 设计表结构
在创建数据模型之前，我们先设计表结构。商城中的商品主要分为三类：课程、商品和套餐。
1.2 创建数据模型
登录低代码平台，进入控制台。点击”数据库”，选择”MySQL数据库”，点击”+”号创建数据模型
输入模型名称”商品表”和模型标识”products”
按照表结构设计添加字段：
先添加商品名称，类型选择文本
继续添加字段，商品类型，类型选择枚举，枚举值设置为课程、商品、套餐
继续添加字段，销售价格，类型选择数字
继续添加字段，原价，类型选择数字
继续添加字段，商品描述，类型选择文本
继续添加字段，商品图片，类型选择图片
继续添加字段，标签，类型选择文本
继续添加字段，商品状态，类型选择枚举，枚举值设置为已上架、已下架
继续添加字段，库存数量，类型选择数字，默认值为0
继续添加字段，销售数量，类型选择数字，默认值为0
2 搭建后台管理功能
有了数据模型后，我们需要搭建后台管理功能，方便机构管理员维护商品信息。
2.1 创建管理页面
打开后台管理应用
点击”创建页面”图标
选择”表格与表单页”模板，数据模型选择”商品表”，布局选择”左侧导航布局”
切换到布局设计，选择左侧导航布局。选中布局导航，点击”添加平级菜单”
将商品列表页面添加到菜单中，修改菜单的图标和标题为”🛍️ 商品管理”
2.2 录入商品数据
在后台管理页面中，可以录入和维护商品数据：
-
-
-
-
3 开发前端展示页面
现在我们来开发小程序前端的商城页面，展示商品列表供家长浏览和购买。
3.1 页面结构设计
商城页面主要包含以下部分：
-
-
-
-
-
3.2 搭建页面布局
打开我们的小程序应用，点击创建页面的图标，创建商城页面
切换到页面布局，选择tab栏导航布局，选中Tab栏组件，设置底部导航菜单
将菜单设置为首页、商城、服务、成长和我的
将菜单配置为跳转到对应的页面
切换回商城页面，选择页面组件，页面布局选择Tab导航栏布局
删除tab栏导航布局的网格布局组件，添加普通容器组件，设置样式
:root {
background: var(--background-color);
padding-bottom: 60px;
min-height: 88vh;
}
里边添加单行输入组件，模板选择搜索框
继续添加标签选择组件，修改标签的值
继续添加数据列表组件，数据模型选择商品表
创建一个变量用来保存分类选择的值
创建一个自定义方法，当标签选择值改变的时候用来给变量进行赋值
export default function({event, data}){
const category =$w.tagSelect1.value;
if(category ==="999"){
$w.page.dataset.state.category = undefined;
}else{
$w.page.dataset.state.category = category;
}
}
给标签选择设置值改变事件，调用我们的自定义方法
设置页面显示事件，将category变量赋值为undefined
调整一下内容区域的组件，绑定我们的价格、原价，添加按钮修改为加入购物车
修改组件的样式，按照我们的配色进行设置
整体效果
完成以上步骤后，商城页面将具备以下功能：
-
-
-
-
家长可以通过商城浏览商品、筛选分类、搜索商品，并将心仪的商品加入购物车。
总结
本篇我们介绍了商城功能的数据源搭建和列表页面开发。通过创建商品数据模型、搭建后台管理功能、开发前端展示页面，我们实现了一个基础的商城功能。
在开发过程中，使用了数据列表组件和标签选择组件，实现了商品的展示和分类筛选功能。
在下一篇教程中，我们将介绍购物车功能的开发，敬请期待。
|