【尚医通】vue3+ts前端项目开发笔记——项目分析

尚医通开发笔记

一、项目分析

• 项目在线地址：http://syt.atguigu.cn
• 测试帐号：17720125002

1. 首页 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

  • 分页

    • 公共组件

2. 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门诊】
          • 检测登录：
            • 未登录，弹出登录弹窗
            • 已登录，跳转至【预约挂号】

  • 医院详情
    
    

    • title
      • 公共组件 title + icon + level
    • route-intro
      • 左：logo
      • 右：icon + content
    • hospital-intro
      • title
        • 公共组件
      • content

  • 预约须知

    

    • title
      • 公共组件

    • content

  • 停诊信息

    • title
      • 公共组件

    • content

  • 咨询/取消

    • title
      • 公共组件
      • content

3. login modal

   

   • dialog

     • 左：登录

       • 表单登录

         • title 手机登录

         • 输入手机号

         • 点击按钮 【获取验证码】

         • 验证码发送成功以后，显示 【验证码已成功发送至 xxxx】
           

           • 验证码 + 倒计时（公共组件）
           • 此时，按钮显示 【马上登录】

       • 二维码 扫码登录

         • 微信二维码
           

     • 右：展示信息

       • 微信扫一扫关注

         “快速预约挂号”

       • 扫一扫下载

         “预约挂号”APP

       • xxxxxx官方指定平台

         快速挂号 安全放心

4. 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 + 身份证号
      • 医保｜ 自费 ： 号码

• 挂号信息

  • subtitle

  • form info-form

    • 【挂号详情】页有相似部门，可抽取

    就诊日期：	2023-07-08 周六 上午
    就诊医院：	北京人民医院
    就诊科室：	多发性硬化专科门诊
    医生姓名：
    医生职称	医师
    医生专长	内分泌科常见病。
    医事服务费	100元

• 用户信息

  • 就诊人手机号：17720125002

• 【确认挂号】按钮

  • 点击，跳转至 新的页面 【挂号订单】

5. 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

      • 添加就诊人

    • 【添加就诊人】和【修改就诊人】内容相似

      • 公共组件

      
      
      

      • 就诊人信息
        • 姓名
        • 证件类型
        • 证件号码
        • 性别
        • 出生日期
        • 手机号码
      • 建档信息（完善后部门医院首次就诊不排队建档）
        • 婚姻状态
        • 自费/医保
        • 当前住址
        • 详细地址
      • 联系人信息（选填）
        • 姓名
        • 证件类型
        • 证件号码
        • 手机号码
      • 保存按钮

  • 修改帐号信息

  • 意见反馈

​

​

​

​

​

​

​

​

​