初始化
This commit is contained in:
leiking
@@ -0,0 +1,320 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user