【尚医通】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
    • 分页

      • 公共组件
  1. 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
  1. login modal

    在这里插入图片描述

    • dialog

      • 左:登录

        • 表单登录

          • title 手机登录

          • 输入手机号

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

          • 验证码发送成功以后,显示 【验证码已成功发送至 xxxx】
            在这里插入图片描述

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

          • 微信二维码
            在这里插入图片描述
      • 右:展示信息

        • 微信扫一扫关注

          “快速预约挂号”

        • 扫一扫下载

          “预约挂号”APP

        • xxxxxx官方指定平台

          快速挂号 安全放心

  2. 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
  • 【确认挂号】按钮

    • 点击,跳转至 新的页面 【挂号订单】
  1. 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

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

        • 公共组件

        在这里插入图片描述
        在这里插入图片描述
        在这里插入图片描述

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

    • 意见反馈

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/35398.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

爬虫入门04——requests库中的User-Agent请求头

import requests#定义请求的url url https://www.baidu.com/ #https://site.ip138.com/www.xicidaili.com/#发起get请求 res requests.get(url url)#获取响应结果#响应对象 print(res)#获取响应状态码 print(res.status_code)#获取响应数据 print(res.text) #返回的是字符…

mysql 关于用户的练习

环境: (1) 创建用户 create user account1localhost identified by oldpwd1; 授予权限: #给表授予权限 grant select,insert on Team.player to account1localhost identified by oldpwd1;#给info字段授予update权限 grant update(info) on Team.pl…

强化学习路径优化:基于Q-learning算法的机器人路径优化(MATLAB)

一、强化学习之Q-learning算法 Q-learning算法是强化学习算法中的一种,该算法主要包含:Agent、状态、动作、环境、回报和惩罚。Q-learning算法通过机器人与环境不断地交换信息,来实现自我学习。Q-learning算法中的Q表是机器人与环境交互后的…

综合实验---基于卷积神经网络的目标分类案例

文章目录 配置环境猫狗数据分类建模猫狗分类的实例基准模型猫狗分类的实例基准模型之数据增强问题回答 配置环境 ①首先打开 cmd,创建虚拟环境。 conda create -n tf1 python3.6如果报错:‘conda’ 不是内部或外部命令,也不是可运行的程序 或批处理文件…

C语言学习(三十五)---动态内存练习题与柔性数组

经过前面的内容,我们已经对动态内存的知识已经有了相当多了了解,今天我们再做几道有关动态内存的练习题,然后再介绍一下柔性数组,好了,话不多说,开整!!! 动态内存练习题…

【真题解析】系统集成项目管理工程师 2021 年上半年真题卷(案例分析)

本文为系统集成项目管理工程师考试(软考) 2021 年上半年真题(全国卷),包含答案与详细解析。考试共分为两科,成绩均 ≥45 即可通过考试: 综合知识(选择题 75 道,75分)案例分析&#x…

Pycharm使用Anoconda配置虚拟环境

目录 1.Anoconda的介绍 2.Anaconda的作用 3.Anaconda的安装 4.Anaconda的配置 4.1添加镜像源 4.2创建、使用并切换虚拟环境 5.pycharm的集成 1.Anoconda的介绍 Anaconda是一个可用于科学计算的 Python 发行版,可以便捷获取和管理包,同时对环境进行…

Docker 常用指令集合,更换镜像(Ubantu)

1.更换镜像 先进入root用户 cat /etc/docker/daemon.json 查看有没有镜像创建目录,创建并编辑damon,json文件 mkdir -p /etc/docker vim /etc/docker/daemon.json# 填写内容 {"registry-mirrors": ["https://h5rurp1p.mirror.aliyuncs.com"] } 重新启…

postgresql(一):使用psql导入数据库

使用psql导入数据库 1、概述2、具体问题3、总结 1、概述 大家好,我是欧阳方超。 听说postgresql越来越流行了?psql是一个功能强大的命令行工具,用于管理和操作PostgreSQL数据库。它提供了一个交互式环境,允许用户执行SQL查询、创…

