You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
286 lines
8.2 KiB
286 lines
8.2 KiB
<template>
|
|
<view class="page__view">
|
|
|
|
<navbar title="我的预约" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#F3F2F7" />
|
|
|
|
<template v-if="detail">
|
|
|
|
<view class="main">
|
|
|
|
<view class="flex flex-column status">
|
|
<template v-if="orderSuccess">
|
|
<image class="icon" src="@/pages_order/static/checkup/icon-success.png" mode="widthFix"></image>
|
|
</template>
|
|
<template v-else>
|
|
<image class="icon" src="@/pages_order/static/checkup/icon-error.png" mode="widthFix"></image>
|
|
</template>
|
|
<view>{{ statusDesc }}</view>
|
|
</view>
|
|
|
|
<!-- 自采 -->
|
|
<template v-if="detail.type == 1">
|
|
<view class="card">
|
|
<view class="card-header">自采检测预约信息</view>
|
|
<view class="flex row">
|
|
<view class="row-label">姓名</view>
|
|
<view class="row-content">{{ detail.userName }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">寄送地址</view>
|
|
<view class="row-content">{{ detail.addressDesc }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">电话</view>
|
|
<view class="row-content">{{ detail.phone }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<!-- 上门 -->
|
|
<template v-else-if="detail.type == 2">
|
|
<view class="card">
|
|
<view class="card-header">上门检测预约信息</view>
|
|
<view class="flex row">
|
|
<view class="row-label">姓名</view>
|
|
<view class="row-content">{{ detail.userName }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">体检地址</view>
|
|
<view class="row-content">{{ detail.addressDesc }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">时间</view>
|
|
<view class="row-content highlight">{{ detail.timeDesc }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">电话</view>
|
|
<view class="row-content">{{ detail.phone }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<!-- 到店 -->
|
|
<template v-else-if="detail.type == 3">
|
|
<view class="card">
|
|
<view class="card-header">到店检测预约信息</view>
|
|
<view class="flex row">
|
|
<view class="row-label">姓名</view>
|
|
<view class="row-content">{{ detail.userName }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">时间</view>
|
|
<view class="row-content highlight">{{ detail.timeDesc }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">电话</view>
|
|
<view class="row-content">{{ detail.phone }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">医院</view>
|
|
<view class="row-content">{{ detail.hospitalDesc }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
|
|
<view class="flex bottom">
|
|
<!-- 自采 -->
|
|
<template v-if="detail.status == 1">
|
|
<button class="btn btn-plain" open-type="contact">客服</button>
|
|
<button class="btn" @click="openTrackingNoPopup">已回寄</button>
|
|
</template>
|
|
<!-- 上门, 到店, 预约失败 -->
|
|
<template v-else-if="[2, 3, 6].includes(detail.status)">
|
|
<button class="btn btn-plain" @click="onCancel">取消</button>
|
|
<button class="btn" @click="onEdit">修改</button>
|
|
</template>
|
|
<!-- 已完成 -->
|
|
<template v-else-if="detail.status == 4">
|
|
<button class="btn" @click="jumpToReportDetail">报告查看</button>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<checkupServicePopup ref="checkupServicePopup"></checkupServicePopup>
|
|
<checkupTrackingNoPopup ref="checkupTrackingNoPopup" @submitted="getData"></checkupTrackingNoPopup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import checkupServicePopup from '@/pages_order/checkup/checkupServicePopup.vue'
|
|
import checkupTrackingNoPopup from '@/pages_order/checkup/checkupTrackingNoPopup.vue'
|
|
|
|
export default {
|
|
components: {
|
|
checkupServicePopup,
|
|
checkupTrackingNoPopup,
|
|
},
|
|
data() {
|
|
return {
|
|
id: null,
|
|
detail: null,
|
|
hospitalOptions: [
|
|
{ id: '001', label: '湖南省长沙市湘雅第一医院' },
|
|
{ id: '002', label: '湖南省长沙市湘雅第二医院' },
|
|
{ id: '003', label: '湖南省长沙市湘雅第三医院' },
|
|
{ id: '004', label: '湖南省长沙市湘雅第四医院' },
|
|
]
|
|
}
|
|
},
|
|
onLoad(arg) {
|
|
this.id = arg.id
|
|
|
|
this.getData()
|
|
},
|
|
computed: {
|
|
orderSuccess() {
|
|
// todo: check status
|
|
return this.detail?.status < 5
|
|
},
|
|
statusDesc() {
|
|
const status = this.detail?.status
|
|
|
|
if (status < 4) {
|
|
return '预约成功'
|
|
}
|
|
|
|
if (status == 4) {
|
|
return '已完成'
|
|
}
|
|
|
|
if (status == 6) {
|
|
return '预约失败'
|
|
}
|
|
|
|
return ''
|
|
},
|
|
},
|
|
methods: {
|
|
getData() {
|
|
// todo: fetch by id
|
|
|
|
let detail = {
|
|
id: '003',
|
|
url: '/pages_order/static/product/detect-8.png',
|
|
title: '孕产妇体检套餐',
|
|
userName: '周小艺',
|
|
phone: '15558661691',
|
|
amount: 688,
|
|
area: ['海南省', '海口市', '秀英区'],
|
|
address: '秀英街道5单元183室',
|
|
hospital: '001',
|
|
createTime: '2025-04-28 08:14',
|
|
appointmentDate: '2025-04-28',
|
|
appointmentTime: ['08:00', '09:00'],
|
|
type: 2,
|
|
status: 4,
|
|
}
|
|
|
|
detail.addressDesc = this.getAddressDesc(detail)
|
|
detail.timeDesc = this.getTimeDesc(detail)
|
|
detail.hospitalDesc = this.getHospitalDesc(detail)
|
|
|
|
this.detail = detail
|
|
|
|
if ([2, 3].includes(this.detail.status)) {
|
|
this.$refs.checkupServicePopup.open()
|
|
}
|
|
},
|
|
getAddressDesc(data) {
|
|
if (!data) {
|
|
return ''
|
|
}
|
|
console.log('detail', data)
|
|
const { area, address } = data
|
|
console.log('area', area, 'address', address)
|
|
|
|
return `${(area || []).join('')}${address}`
|
|
},
|
|
getTimeDesc(data) {
|
|
if (!data) {
|
|
return ''
|
|
}
|
|
const { appointmentDate, appointmentTime } = data
|
|
|
|
return `${appointmentDate} ${(appointmentTime || []).join('～')}`
|
|
},
|
|
getHospitalDesc(data) {
|
|
const { hospital } = data
|
|
|
|
return this.hospitalOptions.find(item => item.id == hospital)?.label
|
|
},
|
|
openTrackingNoPopup() {
|
|
this.$refs.checkupTrackingNoPopup.open(this.id)
|
|
},
|
|
onEdit() {
|
|
this.$utils.navigateTo(`/pages_order/checkup/checkupBook/apply?id=${this.detail.id}&type=${this.detail.type}`)
|
|
},
|
|
onCancel() {
|
|
// todo: fetch
|
|
|
|
uni.showToast({
|
|
title: '取消成功',
|
|
});
|
|
|
|
setTimeout(() => {
|
|
this.$utils.navigateBack()
|
|
}, 800)
|
|
},
|
|
jumpToReportDetail() {
|
|
this.$utils.navigateTo(`/pages_order/checkup/checkupReport/index?id=${this.detail.id}`)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import './style.scss';
|
|
|
|
.status {
|
|
margin-bottom: 40rpx;
|
|
row-gap: 4rpx;
|
|
width: 100%;
|
|
padding: 24rpx 0;
|
|
box-sizing: border-box;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
line-height: 1.4;
|
|
color: #252545;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
|
|
.icon {
|
|
width: 84rpx;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
&-content {
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
color: #393939;
|
|
|
|
&.highlight {
|
|
font-weight: 500;
|
|
color: #7451DE;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
align-items: flex-start;
|
|
column-gap: 32rpx;
|
|
|
|
.btn {
|
|
flex: 1;
|
|
|
|
&-plain {
|
|
padding: 14rpx 0;
|
|
color: #252545;
|
|
background: transparent;
|
|
border: 2rpx solid #252545;
|
|
}
|
|
}
|
|
}
|
|
</style>
|