问诊订单

问诊记录-静态结构

步骤：

新建问诊订单页面，素材复制
配置路由

代码：

1）新建问诊订单页面，素材复制

User/ConsultRecord.vue

User/components/ConsultList.vue

User/components/ConsultItem.vue

2）配置路由: router/index.ts

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

问诊记录-类型定义与 API 函数

步骤：

定义接口参数类型
定义接口返回值类型
定义查询 API 函数

代码：

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

2）定义接口返回值类型 types/consult.d.ts

/** 订单记录接口参数类型 */
export type ConsultOrderListParams = PageParams & {
  /** 问诊记录类型 */
  type: ConsultType;
};

/** 分页请求问诊订单记录-返回值类型 */
export type ConsultOrderPage = {
  /** 总页数 */
  pageTotal: number;
  /** 总条数 */
  total: number;
  /** 列表数据 */
  rows: ConsultOrderItem[];
};

3）定义查询 API 函数 services/consult.ts

export const getOrderRecordsAPI = (params: ConsultOrderListParams) => {
  return request({ url: "/patient/consult/order/list", params });
};

问诊记录-请求数据

1）加载数据逻辑 ConsultList.vue

vue

<script setup lang="ts">
import { ConsultType } from "@/enums";
import { getOrderRecordsAPI } from "@/services/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 getOrderRecordsAPI(params.value);
  list.value.push(...res.data.rows);
  if (params.value.current < res.data.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"
      ></consult-item>
    </van-list>
  </div>
</template>

2）渲染 ConsultItem.vue

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?.toFixed(2) }}</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>

问诊记录-渲染操作按钮

状态梳理：

待支付：取消问诊+去支付
待接诊：取消问诊+继续沟通
咨询中：查看处方（如果开了）+继续沟通
已完成：更多（查看处方，如果开了，删除订单）+问诊记录+（未评价?写评价:查看评价）
已取消：删除订单+咨询其他医生

src\views\User\components\ConsultItem.vue

html

<div class="foot" v-if="item.status === OrderType.ConsultPay">
  <van-button class="gray" plain size="small" round>取消问诊</van-button>
  <van-button
    type="primary"
    plain
    size="small"
    round
    :to="`/user/consult/${item.id}`"
  >
    去支付
  </van-button>
</div>
<div class="foot" v-if="item.status === OrderType.ConsultWait">
  <van-button class="gray" plain size="small" round>取消问诊</van-button>
  <van-button
    type="primary"
    plain
    size="small"
    round
    :to="`/room?orderId=${item.id}`"
  >
    继续沟通
  </van-button>
</div>
<div class="foot" v-if="item.status === OrderType.ConsultChat">
  <van-button v-if="item.prescriptionId" class="gray" plain size="small" round>
    查看处方
  </van-button>
  <van-button
    type="primary"
    plain
    size="small"
    round
    :to="`/room?orderId=${item.id}`"
  >
    继续沟通
  </van-button>
</div>
<div class="foot" v-if="item.status === OrderType.ConsultComplete">
  <div class="more">
    <van-popover
      placement="top-start"
      v-model:show="showPopover"
      :actions="actions"
      @select="onSelect"
    >
      <template #reference> 更多 </template>
    </van-popover>
  </div>
  <van-button
    class="gray"
    plain
    size="small"
    round
    :to="`/room?orderId=${item.id}`"
  >
    问诊记录
  </van-button>
  <van-button v-if="!item.evaluateId" type="primary" plain size="small" round>
    去评价
  </van-button>
  <van-button v-else class="gray" plain size="small" round>
    查看评价
  </van-button>
</div>
<div class="foot" v-if="item.status === OrderType.ConsultCancel">
  <van-button class="gray" plain size="small" round>删除订单</van-button>
  <van-button type="primary" plain size="small" round to="/"
    >咨询其他医生</van-button
  >
</div>

问诊记录-取消订单

实现取消问诊订单功能

步骤：

API 接口
封装取消逻辑的函数
点击事件，绑定取消的函数

代码：

1）API 接口 services/consult.ts

