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

尚医通开发笔记

一、项目分析

  • 项目在线地址:http://syt.atguigu.cn
  • 测试帐号:17720125002
  1. 首页 home

    【尚医通】vue3+ts前端项目开发笔记——项目分析_第1张图片

【尚医通】vue3+ts前端项目开发笔记——项目分析_第2张图片

【尚医通】vue3+ts前端项目开发笔记——项目分析_第3张图片

  • 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
    • 分页

      • 公共组件
  1. hospital

【尚医通】vue3+ts前端项目开发笔记——项目分析_第4张图片

  • 布局

      • menu
      • 根据menu的选择,显示路由

  • menu-item

    • 预约挂号
      【尚医通】vue3+ts前端项目开发笔记——项目分析_第5张图片

      • 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门诊】
            • 检测登录:
              • 未登录,弹出登录弹窗
              • 已登录,跳转至【预约挂号】
    • 医院详情
      【尚医通】vue3+ts前端项目开发笔记——项目分析_第6张图片
      【尚医通】vue3+ts前端项目开发笔记——项目分析_第7张图片

      • title
        • 公共组件 title + icon + level
      • route-intro
        • 左:logo
        • 右:icon + content
      • hospital-intro
        • title
          • 公共组件
        • content
    • 预约须知

      【尚医通】vue3+ts前端项目开发笔记——项目分析_第8张图片

      • title
        • 公共组件
      • content

    • 停诊信息

      • title
        • 公共组件
      • content

    • 咨询/取消

      • title
        • 公共组件
        • content
  1. login modal

    【尚医通】vue3+ts前端项目开发笔记——项目分析_第9张图片

    • dialog

      • 左:登录

        • 表单登录

          • title 手机登录

          • 输入手机号

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

          • 验证码发送成功以后,显示 【验证码已成功发送至 xxxx】
            【尚医通】vue3+ts前端项目开发笔记——项目分析_第10张图片

            • 验证码 + 倒计时(公共组件)
            • 此时,按钮显示 【马上登录】
        • 二维码 扫码登录

          • 微信二维码
            【尚医通】vue3+ts前端项目开发笔记——项目分析_第11张图片
      • 右:展示信息

        • 微信扫一扫关注

          “快速预约挂号”

        • 扫一扫下载

          “预约挂号”APP

        • xxxxxx官方指定平台

          快速挂号 安全放心

  2. hospital 登录成功以后
    【尚医通】vue3+ts前端项目开发笔记——项目分析_第12张图片

  • 点击 科室的具体门诊比如【多发性硬化专科门诊】进入 【挂号页】
    【尚医通】vue3+ts前端项目开发笔记——项目分析_第13张图片

    • 面包屑

      • 公共组件
    • title

      • 医院标题

      • 公共组件

    • 挂号日期

      • title
      • 日期列表
    • 分页

      • 公共组件
    • 号源

      • item 可复用 公共组件

      • 上午 | 下午

        • title

          • doctorTitle | docName 副主任医师 | 裴育
        • intro

          • content
      • price

      • btn-order

        • 点击可预约的按钮【剩余22】跳转至 【确认挂号信息】页

          • 【有就诊人】
            【尚医通】vue3+ts前端项目开发笔记——项目分析_第14张图片
            【尚医通】vue3+ts前端项目开发笔记——项目分析_第15张图片
            【尚医通】vue3+ts前端项目开发笔记——项目分析_第16张图片

          【无就诊人】

          【尚医通】vue3+ts前端项目开发笔记——项目分析_第17张图片

          • 添加就诊人

