概述
本文将介绍自助点单模板的小程序端如何搭建。
全局代码区
getConfig：用于获取商家信息 。
页面搭建
首页搭建
1. 页面配置。
1.1 使用自定义样式实现通栏、设置背景底色以及高度。
2. 组件搭建。
2.1 添加图片组件绑定图片静态资源。
2.2 增加普通容器设置相对定位。
2.2.1 添加普通容器以及网格组件搭建展示店铺信息。
2.2.2 绑定获取到的店铺信息
$w.getConfig。2.3 增加两个普通容器。
2.3.1 设置文字介绍以及底部图片背景。
2.3.2 配置点击事件为页面跳转到点单页并填写对应类型。
2.4 增加普通容器。
2.4.1 添加文本与图片展示单品信息。
2.5 增加 Tab 栏并配置标签列表。
点单页搭建
1. 页面配置。
1.1 设置为自定义样式。
1.2 页面参数：orderType - 订单类型。
2. 组件搭建。
2.1 增加顶部导航。
2.1.1 增加普通容器及文字设置点击事件实现自取与外送的切换。
2.2 增加侧边选项卡并绑定标签。
2.3 增加滚动容器。
2.3.1 增加滚动容器以及循环展示组件绑定商品列表字段。
2.3.2 增加空数据图片并配置条件展示。
2.4 新增弹窗组件并绑定控制变量。
2.4.1 绑定控制打开关闭弹窗变量。
2.4.2 弹窗内容中加入网格布局以及循环展示绑定当前所选商品字段。
2.5 增加 Tab 栏组件并配置信息。
3. 代码区说明：
getCategorys：获取商品类别列表。
getProductsByCategory：根据商品类别获取商品列表。
currentSelectProducts：获取当前选择的商品。
currentTag：获取当前选择的标签。
isShowShoppingCart：判断是否打开购物车。
totalPrice：计算总计价格。
payment：调用小程序微信支付。
closeLoading：隐藏加载中效果。
确认订单页搭建
1. 页面配置。
1.1 设置页面背景颜色为
F5F5F5。1.2 页面参数： ids 商品列表、orderType 订单类型、totalPrice 总计价格。
2. 组件搭建。
2.1 新增表单容器并绑定订单管理模型。
2.2 将不需要的参数隐藏。
2.3 添加订单类型选择。
2.4 添加商家信息及地址电话信息。
2.5 添加展示商品信息。
2.6 添加底部支付按钮。
2.7 设置表单提交事件。
3. 代码区说明：
getTodayOrder：获取今日订单数量。
orderId：确定订单号。
orderType：确定订单类型。
productList：获取商品列表。
productId：获取商品信息。
totalPrice：获取总计价格。
payment：调用微信支付方法。
订单页搭建
1. 页面配置。
1.1 设置背景颜色为 
F5F5F5。2. 组件搭建。
2.1 新增滚动容器组件。
2.1.1 增加循环展示组件并绑定订单记录，内部使用文本和图片等组件构建。
2.2 新增普通容器，添加文本组件，用于展示无订单状态并设置条件展示。
2.3 添加 Tab 栏组件并配置导航信息。
3. 代码区说明：
getOrders：获取当前用户订单列表。
closeLoading：隐藏加载中状态。
订单详情页搭建
1. 页面配置。
1.1 设置背景颜色为
F5F5F5。1.2 页面参数：orderId 订单号、orderType 订单类型、orderStatus 订单状态。
2. 组件搭建。
2.1 复用确认订单页订单类型选择、商家信息展示、商品展示、底部支付按钮。
2.2 新增订单信息块。
2.2.1 将获取到的时间、订单号、备注信息展示。
2.3 如果订单为待付款状态则展示支付按钮。
2.4 为支付按钮设置支付事件。
3. 代码区说明：
getOrderById：根据订单号获取订单。
orderStatus：确定订单状态。
payment：调用微信支付方法。
closeLoading：隐藏加载中。