/** 取消订单API */
export const cancelOrderAPI = (id: string) => {
  return request({ url: `/patient/order/cancel/${id}`, method: "PUT" });
};

2）封装取消逻辑的函数

import { cancelOrderAPI } from "@/services/consult";
import { showToast } from "vant";

// 取消订单
const loading = ref(false);
const onCancel = (item: ConsultOrderItem) => {
  loading.value = true;
  cancelOrderAPI(item.id)
    .then(() => {
      item.status = OrderType.ConsultCancel;
      item.statusValue = "已取消";
      showSuccessToast("取消成功");
      loading.value = false;
    })
    .catch(() => {
      showFailToast("取消失败");
      loading.value = false;
    });
};

3）点击事件，绑定取消的函数

diff

<div class="foot" v-if="item.status === OrderType.ConsultPay">
      <van-button
      	.... 省略代码 ...

+       :loading="loading"
+        @click="onCancel(item)"
      >
        取消问诊
      </van-button>

      	.... 省略代码 ...

    </div>

diff

<div class="foot" v-if="item.status === OrderType.ConsultWait">
      <van-button
       	.... 省略代码 ...

+        :loading="loading"
+        @click="onCancel(item)"
      >
        取消问诊
      </van-button>
      <van-button type="primary" plain size="small" round :to="`/room?orderId=${item.id}`">
        继续沟通
      </van-button>
    </div>

问诊记录-删除订单

删除订单功能实现

步骤：

API 接口
删除订单逻辑函数
使用逻辑

代码：

1）API 接口 services/consult.ts

/** 删除订单 */
export const deleteOrderAPI = (id: string) => {
  return request({ url: `/patient/order/${id}`, method: "DELETE" });
};

2）删除订单逻辑函数 ConsultItem.vue

import { deleteOrderAPI } from "@/services/consult";

interface Emits {
  (eventName: "on-del", id: string): void;
}
const emit = defineEmits<Emits>();

// 删除订单
const delLoading = ref(false);
const onDel = (item: ConsultOrderItem) => {
  delLoading.value = true;
  deleteOrderAPI(item.id)
    .then(() => {
      showSuccessToast("删除成功");
      delLoading.value = false;
      emit("on-del", item.id);
    })
    .catch(() => {
      showFailToast("删除失败");
      delLoading.value = false;
    });
};

3）使用逻辑删除

diff

<div class="foot" v-if="item.status === OrderType.ConsultCancel">
      <van-button
        class="gray"
        plain
        size="small"
        round
+        :loading="delLoading"
+        @click="onDel(item)"
      >
        删除订单
      </van-button>
      <van-button type="primary" plain size="small" round to="/">咨询其他医生</van-button>
    </div>

4）父组件进行删除数据 ConsultList.vue

html

<consult-item
  v-for="item in list"
  :key="item.id"
  :item="item"
  @on-del="onDel"
/>

const onDel = (id: string) => {
  list.value = list.value.filter((item) => item.id !== id);
};

问诊记录-查看处方 Hook

实现，查看处方逻辑复用，提取一个 hook 函数

步骤：

提取一个 hook 提供，查看处方函数
问诊室使用，订单列表中使用

代码：

1）提取 hook 函数 composable/index.ts

import { getPrescriptionPic } from "@/services/consult";
import { showImagePreview } from "vant";

// 封装查看处方逻辑
export const useShowPrescription = () => {
  const showPrescription = async (id?: string) => {
    if (id) {
      const res = await getPrescriptionPic(id);
      showImagePreview([res.data.url]);
    }
  };
  return { showPrescription };
};

2）使用 hook 函数

问诊室使用 Room/components/RoomMessage.vue

import { useShowPrescription } from "@/composable";

const { showPrescription } = useShowPrescription();

diff

<div class="head-tit">
            <h3>电子处方</h3>
+            <p @click="showPrescription(msg.prescription?.id)">
              原始处方 <van-icon name="arrow"></van-icon>
            </p>
          </div>

订单列表使用 User/components/ConsultItem.vue

import { useShowPrescription } from "@/composable";
const { showPrescription } = useShowPrescription();

