医疗小程序07设置默认卡

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 绑定为默认卡

详情页样式完善后，我们要增加一个功能，当卡片不是默认卡的时候，可以设置为默认卡。当卡片是默认卡的时候，直接显示为默认卡

添加两个普通容器来根据状态显示不同的视图

第一个普通容器里添加图标和文本组件，图标选择对钩图标，文本组件内容设置为当前为默认卡

第二个普通容器也添加图标组件和文本组件，图标设置为圆圈，文本内容设置为设为默认卡

然后给普通容器绑定条件展示，根据状态进行显示

然后给普通容器设置点击事件，将卡片设置为默认卡片

总结

本篇我们介绍了详情页的布局完善，以及默认就诊卡的设置功能。熟练应用布局组件，就可以实现出各种各样丰富的效果。

医疗小程序07设置默认卡

目录

1 修改数据模型

2 搭建快捷菜单

3 完善详情页

4 绑定为默认卡

总结