zc_saas_h5/pages2/appointment/order.vue

<template>
	<view class="safeArea">
		<view class="appointment">
			<view class="appointmentItem">
				<view class="title">考试地点：</view>
				<view class="place" @click="showAddress">
					<view class="name">{{ addressName }}</view>
					<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
				</view>
			</view>
			<view class="appointmentItem" v-if="activeList.length">
				<view class="title">考试时间：</view>
				<view class="main">
					<view v-for="(item, index) in activeList" class="item" :key="index" @click="choItem(index)">
						<view class="checkbox"><u-checkbox v-if="item.status === 0" v-model="item.checked" shape="circle"></u-checkbox></view>
						<view class="box">
							<view :class="['time', { active: item.checked }, { no: item.status !== 0 }]">{{ item.dataTime + ' ' + item.startTime + ' ~ ' + item.endTime }}</view>
							<view class="statusInfo" v-if="item.status !== 0">
								<template v-if="item.status === 2">
									预约名额已满
								</template>
								<template v-if="item.status === 1">
									此时段您已经有其他考试预约
								</template>
							</view>
						</view>
						<view class="num">已报：{{ item.registration }}/{{ item.num }}</view>
					</view>
				</view>
			</view>
			<view class="btnMain">
				<view class="return" @click="backPage">上一步</view>
				<view class="sure" @click="sureOppoint">{{ dataId === 1 ? '下一步' : dataId === 2 ? '确定预约' : '异常' }}</view>
			</view>
		</view>
		<!-- 弹框-->
		<u-popup v-model="address_show" mode="bottom" class="addModel">
			<view class="tipBox safeArea">
				<view class="line"></view>
				<view class="title">温馨提示</view>
				<u-line color="#EEEEEE" />
				<scroll-view class="addressList" :scroll-y="true">
					<view class="item" v-for="(item, index) in listData" :key="index" @click="choAddress(index)">
						<u-checkbox class="checkbox" v-model="item.checked" shape="circle"></u-checkbox>
						<view :class="['address', { active: item.checked }]">{{ item.siteAddress }}</view>
					</view>
				</scroll-view>
				<u-line color="#EEEEEE" />
				<view class="btn" @click="sureAddress">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			address_show: false,
			addressName: '请选择',
			addressId: null, //当前选中考试点ID
			listData: [], //考试地点数据
			activeList: [], //选中考试地点列表
			applyId: null, //考试计划ID
			goodsId: null, //商品ID
			applyStatus: null, //学员状态ID
			dataId: null //跳转拷贝
		};
	},
	onLoad(option) {
		this.applyId = Number(option.applyId);
		this.goodsId = Number(option.goodsId);
		this.applyStatus = Number(option.applyStatus);
		this.dataId = Number(option.dataId);
		this.getInfo();
	},
	methods: {
		//获取考试地点
		getInfo() {
			this.$api.getApplysubscribeApplySite({ applyId: this.applyId }).then(res => {
				if (res.data.code === 200) {
					res.data.data.forEach((item, index) => {
						item.checked = false;
					});
					this.listData = res.data.data;
				}
			});
		},
		showAddress() {
			this.address_show = true;
		},
		choAddress(index) {
			this.listData.forEach((item, idx) => {
				this.$set(item, 'checked', false);
				if (idx === index) {
					this.$set(item, 'checked', true);
				}
			});
		},
		sureAddress() {
			var self = this;
			const index = this.listData.findIndex(item => item.checked);
			if (index === -1) {
				uni.showToast({
					title: '请选择考试地点',
					icon: 'none'
				});
				return;
			}
			if (this.addressId === this.listData[index].id) {
				this.address_show = false;
				return;
			}
			this.addressName = this.listData[index].siteAddress;
			this.addressId = this.listData[index].id;
			var arrays = [];
			this.listData[index].examUserApplySiteTime.forEach(item => {
				item.examApplySiteTimeTwoVo.forEach(items => {
					arrays.push({
						examTime: item.examTime,
						startTimeC: items.startTime,
						endTimeC: items.endTime,
						dataTime: self.$method.timestampToTime(item.examTime),
						startTime: items.startTime.replace('-', ':'),
						endTime: items.endTime.replace('-', ':'),
						num: items.num,
						registration: items.registration,
						checked: false,
						status: items.status === 1 ? items.status : items.registration >= items.num ? 2 : items.status
					});
				});
			});
			this.activeList = arrays;
			this.address_show = false;
		},
		choItem(index) {
			const item = this.activeList[index];
			if (item.status !== 0) {
				return;
			}
			this.activeList.forEach((item, idx) => {
				item.checked = false;
				if (idx === index) {
					item.checked = true;
				}
			});
		},
		sureOppoint() {
			var self = this;
			if (self.addressId) {
				var ast = self.activeList.some(item => {
					return item.checked === true;
				});
				if (ast) {
					var copyData = JSON.parse(JSON.stringify(self.activeList));
					const index = copyData.findIndex(item => item.checked);
					var data = {
						applyId: self.applyId,
						goodsId: self.goodsId,
						studentType: self.applyStatus,
						applySiteAddress: self.addressName,
						applySiteExamTime: copyData[index].examTime,
						applySiteStartTime: copyData[index].startTimeC,
						applySiteEndTime: copyData[index].endTimeC
					};
					if (self.dataId === 1) {
						self.$store.commit('updateApplyData', data);
						self.$navTo.togo('/pages2/appointment/kporder', {
							applyId: self.applyId,
							applyStatus: self.applyStatus,
							goodsId: self.goodsId
						});
					}
					if (self.dataId === 2) {
						self.$api.addApply(data).then(res => {
							if (res.data.code === 200) {
								uni.reLaunch({
									url: `/pages2/appointment/appointment_success?subscribeId=${res.data.data}`
								});
							}
						});
					}
				} else {
					uni.showToast({
						title: '请选择考试时间',
						icon: 'none'
					});
				}
			} else {
				uni.showToast({
					title: '请选择考试地点',
					icon: 'none'
				});
			}
		},
		backPage() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>
<style>
page {
	background-color: #eaeef1;
}
.addModel .u-drawer-bottom {
	box-shadow: 0px 0px 16px 4px rgba(145, 156, 178, 0.1);
	border-radius: 32rpx 32rpx 0px 0px;
}
</style>
<style scoped lang="scss">
.appointment {
	padding: 0 8rpx;
	.appointmentItem {
		margin: 24rpx 0 40rpx;
		.title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 1;
			margin-bottom: 16rpx;
			padding-left: 24rpx;
		}
		.place {
			height: 80rpx;
			background: #ffffff;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;
		}
	}
	.main {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx 16rpx;
		.item {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			.statusInfo {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ff3b30;
				padding-left: 24rpx;
			}
			.checkbox {
				width: 32rpx;
				height: 32rpx;
				display: flex;
				align-items: center;
			}
			.time {
				width: 430rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #f5f5f5;
				border: 2rpx solid #f5f5f5;
				border-radius: 16rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				text-align: center;
				color: #333333;
				margin: 0 18rpx 0 8rpx;
				&.active {
					background: #ebf5ff;
					border: 2rpx solid #007aff;
				}
				&.no {
					background: #ffdddb;
					border: 2rpx solid #ffdddb;
				}
			}
		}
	}
	.btnMain {
		display: flex;
		justify-content: center;
		text-align: center;
		.return {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #f5f5f5;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #007aff;
		}
		.sure {
			width: 438rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #007aff;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			margin-left: 24rpx;
		}
	}
}
.tipBox {
	width: 100%;
	font-family: PingFang SC;
	.line {
		width: 80rpx;
		height: 8rpx;
		background: #999999;
		border-radius: 4rpx;
		margin: 8rpx auto;
	}
	.title {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin: 15rpx 0;
	}
	.main {
		font-size: 30rpx;
		font-weight: 500;
		color: #666666;
		line-height: 48rpx;
		margin-bottom: 40rpx;
	}
	.addressList {
		height: 500rpx;
		padding-top: 24rpx;
		.item {
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			margin-bottom: 24rpx;
			.checkbox {
				width: 32rpx;
				height: 32rpx;
				display: flex;
				align-items: center;
				margin-right: 8rpx;
			}
			.address {
				width: 654rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #f5f5f5;
				border-radius: 16rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				padding: 0 24rpx;
				&.active {
					background: #ebf5ff;
					border: 2rpx solid #007aff;
				}
			}
		}
	}
	.btn {
		width: 200rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: linear-gradient(0deg, #015eea, #00c0fa);
		border-radius: 32rpx;
		margin: 17rpx auto;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
		color: #ffffff;
	}
}
</style>