医疗小程序12出诊列表

1 添加数据列表

医生列表我们一般是通过数据列表组件来搭建。选择日期选择页面，在页面组件下添加一个普通容器用来显示灰色的背景色

切换到样式，设置背景色为#F5F5F5

将网格容器移入普通容器中

设置行的背景色为白色

设置行间距

在列里添加数据列表组件，数据模型选择医生排班表

字段范围选择查询全部字段

2 搭建页面布局

数据有了之后，就需要搭建布局。我们的医生列表主要显示医生的头像、姓名、擅长领域和余号情况

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

添加一个普通容器，里边添加两个普通容器

设置外层的普通容器为横向排列

内层的普通容器里添加图片组件，设置宽和高各为60

布局模式设置为裁剪填满，地址绑定为医生的头像

内层的第二个普通容器设置样式为flex:1，表示占满剩余空间

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

第一个普通容器里继续添加两个普通容器，设置布局为横向排列，两端对齐

第一个普通容器里添加两个文本组件，分别绑定医生的姓名和职称

第二个普通容器也添加两个文本组件，绑定班次类型和余号

给文本组件设置样式绑定，根据余号的情况来显示颜色，有号就显示绿色，满号就显示红色

第二行文本绑定科室名称

第三行绑定擅长领域

最后一行绑定挂号费

3 数据筛选

布局搭建好了之后，我们在切换日期的时候，需要显示选中日期的医生列表信息。为此需要创建一个变量来保存切换的日期

这里变量的类型选择数字类型是因为数据库的排班日期是存储的日期的毫秒值

然后设置数据列表的数据筛选条件，设置为出诊日期等于我们选中的日期

bash 复制代码

$w.page.dataset.state.selectDate||new Date().setHours(0,0,0,0)

这里我们用了短路运算符，如果未选中日期，我们就设置为当天的日期

为此我们完善一下我们的日期选中自定义方法，修改为如下：

bash 复制代码

function toLocalMidnightMs(fullDate){
  const [y, m, d] = fullDate.split("-").map(Number);
  return new Date(y, m - 1, d).getTime();
}
export default function({ event, data }) {
  const id = data.target;
  console.log("id",id)
  const list = $w.page.dataset.state.canSelectDate || [];
  const item = list.find(item=>item.id==id)
  console.log("fullDate",item.fullDate)
  console.log("fullDate",item.fullDate)
  $w.page.dataset.state.selectDate= toLocalMidnightMs(item.fullDate);
  // 遍历一次：命中项 select=true，其余 false
  list.forEach(item => item.select = (item.id == id));
  // 通知前端刷新（低代码平台需要手动 setData）
  $w.page.dataset.state.canSelectDate = [...list];
}

4 最终效果

配置好之后，默认显示当天的出诊列表

切换到其他日期，因为未设置排班计划，所以不显示数据

总结

本篇我们介绍了医生出诊列表的搭建过程。先是搭建了列表的布局，然后修改了日期切换函数，让日期的切换和列表进行联动。灵活运用布局组件就可以搭建出各种好看的效果来。

医疗小程序12出诊列表

目录

1 添加数据列表

2 搭建页面布局

3 数据筛选

4 最终效果

总结