家政维修平台实战16：我的订单

现在我们已经实现了订单新增功能，当流程发起后，后续需要在订单列表和平台进行交互，比如支付、发起售后、评价等。先看一下我们的原型

顶部以页签的形式显示订单的状态，列表先显示基本信息，底部辅以不同的按钮，在不同环节可以进行的操作不同，本篇我们介绍一下我的订单的开发过程

1 创建页面

点击创建页面的图标，新增我的订单页面

2 配置底部导航

页面有了之后，我们需要配置一下底部的导航，点击页面布局

选择tab栏导航布局，点击基础属性，配置具体的菜单

点击订单，选择我的订单页面

3 配置顶部页签

在tab栏导航组件的内容插槽里添加顶部选项卡组件

然后配置一下标签，第一个是全部，标签值配置为0

第二个是待付款，标签值配置为1

第三个是服务中，标签值配置为4

第四个是待评价，标签值配置为5

然后依次配置，已完成、已取消、已退款，默认选中更改为全部

4 配置订单列表

在顶部选项卡下边添加数据列表组件，数据模型选择订单表

选中页面组件，配置一下背景色

将循环展示下边的组件清空

先添加一个普通容器，设置背景色为白色，圆角，内边距

里边添加三个普通容器表示三行

第一个普通容器下边添加两个文本组件，设置为横向排列，两端对齐

第一个文本组件的文本内容绑定我们的订单编号，从数据列表的所在行绑定

第二个文本绑定订单状态，给文本组件设置背景色和文字颜色

第二行的普通容器，下边添加图片和普通容器组件，设置布局为横向排列

设置图片组件的宽和高各位60

图片组件旁边的普通容器设置样式，增加flex:1表示占满剩余空间

里边放置两个文本组件，分别绑定我们的服务名称和预约时间，因为服务名称我们是在主表存着，需要先将数据列表的字段查询范围改为全部字段

然后在绑定服务名称的时候要展开主表选择具体的字段

第三行的普通容器，添加文本组件和普通容器

文本组件绑定为订单金额

右侧的普通容器，我们就放入具体的操作

5 状态切换

目前顶部选项卡和数据列表还没有形成联动，在我们切换状态的时候列表的数据也要跟着变化，先定义一个变量叫status

然后给数据列表设置数据筛选条件，配置为订单状态等于我们的变量

创建一个自定方法用来给这个变量进行赋值

export default function({event, data}) {const status = $w.topTab1.selectedValueif(status=="0"){$w.page.dataset.state.status = undefined}else{$w.page.dataset.state.status = status}
}

然后给顶部选项卡的选项切换设置事件，绑定为我们的自定义方法

在页面显示的时候，我们给我们的status赋值，赋值为undefined

总结

本篇我们介绍了我的订单的一个实现过程，介绍了顶部选项卡和数据列表组件的具体配置，而且演示了组件之间的数据联动，这种场景非常常见，需要仔细理解后续才可以灵活应用。