目录
- [1 修改数据模型](#1 修改数据模型)
- [2 搭建快捷菜单](#2 搭建快捷菜单)
- [3 完善详情页](#3 完善详情页)
- [4 绑定为默认卡](#4 绑定为默认卡)
- 总结
我们上一篇介绍了就诊卡的切换功能，有一点做的不好的是，如何设置为默认卡。在就诊人详情页面应该有一个可以设置默认卡的功能，可以将一张卡片设置为默认就诊卡，本篇我们介绍一下实现的过程。
1 修改数据模型
我们原来的就诊人，没有考虑是否是默认卡的字段。这里我们添加一个布尔值类型的字段，命名为是否是默认卡
2 搭建快捷菜单
目前页面都是互相独立的，我们需要让患者可以从个人中心快捷的进入就诊人列表页面，搭建一个菜单导航的布局
选中行组件，设置列数量为1
添加普通容器，设置样式，设置布局为横向排列，平分
继续添加普通容器，里边添加图标和文本组件，样式设置为纵向排列，水平垂直居中
调整图标类型为自定义图标，设置为超大，从素材库选择合适的图标
修改文本内容为我的就诊卡
在普通容器上右键，选择克隆
选择克隆后的组件，右键，选择移到上级
为了让快捷导航和背景区域有个区分，我们在tab栏导航布局的内容插槽里添加一个普通容器
将网格布局移入
设置普通容器的样式
bash
:root {
height: 100vh;
background-color: #F8F8F8;
}设置就诊卡的容器的颜色为白色
设置一定的圆角和内边距、外边距，最终的效果
然后给菜单设置点击事件，打开对应的页面
3 完善详情页
目前我们就诊人的详情页是使用数据详情组件实现的，效果比较差，我们重新搭建一下布局
先搭建一个就诊人姓名的效果，左右两侧是一条横线，中间是就诊人的姓名信息
添加普通容器，里边添加普通容器、文本、普通容器组件，设置外层普通容器的样式为横向排列，水平垂直居中
文本组件内容绑定为就诊人姓名
文本组件左右两侧的普通容器设置样式
bash
flex:1; height:1px; background:#DADADA; 设置后的效果
下边的行的列数量调整为1，我们让文本显示更紧凑
调整移动端列宽，设置为12
文本内容用表达式重新绑定
证件号码我们需要屏蔽一下，表达式如下
bash
"证件号码： " + (() => { const s = String($w.dataView1.record?.id_number ?? ''); return s.length > 6 ? s.slice(0,3) + '*'.repeat(s.length - 6) + s.slice(-3) : s; })()电话也需要屏蔽一下，表达式如下
bash
"电话： " + $w.dataView1.record.phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')4 绑定为默认卡
详情页样式完善后，我们要增加一个功能，当卡片不是默认卡的时候，可以设置为默认卡。当卡片是默认卡的时候，直接显示为默认卡
添加两个普通容器来根据状态显示不同的视图
第一个普通容器里添加图标和文本组件，图标选择对钩图标，文本组件内容设置为当前为默认卡
第二个普通容器也添加图标组件和文本组件，图标设置为圆圈，文本内容设置为设为默认卡
然后给普通容器绑定条件展示，根据状态进行显示
然后给普通容器设置点击事件，将卡片设置为默认卡片
总结
本篇我们介绍了详情页的布局完善，以及默认就诊卡的设置功能。熟练应用布局组件，就可以实现出各种各样丰富的效果。