帮我生成一个微信小程序UI设计挂号功能
整体布局:页面顶部设置醒目的 “挂号” 标题。下方分栏展示挂号分类,如按科室挂号、按医生挂号、按日期挂号。
科室挂号:以图标和文字结合的方式,整齐排列各科室,点击科室图标或文字可进入该科室医生列表页。每个科室图标应体现科室特色,例如外科用手术刀图标搭配科室名称。
医生挂号:列出医生姓名、职称、擅长领域及排班信息。医生头像清晰,且有简短个人介绍。可根据医生职称进行筛选排序,如主任医师、副主任医师等。
日期挂号:呈现日期选择器,默认展示本周日期,可左右滑动切换月份。已约满日期置灰显示,不可点击。选择日期后展示当天可预约的医生及号源情况。
操作反馈:挂号成功后,弹出确认弹窗,显示挂号成功信息,包括挂号科室、医生、日期、时间等,并推送挂号成功通知。
缴费功能
整体布局:页面上方为 “缴费” 标题,下方列表展示待缴费项目,包括项目名称、金额、详情描述等。
项目展示:每个项目清晰显示名称,如 “门诊挂号费”“检查费” 等,金额数字突出显示。可点击项目查看详细清单,如检查项目明细、药品明细等。
支付方式:在页面底部列出常见支付方式图标,如微信支付、支付宝支付、银行卡支付等。点击支付方式图标进入相应支付流程,支付成功后显示支付成功界面,包含电子缴费凭证,可下载保存。
就诊人功能
整体布局:页面顶部是 “就诊人” 标题,下方展示已添加就诊人列表。每个就诊人信息以卡片形式呈现。
添加就诊人:页面设有 “添加就诊人” 按钮,点击进入添加页面,填写姓名、性别、年龄、身份证号、联系电话等信息,支持拍照上传身份证照片辅助填写。
就诊人卡片:卡片显示就诊人姓名、头像(若有上传)、与本人关系。点击卡片可进入编辑页面,可修改就诊人信息,也可删除该就诊人。
处方查询功能
整体布局:页面顶部为 “处方查询” 标题,以时间轴形式展示历次处方记录。
处方展示:每个处方展示就诊日期、科室、医生姓名。点击处方可展开详细内容,包括药品名称、规格、数量、用法用量、注意事项等。对于中药处方,可展示中药配方详情及煎服方法。
搜索功能:页面设置搜索框,可按就诊日期、药品名称等关键词搜索处方记录。
体检报告功能
整体布局:页面顶部 “体检报告” 标题,下方列表展示已有的体检报告,以体检日期排序。
报告展示:每份报告显示体检机构名称、体检日期、体检类型(如入职体检、年度体检等)。点击报告可进入详细查看页面,报告以 PDF 形式呈现,可放大缩小查看细节。对于关键体检指标,有明显颜色标注,并附简要解读说明,帮助用户快速了解体检结果。
下载功能:提供下载按钮,支持用户将体检报告下载至本地保存。
我来帮你设计一个完整的医院挂号微信小程序UI。首先让我生成设计灵感来确保视觉效果。
现在我将根据设计灵感创建一个完整的医院挂号小程序UI。这是一个移动端优先的设计,采用清新的医疗蓝绿色调。
我已经为你创建了一个完整的微信小程序风格的医院挂号系统UI,包含以下功能模块:
整体采用清新的医疗蓝绿色调,卡片式布局,交互流畅,符合移动端操作习惯。
我需要先读取 globals.css 文件,然后再进行修改。
现在我来更新 globals.css 文件,添加医疗主题的颜色变量。
我已经更新了 globals.css 文件,添加了完整的医疗健康主题颜色系统,包括:
同时添加了滚动条隐藏和日期选择器动画的工具类,让界面更加流畅。