PyTorch示例——ResNet34模型和Fruits图像数据

PyTorch示例——ResNet34模型和Fruits图像数据 前言导包数据探索查看数据集构建构建模型 ResNet34模型训练绘制训练曲线 前言 ResNet34模型,做图像分类数据使用水果图片数据集,下载见Kaggle Fruits Dataset (Images)Kaggle的Notebook示例见 PyTorch——…

部署 CNI网络组件

部署 flannel K8S 中 Pod 网络通信: ●Pod 内容器与容器之间的通信 在同一个 Pod 内的容器(Pod 内的容器是不会跨宿主机的)共享同一个网络命令空间, 相当于它们在同一台机器上一样,可以用 localhost 地址访问彼此的端…

requests---jsonpath在接口自动化中的应用

目录 前言 jsonpath 通过下标提取 通过jsonpath提取 jsonpath的其他用法 通过$获取属性值内容 通过【*】获取对应值 通过切片获取对应值 总结 前言 我们在做接口测试时,大多数返回的都是json属性,我们需要通过接口返回的json提取出来对应的值&am…

浏览器种输入一个url到显示页面全过程

原文合集地址如下,有需要的朋友可以关注 本文地址 合集地址 所谓的‘三颗树’ 在浏览器中,当解析和加载网页时,会形成三个重要的树结构:DOM树、CSSOM树和渲染树(Render Tree)。这些树结构在网页的渲染和…

基于SQLI的SQL字符型报错注入

基于SQLI的SQL字符型报错注入 一. 实验目的 理解数字型报错SQL注入漏洞点的定位方法,掌握利用手工方式完成一次完整SQL注入的过程,熟悉常见SQL注入命令的操作。 二. 实验环境 渗透主机:KALI平台 用户名: college 密码: 360College 目标网…

web安全php基础_php数据类型

PHP 数据类型 PHP 支持以下几种数据类型: String(字符串)Integer(整型)Float(浮点型)Boolean(布尔型)Array(数组)Object(对象)NULL&…

算法----Nim 游戏

题目 你和你的朋友,两个人一起玩 Nim 游戏: 桌子上有一堆石头。 你们轮流进行自己的回合, 你作为先手 。 每一回合,轮到的人拿掉 1 - 3 块石头。 拿掉最后一块石头的人就是获胜者。 假设你们每一步都是最优解。请编写一个函数&a…

Kubernetes 启动Pod的方法-Pod的调度算法-Pod间的通信-k8s的控制器-Pod资源控制-发布Service服务

目录 Pod 参考文档:Pod | Kubernetes Pod配置文件:simple-pod.yaml 对master进行如下操作 Pod的状态有: 参考文档:(70条消息) Pod生命周期中的状态解释_pod状态_闹玩儿扣眼珠子的博客-CSDN博客 进入Pod内的nginx容器&#…

Linux快速搭建Java环境

1. 安装JDK运行与调试 搭建Java环境 1. 安装JDK 打开命令行执行 sudo apt install default-jdk 有确定的选项直接y就行 安装拓展: 1 . 有时候vscode会自动弹出消息叫你安装拓展,直接点击全部安装就行了 2 . 未弹出或安装失败解决: 打开拓展搜索,把下面的,全部安装就行 这样就可…

Nginx(6)nginx的缓存集成

缓存集成 Nginx缓存集成缓存的概念Nginx的web缓存服务 缓存设置的相关指令Nginx缓存设置案例 Nginx缓存的清除Nginx设置资源不缓存 Nginx缓存集成 缓存的概念 缓存就是数据交换的缓冲区(称作Cache),当用户要获取数据的时候,会先从缓存中去查询获取数据…

TikTok将在10月份之前免除佣金并提供补贴!

TikTok 因其便捷的结账方式越来越吸引美容品牌,Elf Beauty Laura Mercier、BareMinerals KimChi Chic Beauty 和 Skin Gym 等美容品牌已经接受了社交网络的结账功能。在这种情况下,该工具允许消费者将多个品牌的产品添加到应用内购物车中。 在巴西&…