antissoft / lvqianmeiye_ERP

<template>
	<view class="booking-page">
		<custom-navbar title="预约服务" bgColor="rgba(248,251,250,0.92)">
			<template v-slot:right>
				<view class="nav-record-btn" @click="goBookingRecord">
					<text>预约记录</text>
				</view>
			</template>
		</custom-navbar>

		<scroll-view class="page-body" scroll-y :style="{ height: scrollHeight + 'px' }">
			<view class="booking-hero">
				<view class="booking-hero__badge"></view>
			</view>

			<view class="form-shell">
				<view class="form-panel">
					<view class="panel-head">
						<text class="panel-head__title">预约信息</text>
					</view>

					<view class="field-card" @click="showProjectPicker = true">
						<view class="field-card__main">
							<text class="field-card__label">预约项目</text>
							<text class="field-card__value" :class="{ 'field-card__value--selected': selectedRight }">
								{{ selectedRight ? selectedRight.ItemName + '（剩余' + selectedRight.RemainingCount + '次）' : '请选择预约项目' }}
							</text>
						</view>
						<view class="field-card__arrow"></view>
					</view>

					<view class="field-card" @click="showTechPicker = true">
						<view class="field-card__main">
							<text class="field-card__label">预约健康师</text>
							<text class="field-card__value" :class="{ 'field-card__value--selected': selectedTech }">
								{{ selectedTech ? selectedTech.name : '请选择健康师' }}
							</text>
						</view>
						<view class="field-card__arrow"></view>
					</view>
				</view>

				<view class="form-panel">
					<view class="panel-head panel-head--spread">
						<text class="panel-head__title">选择日期</text>
						<view class="panel-head__action" @click="showAllDates = !showAllDates">
							<text>{{ showAllDates ? '收起' : '更多日期' }}</text>
							<view class="panel-head__arrow" :class="{ 'panel-head__arrow--up': showAllDates }"></view>
						</view>
					</view>

					<scroll-view
						v-if="!showAllDates"
						class="date-scroll"
						scroll-x
						:scroll-into-view="'date-' + selectedDateIdx"
						scroll-with-animation
					>
						<view class="date-scroll__inner">
							<view
								v-for="(d, idx) in visibleDates"
								:key="idx"
								:id="'date-' + idx"
								class="date-chip"
								:class="{ 'date-chip--active': selectedDateIdx === idx }"
								@click="selectDate(idx)"
							>
								<text v-if="d.label" class="date-chip__label">{{ d.label }}</text>
								<text class="date-chip__day">{{ d.dayStr }}</text>
								<text class="date-chip__week">{{ d.weekStr }}</text>
							</view>
						</view>
					</scroll-view>

					<view class="date-grid" v-else>
						<view
							v-for="(d, idx) in dateList"
							:key="idx"
							class="date-grid__item"
							:class="{ 'date-grid__item--active': selectedDateIdx === idx }"
							@click="selectDate(idx)"
						>
							<text class="date-grid__day">{{ d.monthDay }}</text>
							<text class="date-grid__week">{{ d.weekStr }}</text>
							<text v-if="d.label" class="date-grid__label">{{ d.label }}</text>
						</view>
					</view>
				</view>

				<view class="form-panel">
					<view class="panel-head">
						<text class="panel-head__title">选择时间段</text>
					</view>
					<view class="time-grid">
						<view class="time-card">
							<text class="time-card__label">开始时间</text>
							<picker mode="time" :value="startTime" @change="onStartTimeChange">
								<view class="time-card__picker">
									<text :class="{ 'time-card__picker--placeholder': !startTime }">{{ startTime || '请选择' }}</text>
									<view class="time-card__arrow"></view>
								</view>
							</picker>
						</view>
						<view class="time-card">
							<text class="time-card__label">结束时间</text>
							<picker mode="time" :value="endTime" @change="onEndTimeChange">
								<view class="time-card__picker">
									<text :class="{ 'time-card__picker--placeholder': !endTime }">{{ endTime || '请选择' }}</text>
									<view class="time-card__arrow"></view>
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>

			<view class="bottom-spacer"></view>
		</scroll-view>

		<view class="bottom-bar">
			<view class="bottom-bar__summary">
				<view class="summary-item" v-if="selectedRight">
					<view class="summary-item__dot"></view>
					<text>{{ selectedRight.ItemName }}</text>
				</view>
				<view class="summary-item" v-if="selectedDateIdx !== null && startTime && endTime">
					<view class="summary-item__dot summary-item__dot--orange"></view>
					<text>{{ dateList[selectedDateIdx].monthDay }} {{ startTime }}-{{ endTime }}</text>
				</view>
			</view>
			<view class="bottom-bar__btn" :class="{ 'bottom-bar__btn--disabled': !canSubmit }" @click="submitBooking">
				<text>确认预约</text>
			</view>
		</view>

		<view class="picker-mask" v-if="showProjectPicker" @click="showProjectPicker = false">
			<view class="picker-sheet" @click.stop :style="{ paddingBottom: safeBottom + 'px' }">
				<view class="picker-sheet__header">
					<text class="picker-sheet__title">选择预约项目</text>
					<view class="picker-sheet__close" @click="showProjectPicker = false">
						<view class="ico-close"></view>
					</view>
				</view>
				<scroll-view class="picker-sheet__body" scroll-y>
					<view
						v-for="(item, idx) in availableRights"
						:key="idx"
						class="option-card"
						:class="{ 'option-card--active': selectedRight && selectedRight.ItemName === item.ItemName }"
						@click="selectProject(item)"
					>
						<view>
							<text class="option-card__title">{{ item.ItemName }}</text>
							<text class="option-card__desc">剩余 {{ item.RemainingCount }} 次</text>
						</view>
						<view class="option-card__check" v-if="selectedRight && selectedRight.ItemName === item.ItemName">
							<view class="ico-check"></view>
						</view>
					</view>
					<view v-if="!availableRights.length" class="picker-empty">
						<text>暂无可用权益</text>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="picker-mask" v-if="showTechPicker" @click="showTechPicker = false">
			<view class="picker-sheet" @click.stop :style="{ paddingBottom: safeBottom + 'px' }">
				<view class="picker-sheet__header">
					<text class="picker-sheet__title">选择健康师</text>
					<view class="picker-sheet__close" @click="showTechPicker = false">
						<view class="ico-close"></view>
					</view>
				</view>
				<scroll-view class="picker-sheet__body" scroll-y>
					<view
						v-for="(tech, idx) in techList"
						:key="idx"
						class="option-card option-card--tech"
						:class="{ 'option-card--active': selectedTech && selectedTech.id === tech.id }"
						@click="selectTech(tech)"
					>
						<view class="option-card__avatar">{{ tech.name.slice(0, 1) }}</view>
						<view class="option-card__content">
							<text class="option-card__title">{{ tech.name }}</text>
							<text class="option-card__desc">{{ tech.position }}</text>
						</view>
						<view class="option-card__check" v-if="selectedTech && selectedTech.id === tech.id">
							<view class="ico-check"></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrollHeight: 0,
			safeBottom: 0,
			selectedRight: null,
			selectedTech: null,
			selectedDateIdx: null,
			startTime: '',
			endTime: '',
			showTechPicker: false,
			showProjectPicker: false,
			showAllDates: false,
			rightsList: [],
			techList: [],
			dateList: []
		}
	},
	computed: {
		availableRights() {
			return this.rightsList.filter(r => r.RemainingCount > 0)
		},
		visibleDates() {
			return this.dateList.slice(0, 7)
		},
		canSubmit() {
			return (
				this.selectedRight !== null &&
				this.selectedTech !== null &&
				this.selectedDateIdx !== null &&
				this.startTime &&
				this.endTime
			)
		}
	},
	onLoad() {
		this.calcLayout()
		this.initMockData()
		this.generateDates()
	},
	onShow() {
		this.calcLayout()
	},
	methods: {
		calcLayout() {
			const sys = uni.getSystemInfoSync()
			const tabBarH = 50
			this.safeBottom = sys.safeAreaInsets ? sys.safeAreaInsets.bottom : 0
			const navH = (sys.statusBarHeight || 0) + 44
			this.scrollHeight = sys.windowHeight - navH - tabBarH
		},
		initMockData() {
			this.rightsList = [
				{ ItemName: '深层清洁护理', ItemPrice: 380, SourceType: '购买', TotalPurchased: 10, ConsumedCount: 6, RemainingCount: 4, Remark: '' },
				{ ItemName: '胶原蛋白焕肤', ItemPrice: 580, SourceType: '购买', TotalPurchased: 5, ConsumedCount: 2, RemainingCount: 3, Remark: '' },
				{ ItemName: '全身精油SPA', ItemPrice: 468, SourceType: '赠送', TotalPurchased: 3, ConsumedCount: 1, RemainingCount: 2, Remark: '' },
				{ ItemName: '头皮深层养护', ItemPrice: 328, SourceType: '购买', TotalPurchased: 8, ConsumedCount: 7, RemainingCount: 1, Remark: '' },
				{ ItemName: '草本艾灸调理', ItemPrice: 388, SourceType: '赠送', TotalPurchased: 2, ConsumedCount: 0, RemainingCount: 2, Remark: '' }
			]
			this.techList = [
				{ id: '1', name: '林雅婷', position: '高级健康师', avatar: '' },
				{ id: '2', name: '陈思颖', position: '资深健康师', avatar: '' },
				{ id: '3', name: '王梦琪', position: '首席健康师', avatar: '' },
				{ id: '4', name: '张晓薇', position: '高级健康师', avatar: '' },
				{ id: '5', name: '刘佳宁', position: '健康师', avatar: '' }
			]
		},
		generateDates() {
			const list = []
			const now = new Date()
			const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
			for (let i = 0; i < 30; i++) {
				const d = new Date(now.getFullYear(), now.getMonth(), now.getDate() + i)
				const m = d.getMonth() + 1
				const day = d.getDate()
				let label = ''
				if (i === 0) label = '今天'
				else if (i === 1) label = '明天'
				else if (i === 2) label = '后天'
				list.push({
					date: d,
					dayStr: day + '日',
					monthDay: m + '月' + day + '日',
					weekStr: weekMap[d.getDay()],
					label
				})
			}
			this.dateList = list
		},
		selectProject(item) {
			this.selectedRight = item
			this.showProjectPicker = false
		},
		selectTech(tech) {
			this.selectedTech = tech
			this.showTechPicker = false
		},
		selectDate(idx) {
			this.selectedDateIdx = idx
		},
		onStartTimeChange(e) {
			this.startTime = e.detail.value
		},
		onEndTimeChange(e) {
			this.endTime = e.detail.value
		},
		submitBooking() {
			if (!this.canSubmit) {
				uni.showToast({ title: '请完善预约信息', icon: 'none' })
				return
			}
			const params = {
				itemName: this.selectedRight.ItemName,
				techId: this.selectedTech.id,
				techName: this.selectedTech.name,
				date: this.dateList[this.selectedDateIdx].monthDay,
				time: this.startTime + '-' + this.endTime
			}
			uni.showModal({
				title: '确认预约',
				content: `项目：${params.itemName}\n健康师：${params.techName}\n时间：${params.date} ${params.time}`,
				confirmText: '确认',
				confirmColor: '#2DB48D',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({ title: '预约成功', icon: 'success' })
						setTimeout(() => {
							uni.navigateTo({ url: '/pagesA/booking-record/booking-record' })
						}, 1200)
					}
				}
			})
		},
		goBookingRecord() {
			uni.navigateTo({ url: '/pagesA/booking-record/booking-record' })
		}
	}
}
</script>

