快速开始

# 安装依赖
pnpm i

# 运行项目
pnpm dev

# 打包
pnpm build

项目笔记

以下为我本人在开发项目过程中做的一些记录，希望对你有所帮助。

移动端适配

安装插件 pnpm i postcss-px-to-viewport -D

配置创建postcss.config.js文件

module.exports = {
plugins: {
  'postcss-px-to-viewport': {
    viewportWidth: 375
  }
}
}

自定义主题

在main.scss中

  // 全局css变量 使用场景:项目主题
  :root {
    --main-color: red;
  }
  //局部css变量 使用场景:组件变量
  .footer {
    --footer-color: green;
  }

使用 color: var(--main-color);

用户仓库和持久化

设置用户信息类型(参考后端返回的字段)
实现仓库,用户状态,设置用户,删除用户
进行测试
持久化 pnpm i pinia-plugin-persistedstate

仓库统一管理

pinia独立维护初始化代码在main.ts中,仓库代码在stores中,代码分散职能不单一优化:由stores统一维护,在stores/index.ts中完成pinia初始化,交付main.ts使用
仓库统一导出使用一个仓库 import { useUserStore } from './stores/user' 不同仓库路径不一致优化:由stores/index.ts 统一导出,导入路径统一 ./stores,而且维护仓库在stores/modules中

请求工具-axios配置文件 utils/request.ts

axios配置创建axios实例基准地址,超时时间请求拦截器携带token 响应拦截器业务失败处理,摘取核心响应数据,401处理
请求函数函数封装简化传参逻辑添加类型设置响应数据类型

封装请求工具函数不用传配置对象不用区分data和params函数内判断

创建登录组件
配置路由
设置路由出口 App.vue

组件自动注册使用Vant组件比较麻烦，需要先导入组件才可使用如何实现？安装组件:pnpm add unplugin-vue-components -D 配置 vite.config.ts 优化点：

解决类型声明文件重复
解决样式引入重复

CpNavBar封装

结构与样式基于Vant组件二次封装，实现组件结构，覆盖组件样式固定定位，左侧箭头，标题，右侧文字
功能实现支持标题和右侧文字，提供右侧文件按钮事件，实现返回功能回退功能：有访问记录就正常回退 router.back() 没有访问历史记录就跳转到首页 router.push('/')
组件类型提供组件类型文件，让组件有类型提示

重置样式
准备页面
定制表单

表单校验

校验手机号
校验密码
表单整体校验
勾选协议进行校验

密码登录

登录API函数
进行登录
存储用户信息
成功提示
是否有回跳地址如果有，根据地址回跳，如果没有，跳转到个人中心

短信登录

切换界面标题和按钮切换表单项切换
发送短信验证码发送前校验验证码API函数发送&提示倒计时&展示
验证码校验
短信登录短信登录API 合并短信登录

图标组件-打包svg地图图片格式是png的：合成精灵图，根据定位使用图片格式是svg的：是xml格式，打包成svg地图，通过ID使用，一次加载，动态使用图片无需import 安装插件 pnpm install vite-plugin-svg-icons -D 配置vite.config.ts

使用svg实现登录输入密码是否可见

Tabbar组件

tabbar组件
支持路由切换
自定义图标
图标切换

访问权限控制

全局前置守卫变化 next现在可选，next() 放行，next('/login') 跳转到指定路由(重定向) 返回 false 取消返回true | undefined 放行返回路由地址（对象格式）重定向
访问权限控制实现路由跳转没有token且不在白名单重定向到登录，否则放行

动态设置页面标题

路由配置元信息meta中定义标题
路由全局后置守卫设置标题给页面，扩展元信息类型

布局容器-加载进度,切换页面的时候现实进度条

开启进度条 beforeEach
结束进度条 afterEach

个人中心

用户信息类型
用户信息展示准备基础结构定义API函数获取数据完成渲染
快捷工具准备基础结构初始化数据完成渲染
退出登录

家庭档案

患者列表路由和组件结构定义患者类型患者列表API 获取数据渲染
添加患者 v-model语法糖子组件：:modelValue和@update:modelValue 封装单选组件组件结构渲染选项（动态设置可选选项）选中和切换功能支持v-model 侧滑添加弹窗 popup组件 nav支持关闭准备表单表单数据绑定修改类型数据绑定支持复选框重置表单表单校验表单项校验提交时校验性别确认提示
实现添加添加患者API 进行提交
编辑患者回填表单区分标题编辑患者API 合并编辑
删除患者删除按钮删除患者API函数进行删除

