家政维修平台实战16：我的订单-CSDN博客

本文链接：https://blog.csdn.net/u012877217/article/details/148467971

现在我们已经实现了订单新增功能，当流程发起后，后续需要在订单列表和平台进行交互，比如支付、发起售后、评价等。先看一下我们的原型
在这里插入图片描述
顶部以页签的形式显示订单的状态，列表先显示基本信息，底部辅以不同的按钮，在不同环节可以进行的操作不同，本篇我们介绍一下我的订单的开发过程

1 创建页面

点击创建页面的图标，新增我的订单页面
在这里插入图片描述

2 配置底部导航

页面有了之后，我们需要配置一下底部的导航，点击页面布局
在这里插入图片描述
选择tab栏导航布局，点击基础属性，配置具体的菜单

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

3 配置顶部页签

在tab栏导航组件的内容插槽里添加顶部选项卡组件
在这里插入图片描述
然后配置一下标签，第一个是全部，标签值配置为0

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

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

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

然后依次配置，已完成、已取消、已退款，默认选中更改为全部
在这里插入图片描述

4 配置订单列表

在顶部选项卡下边添加数据列表组件，数据模型选择订单表
在这里插入图片描述
选中页面组件，配置一下背景色

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

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

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

第一个普通容器下边添加两个文本组件，设置为横向排列，两端对齐
在这里插入图片描述
第一个文本组件的文本内容绑定我们的订单编号，从数据列表的所在行绑定

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

第二行的普通容器，下边添加图片和普通容器组件，设置布局为横向排列
在这里插入图片描述
设置图片组件的宽和高各位60

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

里边放置两个文本组件，分别绑定我们的服务名称和预约时间，因为服务名称我们是在主表存着，需要先将数据列表的字段查询范围改为全部字段
在这里插入图片描述
然后在绑定服务名称的时候要展开主表选择具体的字段

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

文本组件绑定为订单金额

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

5 状态切换

目前顶部选项卡和数据列表还没有形成联动，在我们切换状态的时候列表的数据也要跟着变化，先定义一个变量叫status
在这里插入图片描述
然后给数据列表设置数据筛选条件，配置为订单状态等于我们的变量

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

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