<style lang="scss" scoped>
.booking-page {
	min-height: 100vh;
	background:
		radial-gradient(circle at top left, rgba(45, 180, 141, 0.18), transparent 30%),
		linear-gradient(180deg, #f8fbfa 0%, #f2f6f7 44%, #edf2f5 100%);
}

.page-body {
	background: transparent;
}

.booking-hero {
	height: 84rpx;
	padding: 8rpx 24rpx 0;
}

.booking-hero__badge {
	width: 100%;
	height: 100%;
	border-radius: 32rpx;
	background: linear-gradient(135deg, rgba(34,177,138,0.18), rgba(111,218,185,0.06));
}

.form-shell {
	padding: 0 24rpx;
}

.form-panel {
	margin-top: 18rpx;
	padding: 28rpx 24rpx;
	border-radius: 32rpx;
	background: rgba(255,255,255,0.96);
	box-shadow: 0 22rpx 56rpx rgba(15,23,42,0.08);
}

.panel-head {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.panel-head--spread {
	justify-content: space-between;
}

.panel-head__title {
	font-size: 32rpx;
	font-weight: 700;
	color: $text-primary;
}

.panel-head__action {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 10rpx 16rpx;
	border-radius: 999rpx;
	background: rgba(247,249,251,0.96);
	font-size: 24rpx;
	color: $text-secondary;
}

.panel-head__arrow {
	width: 10rpx;
	height: 10rpx;
	border-right: 2rpx solid $text-tertiary;
	border-bottom: 2rpx solid $text-tertiary;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.panel-head__arrow--up {
	transform: rotate(-135deg);
}

.field-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx;
	margin-bottom: 16rpx;
	border-radius: 24rpx;
	background: rgba(247,249,251,0.96);
}

.field-card:last-child {
	margin-bottom: 0;
}

.field-card__main {
	flex: 1;
	min-width: 0;
}

.field-card__label {
	display: block;
	font-size: 24rpx;
	color: $text-tertiary;
}

.field-card__value {
	display: block;
	margin-top: 10rpx;
	font-size: 28rpx;
	color: $text-tertiary;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.field-card__value--selected {
	color: $text-primary;
	font-weight: 600;
}

.field-card__arrow {
	width: 12rpx;
	height: 12rpx;
	border-top: 2rpx solid $text-tertiary;
	border-right: 2rpx solid $text-tertiary;
	transform: rotate(45deg);
	margin-left: 14rpx;
}

.date-scroll {
	white-space: nowrap;
}

.date-scroll__inner {
	display: inline-flex;
	gap: 14rpx;
}

.date-chip {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 128rpx;
	padding: 18rpx 20rpx;
	border-radius: 24rpx;
	background: rgba(247,249,251,0.96);
}

.date-chip--active {
	background: linear-gradient(135deg, #22b18a 0%, #6fdab9 100%);
	box-shadow: 0 18rpx 36rpx rgba(45,180,141,0.24);
}

.date-chip__label {
	font-size: 20rpx;
	font-weight: 700;
	color: $brand-primary;
}

.date-chip__day {
	margin-top: 6rpx;
	font-size: 30rpx;
	font-weight: 700;
	color: $text-primary;
}

.date-chip__week {
	margin-top: 6rpx;
	font-size: 22rpx;
	color: $text-tertiary;
}

.date-chip--active .date-chip__label,
.date-chip--active .date-chip__day,
.date-chip--active .date-chip__week {
	color: #fff;
}

.date-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12rpx;
}

.date-grid__item {
	padding: 20rpx 12rpx;
	border-radius: 22rpx;
	background: rgba(247,249,251,0.96);
	text-align: center;
}

.date-grid__item--active {
	background: linear-gradient(135deg, #22b18a 0%, #6fdab9 100%);
	box-shadow: 0 18rpx 36rpx rgba(45,180,141,0.24);
}

.date-grid__day,
.date-grid__week,
.date-grid__label {
	display: block;
}

.date-grid__day {
	font-size: 24rpx;
	font-weight: 700;
	color: $text-primary;
}

.date-grid__week {
	margin-top: 6rpx;
	font-size: 20rpx;
	color: $text-tertiary;
}

.date-grid__label {
	margin-top: 4rpx;
	font-size: 18rpx;
	font-weight: 600;
	color: $brand-primary;
}

.date-grid__item--active .date-grid__day,
.date-grid__item--active .date-grid__week,
.date-grid__item--active .date-grid__label {
	color: #fff;
}

.time-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14rpx;
}

.time-card {
	padding: 24rpx;
	border-radius: 24rpx;
	background: rgba(247,249,251,0.96);
}

.time-card__label {
	display: block;
	font-size: 24rpx;
	color: $text-tertiary;
}

.time-card__picker {
	margin-top: 14rpx;
	height: 72rpx;
	padding: 0 18rpx;
	border-radius: 18rpx;
	background: rgba(255,255,255,0.92);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	color: $text-primary;
}

.time-card__picker--placeholder {
	color: $text-tertiary;
}

.time-card__arrow {
	width: 12rpx;
	height: 12rpx;
	border-right: 2rpx solid $text-tertiary;
	border-bottom: 2rpx solid $text-tertiary;
	transform: rotate(45deg);
}

.bottom-spacer {
	height: 180rpx;
}

.bottom-bar {
	position: fixed;
	left: 16rpx;
	right: 16rpx;
	bottom: 16rpx;
	padding: 18rpx;
	border-radius: 32rpx;
	background: rgba(255,255,255,0.84);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	box-shadow: 0 20rpx 42rpx rgba(15,23,42,0.12);
	z-index: 50;
}

.bottom-bar__summary {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
	margin-bottom: 14rpx;
}

.summary-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 10rpx 14rpx;
	border-radius: 999rpx;
	background: rgba(247,249,251,0.96);
	font-size: 22rpx;
	color: $text-secondary;
}

.summary-item__dot {
	width: 8rpx;
	height: 8rpx;
	border-radius: 50%;
	background: $brand-primary;
}

.summary-item__dot--orange {
	background: #F5A623;
}

.bottom-bar__btn {
	height: 88rpx;
	border-radius: 24rpx;
	background: linear-gradient(135deg, #22b18a 0%, #6fdab9 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	font-weight: 700;
	color: #fff;
}

.bottom-bar__btn--disabled {
	opacity: 0.4;
}

.nav-record-btn {
	padding: 10rpx 16rpx;
	border-radius: 999rpx;
	background: rgba(45,180,141,0.1);
	font-size: 24rpx;
	color: $brand-primary;
}

.picker-mask {
	position: fixed;
	inset: 0;
	background: rgba(15,23,42,0.32);
	display: flex;
	align-items: flex-end;
	z-index: 100;
}

.picker-sheet {
	width: 100%;
	padding: 22rpx 24rpx 0;
	border-radius: 36rpx 36rpx 0 0;
	background: rgba(255,255,255,0.98);
}

.picker-sheet__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 20rpx;
}

.picker-sheet__title {
	font-size: 32rpx;
	font-weight: 700;
	color: $text-primary;
}

.picker-sheet__close {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	background: rgba(134,144,156,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.picker-sheet__body {
	max-height: 56vh;
}

.option-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx;
	margin-bottom: 12rpx;
	border-radius: 24rpx;
	background: rgba(247,249,251,0.96);
}

.option-card--active {
	background: rgba(45,180,141,0.1);
}

.option-card--tech {
	justify-content: flex-start;
	gap: 16rpx;
}

.option-card__avatar {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #22b18a 0%, #6fdab9 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
}

.option-card__content {
	flex: 1;
	min-width: 0;
}

.option-card__title {
	display: block;
	font-size: 28rpx;
	font-weight: 700;
	color: $text-primary;
}

.option-card__desc {
	display: block;
	margin-top: 8rpx;
	font-size: 24rpx;
	color: $text-tertiary;
}

.option-card__check {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background: rgba(45,180,141,0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
}

.picker-empty {
	padding: 80rpx 0;
	text-align: center;
	font-size: 28rpx;
	color: $text-tertiary;
}

.ico-close {
	width: 16rpx;
	height: 16rpx;
	position: relative;
}

.ico-close::before,
.ico-close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 3rpx;
	background: $text-tertiary;
	border-radius: 3rpx;
}

.ico-close::before { transform: rotate(45deg); }
.ico-close::after { transform: rotate(-45deg); }

.ico-check {
	width: 14rpx;
	height: 8rpx;
	border-left: 3rpx solid $brand-primary;
	border-bottom: 3rpx solid $brand-primary;
	transform: rotate(-45deg);
}
</style>