diff

<!-- 问诊中 -->
    <div class="foot" v-if="item.status === OrderType.ConsultChat">
      <van-button 
         v-if="item.prescriptionId" 
         round
+         @click="showPrescription(item.prescriptionId)"
      >
        查看处方
      </van-button>
      <van-button type="primary" plain size="small" round :to="`/room?orderId=${item.id}`">
        继续沟通
      </van-button>
    </div>

小结：

现在是只有一个函数复用，其实也可以复用状态数据之类的，或者多个函数。

问诊记录-问诊详情

代码：

1）页面结构User/ConsultDetail.vue

vue

<script setup lang="ts"></script>

<template>
  <div class="consult-detail-page">
    <cp-nav-bar title="问诊详情" />
    <div class="detail-head">
      <div class="text">
        <h3>图文问诊 39 元</h3>
        <span class="sta green">待支付</span>
        <p class="tip">服务医生信息</p>
      </div>
      <div class="card">
        <img class="avatar" src="@/assets/avatar-doctor.svg" alt="" />
        <p class="doc">
          <span>极速问诊</span>
          <span>自动分配医生</span>
        </p>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="detail-patient">
      <van-cell-group :border="false">
        <van-cell title="患者信息" value="李富贵 | 男 | 30岁" />
        <van-cell title="患病时长" value="一周内" />
        <van-cell title="就诊情况" value="未就诊过" />
        <van-cell title="病情描述" label="头痛，头晕，恶心" />
      </van-cell-group>
    </div>
    <div class="detail-order">
      <h3>订单信息</h3>
      <van-cell-group :border="false">
        <van-cell title="订单编号">
          <template #value>
            <span class="copy">复制</span>
            202201127465
          </template>
        </van-cell>
        <van-cell title="创建时间" value="2022-01-23 09:23:46" />
        <van-cell title="应付款" value="￥39" />
        <van-cell title="优惠券" value="-￥0" />
        <van-cell title="积分抵扣" value="-￥0" />
        <van-cell title="实付款" value="￥39" class="price" />
      </van-cell-group>
    </div>
    <!-- 待支付 -->
    <div class="detail-time" v-if="false">请在 <van-count-down /> 内完成支付，超时订单将取消</div>
    <!-- 待支付 -->
    <div class="detail-action van-hairline--top" v-if="false">
      <div class="price">
        <span>需付款</span>
        <span>￥ 19.00</span>
      </div>
      <van-button type="default" round> 取消问诊 </van-button>
      <van-button type="primary" round>继续支付</van-button>
    </div>
    <!-- 待接诊 -->
    <div class="detail-action van-hairline--top" v-if="false">
      <van-button type="default" round> 取消问诊 </van-button>
      <van-button type="primary" round to="`/room?orderId=${item.id}`">继续沟通</van-button>
    </div>
    <!-- 接诊中 -->
    <div class="detail-action van-hairline--top" v-if="false">
      <van-button type="default" round v-if="false">查看处方</van-button>
      <van-button type="primary" round to="`/room?orderId=${item.id}`">继续沟通</van-button>
    </div>
    <!-- 已完成 -->
    <div class="detail-action van-hairline--top" v-if="false">
      
      <van-button type="default" round to="`/room?orderId=${item.id}`">问诊记录</van-button>
      <van-button type="primary" round v-if="false">写评价</van-button>
      <van-button type="default" round v-else>查看评价</van-button>
    </div>
    <!-- 已取消 -->
    <div class="detail-action van-hairline--top" v-if="false">
      <van-button type="default" round> 删除订单 </van-button>
      <van-button type="primary" round to="/">咨询其他医生</van-button>
    </div>
    <!-- 支付抽屉 -->
    <cp-pay-sheet pay-callback="/room"></cp-pay-sheet>
  </div>
</template>

