LJ-ancient-city-h5/pages/index/appointment.vue

<template>
	<view class="app-container">
		<u-navbar title="预约" bgColor="#fff" :fixed="true" :autoBack="false" leftIconColor="#333333" leftIconSize="28"
			@leftClick="handleLeftClick">
		</u-navbar>

		<view class="app-container-item flex-column-center">
			<view class="top-card">
				<view class="title flex-between">
					<text style="font-weight: bold;">{{ detailInfo.title }}</text>
					<view class="flex">
						<text style="font-size: 15px;color: #636B85;margin-right: 5px">选择</text>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
				<text style="font-size: 13px;color: #B2BCCB;height: 30px;line-height: 30px">实名制预约票</text>
				<view class="time flex-between">
					<text>开园时间：{{ detailInfo.openStartTime }}-{{ detailInfo.openEndTime }}</text>
					<view style="color: #27C9DF">
						<text style="font-size: 14px;margin-right: 5px">预订须知</text>
						<text class="iconfont icon-icon-arrow-right" style="font-size: 10px;color: #27C9DF;"></text>
					</view>
				</view>
			</view>
			<view class="time_period-card">
				<view class="form_item flex-between">
					<view>
						<text style="font-size: 15px;margin-right: 10px">免票预约</text>
						<text style="color: #27C9DF;font-size: 18px">¥ 0.00</text>
					</view>
					<view>
						<u-number-box v-model="form.num" step="1" :min="0">
							<template #minus>
								<text class="iconfont icon-reduce" style="font-size: 20px;color: #2EDAF1"></text>
							</template>
							<template #input>
								<text style="width: 50px;text-align: center;" class="input">{{form.num}}</text>
							</template>
							<template #plus>
								<text class="iconfont icon-add" style="font-size: 20px;color: #2EDAF1"></text>
							</template>
						</u-number-box>
					</view>
				</view>
				<view class="form_item flex-between">
					<view>
						<text style="font-size: 15px;margin-right: 10px">预约时间</text>
					</view>
					<view>
						<uni-datetime-picker key="startTime" type="date" v-model="form.startTime" :border="false"
							:showClear="false" :start="startDate.min" :end="startDate.max"
							@change="dateConfirm('startTime', $event)"></uni-datetime-picker>
					</view>
				</view>
				<view>
					<view>
						<text style="font-size: 15px;margin-right: 10px">预约时间段</text>
					</view>
					<view class="time_period-content">
						<view class="time_period-content_item flex-between"
							v-for="(pItem, pIndex) in detailInfo.timePeriod" :style="[{
                background: timePeriodCheckIndex !=null && pIndex == timePeriodCheckIndex? '#2EDAF1' : '#F6F8FC'
							}]" :key="pIndex" @click="onClickTimePeriod(pItem, pIndex)">
							<text
								:style="{color: timePeriodCheckIndex !=null && pIndex == timePeriodCheckIndex?'white':getStateColor(pItem.reservationState).timeColor}">{{ pItem.startTime }}~{{ pItem.endTime }}</text>
							<text
								:style="{color: timePeriodCheckIndex !=null && pIndex == timePeriodCheckIndex?'white':getStateColor(pItem.reservationState).stateColor}">{{ pItem.reservationState | matchStateColor }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="time_period-card">
				<view class="form_item flex-between">
					<view>
						<text style="font-size: 15px;margin-right: 10px;color: #333333;font-weight: bold">游玩人</text>
						<text style="color: #636B85;font-size: 15px">（需填写{{form.num}}人）</text>
					</view>
					<view style="background: #2EDAF1;width: 52px;height: 25px;border-radius: 15px" class="flex"
						@click="addTourists">
						<text class="iconfont icon-plus" style="font-size: 12px;color: #fff"></text>
					</view>
				</view>
				<view class="id-card">
					<view class="id-card_item" v-for="(item,index) in touristList" :key="index">
						<text>{{ item.username }}</text>
						<text>【身份证】{{ item.idNumber }}</text>
					</view>
				</view>
			</view>
			<!--        <view style="clear: both; overflow: hidden;"></view>-->
		</view>

		<view class="app-container-btn flex-between">
			<text>合计：</text>
			<view>
				<u-button v-if="isSubmitEnabled" type="primary" shape="circle" class="btn" text="立即预订"
					@tap="toAppoint()"></u-button>
				<u-button text="立即预订" class="btn" v-else color="#DDE2EC"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				form: {
					startTime: this.$sun.formatTime(new Date(), '{y}-{m}-{d}'),
					num: 0,
					endTime: '',
					zoneDeviceRId: '22',
					zoneDeviceRName: '',
					visiteeRoom: '',
				},
				rules: {
					/*'visiteeRoom': [{
					  required: true,
					  message: '请输入房间号',
					  trigger: ['change', 'blur']
					}],
					'zoneDeviceRName': [{
					  required: true,
					  message: '请输入房间号',
					  trigger: ['change', 'blur']
					}],
					'startTime': [{
					  required: true,
					  message: '请选择开始时间',
					  trigger: ['change', 'blur']
					}],
					'endTime': [{
					  required: true,
					  message: '请选择结束时间',
					  trigger: ['change', 'blur']
					},
					]*/
				},
				detailInfo: {
					title: '兰花街1、2、3',
					date: '2024.06.14',
					openStartTime: '08:00',
					openEndTime: '20:00',
					timePeriod: [{
							startTime: '08:00',
							endTime: '10:00',
							reservationState: 1
						},
						{
							startTime: '10:00',
							endTime: '12:00',
							reservationState: 2
						},
						{
							startTime: '12:00',
							endTime: '14:00',
							reservationState: 3
						},
						{
							startTime: '14:00',
							endTime: '16:00',
							reservationState: 4
						},
						{
							startTime: '16:00',
							endTime: '18:00',
							reservationState: 5
						},
						{
							startTime: '18:00',
							endTime: '20:00',
							reservationState: 4
						}
					]
				},
				timePeriodCheckIndex: null,
				touristList: [{
					id: 1,
					username: '刘琳琳', // 姓名
					idNumber: '430822********0465', // 身份证号
					IDType: '',
				}, {
					id: 2,
					username: '刘琳X', // 姓名
					idNumber: '430822********0464', // 身份证号
					IDType: '',
				}, {
					id: 3,
					username: '刘琳Y', // 姓名
					idNumber: '430822********0463', // 身份证号
					IDType: '',
				}]
			};
		},
		computed: {
			isSubmitEnabled() {
				return this.timePeriodCheckIndex != null && (this.form.startTime && this.form.startTime != '');
			},
			startDate() {
				return {
					min: this.$sun.formatTime(new Date(), '{y}-{m}-{d}'),
					max: this.form.endTime ? this.form.endTime : '2099-1-1 00:00:00'
				}
			},
			endDate() {
				return {
					min: this.form.startTime ? this.form.startTime : this.$sun.formatTime(new Date(), '{y}-{m}-{d}'),
					max: '2099-1-1 00:00:00'
				}
			},
		},
		filters: {
			matchStateColor(code) {
				switch (code) {
					case 1:
						return '停售';
					case 2:
						return '普通';
					case 3:
						return '拥挤';
					case 4:
						return '空闲';
					case 5:
						return '繁忙';
				}

			}
		},
		onLoad(options) {
			this.detailInfo = JSON.parse(options.info);
			console.log('onLoad', this.detailInfo)
		},
		onShow() {},
		methods: {
			/**
			 * 添加游玩人
			 */
			addTourists() {
				console.log('添加游玩人');
				uni.navigateTo({
					url: '/pages/tourist/index?touristIdList=' + JSON.stringify(this.touristList.map(v => v.id))
				});
			},
			// 日期选择-确定
			async dateConfirm(code, e) {
				console.log(code, e, '日期选择-确定')
				this.form.startTime = e;
				this.timePeriodCheckIndex = null;
			},
			/**
			 * 选择预约时间段
			 * @param item
			 * @param index
			 */
			onClickTimePeriod(item, index) {
				if (item.reservationState != 1) {
					this.timePeriodCheckIndex = index;
				}
			},
			/**
			 * 立即预订
			 */
			toAppoint() {

			},
			getStateColor(code) {
				let param = {};
				switch (code) {
					case 1:
						param = {
							timeColor: '#B2BCCB',
							stateColor: '#B2BCCB'
						};
						break;
					case 2:
						param = {
							timeColor: '#636B85',
							stateColor: '#65DBF5'
						};
						break;
					case 3:
					case 5:
						param = {
							timeColor: '#636B85',
							stateColor: '#FFAF51'
						};
						break;
					case 4:
						param = {
							timeColor: '#636B85',
							stateColor: '#65DBF5'
						};
						break;
				}
				return param
			},
			handleLeftClick() {
        //获取页面栈的长度
        const canNavBack = getCurrentPages()
        //判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
        if (canNavBack && canNavBack.length > 1) {
          uni.navigateBack({
            delta: 1
          })
        } else {
          history.back()
        }
			},
			getGuideInfo() {
				// this.isLogin = true;
			},
		}
	};
