detail.vue
3.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<template>
<view class="page-shell booking-detail-page">
<view class="page-blur"></view>
<view class="page-blur-secondary"></view>
<view class="page-blur-tertiary"></view>
<view class="page-content subpage-content">
<view class="subpage-nav">
<view class="subpage-back" @tap="goBack">‹</view>
<view class="subpage-title-wrap">
<text class="subpage-title">预约详情</text>
<text class="subpage-subtitle">本次到店信息、提醒与门店联络方式</text>
</view>
</view>
<view class="subpage-hero glass-card">
<text class="hero-kicker">{{ record.status }}</text>
<text class="hero-title">{{ record.store }}</text>
<text class="hero-desc">{{ record.date }} · {{ record.displayTime }}</text>
<view class="meta-grid">
<text class="meta-pill">护理顾问 {{ record.therapist }}</text>
<text class="meta-pill rose">空间 {{ record.room }}</text>
</view>
</view>
<view class="subpage-card">
<view class="section-head">
<text class="section-title">确认进度</text>
<text class="section-link">{{ record.confirmState }}</text>
</view>
<view class="flow-tip">
<text class="flow-title">{{ consume ? '本次护理安排已补充完整' : '电话确认后，会补充本次护理安排' }}</text>
<text class="flow-desc">
{{
consume
? '护理内容、房间与健康师已为你安排妥当，如现场状态有变化，门店也会再为你微调。'
: '预约提交后，门店会先与你电话沟通，再把本次到店安排慢慢补充完整。'
}}
</text>
</view>
</view>
<view class="subpage-card">
<view class="info-list">
<view class="info-row">
<text class="info-label">预约编号</text>
<text class="info-value">LQBK{{ record.id }}</text>
</view>
<view class="info-row">
<text class="info-label">联系电话</text>
<text class="info-value">{{ record.phone }}</text>
</view>
<view class="info-row">
<text class="info-label">护理备注</text>
<text class="info-value">{{ record.note }}</text>
</view>
<view class="info-row">
<text class="info-label">到店提醒</text>
<text class="info-value">建议提前 10 分钟到店，如需调整请尽早联系门店</text>
</view>
</view>
</view>
<view class="cta-row">
<view class="secondary-button" @tap="viewConsume">{{ consume ? '查看护理安排' : '查看确认进度' }}</view>
<view class="primary-button" @tap="callStore">联系门店</view>
</view>
</view>
</view>
</template>
<script>
import { findRecordById, findConsumeByRecordId } from '@/data/mock'
export default {
data() {
return {
record: findRecordById(1001),
consume: findConsumeByRecordId(1001)
}
},
onLoad(options) {
this.record = findRecordById(options.id)
this.consume = findConsumeByRecordId(options.id)
},
methods: {
goBack() {
uni.navigateBack({
fail: () => {
uni.redirectTo({ url: '/packageBooking/record/record' })
}
})
},
callStore() {
uni.showToast({ title: `已为您准备 ${this.record.store} 联络方式`, icon: 'none' })
},
viewConsume() {
uni.navigateTo({ url: `/packageBooking/consume/consume?recordId=${this.record.id}` })
}
}
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/subpage.scss';
.flow-tip {
padding: 6rpx 0;
}
.flow-title,
.flow-desc {
display: block;
}
.flow-title {
font-size: 28rpx;
font-weight: 600;
color: $text-primary;
}
.flow-desc {
margin-top: 12rpx;
font-size: 24rpx;
line-height: 1.8;
color: $text-secondary;
}
</style>