首页

搭建页面组件基础结构知识列表Tab
列表加载更多效果卡片&列表 VanList组件模拟加载更多
知识列表数据类型响应数据类型请求参数类型 props类型
知识列表加载功能知识列表API 准备查询参数加载列表数据知识卡片渲染
推荐关注医生提取组件,定义组件基本结构 van-swipe应用添加医生卡片基本结构去除指示器,关闭无缝滚动,色值一次滚动一个卡片
实现适配适配分析 VueUse实现扩展原生实现需求:在375宽度设备,滚动宽带为50 在其它设备需要等比例设置滚动的宽度 scrollWidth = 150 / 375 * deviceWidth 就可以适配
推荐医生展示医生TS类型获取医生API 数据和渲染
实现关注医生关注TS类型关注API 关注&取消
逻辑复用封装关注逻辑实现关注医生实现关注文章

极速问诊

选择极速问诊定义问诊仓库提供记录函数记录问诊类型
选择问诊级别准备路由组件提供记录函数记录问诊级别
选择科室准备组件类型&科室API 渲染&切换记录问诊科室
填写病情描述路由组件结构准备单选按钮准备表单数据绑定表单数据保存数据
选择就诊患者改造家庭档案界面兼容选中患者效果默认选中效果记录患者ID
支付问诊费用获取数据路由与组件预支付类型预支付API 患者详情API 获取数据生成订单控制抽屉生成订单API 实现生成订单清理&记录订单ID
用户引导阻止用户返回上页阻止关闭抽屉刷新页面后提示
进行支付支付地址API 获取支付地址&跳转支付处理支付失败

问诊室

组件拆分状态栏操作栏消息卡片
websocket 网络通信协议,和http协议一样,http协议通信只能由客户端发起,不能双向通信 socket.io-client:基于websocket的即时通讯的解决方案,提供后端即时通讯服务,前端连接后端JS库怎么使用? 服务端提供服务客户端:怎么建立连接?发消息?收消息?断开连接?
建立连接初始化Socket 携带token 参数订单ID 绑定常规事件断开连接
通讯规则与默认消息
默认消息-处理数据分析数据结构添加数据类型转换消息列表渲染消息传递数据给组件展示患者卡片预览图片通用消息和提示
接诊状态-订单数据订单状态枚举订单详情类型订单详情API 初始化&状态变更
接诊状态控制组件控制状态栏控制操作栏
文字聊天发送文字操作栏传递文字诊室接收文字 socket发送文字
图片聊天操作栏提交图片诊室接收并发送渲染图片消息
聊天记录默认看最新消息实现下拉刷新记录消息时间通知服务器 loading&提示
查看处方医生开处方&渲染原始处方API 预览原始处方
评价医生 - 结束消息和评价消息展示结束问诊消息展示评价卡片组件收集评价信息

问诊记录

搭建页面问诊item组件问诊list组件问诊记录页面传入订单类型
加载数据参数和响应类型定义问诊记录API 加载问诊记录效果
渲染Item组件展示基本信息区别展示操作按钮更多操作
取消订单取消订单API函数取消订单逻辑使用取消逻辑
删除订单删除订单API函数删除订单逻辑使用删除逻辑
问诊详情准备路由和组件加上骨架屏渲染信息提取filter函数
展示操作按钮待支付倒计时根据状态展示按钮

药品订单

支付信息预支付信息类型预支付&地址API 预支付&地址数据展示页面信息
完成支付生成药品订单API 生成订单改造支付抽屉组件实现药品支付
支付信息路由与组件布局药品订单详情类型药品订单详情API 获取数据渲染
订单详情路由与组件布局提取订单详情逻辑提取药品订单组件展示订单详情页面
使用高德地图得到key和jscode 使用jscode加载初始化地图配置风格和缩放
绘制起点终点当前运输标记绘制起点标记提取创建标记函数绘制终点运输标记定位当前运输位置

ycjtd/consult-patient-vue3

快速开始

项目笔记