<style lang="scss" scoped>
.detail-head {
  height: 140px;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 135px;
    background: linear-gradient(180deg, rgba(44, 181, 165, 0), rgba(44, 181, 165, 0.2));
    border-bottom-left-radius: 150px 20px;
    border-bottom-right-radius: 150px 20px;
  }
  padding: 15px;
  .text {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 3px;
    .sta {
      color: var(--cp-tag);
      font-weight: 500;
      font-size: 16px;
      &.green {
        color: var(--cp-primary);
      }
      &.orange {
        color: #f2994a;
      }
    }
    .tip {
      width: 100%;
      color: var(--cp-text3);
      margin-top: 5px;
    }
  }
  .card {
    height: 74px;
    background-color: #fff;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    .avatar {
      width: 38px;
      height: 38px;
    }
    .doc {
      flex: 1;
      padding-left: 15px;
      > span {
        display: block;
        font-size: 16px;
        &:last-child {
          font-size: 13px;
          color: var(--cp-text3);
        }
      }
    }
    .van-icon {
      color: var(--cp-tip);
    }
  }
}
.detail-patient {
  &::after {
    content: '';
    display: block;
    height: 12px;
    background-color: var(--cp-bg);
  }
}
.detail-order {
  > h3 {
    padding: 10px 18px;
    font-weight: normal;
  }
  .copy {
    padding: 2px 10px;
    border: 1px solid var(--cp-primary);
    background-color: var(--cp-plain);
    color: var(--cp-primary);
    font-size: 12px;
    border-radius: 12px;
    margin-right: 10px;
  }
  :deep(.van-cell__title) {
    width: 70px;
    flex: none;
  }
  .price :deep(.van-cell__value) {
    font-size: 16px;
    color: var(--cp-price);
  }
}
.detail-action {
  height: 65px;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
  justify-content: flex-end;
  padding: 0 15px;
  box-sizing: border-box;
  .price {
    flex: 1;
    > span:last-child {
      font-size: 18px;
      color: var(--cp-price);
      padding-left: 5px;
    }
  }
  .van-button {
    margin-left: 10px;
    padding-left: 17px;
    padding-right: 17px;
  }
  :deep(.van-button--default) {
    background-color: var(--cp-bg);
    color: var(--cp-text3);
  }
}
.van-cell {
  padding-left: 18px;
  padding-right: 18px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216

2）路由配置

{
      path: '/user/consult/:id',
      component: () => import('@/views/User/ConsultDetail.vue'),
      meta: { title: '问诊详情' }
    }

3）基本渲染

vue

<script setup lang="ts">
import { OrderType } from "@/enums";
import { getOrderDetailAPI } from "@/services/consult";
import type { ConsultOrderItem } from "@/types/consult";
import { getConsultFlagText, getIllnessTimeText } from "@/utils/filter";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const detail = ref<ConsultOrderItem>();
onMounted(async () => {
  const res = await getOrderDetailAPI(route.params.id as string);
  detail.value = res.data;
});
</script>

<template>
  <div class="consult-detail-page" v-if="detail">
    <cp-nav-bar title="问诊详情" />
    <div class="detail-head">
      <div class="text">
        <h3>图文问诊 {{ detail.payment }} 元</h3>
        <span
          class="sta"
          :class="{
            orange: detail.status === OrderType.ConsultPay,
            green: detail.status === OrderType.ConsultChat,
          }"
          >{{ detail.statusValue }}</span
        >
        <p class="tip">服务医生信息</p>
      </div>
      <div class="card">
        <img class="avatar" src="@/assets/avatar-doctor.svg" alt="" />
        <p class="doc">
          <span>极速问诊</span>
          <span>{{ detail.docInfo?.name }}</span>
        </p>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="detail-patient">
      <van-cell-group :border="false">
        <van-cell
          title="患者信息"
          :value="`${detail.patientInfo.name} | ${detail.patientInfo.genderValue} | ${detail.patientInfo.age}岁`"
        />
        <van-cell
          title="患病时长"
          :value="getIllnessTimeText(detail.illnessTime)"
        />
        <van-cell
          title="就诊情况"
          :value="getConsultFlagText(detail.consultFlag)"
        />
        <van-cell title="病情描述" :label="detail.illnessDesc" />
      </van-cell-group>
    </div>
    <div class="detail-order">
      <h3>订单信息</h3>
      <van-cell-group :border="false">
        <van-cell title="订单编号">
          <template #value>
            <span class="copy">复制</span>
            {{ detail.orderNo }}
          </template>
        </van-cell>
        <van-cell title="创建时间" :value="detail.createTime" />
        <van-cell title="应付款" :value="`￥${detail.payment}`" />
        <van-cell title="优惠券" :value="`-￥${detail.couponDeduction}`" />
        <van-cell title="积分抵扣" :value="`-￥${detail.pointDeduction}`" />
        <van-cell
          title="实付款"
          :value="`￥${detail.payment}`"
          class="price"
        />
      </van-cell-group>
    </div>
    <div class="detail-action van-hairline--top">
      ....省略代码
    </div>
  </div>
  <div class="consult-detail-page" v-else>
    <cp-nav-bar title="问诊详情" />
    <van-skeleton title :row="4" style="margin-top: 30px" />
    <van-skeleton title :row="4" style="margin-top: 30px" />
  </div>
