当前位置：首页 > news >正文

医疗小程序05完善就诊人信息

news 2025/11/12 5:32:38

上一节我们介绍了就诊人管理的列表查询、添加、查看详情功能。添加就诊人时，需要增加必要的必填项来约束信息的填写。如果只是一种视图，那么使用表单的默认校验功能就可以，但是我们这里表单里需要通过是否有无身份证来校验必录项，本篇我们就介绍一下通过前端代码来添加校验逻辑。

1 配置必录项

在有无身份证选项切换时，有些字段是都需要填写的，我们用表单字段的必填项来配置。选中姓名组件，打开必填的开关
在这里插入图片描述
这样文本前边会添加一个红色的星号，如果不填写内容点击提交按钮，会有提示的文本

2 配置动态校验项

除了基础必录项外，我们还可以通过条件来控制组件的显示和隐藏。但是存在的问题是如果组件配置了必录，但是隐藏后，必录校验依然起作用。要想实现动态校验，我们需要打开组件的渲染配置选项。

点击配置图标
在这里插入图片描述
切换到实验室配置，打开组件渲染控制配置

在这里插入图片描述
然后给需要动态校验的组件，配置是否渲染属性，这样就可以做到不同的条件校验字段不同

3 完善列表展示

目前我们列表只是显示了基本字段，我们来优化一下样式。首先是根据患者的性别来显示默认头像

先往素材里上传男和女需要的头像
在这里插入图片描述
然后在就诊人列表里添加两个图片组件，一个显示男的头像，一个显示女的头像

给图片组件绑定条件展示，根据性别来决定哪个组件显示

然后处理手机号的部分屏蔽，输入如下表达式

$w.item_listView1.phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')

4 显示就诊码

点击查看详情页面，我们需要显示就诊码，以二维码的形式显示。在表单提交的时候我们用自动编号来给患者分配了一个就诊码，在详情页我们可以把它放入二维码中。

在页面中添加二维码组件
在这里插入图片描述
二维码内容绑定门诊号字段

5 绘制一维码

除了二维码，通常医疗小程序还会有一维码，我们用canvas来画一下一维码。先引入一维码库
在这里插入图片描述

https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js

然后往页面中添加canvas组件，清空初始化代码
在这里插入图片描述
在代码区添加一个javascirpt方法，输入如下代码

export default async function ({ event, data }) {// 假设门诊号数据源为 data.target (即 data.target 本身就是门诊号字符串)const clinicNo = data.target || "0001638922"; // 获取canvas实例和上下文（组件ID改为 canvas1）const canvas = $w.canvas1.canvasInstanceconst ctx = $w.canvas1.canvasCtx// 不再使用视口大小，画布将缩放为条码的精确尺寸// --- 获取 DPR (设备像素比) 确保兼容性 ---let dpr = 1;if ($w.wedaContext.platforms.includes('MP') && typeof wx !== 'undefined' && wx.getWindowInfo) {const windowInfo = wx.getWindowInfo();if (windowInfo && windowInfo.pixelRatio) {dpr = windowInfo.pixelRatio;}} else if (typeof window !== 'undefined' && window.devicePixelRatio) {dpr = window.devicePixelRatio;} else if ($w.device.pixelRatio) {dpr = $w.device.pixelRatio;}dpr = dpr > 0 ? dpr : 1;// ----------------------------------------// 检查 Canvas 实例和上下文是否有效，并确认组件类型if (ctx && canvas && $w.canvas1?.type === '2d') {// --- 1. 计算条码的精确尺寸 ---const barcodeUnitWidth = 2;   // 条纹宽度 (JsBarcode width)const barcodeHeight = 60;     // 条码高度（像素）const characters = clinicNo.length;// CODE128 近似单位数：(字符数 * 11) + 35（起始/校验/停止/安静区）const barcodeTotalUnits = (characters * 11) + 35;const estimatedBarcodeWidth = barcodeTotalUnits * barcodeUnitWidth; // 像素宽度// --- 2. 设置画布大小为条码大小（考虑 DPR）---canvas.width = estimatedBarcodeWidth * dpr;canvas.height = barcodeHeight * dpr;ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置任何变换ctx.scale(dpr, dpr);                // 以 DPR 缩放，使像素清晰ctx.clearRect(0, 0, estimatedBarcodeWidth, barcodeHeight);// --- 3. 绘制条形码（从左上角开始，无额外边距）---JsBarcode(canvas, clinicNo, {format: "CODE128",displayValue: false,width: barcodeUnitWidth,height: barcodeHeight,margin: 0});}
}