医疗小程序05我的就诊卡

我们现在已经完成了就诊人信息的搭建，登录小程序后可以添加多个就诊人。但是在预约挂号的时候，先需要选择一个默认的就诊人，本篇我们介绍一下如何切换默认就诊人功能。

1 首页搭建就诊卡信息

先搭建一个一行两列布局

设置外层普通容器的布局为横向排列，两端对齐

内层的第一个普通容器里继续添加两个普通容器

第一个普通容器里添加三个文本组件

设置普通容器的布局为横向排列

第二个普通容器下添加按钮组件和文本组件，布局设置为横向排列

右边的普通容器添加图片和文本组件

这样我们基础布局就添加好了

2 添加变量

布局有了我们就需要读取数据，在代码区先添加一个自定义变量，类型选择对象，名称修改为card

然后再添加一个内置数据表查询，从就诊人表中读取数据

配置查询条件，设置为关联用户等于全局变量user对象的数据标识字段

3 初始化就诊卡

如果页面加载后，就诊卡无数据，我们就从就诊人列表里获取第一条数据来初始化就诊卡。

选中页面组件，点击页面显示

调用全局的登录方法

成功时调用内置数据表查询的触发数据方法

添加一个逻辑分支，判断card对象是否为空

不满足条件时，我们取出数组的第一条记录进行赋值

4 数据绑定

初始化就诊卡之后，我们就依次绑定字段，第一个文本绑定就诊人姓名

第二个文本绑定就诊人性别

$w.app.utils.formatEnum($w.page.dataset.state.card.gender, 'xingbiehs', $w.app)

第三个文本字段用立即执行函数表达式来根据身份证号码计算年龄

((s)=>{s=String(s);const b=s.length===18?s.slice(6,14):s.length===15?'19'+s.slice(6,12):'';if(!/^\d{8}$/.test(b))return NaN;const y=+b.slice(0,4),m=+b.slice(4,6)-1,d=+b.slice(6,8),now=new Date();return now.getFullYear()-y-((now.getMonth()<m || (now.getMonth()===m && now.getDate()<d))?1:0)} )($w.page.dataset.state.card.id_number)+"岁"

第二行的文本绑定门诊号字段

图片组件先设置布局模式为裁剪填满

宽和高设置为40，选择一个二维码的素材

图片下边的文本改为出示就诊码

调整好样式后的效果

5 切换就诊卡

如果登录用户有多个就诊卡，可以进行切换，我们用弹窗组件来实现。选中页面组件，添加弹窗组件

里边添加标签选择组件

绑定选项

$w.query1.data.records.map(item=>({label:item.name+"  "+item.card_no,value:item._id
}))

设置值改变事件，将选中值赋值给我们的card变量

$w.query1.data.records.find(item=>item._id==$w.tagSelect1.value)

总结

本篇我们介绍了初始化就诊卡以及切换就诊卡的功能。首先需要熟悉如何用布局组件搭建出我们想要的布局效果，然后需要结合自定义变量和内置数据表查询来绑定数据。在切换就诊卡的时候我们用到了数组的常用API，这类功能既要熟悉组件的用法也要熟练使用javascript的常用语法才可以流程的搭建出来。