5.vue3医疗在线问诊项目 - _极速问诊-前置准备 ==＞ 需求分析、枚举类型、pinia仓库的初始化

5.vue3医疗在线问诊项目 - _极速问诊-前置准备 ==> 需求分析、枚举类型、pinia仓库的初始化

极速问诊-需求分析{#consult-product}

极速问诊阶段流程分析

线下看病流程：

选择医院（三甲、普通）=》挂号=》选择科室 =》选择医生（专家、主任）=》支付=》订单=》患者去医院找医生，当面沟通=》医生确定病情，开药=》患者去药房买药

线上看病流程：

极速问诊阶段：

1. 极速问诊（记录-问诊类型）

2. 三甲图文问诊 或 普通图文问诊（记录-问诊级别）

3. 选择科室（记录-疾病科室）

4. 描述病情（记录-症状详情、时间、是否问诊过、图片）

5. 选择患者（记录-患者ID）

6. 支付问诊费

所有流程走完才能组合成完整的问诊记录，而且是不同的页面采集数据，这个实现需要 pinia

接口数据：

• type 问诊类型： 1找医生 2极速问诊 3开药问诊 type:1|2|3
• illnessType 极速问诊类型：0普通 1三甲 illnessType: 0|1

提问：

• 刚刚看到 1 2 3 的时候你能记得他们代表什么意思吗？
  • 不清楚，对于数字字面量类型的联合类型语义差，建议使用 枚举

枚举基本语法{#enum-base}

掌握：枚举的基本语法和使用细节

• 作用：表示一组明确可选的值，和字面量类型配合联合类型类似。
• 解释：枚举可以定义一组常量，使用该类型后，约定只能使用这组常量中的其中一个。

// 创建枚举类型
enum Direction { Up, Down, Left, Right }

// 使用枚举类型
const changeDirection = (direction: Direction) => {
  console.log(direction)
}

// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection(Direction.Up)

问题：

• 通过枚举访问其成员，成员的值是什么？
  • 默认从 0 开始自增的数值
• 可以修改其成员的值吗？
  • Up = 10 , 后面是从 10 开始自增
• 成员的值可以使用字符串吗？
  • Up = 'Up' 可以，但是后面的值都需要使用字符串。

枚举使用场景{#enum-intro}

场景：用于一组没有语义的可选值，给它们添加类型。

比如：

• 后台给的数据： 0 是男 1 是女 ---- 1 是待付款 5 是已付款 8 是已完成
• 好处，通过枚举可以让成员更加语义化，提高代码可读性

代码：

// 性别
enum GenderType {
  Boy,
  Girl
}
const showGender = (gender: GenderType) => {
  if (gender === GenderType.Boy) {
    console.log('性别：男')
  }
}
showGender(GenderType.Boy)
// 订单状态
enum OrderStatus {
  UnPay = 1,
  Payed = 5,
  Complete = 8
}
const showOrderStatus = (status: OrderStatus) => {
  if (status === OrderStatus.Complete) {
    console.log('状态：已完成')
  }
}
showOrderStatus(OrderStatus.Complete)

小结：

• 枚举一般使用在，表示一组明确可选的值，语义化不高的情况。
• 如果这组可选值语义很高，如 unpay | payed | complete ，使用字面量配合联合类型更简单些。
  思考：
• 枚举的选项可以代表值，可以写在 d.ts 文件吗？
  • 不能，有值的需要写在 ts 文件中

极速问诊-定义类型{#consult-type}

根据api接口，定义问诊订单记录数据相关类型

步骤：

• 问诊类型枚举
• 患病时间枚举
• 图片数组类型
• 问诊记录类型（创建问诊订单）

代码：

enums/index.ts

// 问诊类型：1找医生 2== 极速问诊 == 3开药问诊
export enum ConsultType {
  Doctor = 1,
  Fast = 2,
  Medication = 3
}
// 患病时间：1一周内2一月内3半年内4半年以上
export enum ConsultTime {
  Week = 1,
  Month,
  HalfYear,
  More
}

types/consult.d.ts

import { ConsultType, ConsultTime } from '@/enums'

// 图片列表
export type Image = {
  id: string
  url: string
}
// 问诊记录
export type Consult = {
  id: string
  type: ConsultType // 问诊类型：1找医生 2极速问诊 3开药问诊
  illnessType: 0 | 1 // 问诊级别：0普通  1三甲
  depId: string // 问诊科室id
  illnessDesc: string // 病情描述
  illnessTime: ConsultTime // 患病时间
  consultFlag: 0 | 1 // 是否问诊过：0未问诊1问诊过
  pictures: Image[] // 病例信息-图片集合
  patientId: string // 患者id
  couponId: string // 优惠卷id
}

// 问诊记录-全部可选
// Required 转换为全部必须   Partial 转换问全部可选  两个内置的泛型类型
export type PartialConsult = Partial<Consult>

小结：

• 全部可选是因为信息是一点一点累加上去的
• Required 转换为全部必须
• Partial 转换问全部可选

注意：

• 枚举类型需要在 ts 文件中，因为枚举会编译成 js 代码

极速问诊-问诊记录仓库{#consult-store}

实现：病情描述仓库的定义，实现问诊记录分步修改

问题❓：如何跨页面共享使用数据？

需求：

• 定义仓库，提供

  1. 问诊记录数据，创建订单使用

  2. 修改问诊类型type方法：1找医生 2极速问诊 3开药问诊

  3. 修改极速问诊类型illnessType方法：0普通 1三甲

  4. 修改科室id方法

  5. 修改病情描述相关信息方法：illnessDesc、illnessTime、consultFlag、pictures

  6. 修改患者patientId的方法

  7. 修改优惠卷couponId的方法

  8. 清空问诊记录方法

• 导出仓库

• 首页点击极速问诊记录问诊类型且跳转页面

代码：

1. 定义仓库 stores/modules/consult.ts

import type { ConsultType } from '@/enums'
import type { PartialConsult } from '@/types/consult'
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useConsultStore = defineStore(
  'cp-consult',
  () => {
    // 1. 问诊记录数据
    const consult = ref<PartialConsult>({})
    // 2. 设置问诊类型
    const setType = (type: ConsultType) => (consult.value.type = type)
    // 3； 设置极速问诊级别
    const setIllnessType = (type: 0 | 1) => (consult.value.illnessType = type)
    // 4. 设置科室
    const setDep = (id: string) => (consult.value.depId = id)
    // 5. 设置病情描述
    const setIllness = (
      illness: Pick<PartialConsult, 'illnessDesc' | 'illnessTime' | 'consultFlag' | 'pictures'>
    ) => {
      consult.value.illnessDesc = illness.illnessDesc
      consult.value.illnessTime = illness.illnessTime
      consult.value.consultFlag = illness.consultFlag
      consult.value.pictures = illness.pictures
    }
    // 6. 设置患者
    const setPatient = (id: string) => (consult.value.patientId = id)
    // 7. 设置优惠券
    const setCunpon = (id?: string) => (consult.value.couponId = id)
    // 8. 清空记录
    const clear = () => (consult.value = {})

    return { consult, setType, setIllnessType, setDep, setIllness, setPatient, setCunpon, clear }
  },
  {
    persist: true
  }
)

2. 导出仓库 stores/index.ts

export * from './modules/consult'

3. 首页点击极速问诊记录问诊类型且跳转页面 views/Home/index.vue

import { useConsultStore } from '@/stores'
import { ConsultType } from '@/enums'

const store = useConsultStore()