</script>
<style lang="scss" scoped>
	.app-container {
		width: 100vw;
		//background: #fff;
		position: relative;
		height: 100vh;

		&-item {
			position: absolute;
			top: 44px;
			padding: 10px 20px 100px 20px;
			width: calc(100%);
			box-sizing: border-box;

			.time_period-card {
				width: calc(100%);
				box-sizing: border-box;
				margin-top: 10px;
				background: #fff;
				border-radius: 8px;
				position: relative;
				display: flex;
				flex-direction: column;
				padding: 10px;

				.id-card {
					//height: 50px;
					box-sizing: border-box;
					padding: 10px;

					&_item {
						display: flex;
						flex-direction: column;
						padding: 10px 20px;
						font-size: 14px;
						color: #333333;
						background: #F8FAFD;
						border-radius: 8px;

						text {
							height: 26px;
							line-height: 26px;
						}

						&:not(:last-child) {
							margin-bottom: 10px;
						}
					}
				}

				.form_item {
					height: 48px;
					line-height: 48px;
				}

				.time_period-content {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					background: #fff;
					padding: 10px 0;
					border-radius: 8px;
					overflow: hidden;

					&_item {
						background: #F6F8FC;
						box-sizing: border-box;
						width: calc((100% - 16px) / 3);
						height: 50px;
						border-radius: 6px;
						padding: 6px;
						flex-direction: column;

						text {
							height: 20px;
							line-height: 20px;
							font-size: 13px;
							color: #636B85;
						}

						&:nth-child(n + 4) {
							margin-top: 8px;
						}

						&:not(:nth-child(3n)) {
							margin-right: 8px;
						}
					}
				}
			}

			.top-card {
				width: calc(100%);
				box-sizing: border-box;
				margin-top: 10px;
				background: #fff;
				border-radius: 8px;
				position: relative;
				display: flex;
				flex-direction: column;
				padding: 20px 10px;
				box-sizing: border-box;

				.title {
					width: 100%;
					font-size: 20px;
					color: #1D2633;
				}

				.time {
					color: #1D2633;
					font-size: 15px;
				}
			}
		}

		&-btn {
			position: fixed;
			bottom: 0;
			height: 80px;
			text-align: center;
			background: white;
			width: 100%;
			padding: 0 24px;
			box-sizing: border-box;

			.btn {
				width: 120px;
				border-top-right-radius: 25px !important;
				border-top-left-radius: 25px !important;
				border-bottom-left-radius: 25px !important;
				border-bottom-right-radius: 25px !important;
			}
		}
	}
</style>