</template>

4）骨架效果

html

<div class="consult-detail-page" v-if="detail">// ...</div>
<div class="consult-detail-page" v-else>
  <cp-nav-bar title="问诊详情" />
  <van-skeleton title :row="4" style="margin-top: 30px" />
  <van-skeleton title :row="4" style="margin-top: 30px" />
</div>

问诊记录-详情按钮处理

状态梳理：

待支付：支付金额+取消问诊+去支付
待接诊：取消问诊+继续沟通
咨询中：查看处方（如果开了）+继续沟通
已完成：更多（查看处方，如果开了，删除订单）+问诊记录+（未评价?写评价:查看评价）
已取消：删除订单+咨询其他医生

代码实现：

提示：

html

<div class="detail-time" v-if="detail.status === OrderType.ConsultPay">
  请在
  <van-count-down :time="detail.countdown * 1000" /> 内完成支付，超时订单将取消
</div>

按钮：

html

<div
  class="detail-action van-hairline--top"
  v-if="detail.status === OrderType.ConsultPay"
>
  <div class="price">
    <span>需付款</span>
    <span>￥{{ detail.payment }}</span>
  </div>
  <van-button type="default" round>取消问诊</van-button>
  <van-button type="primary" round>继续支付</van-button>
</div>
<div
  class="detail-action van-hairline--top"
  v-if="detail.status === OrderType.ConsultWait"
>
  <van-button type="default" round>取消问诊</van-button>
  <van-button type="primary" round :to="`/room?orderId=${detail.id}`"
    >继续沟通</van-button
  >
</div>
<div
  class="detail-action van-hairline--top"
  v-if="detail.status === OrderType.ConsultChat"
>
  <van-button type="default" round v-if="detail.prescriptionId"
    >查看处方</van-button
  >
  <van-button type="primary" round :to="`/room?orderId=${detail.id}`"
    >继续沟通</van-button
  >
</div>
<div
  class="detail-action van-hairline--top"
  v-if="detail.status === OrderType.ConsultComplete"
>
  <cp-consult-more></cp-consult-more>
  <van-button type="default" round :to="`/room?orderId=${detail.id}`"
    >问诊记录</van-button
  >
  <van-button type="primary" round v-if="detail.evaluateId">写评价</van-button>
  <van-button type="default" round v-else>查看评价</van-button>
</div>
<div
  class="detail-action van-hairline--top"
  v-if="detail.status === OrderType.ConsultCancel"
>
  <van-button type="default" round>删除订单</van-button>
  <van-button type="primary" round to="/">咨询其他医生</van-button>
</div>

scss

.detail-time {
  position: fixed;
  left: 0;
  bottom: 65px;
  width: 100%;
  height: 44px;
  background-color: #fff7eb;
  text-align: center;
  line-height: 44px;
  font-size: 13px;
  color: #f2994a;
  .van-count-down {
    display: inline;
    color: #f2994a;
  }
}

问诊记录-cp-consult-more 组件

通用问诊记录查看更多组件

组件封装：components/CpConsultMore