5 . hospital 确认挂号信息

  • title

    • 公共组件
      • 确认挂号信息
  • subtitle

    • 公共组件
      • icon + title
  • 选择就诊人

    • subtitle
    • 卡片
      • name
      • 身份证
      • 选中状态时 ,【就诊卡】页变化
  • 选择就诊卡

    • subtitle
    • Notice 如您持社保卡就诊,请务必选择医保预约挂号,以保证正常医保报销
    • card
      • title
        • name + 身份证号
        • 医保| 自费 : 号码
  • 挂号信息

    • subtitle

    • form info-form

      • 【挂号详情】页有相似部门,可抽取
      就诊日期: 2023-07-08 周六 上午
      就诊医院: 北京人民医院
      就诊科室: 多发性硬化专科门诊
      医生姓名:
      医生职称 医师
      医生专长 内分泌科常见病。
      医事服务费 100元
  • 用户信息

    • 就诊人手机号:17720125002
  • 【确认挂号】按钮

    • 点击,跳转至 新的页面 【挂号订单】
  1. order

    • menu与hospital相似

      • menu抽取为公共组件
  • menu-item

    • 实名认证

      • 【已认证】

    【尚医通】vue3+ts前端项目开发笔记——项目分析_第18张图片

    【未认证】

    【尚医通】vue3+ts前端项目开发笔记——项目分析_第19张图片

    • 挂号订单

      • 两种状态:
        • 携带订单id 显示 【挂号详情】
        • 未携带订单id,显示 【订单列表】
      • 【挂号详情】

    【尚医通】vue3+ts前端项目开发笔记——项目分析_第20张图片
    【尚医通】vue3+ts前端项目开发笔记——项目分析_第21张图片

    • 【挂号详情】页

      • 信息提示框 notice box

        • 公共组件
          • 预约成功,待支付
      • 挂号信息

        form

        就诊人信息: name
        就诊日期: 2023-07-08 周六 上午
        就诊医院: 北京人民医院
        就诊科室: 多发性硬化专科门诊
        医生职称:
        医事服务费
        挂号单号
        挂号时间
      • 注意事项:

      • 注意事项

        1、请确认就诊人信息是否准确,若填写错误将无法取号就诊,损失由本人承担;
        2、【取号】就诊当天需在2023-07-0809:00前在医院取号,未取号视为爽约,该号不退不换;
        3、【退号】在2023-07-07 15:30前可在线退号 ,逾期将不可办理退号退费;
        4、北京114预约挂号支持自费患者使用身份证预约,同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日,携带预约挂号所使用的有效身份证件到院取号;
        5、请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。

      • 按钮区域

        • 【取消订单】

          【尚医通】vue3+ts前端项目开发笔记——项目分析_第22张图片

          • 显示 提示 取消确认 对话框

            • 【确认】,返回到

              【尚医通】vue3+ts前端项目开发笔记——项目分析_第23张图片

              【信息提示框 notice box】显示 【取消预约】,同时 按钮部分隐藏

        • 【支付】

          【尚医通】vue3+ts前端项目开发笔记——项目分析_第24张图片

    • 【订单列表】
      【尚医通】vue3+ts前端项目开发笔记——项目分析_第25张图片

    • title

      • 挂号订单列表
    • 搜索栏

      • title+select 公共组件
      • 就诊人
        • 下拉选择框
      • 订单状态
        • 下拉选择框
    • table

      • 就诊时间
      • 医院
      • 科室
      • 医生
      • 医事服务费
      • 就诊人
      • 订单状态
      • 操作
    • 分页

      • 公共组件
    • 就诊人管理

      【尚医通】vue3+ts前端项目开发笔记——项目分析_第26张图片

      • card

        • 公共组件

        • name 身份证号 查看详情

          • 点击【详情】

            【尚医通】vue3+ts前端项目开发笔记——项目分析_第27张图片

        • 医保 | 自费 号码 身份证号

      • btn

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

        • 公共组件

        【尚医通】vue3+ts前端项目开发笔记——项目分析_第28张图片
        【尚医通】vue3+ts前端项目开发笔记——项目分析_第29张图片
        【尚医通】vue3+ts前端项目开发笔记——项目分析_第30张图片

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

    • 意见反馈

你可能感兴趣的:(项目开发,Vue,前端,前端,笔记,vue)