43 问诊记录

1 路由与组件{#consult-order-page}

目标：配置路由，分析问诊订单组件结构

代码：

1）分析问诊记录页面

User/ConsultOrder.vue

<script setup lang="ts">
import ConsultList from './components/ConsultList.vue'
// import { ConsultType } from '@/enums'
</script>

<template>
  <div class="consult-page">
    <cp-nav-bar title="问诊记录" />
    <van-tabs sticky>
      <van-tab title="找医生"><consult-list :type="1" /></van-tab>
      <van-tab title="极速问诊"><consult-list :type="2" /></van-tab>
      <van-tab title="开药问诊"><consult-list :type="3" /></van-tab>
    </van-tabs>
  </div>
</template>

<style lang="scss" scoped>
.consult-page {
  padding-top: 46px;
  background-color: var(--cp-bg);
  min-height: calc(100vh - 46px);
}
</style>

2）配置路由

    {
      path: '/user/consult',
      component: () => import('@/views/user/ConsultOrder.vue'),
      meta: { title: '问诊记录' }
    },

2 问诊记录-类型定义与API函数{#consult-order-type}

目标：定义接口参数类型和api函数

步骤：

• 定义接口参数类型
• 订单状态枚举
• 单个问诊订单类型
• 带分页问诊订单类型
• 定义查询API函数

代码：

1）定义接口参数类型 types/consult.d.ts

// 根据通用分页类型定义
export type ConsultOrderListParams = PageParams & {
  type: ConsultType
}

2）订单状态枚举 enums/index.ts(已定义)

// 问诊订单状态
export enum OrderType {
  // ----------------问诊订单------------------
  // 待支付
  ConsultPay = 1,
  // 待接诊
  ConsultWait = 2,
  // 咨询中
  ConsultChat = 3,
  // 已完成
  ConsultComplete = 4,
  // 已取消
  ConsultCancel = 5,
  // ----------------药品订单------------------
  // 待支付
  MedicinePay = 10,
  // 待发货
  MedicineSend = 11,
  // 待收货
  MedicineTake = 12,
  // 已完成
  MedicineComplete = 13,
  // 已取消
  MedicineCancel = 14
}

3）单个问诊订单类型 types/consult.d.ts(已定义)

// 问诊订单单项信息
export type ConsultOrderItem = Consult & {
  createTime: string
  docInfo?: Doctor
  patientInfo: Patient
  orderNo: string
  statusValue: string
  typeValue: string
  status: OrderType
  countdown: number
  prescriptionId?: string
  evaluateId: number
  payment: number
  couponDeduction: number
  pointDeduction: number
  actualPayment: number
}

4）带分页问诊订单类型 types/consult.d.ts

export type ConsultOrderPage = {
  pageTotal: number
  total: number
  rows: ConsultOrderItem[]
}

5）定义查询API函数 api/consult.ts

import type { ConsultOrderListParams, ConsultOrderPage } from '@/types/consult'

// 获取问诊订单记录列表
export const getConsultOrderList = (params: ConsultOrderListParams) =>
  request.get<any, ConsultOrderPage>('/patient/consult/order/list', { params })

3 问诊记录-上拉加载{#consult-order-render}

实现：获取问诊订单数据，支持上拉加载更多

1）加载数据逻辑 User/components/ConsultList.vue

<script setup lang="ts">
import type { ConsultType } from '@/enums'
import { getConsultOrderList } from '@/api/consult'
import type { ConsultOrderItem, ConsultOrderListParams } from '@/types/consult'
import { ref } from 'vue'
import ConsultItem from './ConsultItem.vue'

const props = defineProps<{ type: ConsultType }>()
const params = ref<ConsultOrderListParams>({
  type: props.type,
  current: 1,
  pageSize: 5
})
const loading = ref(false)
const finished = ref(false)
const list = ref<ConsultOrderItem[]>([])
const onLoad = async () => {
  const res = await getConsultOrderList(params.value)
  list.value.push(...res.rows)
  if (params.value.current < res.pageTotal) {
    params.value.current++
  } else {
    finished.value = true
  }
  loading.value = false
}
</script>

<template>
  <div class="consult-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <consult-item v-for="item in list" :key="item.id" :item="item" />
    </van-list> 
  </div>
</template>     

2）渲染 User/components/ConsultItem.vue

<script setup lang="ts">
import type { ConsultOrderItem } from '@/types/consult'
import { OrderType } from '@/enums'

defineProps<{ item: ConsultOrderItem }>()
</script>

<template>
  <div class="consult-item">
    <div class="head van-hairline--bottom">
      <img class="img" src="@/assets/avatar-doctor.svg" />
      <p>{{ item.docInfo?.name || '暂未分配医生' }}</p>
      <span
        :class="{
          orange: item.status === OrderType.ConsultPay,
          green: item.status === OrderType.ConsultChat
        }"
        >{{ item.statusValue }}</span
      >
    </div>
    <div class="body" @click="$router.push(`/user/consult/${item.id}`)">
      <div class="body-row">
        <div class="body-label">病情描述</div>
        <div class="body-value">{{ item.illnessDesc }}</div>
      </div>
      <div class="body-row">
        <div class="body-label">价格</div>
        <div class="body-value">¥ {{ item.payment }}</div>
      </div>
      <div class="body-row">
        <div class="body-label">创建时间</div>
        <div class="body-value tip">{{ item.createTime }}</div>
      </div>
    </div>
    <div class="foot">
      <van-button class="gray" plain size="small" round>取消订单</van-button>
      <van-button type="primary" plain size="small" round to="/">去支付</van-button>
    </div>
  </div>
</template>