静态结构和样式

vue

<script setup lang="ts"></script>


<template>
  <div class="cp-consult-more">
    <van-popover placement="top-start">
      <template #reference> 更多 </template>
    </van-popover>
  </div>
</template>

<style lang="scss" scoped>
.cp-consult-more {
  flex: 1;
  color: var(--cp-tag);
}
</style>

封装组件

vue

<script setup lang="ts">


// 禁用删除处方
const props = defineProps<{disabled?: boolean}>()
// 💥💥注意：使用计算属性，props.disabled刚开始可能为undefined
const actions = computed(() => [
  { text: '查看处方', disabled: props.disabled },
  { text: '删除订单' }
])

interface Emits {
  (name: 'on-del'): void
  (name: 'on-preview'): void
}
const emit = defineEmits<Emits>();

const onSelect = (action: { text: string }, i: number) => {
  if (i === 0) emit("on-preview");
  if (i === 1) emit("on-delete");
};
</script>

<template>
  <div class="cp-consult-more">
    <van-popover
      placement="top-start"
      :actions="actions"
      @select="onSelect"
    >
      <template #reference> 更多 </template>
    </van-popover>
  </div>
</template>

diff

+import CpConsultMore from '@/components/CpConsultMore.vue'

declare module 'vue' {
  interface GlobalComponents {
    // 指定组件类型，typeof 从组件对象得到类型，设置给全局组件：CpNavBar
    CpNavBar: typeof CpNavBar
    CpIcon: typeof CpIcon
    CpRadioBtn: typeof CpRadioBtn
+    CpConsultMore: typeof CpConsultMore
  }
}

使用组件：User/components/ConsultItem.vue

html

<cp-consult-more
  :disabled="!detail.prescriptionId"
  @on-delete="onDel(detail)"
  @on-preview="showPrescription(detail.prescriptionId)"
></cp-consult-more>

问诊记录-取消订单 Hook

实现，取消订单逻辑复用，提取 hook 函数

composable/index.ts

import {
  cancelOrderAPI,
  followDoctor,
  getPrescriptionPic,
} from "@/services/consult";
import type { ConsultOrderItem, FollowType } from "@/types/consult";
import { ImagePreview, showSuccessToast, showFailToast } from "vant";
import { OrderType } from "@/enums";

// 封装取消订单逻辑
export const usecancelOrder = () => {
  const loading = ref(false);
  const onCancel = (item: ConsultOrderItem) => {
    loading.value = true;
    cancelOrderAPI(item.id)
      .then(() => {
        item.status = OrderType.ConsultCancel;
        item.statusValue = "已取消";
        showSuccessToast("取消成功");
      })
      .catch(() => {
        showFailToast("取消失败");
      })
      .finally(() => {
        loading.value = false;
      });
  };
  return { loading, onCancel };
};

ConsultItem.vue

import { usecancelOrder } from "@/composable";
const { loading, onCancel } = usecancelOrder();

ConsultDetail.vue

import { usecancelOrder } from "@/composable";
const { loading, onCancel } = usecancelOrder();

diff

<div class="detail-action van-hairline--top" v-if="item.status === OrderType.ConsultPay">
      <div class="price">
        <span>需付款</span>
        <span>￥{{ item.actualPayment }}</span>
      </div>
+      <van-button type="default" round :loading="loading" @click="onCancel(item!)">
        取消问诊
      </van-button>
      <van-button type="primary" round>继续支付</van-button>
    </div>
    <div class="detail-action van-hairline--top" v-if="item.status === OrderType.ConsultWait">
+      <van-button type="default" round :loading="loading" @click="onCancel(item!)">
        取消问诊
      </van-button>
      <van-button type="primary" round :to="`/room?orderId=${item.id}`">继续沟通</van-button>
    </div>

问诊记录-删除订单 Hook

实现，取消删除逻辑复用，提取 hook 函数

import {
  cancelOrderAPI,
  deleteOrderAPI,
  followDoctor,
  getPrescriptionPic,
} from "@/services/consult";

