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.
241 lines
5.5 KiB
241 lines
5.5 KiB
<template>
|
|
<view class="card" @click="jumpToProductDetail">
|
|
<view class="flex top">
|
|
<view class="title">{{ data.title }}</view>
|
|
<view :class="['flex', 'status', `status-${data.status}`]">{{ statusDesc }}</view>
|
|
</view>
|
|
<view class="flex main">
|
|
<image class="img" :src="data.url" mode="scaleToFill"></image>
|
|
<view class="info">
|
|
<view class="flex row">
|
|
<view class="row-label">客户姓名：</view>
|
|
<view class="row-content">{{ data.userName }}</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">{{ data.typeDesc }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">预约时间：</view>
|
|
<view class="row-content">{{ data.appointmentTime || '-' }}</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.amount.toFixed(2) }}</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">
|
|
<button class="btn" @click.stop="onSendBackOnline">线上回寄试剂盒</button>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const STATUS_AND_DESC_MAPPING = {
|
|
0: '待预约',
|
|
1: '自采',
|
|
2: '上门',
|
|
3: '到店',
|
|
4: '已完成',
|
|
5: '已取消',
|
|
6: '预约失败',
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
statusDesc() {
|
|
return STATUS_AND_DESC_MAPPING[this.data.status]
|
|
},
|
|
},
|
|
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')
|
|
if ([0, 5].includes(this.data.status) == 5) { // 0-待预约 5-已取消
|
|
this.$utils.navigateTo(`/pages_order/order/orderDetail/index?id=${this.data.id}`)
|
|
// todo: check product id
|
|
// this.$utils.navigateTo(`/pages_order/product/productDetail?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 {
|
|
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>
|