【尚医通】vue3+ts前端项目开发笔记——项目分析
尚医通开发笔记
一、项目分析
- 项目在线地址：http://syt.atguigu.cn
- 测试帐号：17720125002
-
首页 home
-
header
- 全局组件
- 布局
- 左：logo 、title
- 中：初始隐藏 搜索框
- 公共组件
- 显示条件：在页面滚动到页面内搜索框的位置显示
- 右：
- 帮助中心
- 登录/注册
- 如果登录：显示 帐号名 ，有下拉框：显示 ： 实名认证、挂号订单、就诊人管理、退出登录
-
footer
- 全局公共组件
- 布局
- 左：京ICP备13018369号 电话挂号010-56253825
- 右： 联系我们 合作伙伴 用户协议 隐私协议
-
contanier 路由显示区域
-
轮播图
- banner
-
-
搜索
-
search
- 公共组件
-
tab切换
- title 标题
- 可抽取，随便
- tabbox
- title tab-title
- tab bar 全部 …
-
content 显示区域
-
卡片
-
公共组件
-
布局
- 左
- title card-title
- describe icon+ desc
- 右 logo
- 左
-
-
分页
- 公共组件
-
- hospital
-
布局
- 左
- menu
- 右
- 根据menu的选择，显示路由
- 左
-
menu-item
-
预约挂号
- title
- 与首页卡片里的title相似 ，可酌情抽取
- icon+医院等级
- introduce
- 布局：
- 左
- 医院logo
- 右
- intro- item 公共组件
- 挂号规则 intro-item
- item-title
- item-content
- subtitle + subcontent
- 医院预约规则 intro-item
- item-title
- item-content
- rule-text
- 左
- 布局：
- 选择科室
- title
- 首页 【医院title】相似，可服用
- tabbar
- 点击科室 具体内容【xxxx门诊】
- 检测登录：
- 未登录，弹出登录弹窗
- 已登录，跳转至【预约挂号】
- 检测登录：
- 点击科室 具体内容【xxxx门诊】
- title
- title
-
医院详情
- title
- 公共组件 title + icon + level
- route-intro
- 左：logo
- 右：icon + content
- hospital-intro
- title
- 公共组件
- content
- title
- title
-
预约须知
-
停诊信息
-
咨询/取消
- title
- 公共组件
- content
- title
-
-
login modal
-
dialog
-
左：登录
-
表单登录
-
title 手机登录
-
输入手机号
-
点击按钮 【获取验证码】
-
验证码发送成功以后，显示 【验证码已成功发送至 xxxx】
- 验证码 + 倒计时（公共组件）
- 此时，按钮显示 【马上登录】
-
-
二维码 扫码登录
- 微信二维码
- 微信二维码
-
-
右：展示信息
-
微信扫一扫关注
“快速预约挂号”
-
扫一扫下载
“预约挂号”APP
-
xxxxxx官方指定平台
快速挂号 安全放心
-
-
-
-
hospital 登录成功以后
-
点击 科室的具体门诊比如【多发性硬化专科门诊】进入 【挂号页】
-
面包屑
- 公共组件
-
title
-
医院标题
-
公共组件
-
-
挂号日期
- title
- 日期列表
-
分页
- 公共组件
-
号源
-
item 可复用 公共组件
-
上午 | 下午
-
title
- doctorTitle | docName 副主任医师 ｜ 裴育
-
intro
- content
-
-
price
-
btn-order
-
点击可预约的按钮【剩余22】跳转至 【确认挂号信息】页
- 【有就诊人】
【无就诊人】
- 添加就诊人
- 【有就诊人】
-
-
-
5 . hospital 确认挂号信息
-
title
- 公共组件
- 确认挂号信息
- 公共组件
-
subtitle
- 公共组件
- icon + title
- 公共组件
-
选择就诊人
- subtitle
- 卡片
- name
- 身份证
- 选中状态时 ，【就诊卡】页变化
-
选择就诊卡
- subtitle
- Notice 如您持社保卡就诊，请务必选择医保预约挂号，以保证正常医保报销
- card
- title
- name + 身份证号
- 医保｜ 自费 ： 号码
- title
-
挂号信息
-
subtitle
-
form info-form
- 【挂号详情】页有相似部门，可抽取
就诊日期： 2023-07-08 周六 上午 就诊医院： 北京人民医院 就诊科室： 多发性硬化专科门诊 医生姓名： 医生职称 医师 医生专长 内分泌科常见病。 医事服务费 100元
-
-
用户信息
- 就诊人手机号：17720125002
-
【确认挂号】按钮
- 点击，跳转至 新的页面 【挂号订单】
-
order
-
menu与hospital相似
- menu抽取为公共组件
-
-
menu-item
-
实名认证
- 【已认证】
【未认证】
-
挂号订单
- 两种状态：
- 携带订单id 显示 【挂号详情】
- 未携带订单id，显示 【订单列表】
- 【挂号详情】
- 两种状态：
-
【挂号详情】页
-
信息提示框 notice box
- 公共组件
- 预约成功，待支付
- 公共组件
-
挂号信息
form
就诊人信息： name 就诊日期： 2023-07-08 周六 上午 就诊医院： 北京人民医院 就诊科室： 多发性硬化专科门诊 医生职称： 医事服务费 挂号单号 挂号时间 -
注意事项：
-
注意事项
1、请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；
2、【取号】就诊当天需在2023-07-0809:00前在医院取号，未取号视为爽约，该号不退不换；
3、【退号】在2023-07-07 15:30前可在线退号 ，逾期将不可办理退号退费；
4、北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
5、请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。 -
按钮区域
-
【取消订单】
-
显示 提示 取消确认 对话框
-
【确认】，返回到
【信息提示框 notice box】显示 【取消预约】，同时 按钮部分隐藏
-
-
-
【支付】
-
-
-
【订单列表】
-
title
- 挂号订单列表
-
搜索栏
- title+select 公共组件
- 就诊人
- 下拉选择框
- 订单状态
- 下拉选择框
-
table
- 就诊时间
- 医院
- 科室
- 医生
- 医事服务费
- 就诊人
- 订单状态
- 操作
-
分页
- 公共组件
-
就诊人管理
-
card
-
公共组件
-
name 身份证号 查看详情
-
点击【详情】
-
-
医保 | 自费 号码 身份证号
-
-
btn
- 添加就诊人
-
【添加就诊人】和【修改就诊人】内容相似
- 公共组件
- 就诊人信息
- 姓名
- 证件类型
- 证件号码
- 性别
- 出生日期
- 手机号码
- 建档信息（完善后部门医院首次就诊不排队建档）
- 婚姻状态
- 自费/医保
- 当前住址
- 详细地址
- 联系人信息（选填）
- 姓名
- 证件类型
- 证件号码
- 手机号码
- 保存按钮
-
-
修改帐号信息
-
意见反馈
-