export const useDelOrder = (cb: () => void) => {
  // 删除订单
  const loading = ref(false);
  const onDel = async (item: ConsultOrderItem) => {
    loading.value = true;
    try {
      await deleteOrderAPI(item.id);
      // 成功，通知父组件删除这条信息，提示，详情就是跳转列表页面
      showSuccessToast("删除成功");
      cb();
    } catch (e) {
      showFailToast("删除失败");
    } finally {
      loading.value = false;
    }
  };
  return { loading, onDel };
};

ConsultItem.vue

import {
  usecancelOrder,
  useDelOrder,
  useShowPrescription,
} from "@/composable";

const { loading: delLoading, onDel } = usedeleteOrder(() => {
  emit("on-delete", props.item.id);
});

ConsultDetail.vue

import {
  usecancelOrder,
  useDelOrder,
  useShowPrescription,
} from "@/composable";

const { showPrescription } = useShowPrescription();
const { loading: delLoading, onDel } = useDelOrder(() => {
  router.push("/user/consult");
});

查看处方和删除订单

html

<cp-consult-more
  :disabled="!item.prescriptionId"
  @on-delete="onDel(item)"
  @on-preview="showPrescription(item.prescriptionId)"
></cp-consult-more>

删除订单 (item!) 是 ts 语法非空断言

html

<van-button type="default" round :loading="delLoading" @click="onDel(item!)">
  删除订单
</van-button>

查看处方

diff

<van-button
        type="default"
        round
        v-if="item.prescriptionId"
+        @click="showPrescription(item?.prescriptionId)"
      >
        查看处方
      </van-button>
      <van-button type="primary" round :to="`/room?orderId=${item.id}`">继续沟通</van-button>
    </div>

小结：

删除订单和查看处方一起实现

问诊记录-复制订单号

步骤：

知道 useClipboard 基本用法
使用 useClipboard 复制订单号

代码：

参考代码

1. copy(需要拷贝的内容)
2. copied 是否拷贝成功，默认1.5s恢复状态
3. isSupported 浏览器是否支持，需要授权读取粘贴板和写入粘贴板权限

实现逻辑

import { useClipboard } from "@vueuse/core";
import { showToast } from "vant";

const { copy, copied, isSupported } = useClipboard();
const onCopy = () => {
  if (!isSupported.value) return showToast("未授权，不支持");
  copy(detail.value！.orderNo );
};
watch(copied, () => {
  if (copied.value) showToast("已复制");
});

html

<van-cell title="订单编号">
  <template #value>
    <span class="copy" @click="onCopy">复制</span>
    {{ detail.orderNo }}
  </template>
</van-cell>

问诊记录-支付抽屉组件封装

思路：

组件需要实现哪些功能？
- 展示微信支付和支付宝支付，可以选择
- 展示支付金额，传入订单 ID 用于生成订单支付链接
- 打开关闭抽屉

参考：透传属性

代码：

0）封装组件 components/CpPaySheet.vue

vue

<script setup lang="ts">
import { getOrderPayUrl } from '@/services/consult'
import { showLoadingToast } from 'vant'
import { ref } from 'vue'

const isShow = ref(false)
const orderId = ref('')
const paymentMethod = ref<0 | 1>(1)
const onPay = async () => {
  showLoadingToast('跳转支付')
  const res = await getOrderPayUrl({
    orderId: orderId.value,
    paymentMethod: paymentMethod.value,
    payCallback: 'http://localhost:3000/room'
  })
  window.location.href = res.data.payUrl
}


</script>

<template>
  <!-- 支付方式弹窗 -->
  <van-action-sheet
   		v-model:show = "isShow"
      title="选择支付方式"
      :closeable="false"
      :close-on-popstate="false"
    >
      <div class="pay-type">
        <p class="amount">￥{{ payInfo?.actualPayment }}元</p>
        <van-cell-group>
          <van-cell title="微信支付" @click="paymentMethod = 0">
            <template #icon><cp-icon name="consult-wechat" /></template>

            <template #extra><van-checkbox :checked="paymentMethod === 0" /></template>
          </van-cell>
          <van-cell title="支付宝支付" @click="paymentMethod = 1">
            <template #icon><cp-icon name="consult-alipay" /></template>

            <template #extra><van-checkbox :checked="paymentMethod === 1" /></template>
          </van-cell>
        </van-cell-group>
        <div class="btn">
          <van-button type="primary" round block @click="onPay">立即支付</van-button>
        </div>
      </div>
    </van-action-sheet>
