leiking
321 lines
8.0 KiB
Vue
321 lines
8.0 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="card filters">
|
|
<view class="row sc">
|
|
<view
|
|
v-for="s in tabs"
|
|
:key="s.value"
|
|
class="chip"
|
|
:class="{ on: s.value === active }"
|
|
hover-class="none"
|
|
@tap="setActive(s.value)"
|
|
>
|
|
{{ s.label }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list">
|
|
<view v-for="o in viewList" :key="o.id" class="card item" @tap="open(o.id)">
|
|
<view class="row between">
|
|
<view class="n">{{ o.projectName }}</view>
|
|
<view
|
|
class="st"
|
|
:class="{
|
|
w: o.uiStatus === '待到店',
|
|
g: o.uiStatus === '已完成',
|
|
d: o.uiStatus === '已取消',
|
|
x: o.uiStatus === '已过期'
|
|
}"
|
|
>
|
|
{{ o.uiStatus }}
|
|
</view>
|
|
</view>
|
|
<view class="muted meta">{{ o.appointmentDate }} {{ o.appointmentSlot }} · {{ o.technicianName }}</view>
|
|
|
|
<view class="ops row" v-if="o.uiStatus === '待到店'">
|
|
<view class="op" @tap.stop="reschedule(o)">改约</view>
|
|
<view class="op danger" @tap.stop="cancel(o)">取消预约</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<AiFloat />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import AiFloat from '@/components/AiFloat.vue'
|
|
|
|
export default {
|
|
components: { AiFloat },
|
|
data() {
|
|
const rows = [
|
|
{
|
|
id: 'apt_demo_pending_001',
|
|
createdAt: Date.now() - 2 * 60 * 60 * 1000,
|
|
status: '待核销',
|
|
uiStatus: '待到店',
|
|
group: 'pending',
|
|
amount: 238,
|
|
projectId: 'p3',
|
|
projectName: '补水修护屏障护理',
|
|
durationMin: 80,
|
|
orderType: 'booking',
|
|
appointmentDate: '2026-06-22',
|
|
appointmentSlot: '10:30',
|
|
technicianName: '许言',
|
|
note: '想要舒缓泛红',
|
|
verifyCode: 'VCAP20260621001'
|
|
},
|
|
{
|
|
id: 'apt_demo_pending_002',
|
|
createdAt: Date.now() - 6 * 60 * 60 * 1000,
|
|
status: '待核销',
|
|
uiStatus: '待到店',
|
|
group: 'pending',
|
|
amount: 188,
|
|
projectId: 'p4',
|
|
projectName: '肩颈舒缓筋膜放松',
|
|
durationMin: 60,
|
|
orderType: 'booking',
|
|
appointmentDate: '2026-06-24',
|
|
appointmentSlot: '19:00',
|
|
technicianName: '周晴',
|
|
note: '',
|
|
verifyCode: 'VCAP20260621002'
|
|
},
|
|
{
|
|
id: 'apt_demo_done_001',
|
|
createdAt: Date.now() - 9 * 24 * 60 * 60 * 1000,
|
|
status: '已完成',
|
|
uiStatus: '已完成',
|
|
group: 'done',
|
|
amount: 168,
|
|
projectId: 'p2',
|
|
projectName: '深层清洁黑头管理',
|
|
durationMin: 75,
|
|
orderType: 'booking',
|
|
appointmentDate: '2026-06-12',
|
|
appointmentSlot: '15:00',
|
|
technicianName: '林安',
|
|
note: 'T区出油严重',
|
|
verifyCode: 'VCAP20260621003'
|
|
},
|
|
{
|
|
id: 'apt_demo_done_002',
|
|
createdAt: Date.now() - 15 * 24 * 60 * 60 * 1000,
|
|
status: '已完成',
|
|
uiStatus: '已完成',
|
|
group: 'done',
|
|
amount: 99,
|
|
projectId: 'p1',
|
|
projectName: '水氧净透体验',
|
|
durationMin: 60,
|
|
orderType: 'booking',
|
|
appointmentDate: '2026-06-06',
|
|
appointmentSlot: '11:30',
|
|
technicianName: '系统分配',
|
|
note: '',
|
|
verifyCode: 'VCAP20260621004'
|
|
},
|
|
{
|
|
id: 'apt_demo_canceled_001',
|
|
createdAt: Date.now() - 3 * 24 * 60 * 60 * 1000,
|
|
status: '已取消',
|
|
uiStatus: '已取消',
|
|
group: 'canceled',
|
|
amount: 238,
|
|
projectId: 'p3',
|
|
projectName: '补水修护屏障护理',
|
|
durationMin: 80,
|
|
orderType: 'booking',
|
|
appointmentDate: '2026-06-23',
|
|
appointmentSlot: '16:00',
|
|
technicianName: '许言',
|
|
note: '',
|
|
verifyCode: 'VCAP20260621005'
|
|
},
|
|
{
|
|
id: 'apt_demo_canceled_002',
|
|
createdAt: Date.now() - 7 * 24 * 60 * 60 * 1000,
|
|
status: '已取消',
|
|
uiStatus: '已取消',
|
|
group: 'canceled',
|
|
amount: 188,
|
|
projectId: 'p4',
|
|
projectName: '肩颈舒缓筋膜放松',
|
|
durationMin: 60,
|
|
orderType: 'booking',
|
|
appointmentDate: '2026-06-17',
|
|
appointmentSlot: '13:30',
|
|
technicianName: '周晴',
|
|
note: '',
|
|
verifyCode: 'VCAP20260621008'
|
|
},
|
|
{
|
|
id: 'apt_demo_expired_001',
|
|
createdAt: Date.now() - 26 * 60 * 60 * 1000,
|
|
status: '待核销',
|
|
uiStatus: '已过期',
|
|
group: 'expired',
|
|
amount: 188,
|
|
projectId: 'p4',
|
|
projectName: '肩颈舒缓筋膜放松',
|
|
durationMin: 60,
|
|
orderType: 'booking',
|
|
appointmentDate: '2026-06-20',
|
|
appointmentSlot: '13:30',
|
|
technicianName: '周晴',
|
|
note: '',
|
|
verifyCode: 'VCAP20260621006'
|
|
},
|
|
{
|
|
id: 'apt_demo_expired_002',
|
|
createdAt: Date.now() - 4 * 24 * 60 * 60 * 1000,
|
|
status: '待核销',
|
|
uiStatus: '已过期',
|
|
group: 'expired',
|
|
amount: 99,
|
|
projectId: 'p1',
|
|
projectName: '水氧净透体验',
|
|
durationMin: 60,
|
|
orderType: 'booking',
|
|
appointmentDate: '2026-06-19',
|
|
appointmentSlot: '18:00',
|
|
technicianName: '系统分配',
|
|
note: '',
|
|
verifyCode: 'VCAP20260621007'
|
|
}
|
|
]
|
|
|
|
return {
|
|
tabs: [
|
|
{ value: 'pending', label: '待到店' },
|
|
{ value: 'done', label: '已完成' },
|
|
{ value: 'canceled', label: '已取消' },
|
|
{ value: 'expired', label: '已过期' }
|
|
],
|
|
active: 'pending',
|
|
rows,
|
|
viewList: rows.filter((x) => x.group === 'pending')
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.apply()
|
|
},
|
|
onShow() {
|
|
this.apply()
|
|
},
|
|
methods: {
|
|
apply() {
|
|
const v = this.rows.filter((x) => x.group === this.active)
|
|
this.viewList = v && v.length ? v : this.rows.slice(0, 3)
|
|
},
|
|
setActive(v) {
|
|
if (!v || v === this.active) return
|
|
this.active = v
|
|
this.apply()
|
|
},
|
|
open(id) {
|
|
const o = this.rows.find((x) => x.id === id) || this.rows[0]
|
|
const payload = encodeURIComponent(JSON.stringify(o))
|
|
uni.navigateTo({ url: `/pages/orders/detail?payload=${payload}` })
|
|
},
|
|
goProjects() {
|
|
uni.switchTab({ url: '/pages/projects/list' })
|
|
},
|
|
reschedule(o) {
|
|
uni.navigateTo({ url: `/pages/booking/create?projectId=${o.projectId}` })
|
|
},
|
|
cancel(o) {
|
|
uni.showModal({
|
|
title: '确认取消',
|
|
content: '取消后该预约将变更为已取消（原型演示）。',
|
|
success: (res) => {
|
|
if (!res.confirm) return
|
|
this.rows = this.rows.map((x) => (x.id === o.id ? { ...x, status: '已取消', uiStatus: '已取消', group: 'canceled' } : x))
|
|
this.apply()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.filters {
|
|
padding: 16rpx;
|
|
}
|
|
.sc {
|
|
white-space: nowrap;
|
|
}
|
|
.chip {
|
|
padding: 14rpx 18rpx;
|
|
margin-right: 12rpx;
|
|
border-radius: 999rpx;
|
|
font-size: 26rpx;
|
|
background: rgba(17, 24, 39, 0.06);
|
|
color: #111827;
|
|
flex: 0 0 auto;
|
|
}
|
|
.on {
|
|
background: rgba(59, 130, 246, 0.14);
|
|
color: #1d4ed8;
|
|
}
|
|
.list {
|
|
margin-top: 18rpx;
|
|
}
|
|
.item {
|
|
padding: 22rpx;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
.n {
|
|
font-size: 32rpx;
|
|
font-weight: 950;
|
|
max-width: 520rpx;
|
|
}
|
|
.st {
|
|
padding: 10rpx 14rpx;
|
|
border-radius: 999rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 900;
|
|
}
|
|
.w {
|
|
background: rgba(59, 130, 246, 0.16);
|
|
color: #1d4ed8;
|
|
}
|
|
.g {
|
|
background: rgba(16, 185, 129, 0.16);
|
|
color: #047857;
|
|
}
|
|
.d {
|
|
background: rgba(239, 68, 68, 0.12);
|
|
color: #b91c1c;
|
|
}
|
|
.x {
|
|
background: rgba(17, 24, 39, 0.12);
|
|
color: #111827;
|
|
}
|
|
.meta {
|
|
margin-top: 12rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
.ops {
|
|
margin-top: 16rpx;
|
|
gap: 12rpx;
|
|
}
|
|
.op {
|
|
padding: 12rpx 16rpx;
|
|
border-radius: 18rpx;
|
|
background: rgba(17, 24, 39, 0.06);
|
|
font-size: 26rpx;
|
|
font-weight: 800;
|
|
}
|
|
.danger {
|
|
background: rgba(239, 68, 68, 0.12);
|
|
color: #b91c1c;
|
|
}
|
|
</style>
|
|
|