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

目录

• [1 配置必录项](#1 配置必录项)
• [2 配置动态校验项](#2 配置动态校验项)
• [3 完善列表展示](#3 完善列表展示)
• [4 显示就诊码](#4 显示就诊码)
• [5 绘制一维码](#5 绘制一维码)
• 总结

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

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.canvasInstance
    const 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
        });
    }
}

配置canvas渲染完成事件，调用我们的方法，并且将就诊号传入

总结

本篇我们介绍了动态校验字段，配置二维码，以及生成一维码的功能。灵活运用组件，就可以根据业务场景实现各种各样符合实际需求的效果，按照上述的方法练习一下吧。