173 lines
6.4 KiB
Vue
173 lines
6.4 KiB
Vue
<template>
|
||
<scroll-view v-if="order" scroll-y class="h-full bg-gray leading-normal break-all">
|
||
<view class="py-12 px-15 flex items-center">
|
||
<view class="text-lg text-dark font-semibold">患者订单概览</view>
|
||
<view class="text-sm text-gray">（最近一次配药订单）</view>
|
||
</view>
|
||
<view class="mb-10 bg-white shadow-lg">
|
||
<view class="flex px-15 py-12 border-b">
|
||
<view class="mr-10 flex-shrink-0 text-base text-gray">订单编号</view>
|
||
<view class="mr-10 w-0 flex-grow text-dark text-base">{{ order.orderNo }}</view>
|
||
<view class="flex-shrink-0 text-base text-primary cursor-pointer" @click="copy(order.orderNo)">
|
||
复制
|
||
</view>
|
||
</view>
|
||
<view class="flex px-15 py-12 border-b">
|
||
<view class="mr-10 flex-shrink-0 text-base text-gray">订单状态</view>
|
||
<view v-if="order.statusText" class="text-white px-10 rounded-full" :class="order.statusClass">
|
||
{{ order.statusText }}
|
||
</view>
|
||
</view>
|
||
<view class="flex px-15 py-12 border-b">
|
||
<view class="mr-10 flex-shrink-0 text-base text-gray">下单时间</view>
|
||
<view class="text-dark text-base">{{ order.time }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="mb-10 bg-white shadow-lg">
|
||
<view class="flex px-15 py-12 border-b">
|
||
<view class="mr-10 flex-shrink-0 text-base text-gray">开方患者</view>
|
||
<view class="mr-10 w-0 flex-grow text-dark text-base">
|
||
{{ order.name }} {{ order.sex }} {{ order.age > 0 ? `${order.age}岁` : '' }}
|
||
</view>
|
||
</view>
|
||
<view class="flex px-15 py-12 border-b">
|
||
<view class="mr-10 flex-shrink-0 text-base text-gray">问诊医生</view>
|
||
<view class="text-dark text-base">{{ order.doctorName }}</view>
|
||
</view>
|
||
<view class="flex px-15 py-12 border-b">
|
||
<view class="mr-10 flex-shrink-0 text-base text-gray">收件信息</view>
|
||
<view class="w-0 flex-grow">
|
||
<view class="text-base">{{ order.receiveName }} {{ order.receivePhone }}</view>
|
||
<view class="text-base">{{ address }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mb-10 bg-white shadow-lg">
|
||
<view class="flex px-15 py-12 border-b text-lg text-dark font-semibold">
|
||
配药清单
|
||
</view>
|
||
<view v-for="med in order.drugs" class="px-15 py-12 border-b">
|
||
<view class="flex mb-5">
|
||
<view class="w-0 flex-grow text-base text-dark">{{ med.drugName }}</view>
|
||
<view class="flex-shrink-0 text-danger">¥{{ med.price }}</view>
|
||
</view>
|
||
<view class="flex">
|
||
<view class="flex-grow w-0 text-base text-gray">规格：{{ med.spec }}</view>
|
||
<view class="flex-shrink-0 text-base text-gray">x{{ med.quantity }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex items-center justify-end px-15 py-12 ">
|
||
<view v-if="order.hasShippingFee" class="text-sm text-gray">
|
||
（含互联网诊查费¥{{ countDetails.regFee }}、{{ order.shippingFee > 0 ? '运费¥' + countDetails.shippingFee : '免运费' }}）
|
||
</view>
|
||
<view v-else class="text-sm text-gray">（含互联网诊查费¥{{ countDetails.regFee }}）</view>
|
||
<view class="flex-shrink-0 text-base text-dark">合计：</view>
|
||
<view class="flex-shrink-0 text-base text-danger">¥{{ countDetails.totalFee }}</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 160rpx;"></view>
|
||
</scroll-view>
|
||
<view v-else class="flex flex-col items-center justify-center">
|
||
<empty-data text="暂无订单" />
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import { computed, ref } from 'vue';
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import dayjs from 'dayjs';
|
||
import BigNumber from 'bignumber.js';
|
||
import { toast, loading, hideLoading } from '@/utils/widget';
|
||
import emptyData from "@/components/empty.vue";
|
||
import { getCloudServiceData } from '@/utils/ykf-api';
|
||
|
||
const order = ref(null)
|
||
const ciphertext = ref('');
|
||
const address = computed(() => {
|
||
const region = order.value && Array.isArray(order.value.receiveRegion) ? order.value.receiveRegion.join('') : '';
|
||
const address = order.value && order.value.receiveAddress ? order.value.receiveAddress : '';
|
||
return `${region} ${address}`;
|
||
})
|
||
const countDetails = computed(() => {
|
||
const drugFee = order.value && typeof order.value.drugFee === 'number' ? order.value.drugFee : undefined;
|
||
const shippingFee = order.value && typeof order.value.shippingFee === 'number' ? order.value.shippingFee : undefined;
|
||
const regFee = order.value && typeof order.value.regFee === 'number' ? order.value.regFee : undefined;
|
||
const total = new BigNumber(drugFee || 0).plus(regFee || 0).plus(shippingFee || 0);
|
||
const ybFee = new BigNumber(regFee || 0).plus(drugFee || 0).toNumber();
|
||
return {
|
||
drugFee: typeof drugFee === 'number' ? drugFee.toFixed(2) : '',
|
||
regFee: typeof regFee === 'number' ? regFee.toFixed(2) : '',
|
||
shippingFee: typeof shippingFee === 'number' ? shippingFee.toFixed(2) : '',
|
||
totalFee: total.toFixed(2),
|
||
ybFee: ybFee.toFixed(2),
|
||
}
|
||
})
|
||
|
||
const statusSet = {
|
||
shipped: { text: '已配送', classnames: 'bg-success text-white' },
|
||
ybPaid: { text: '待支付运费', classnames: 'bg-primary text-white' },
|
||
ybFeeRefunded: { text: '药诊费已退', classnames: 'bg-gray-500 text-white' },
|
||
refunded: { text: '已退费', classnames: 'bg-gray-500 text-white' }
|
||
}
|
||
|
||
function copy(data) {
|
||
uni.setClipboardData({
|
||
data,
|
||
success: () => {
|
||
toast('复制成功')
|
||
}
|
||
})
|
||
}
|
||
|
||
async function getOrder() {
|
||
loading('请求中')
|
||
const res = await getCloudServiceData(ciphertext.value);
|
||
hideLoading()
|
||
if (res && res.order) {
|
||
const status = statusSet[res.order.status] || {};
|
||
order.value = {
|
||
...res.order,
|
||
hasShippingFee: 'shippingFee' in res.order,
|
||
statusText: status ? status.text : '',
|
||
statusClass: status ? status.classnames : '',
|
||
time: dayjs(res.order.createTime).format('YYYY-MM-DD HH:mm:ss')
|
||
};
|
||
}
|
||
}
|
||
|
||
onLoad(() => {
|
||
// #ifdef H5
|
||
const search = location.search;
|
||
const params = new URLSearchParams(search);
|
||
ciphertext.value = params.get('remark') || '';
|
||
if (ciphertext.value) {
|
||
getOrder()
|
||
}
|
||
// #endif
|
||
})
|
||
</script>
|
||
<style>
|
||
#app {
|
||
--text-base: 14px;
|
||
--text-sm: 12px;
|
||
--text-xs: 10px;
|
||
--text-lg: 16px;
|
||
--text-xl: 18px;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.h-full {
|
||
height: 100%;
|
||
}
|
||
|
||
.cursor-pointer {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mb-5 {
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.bg-gray-500 {
|
||
background: #999;
|
||
}
|
||
</style> |