409 lines
12 KiB
Vue
409 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<full-page mainStyle="background:#f0f0f0" :class="{ 'elder-mode': elderMode }">
|
|||
|
|
<template v-if="order">
|
|||
|
|
<view v-if="order.text" class="info" :class="{ 'info--elder': elderMode }">
|
|||
|
|
<view class="name" :class="{ 'name--elder': elderMode }" :style="{ color: order.color }">{{ order.text }}</view>
|
|||
|
|
<view v-if="order.subText" style="margin-top: 10rpx;" :class="{ 'sub-text--elder': elderMode }">{{ order.subText
|
|||
|
|
}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info" :class="{ 'info--elder': elderMode }">
|
|||
|
|
<view class="info-row" :class="{ 'info-row--elder': elderMode }">
|
|||
|
|
<text class="name" :class="{ 'name--elder': elderMode }">{{ order.doctorName }}</text>
|
|||
|
|
<text :class="{ 'title-text--elder': elderMode }">{{ order.doctorTitle }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-row" :class="{ 'info-row--elder': elderMode }">
|
|||
|
|
<text :class="{ 'hospital-text--elder': elderMode }">震元堂中医院</text>
|
|||
|
|
<text v-if="order.deptName" :class="{ 'dept-text--elder': elderMode }"> | {{ order.deptName }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<disease-summary :order="order" :elderMode="elderMode" />
|
|||
|
|
<view v-if="diagnosis" class="order-form" :class="{ 'order-form--elder': elderMode }">
|
|||
|
|
<view class="order-form-row" :class="{ 'order-form-row--elder': elderMode }" @click="viewSumarry()">
|
|||
|
|
<text class="order-form-label" :class="{ 'order-form-label--elder': elderMode }">病历概要：</text>
|
|||
|
|
<text style="color:$theme-brown-primary" :class="{ 'link-text--elder': elderMode }">点击查看</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="order-form" :class="{ 'order-form--elder': elderMode }">
|
|||
|
|
<view class="order-form-row" :class="{ 'order-form-row--elder': elderMode }">
|
|||
|
|
<text class="order-form-label" :class="{ 'order-form-label--elder': elderMode }">订单编号：</text>
|
|||
|
|
<text :class="{ 'form-text--elder': elderMode }">{{ order.orderId }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="order-form-row" :class="{ 'order-form-row--elder': elderMode }">
|
|||
|
|
<text class="order-form-label" :class="{ 'order-form-label--elder': elderMode }">下单时间：</text>
|
|||
|
|
<text :class="{ 'form-text--elder': elderMode }">{{
|
|||
|
|
order.createTime
|
|||
|
|
? dayjs(order.createTime).format("YYYY-MM-DD HH:mm")
|
|||
|
|
: ""
|
|||
|
|
}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="order.settlement && order.settlement.total_fee" class="order-form-row"
|
|||
|
|
:class="{ 'order-form-row--elder': elderMode }">
|
|||
|
|
<text class="order-form-label" :class="{ 'order-form-label--elder': elderMode }">互联网诊查费：</text>
|
|||
|
|
<text :class="{ 'form-text--elder': elderMode }">￥{{ order.settlement.total_fee }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="order.settlement" class="order-form-row" :class="{ 'order-form-row--elder': elderMode }">
|
|||
|
|
<text class="order-form-label" :class="{ 'order-form-label--elder': elderMode }">支付方式：</text>
|
|||
|
|
<text :class="{ 'form-text--elder': elderMode }">支付宝医保支付</text>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="order.settlement && order.settlement.chage_date" class="order-form-row"
|
|||
|
|
:class="{ 'order-form-row--elder': elderMode }">
|
|||
|
|
<text class="order-form-label" :class="{ 'order-form-label--elder': elderMode }">支付时间：</text>
|
|||
|
|
<text :class="{ 'form-text--elder': elderMode }">
|
|||
|
|
{{
|
|||
|
|
order.settlement && order.settlement.chage_date
|
|||
|
|
? dayjs(order.settlement.chage_date).format(
|
|||
|
|
"YYYY-MM-DDHH: mm: ss"
|
|||
|
|
)
|
|||
|
|
: ""
|
|||
|
|
}}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="order.drugStoreName" class="order-form-row" :class="{ 'order-form-row--elder': elderMode }">
|
|||
|
|
<text class="order-form-label" :class="{ 'order-form-label--elder': elderMode }">来源：</text>
|
|||
|
|
<text :class="{ 'form-text--elder': elderMode }"> {{ order.drugStoreName }} </text>
|
|||
|
|
</view>
|
|||
|
|
<view class="order-form-row" :class="{ 'order-form-row--elder': elderMode }">
|
|||
|
|
<text class="order-form-label" :class="{ 'order-form-label--elder': elderMode }">终端：</text>
|
|||
|
|
<text :class="{ 'form-text--elder': elderMode }"> 支付宝小程序 </text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<empty-data v-else :text="msg" />
|
|||
|
|
<template #footer>
|
|||
|
|
<view v-if="order && order.showFooter" class="footer" :class="{ 'footer--elder': elderMode }">
|
|||
|
|
<view v-if="order.canPay" class="footer__btn primary" :class="{ 'footer__btn--elder': elderMode }"
|
|||
|
|
@click="toPay()">支付</view>
|
|||
|
|
<view v-if="order.canCancel" class="footer__btn inactive" :class="{ 'footer__btn--elder': elderMode }"
|
|||
|
|
@click="cancelOrder()">取消</view>
|
|||
|
|
<view v-if="order.enterRoom" class="footer__btn primary" :class="{ 'footer__btn--elder': elderMode }"
|
|||
|
|
@click="enterRoom()">{{ order.enterRoomText }}</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</full-page>
|
|||
|
|
</template>
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted } from "vue";
|
|||
|
|
import { onLoad, onUnload } from "@dcloudio/uni-app";
|
|||
|
|
import dayjs from "dayjs";
|
|||
|
|
import useYbPay from "@/hooks/useYbPay";
|
|||
|
|
import {
|
|||
|
|
getPatientOrder,
|
|||
|
|
getOrderDiagnosis,
|
|||
|
|
cancelConsultOrder,
|
|||
|
|
} from "@/utils/api";
|
|||
|
|
import { useIMStore } from "@/store/tim";
|
|||
|
|
import { toast, confirm, loading, hideLoading } from "@/utils/widget";
|
|||
|
|
import { getOrderStatus } from "@/utils";
|
|||
|
|
|
|||
|
|
import diseaseSummary from "@/pages/consult/components/disease-summary.vue";
|
|||
|
|
import emptyData from "@/components/empty.vue";
|
|||
|
|
import fullPage from "@/components/full-page.vue";
|
|||
|
|
|
|||
|
|
const order = ref(null);
|
|||
|
|
const msg = ref("");
|
|||
|
|
const pay = useYbPay(null, reload);
|
|||
|
|
const diagnosis = ref(null)
|
|||
|
|
const timer = ref(null)
|
|||
|
|
|
|||
|
|
// 适老化模式状态
|
|||
|
|
const elderMode = ref(false);
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 从本地存储读取适老化模式状态
|
|||
|
|
const savedElderMode = uni.getStorageSync('elderMode')||false;
|
|||
|
|
|
|||
|
|
if (savedElderMode !== null && savedElderMode !== undefined) {
|
|||
|
|
elderMode.value = !!savedElderMode
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onLoad((e) => {
|
|||
|
|
if (e.orderId) {
|
|||
|
|
getOrderDetail(e.orderId);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
onUnload(() => {
|
|||
|
|
timer.value && clearInterval(timer.value)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function reload() {
|
|||
|
|
if (order.value && order.value.orderId) {
|
|||
|
|
getOrderDetail(order.value.orderId)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function getOrderDetail(orderId) {
|
|||
|
|
const { success, data, message } = await getPatientOrder({ orderId });
|
|||
|
|
if (success) {
|
|||
|
|
order.value = {
|
|||
|
|
...data,
|
|||
|
|
...getOrderStatus(data),
|
|||
|
|
};
|
|||
|
|
if (order.value.hasPassDiagnostic) {
|
|||
|
|
getDiagnosis()
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
order.value = null;
|
|||
|
|
toast(message);
|
|||
|
|
msg.value = message || "获取订单失败";
|
|||
|
|
}
|
|||
|
|
console.log("order", order.value);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toPay() {
|
|||
|
|
pay(order.value);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function cancelOrder() {
|
|||
|
|
const item = order.value;
|
|||
|
|
await confirm("确定取消订单吗？");
|
|||
|
|
const { success, message } = await cancelConsultOrder({
|
|||
|
|
orderId: item.orderId,
|
|||
|
|
});
|
|||
|
|
if (success) {
|
|||
|
|
toast("取消成功");
|
|||
|
|
getOrderDetail(item.orderId);
|
|||
|
|
} else {
|
|||
|
|
toast(message || "取消失败");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function enterRoom() {
|
|||
|
|
const { doctorCode, orderId } = order.value;
|
|||
|
|
if (!doctorCode) {
|
|||
|
|
toast("进入视频间错误,医生视频账号不存在 ");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!orderId) {
|
|||
|
|
toast("进入视频间错误,用户视频账号不存在 ");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
loading("正在进入视频间, 请稍后等待");
|
|||
|
|
const imStore = useIMStore();
|
|||
|
|
try {
|
|||
|
|
const res = await imStore.login(orderId);
|
|||
|
|
if (!res) {
|
|||
|
|
hideLoading()
|
|||
|
|
toast("IM 登录失败");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
await new Promise((resolve) => {
|
|||
|
|
if (imStore.isSDKReady) {
|
|||
|
|
resolve();
|
|||
|
|
} else {
|
|||
|
|
timer.value = setInterval(() => {
|
|||
|
|
if (imStore.isSDKReady) {
|
|||
|
|
clearInterval(timer.value);
|
|||
|
|
timer.value = null
|
|||
|
|
resolve();
|
|||
|
|
}
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const conversationID = `C2C${doctorCode}`;
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/chat/index?conversationID=${conversationID}&orderId=${orderId}`,
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
hideLoading()
|
|||
|
|
toast(`进入会话失败: ${e.message || "未知错误"}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function getDiagnosis() {
|
|||
|
|
const { data } = await getOrderDiagnosis({ orderId: order.value.orderId, status: 'PASS' });
|
|||
|
|
diagnosis.value = data || null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function viewSumarry() {
|
|||
|
|
if (diagnosis.value) {
|
|||
|
|
uni.setStorageSync('order-diagnosis', JSON.stringify(diagnosis.value));
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/record/order-diagnosis'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.order-form {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
|
|||
|
|
// 适老化模式：表单区域整体变大
|
|||
|
|
@at-root &--elder {
|
|||
|
|
margin: 30rpx 20rpx 20rpx 20rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-form-row {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 24rpx 30rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
@at-root &+& {
|
|||
|
|
border-top: 1px solid #e5e5e5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 适老化模式：行内边距增加，字体放大，元素各占一行
|
|||
|
|
@at-root &--elder {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
padding: 36rpx 40rpx;
|
|||
|
|
font-size: 39rpx; // 28 * 1.4
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-form-label {
|
|||
|
|
color: #666;
|
|||
|
|
|
|||
|
|
// 适老化模式：标签字体放大，加粗
|
|||
|
|
@at-root &--elder {
|
|||
|
|
font-size: 39rpx; // 28 * 1.4
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info {
|
|||
|
|
padding: 24rpx 30rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
// 适老化模式：信息区域内边距增加，字体和行高放大
|
|||
|
|
@at-root &--elder {
|
|||
|
|
padding: 36rpx 40rpx;
|
|||
|
|
margin: 30rpx 20rpx 20rpx 20rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
font-size: 39rpx; // 28 * 1.4
|
|||
|
|
line-height: 56rpx; // 40 * 1.4
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-row {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
|
|||
|
|
// 适老化模式：元素各占一行，允许换行
|
|||
|
|
@at-root &--elder {
|
|||
|
|
white-space: normal;
|
|||
|
|
overflow: visible;
|
|||
|
|
text-overflow: unset;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
// 适老化模式：名称字体放大
|
|||
|
|
@at-root &--elder {
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
font-size: 45rpx; // 32 * 1.4
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
padding: 24rpx 30rpx;
|
|||
|
|
background: white;
|
|||
|
|
|
|||
|
|
// 适老化模式：底部区域内边距增加，按钮各占一行
|
|||
|
|
@at-root &--elder {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
padding: 36rpx 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer__btn {
|
|||
|
|
padding: 8rpx 20rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
border: 1px solid;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
@at-root &+& {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.primary {
|
|||
|
|
color: $theme-brown-primary;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.inactive {
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 适老化模式：按钮变大，字体放大
|
|||
|
|
@at-root &--elder {
|
|||
|
|
padding: 16rpx 32rpx;
|
|||
|
|
font-size: 39rpx; // 28 * 1.4
|
|||
|
|
border-radius: 28rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
@at-root &+& {
|
|||
|
|
margin-left: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 适老化模式额外样式类
|
|||
|
|
.sub-text--elder {
|
|||
|
|
font-size: 39rpx !important; // 28 * 1.4
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-top: 14rpx !important; // 10 * 1.4
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-text--elder {
|
|||
|
|
font-size: 39rpx !important; // 28 * 1.4
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hospital-text--elder {
|
|||
|
|
font-size: 39rpx !important; // 28 * 1.4
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dept-text--elder {
|
|||
|
|
font-size: 39rpx !important; // 28 * 1.4
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.link-text--elder {
|
|||
|
|
font-size: 39rpx !important; // 28 * 1.4
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-text--elder {
|
|||
|
|
font-size: 39rpx !important; // 28 * 1.4
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
</style>
|