</template>

<style lang="scss" scoped>
.pay-type {
  .amount {
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  .btn {
    padding: 15px;
  }
  .van-cell {
    align-items: center;
    .cp-icon {
      margin-right: 10px;
      font-size: 18px;
    }
    .van-checkbox :deep(.van-checkbox__icon) {
      font-size: 16px;
    }
  }
}
</style>

1）封装组件 components/CpPaySheet.vue

diff

<script setup lang="ts">

+ interface Props {
+   orderId: string;
+   actualPayment: number;
+ }
  
+ const { orderId } = defineProps<Props>();

// ... 省略代码
// 跳转支付
const pay = async () => {
  // ... 省略代码
};
</script>

<template>
  <!-- 支付方式弹窗 -->
  <van-action-sheet
    title="选择支付方式"
    :close-on-popstate="false"
    :closeable="false"
  >
    <div class="pay-type">
+      <p class="amount">￥{{ actualPayment.toFixed(2) }}</p>
      <van-cell-group>
       ... 省略
      </van-cell-group>
      <div class="btn">
        ... 省略
      </div>
    </div>
  </van-action-sheet>
</template>

diff

import CpNavBar from '@/components/CpNavBar.vue'
import CpIcon from '@/components/CpIcon.vue'
import CpRadioBtn from '@/components/CpRadioBtn.vue'
+import CpPaySheet from '@/components/CpPaySheet.vue'
import { RouterLink, RouterView } from 'vue-router'

declare module 'vue' {
  interface GlobalComponents {
    CpNavBar: typeof CpNavBar
    CpIcon: typeof CpIcon
    CpRadioBtn: typeof CpRadioBtn
+    CpPaySheet: typeof CpPaySheet
    RouterLink: typeof RouterLink
    RouterView: typeof RouterView
  }
}

2）使用组件

ConsultPay.vue

html

<cp-pay-sheet
  v-model:show="show"
  :order-id="orderId"
  :actualPayment="payInfo.actualPayment"
  :onClose="onClose"
/>

ConsultDetail.vue

const show = ref(false);

html

<van-button type="primary" round @click="show = true">继续支付</van-button>

diff

<div class="detail-action van-hairline--top" v-if="detail.status === OrderType.ConsultCancel">
      <van-button type="default" round :loading="delLoading" @click="onDel(detail!)">
        删除订单
      </van-button>
      <van-button type="primary" round to="/">咨询其他医生</van-button>
    </div>
+   <cp-pay-sheet v-model:show="show" :order-id="detail.id" :actualPayment="detail.actualPayment" />
  </div>

问诊订单 ​

问诊记录-静态结构 ​

问诊记录-类型定义与 API 函数 ​

问诊记录-请求数据 ​

问诊记录-渲染操作按钮 ​

问诊记录-取消订单 ​

问诊记录-删除订单 ​

问诊记录-查看处方 Hook ​

问诊记录-问诊详情 ​

问诊记录-详情按钮处理 ​

问诊记录-cp-consult-more 组件 ​

问诊记录-取消订单 Hook ​

问诊记录-删除订单 Hook ​

问诊记录-复制订单号 ​

问诊记录-支付抽屉组件封装 ​

问诊订单

问诊记录-静态结构

问诊记录-类型定义与 API 函数

问诊记录-请求数据

问诊记录-渲染操作按钮

问诊记录-取消订单

问诊记录-删除订单

问诊记录-查看处方 Hook

问诊记录-问诊详情

问诊记录-详情按钮处理

问诊记录-cp-consult-more 组件

问诊记录-取消订单 Hook

问诊记录-删除订单 Hook

问诊记录-复制订单号

问诊记录-支付抽屉组件封装