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.
328 lines
9.4 KiB
328 lines
9.4 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">
|
|
<!-- status 状态 0待预约 1待检测 2已完成 3已取消 -->
|
|
<template v-if="['1', '2'].includes(detail.status)">
|
|
<image class="icon" src="@/pages_order/static/checkup/icon-success.png" mode="widthFix"></image>
|
|
</template>
|
|
<template v-else-if="detail.status == '3'">
|
|
<image class="icon" src="@/pages_order/static/checkup/icon-error.png" mode="widthFix"></image>
|
|
</template>
|
|
<view>{{ statusDesc }}</view>
|
|
</view>
|
|
|
|
<!-- 自采 -->
|
|
<template v-if="detail.subscribeType == '0'">
|
|
<view class="card">
|
|
<view class="card-header">自采检测预约信息</view>
|
|
<view class="flex row">
|
|
<view class="row-label">姓名</view>
|
|
<view class="row-content">{{ detail.name }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">寄送地址</view>
|
|
<view class="row-content">{{ 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.subscribeType == '1'">
|
|
<view class="card">
|
|
<view class="card-header">上门检测预约信息</view>
|
|
<view class="flex row">
|
|
<view class="row-label">姓名</view>
|
|
<view class="row-content">{{ detail.name }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">体检地址</view>
|
|
<view class="row-content">{{ addressDesc }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">时间</view>
|
|
<view class="row-content highlight">{{ 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.subscribeType == '2'">
|
|
<view class="card">
|
|
<view class="card-header">到店检测预约信息</view>
|
|
<view class="flex row">
|
|
<view class="row-label">姓名</view>
|
|
<view class="row-content">{{ detail.name }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">时间</view>
|
|
<view class="row-content highlight">{{ 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">{{ hospitalDesc }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
|
|
<view class="flex bottom" v-if="['0', '1', '2'].includes(detail.status)">
|
|
<!-- status 状态 0待预约 1待检测 2已完成 3已取消 -->
|
|
<!-- 待预约 -->
|
|
<template v-if="detail.status == '0'">
|
|
<button class="btn" @click="onBook">检测预约</button>
|
|
</template>
|
|
<!-- 待检测 -->
|
|
<template v-else-if="detail.status == '1'">
|
|
<!-- 自采 -->
|
|
<template v-if="detail.subscribeType == '0'">
|
|
<!-- <button class="btn btn-plain" open-type="contact">客服</button> -->
|
|
<button plain class="flex flex-column btn btn-service" open-type="contact">
|
|
<image class="btn-service-icon" src="@/pages_order/static/order/icon-service.png" mode="widthFix"></image>
|
|
<view>联系客服</view>
|
|
</button>
|
|
<button class="btn" @click="openTrackingNoPopup">已回寄</button>
|
|
</template>
|
|
<!-- 上门, 到店 -->
|
|
<template v-else-if="['1', '2'].includes(detail.subscribeType)">
|
|
<button class="btn btn-plain" @click="onCancel">取消</button>
|
|
<button class="btn" @click="onEdit">修改</button>
|
|
</template>
|
|
</template>
|
|
<!-- 已完成 -->
|
|
<template v-else-if="detail.status == '2'">
|
|
<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: []
|
|
}
|
|
},
|
|
async onLoad(arg) {
|
|
const { id } = arg
|
|
this.id = id
|
|
|
|
await this.getData()
|
|
|
|
if (this.detail?.subscribeType == '2') { // 到店
|
|
this.fetchHospitalOptions()
|
|
}
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
this.getData()
|
|
},
|
|
computed: {
|
|
statusDesc() {
|
|
// status 状态 0待预约 1待检测 2已完成 3已取消
|
|
const { status } = this.detail || {}
|
|
|
|
if (status == '0') {
|
|
return '待预约'
|
|
}
|
|
|
|
if (status == '1') {
|
|
return '预约成功'
|
|
}
|
|
|
|
if (status == '2') {
|
|
return '已完成'
|
|
}
|
|
|
|
if (status == '3') {
|
|
return '已取消'
|
|
}
|
|
|
|
return ''
|
|
},
|
|
addressDesc() {
|
|
const { sendAddress, sendAddressDetail } = this.detail || {}
|
|
|
|
return [sendAddress, sendAddressDetail].filter(val => val).join('')
|
|
},
|
|
timeDesc() {
|
|
const { subscribeDate, subscribeTime } = this.detail || {}
|
|
|
|
if (!subscribeTime) {
|
|
return '--'
|
|
}
|
|
|
|
const timeRange = JSON.parse(subscribeTime).join('～')
|
|
|
|
return `${subscribeDate} ${timeRange}`
|
|
},
|
|
hospitalDesc() {
|
|
const { hospitalId } = this.detail || {}
|
|
|
|
if (!hospitalId) {
|
|
return '--'
|
|
}
|
|
|
|
return this.hospitalOptions?.find?.(item => item.id == hospitalId)?.name || '--'
|
|
},
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
try {
|
|
this.detail = await this.$fetch('getSubscribeDetail', { id: this.id })
|
|
|
|
const { status, subscribeType } = this.detail
|
|
|
|
// status: 1待检测 & subscribeType: 1上门，2到店
|
|
if (status == '1' && ['1', '2'].includes(subscribeType)) {
|
|
this.$refs.checkupServicePopup.open()
|
|
}
|
|
} catch (err) {
|
|
|
|
}
|
|
|
|
uni.stopPullDownRefresh()
|
|
|
|
},
|
|
async fetchHospitalOptions() {
|
|
try {
|
|
this.hospitalOptions = await this.$fetch('getSubscribeHospital', { productId: this.detail.productId })
|
|
} catch (err) {
|
|
|
|
}
|
|
},
|
|
openTrackingNoPopup() {
|
|
this.$refs.checkupTrackingNoPopup.open(this.id)
|
|
},
|
|
onBook() {
|
|
this.$utils.redirectTo(`/pages_order/checkup/checkupBook/apply?id=${this.detail.id}&type=${this.detail.type}`)
|
|
},
|
|
onEdit() {
|
|
this.$utils.redirectTo(`/pages_order/checkup/checkupBook/apply?id=${this.detail.id}&type=${this.detail.type}`)
|
|
},
|
|
async onCancel() {
|
|
|
|
try {
|
|
await this.$fetch('cancelSubscribe', { id: this.detail.id })
|
|
|
|
uni.showToast({
|
|
title: '取消成功',
|
|
});
|
|
|
|
// setTimeout(() => {
|
|
// this.$utils.navigateBack()
|
|
// }, 800)
|
|
|
|
this.getData()
|
|
} catch (err) {
|
|
|
|
}
|
|
},
|
|
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 {
|
|
width: auto;
|
|
flex: 1;
|
|
|
|
&-plain {
|
|
padding: 14rpx 0;
|
|
color: #252545;
|
|
background: transparent;
|
|
border: 2rpx solid #252545;
|
|
}
|
|
|
|
&-service {
|
|
flex: none;
|
|
row-gap: 4rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
line-height: 1.1;
|
|
color: #999999;
|
|
background: transparent;
|
|
border: none;
|
|
|
|
&-icon {
|
|
width: 52rpx;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|