目录
- 1 创建页面
- 2 创建URL参数
- 3 创建变量
- 4 展示医生信息
- 5 搭建挂号日期
- 6 显示号段
- 最终效果
- 总结
上一篇我们介绍了出诊医生列表的功能，如果医生当天号段未挂满的情况下，点击医生就可以进入号段详情页。在排班管理章节，我们介绍了后台按照每半小时进行排班的功能，在详情页就需要展示详细的排班计划，供患者进行预约。
1 创建页面
打开工作台，点击编辑应用进入小程序
点击创建页面的图标
输入页面标题排班信息
2 创建URL参数
我们页面分为两个部分，上边是医生的详情信息，下边是号段信息。这些信息我们已经存储在排班表里，因此需要创建一个URL参数来接收医生列表传入的排班标识
选中页面组件，在右侧的属性面板里点击新建URL参数
回到我们的日期选择页面，给医生列表添加点击事件
执行动作选择打开页面，打开排班信息页面，并且传入排班列表的数据标识
3 创建变量
有了排班信息后，我们需要获取排班的数据。在代码区新建一个内置数据表查询
数据表选择医生排班表，方法选择查询单条
查询条件设置为数据标识等于我们的URL参数
关联表查询勾选所有子表
4 展示医生信息
数据准备好了之后就需要搭建页面布局，在第一列里添加普通容器，里边添加两个普通容器，设置外层的普通容器布局为横向排列
内层第一个普通容器里添加图片组件，设置宽和高各为60
设置布局模式为裁剪填满，地址绑定为医生的头像字段
第二个普通容器里继续添加三个普通容器，设置样式为横向占满其余位置
第一个普通容器里添加文本和图标组件，布局设置为横向排列，两端对齐
文本绑定为医生的姓名字段
图标修改为一个爱心，我们后续开发收藏功能
第二个普通容器里添加文本组件，绑定为科室名称
第三个普通容器添加三个文本组件，我们先写固定的内容
再起一行，搭建我们的擅长领域布局
5 搭建挂号日期
医生信息搭建好之后，我们需要展示一下挂号日期，这个我们已经在日期选择界面搭建好了，直接复制组件过来
第一文本我们绑定排班日期，需要把排班日期转为星期显示
['周日', '周一', '周二', '周三', '周四', '周五', '周六'][$w.DayOfWeek($w.schedules.data.date)]第二个文本直接显示排班日期
第三个根据余号情况显示有号还是满号
$w.schedules.data.remaining>0?"有号":"满号"6 显示号段
最后一部分我们用数据列表组件来搭建号段显示，先添加数据列表，数据源切换为fx
表达式绑定为号段信息
在数据列表里添加普通容器，里边添加两个普通容器，设置布局为横向排列，两端对齐
内层的第一个普通容器设置为占满剩余空间
里边添加两个文本组件，设置为横向排列，两端对齐
添加循环展示组件，将普通容器移入循环展示里
循环展示绑定为列表的数组字段
第一个文本组件绑定为号段的起止时间
$w.TimeText($w.item_repeater1.start_time, 'HH:mm')+"-"+$w.TimeText($w.item_repeater1.end_time, 'HH:mm')第二个文本绑定为挂号费用
"¥ "+$w.item_repeater1.fee第三个文本绑定余号信息
最终效果
搭建布局并且绑定好数据后，就可以展示医生信息和号段的一个情况
总结
本篇我们介绍了排班信息展示功能的搭建过程，主要是利用内置数据表查询可以一次性的把关联信息都查询出来的特点。初学者一般的做法是要么不拆分表，要么拆分了不建立关联关系，数据一团乱麻。没要好的设计就不可能搭建出功能来。