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.
327 lines
7.6 KiB
327 lines
7.6 KiB
<template>
|
|
<view class="card" @click="jumpToProductDetail">
|
|
<view class="flex top">
|
|
<view class="title">{{ data.title }}</view>
|
|
<view :class="['flex', 'status', `status-${flag}`]">{{ flagDesc }}</view>
|
|
</view>
|
|
<view class="flex main">
|
|
<image class="img" :src="coverImg" mode="scaleToFill"></image>
|
|
<view class="info">
|
|
<view class="flex row">
|
|
<view class="row-label">客户姓名：</view>
|
|
<view class="row-content">{{ data.name }}</view>
|
|
</view>
|
|
<template v-if="data.status == 0">
|
|
<view class="flex row">
|
|
<view class="row-label">下单时间：</view>
|
|
<view class="row-content">{{ data.createTime }}</view>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view class="flex row">
|
|
<view class="row-label">检测类型：</view>
|
|
<view class="row-content">{{ subscribeTypeDesc }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">预约时间：</view>
|
|
<view class="row-content">{{ timeDesc }}</view>
|
|
</view>
|
|
</template>
|
|
<view class="flex row">
|
|
<view class="row-label">联系电话：</view>
|
|
<view class="row-content">{{ data.phone }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex bottom">
|
|
<view class="flex price">
|
|
<text class="price-label">总价格：</text>
|
|
<text class="price-unit">¥</text><text class="price-value">{{ data.price }}</text>
|
|
</view>
|
|
<view class="flex btns">
|
|
<!-- 待预约 -->
|
|
<template v-if="data.status == '0'">
|
|
<button class="btn" @click.stop="onBook">检测预约</button>
|
|
</template>
|
|
<!-- 待检测 -->
|
|
<template v-else-if="data.status == '1'">
|
|
<!-- 自采 -->
|
|
<template v-if="data.subscribeType == '0'">
|
|
<button class="btn" @click.stop="onSendBackOnline">线上回寄试剂盒</button>
|
|
</template>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 状态 0待预约 1待检测 2已完成 3已取消
|
|
const STATUS_AND_DESC_MAPPING = {
|
|
0: '待预约',
|
|
1: '待检测',
|
|
2: '已完成',
|
|
3: '已取消',
|
|
// todo: check 预约失败
|
|
|
|
// 0: '待预约',
|
|
// 1: '自采',
|
|
// 2: '上门',
|
|
// 3: '到店',
|
|
// 4: '已完成',
|
|
// 5: '已取消',
|
|
// 6: '预约失败',
|
|
}
|
|
|
|
const FLAG_AND_DESC_MAPPING = {
|
|
0: '待预约',
|
|
1: '自采',
|
|
2: '上门',
|
|
3: '到店',
|
|
4: '已完成',
|
|
5: '已取消',
|
|
6: '预约失败',
|
|
}
|
|
|
|
// 可选预约类型 0自采，1上门，2到店，3已取消
|
|
const SUBSCRIBE_TYPE_AND_DESC_MAPPING = {
|
|
0: '自采',
|
|
1: '上门',
|
|
2: '到店',
|
|
3: '已取消',
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
coverImg() {
|
|
const { orderProduct } = this.data || {}
|
|
const { image } = orderProduct || {}
|
|
|
|
return image?.split?.(',')?.[0]
|
|
},
|
|
subscribeTypeDesc() {
|
|
const { subscribeType } = this.data
|
|
|
|
return SUBSCRIBE_TYPE_AND_DESC_MAPPING[subscribeType]
|
|
},
|
|
flag() {
|
|
const { status, subscribeType } = this.data
|
|
|
|
// 0: '待预约',
|
|
// 1: '自采',
|
|
// 2: '上门',
|
|
// 3: '到店',
|
|
// 4: '已完成',
|
|
// 5: '已取消',
|
|
// todo: check 预约失败
|
|
// 6: '预约失败',
|
|
|
|
// status 状态 0待预约 1待检测 2已完成 3已取消
|
|
if (status == '0') { // 待预约
|
|
return 0 // 待预约
|
|
}
|
|
if (status == '1') { // 待检测
|
|
// subscribeType 可选预约类型 0自采，1上门，2到店，3已取消
|
|
if (subscribeType == '0') {
|
|
return 1 // 自采
|
|
} else if (subscribeType == '1') {
|
|
return 2 // 上门
|
|
} else if (subscribeType == '2') {
|
|
return 3 // 到店
|
|
}
|
|
return
|
|
}
|
|
if (status == '2') { // 已完成
|
|
return 4 // 已完成
|
|
}
|
|
if (status == '3') { // 已取消
|
|
return 5 // 已取消
|
|
}
|
|
},
|
|
flagDesc() {
|
|
return FLAG_AND_DESC_MAPPING[this.flag]
|
|
},
|
|
timeDesc() {
|
|
const { subscribeDate, subscribeTime } = this.data || {}
|
|
|
|
if (!subscribeTime) {
|
|
return '--'
|
|
}
|
|
|
|
const timeRange = JSON.parse(subscribeTime).join('～')
|
|
|
|
return `${subscribeDate} ${timeRange}`
|
|
},
|
|
},
|
|
methods: {
|
|
onBook() {
|
|
this.$utils.navigateTo(`/pages_order/checkup/checkupBook/apply?id=${this.data.id}&type=${this.data.type}`)
|
|
},
|
|
onSendBackOnline() {
|
|
this.$emit('sendBack')
|
|
},
|
|
jumpToProductDetail() {
|
|
console.log(this.data.id, 'jumpToProductDetail')
|
|
// this.$utils.navigateTo(`/pages_order/checkup/checkupBook/detail?id=${this.data.id}`)
|
|
|
|
// todo: check
|
|
if (this.data.status == '0') { // 0-待预约
|
|
// this.$utils.navigateTo(`/pages_order/order/orderDetail/index?id=${this.data.id}`)
|
|
} else {
|
|
this.$utils.navigateTo(`/pages_order/checkup/checkupBook/detail?id=${this.data.id}`)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.card {
|
|
width: 100%;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
background: #FAFAFF;
|
|
border: 2rpx solid #FFFFFF;
|
|
border-radius: 32rpx;
|
|
}
|
|
|
|
.top {
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
line-height: 1.4;
|
|
color: #252545;
|
|
}
|
|
|
|
.status {
|
|
display: inline-flex;
|
|
min-width: 120rpx;
|
|
padding: 6rpx 0;
|
|
box-sizing: border-box;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
color: #252545;
|
|
background: #F3F3F3;
|
|
border-radius: 12rpx;
|
|
|
|
&-0 {
|
|
color: #7D27E0;
|
|
background: #F5EEFD;
|
|
}
|
|
|
|
&-1 {
|
|
color: #2799E0;
|
|
background: #EEF7FD;
|
|
}
|
|
|
|
&-2 {
|
|
color: #E53C29;
|
|
background: #FDE7E5;
|
|
}
|
|
|
|
&-3 {
|
|
color: #10A934;
|
|
background: #E2FDE9;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
margin: 24rpx 0;
|
|
column-gap: 24rpx;
|
|
|
|
.img {
|
|
flex: none;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
padding: 24rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 32rpx;
|
|
}
|
|
|
|
.row {
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
column-gap: 4rpx;
|
|
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
line-height: 1.4;
|
|
|
|
&-label {
|
|
flex: none;
|
|
color: #8B8B8B;
|
|
}
|
|
|
|
&-content {
|
|
color: #393939;
|
|
}
|
|
}
|
|
|
|
.row + .row {
|
|
margin-top: 16rpx;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
justify-content: space-between;
|
|
|
|
.price {
|
|
column-gap: 8rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
|
|
&-label {
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #8B8B8B;
|
|
}
|
|
|
|
&-unit {
|
|
font-size: 24rpx;
|
|
color: #7451DE;
|
|
}
|
|
|
|
&-value {
|
|
font-size: 32rpx;
|
|
color: #7451DE;
|
|
}
|
|
}
|
|
|
|
.btns {
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
column-gap: 16rpx;
|
|
}
|
|
|
|
.btn {
|
|
padding: 10rpx 22rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
line-height: 1.4;
|
|
color: #393939;
|
|
border: 2rpx solid #252545;
|
|
border-radius: 32rpx;
|
|
}
|
|
}
|
|
</style>
|