zc_saas_h5/pages2/exam/exam_appointment.vue

<template>
	<view>
		<nav-bar title="考试预约"></nav-bar>
		<view style="width: 100%;text-align: center;position: fixed;height: 96rpx;z-index: 999;">
			<u-tabs :list="list" sticky :current="current" @change="change" active-color="#007AFF" inactive-color="#999"></u-tabs>
		</view>
		<view class="safeArea" style="position: absolute;top: 288rpx;width: 100%;">
			<view class="examMain">
				<view class="noData" v-if="!listData.length">您暂无相关考试预约哦~</view>
				<view v-for="(item, index) in listData" :key="index" class="examList">
					<view class="time">{{ $method.timestampToTime(item.createTime, false) }}</view>
					<view class="main">
						<view class="top" @click="showDetails(item)">
							<view class="subject">{{ item.goodsName }}</view>
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
						<view class="item">
							<view class="left">报考专业</view>
							<view class="right">{{ item.categoryName }}专业</view>
						</view>
						<view class="item">
							<view class="left">考试地点</view>
							<view class="right">{{ item.applySiteAddress }}</view>
						</view>
						<view class="item">
							<view class="left">考试时间</view>
							<view class="right">
								{{ $method.timestampToTime(item.applySiteExamTime) }} {{ item.applySiteStartTime }} ~
								{{ item.applySiteEndTime }}
							</view>
						</view>
						<view class="item" v-if="item.applySiteAddressTrain">
							<view class="left">考前培训地点</view>
							<view class="right">{{ item.applySiteAddressTrain }}</view>
						</view>
						<view class="item" v-if="item.applySiteExamTrainTime && item.applySiteStartTrainTime && item.applySiteEndTrainTime">
							<view class="left">考前培训时间</view>
							<view class="right">
								{{ $method.timestampToTime(item.applySiteExamTrainTime) }} {{ item.applySiteStartTrainTime }} ~
								{{ item.applySiteEndTrainTime }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹框 考试详情-->
		<u-popup v-model="details_show" mode="center" class="detailsModel">
			<view class="detailsBox">
				<view class="time">{{ $method.timestampToTime(activeList.createTime, false) }}</view>
				<view class="boxItem border">
					<view class="title">报考学员信息</view>
					<view class="item">
						姓名：
						<text class="val">{{ activeList.realname }}</text>
					</view>
					<view class="item">
						身份证：
						<text class="val">{{ activeList.idCard }}</text>
					</view>
					<view class="item">
						考试身份：
						<text class="val">{{ activeList.studentType == 1 ? '非补考学员' : activeList.studentType == 2 ? '补考学员' : '' }}</text>
					</view>
				</view>
				<view class="boxItem">
					<view class="title">考试预约信息</view>
					<view class="item">
						考试标题：
						<text class="val">{{ activeList.applyName }}</text>
					</view>
					<view class="item">
						报名开放时间：
						<text class="val">{{ $method.timestampToTime(activeList.applyStartTime) }} ~ {{ $method.timestampToTime(activeList.applyEndTime) }}</text>
					</view>
					<view class="item">
						报考专业：
						<text class="val">{{ activeList.categoryName }}</text>
					</view>
					<view class="item">
						考试地点：
						<text class="val">{{ activeList.applySiteAddress }}</text>
					</view>
					<view class="item">
						考试时间：
						<text class="val">
							{{
								$method.timestampToTime(activeList.applySiteExamTime) +
									' ' +
									activeList.applySiteStartTime +
									'~' +
									activeList.applySiteEndTime
							}}
						</text>
					</view>
					<view class="item" v-if="activeList.applySiteAddressTrain">
						考前培训地点：
						<text class="val">{{ activeList.applySiteAddressTrain }}</text>
					</view>
					<view class="item" v-if="activeList.applySiteExamTrainTime && activeList.applySiteStartTrainTime && activeList.applySiteEndTrainTime">
						考前培训时间：
						<text class="val">
							{{
								$method.timestampToTime(activeList.applySiteExamTrainTime) +
									' ' +
									activeList.applySiteStartTrainTime +
									'~' +
									activeList.applySiteEndTrainTime
							}}
						</text>
					</view>
				</view>
				<u-line color="#EEEEEE" />
				<view class="foot" v-if="activeList.subscribeStatus === 1">
					<view class="btn" @click="hideModel">知道了</view>
					<view class="btn cancel" v-if="isShowFun(activeList)" @click="cancelBtn">取消预约</view>
				</view>
				<view class="foot" v-else><view class="abtns" @click="hideModel">知道了</view></view>
			</view>
		</u-popup>
		<!-- 弹框 取消预约-->
		<u-popup v-model="cancel_show" mode="center" class="detailsModel">
			<view class="tipBox">
				<view class="title">温馨提示</view>
				<view class="main">
					<view class="item">每次考试均有名额限制，</view>
					<view class="item">取消预约后，您可能无法再次预约本次考试。</view>
					<view class="item">请慎重考虑。</view>
					<view class="item">您确定要取消本次考试预约吗？。</view>
				</view>
				<view class="btn">
					<view class="btn1 cancel" @click="cancel_show = false">取消</view>
					<view class="btn1 submit" @click="submit">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			details_show: false,
			cancel_show: false,
			list: [
				{
					name: '已预约'
				},
				{
					name: '已取消'
				},
				{
					name: '已过期'
				}
			],
			listData: [],
			current: 0,
			activeList: {
				applySiteStartTime: '',
				applySiteEndTime: '',
				applySiteStartTrainTime: '',
				applySiteEndTrainTime: ''
			}
		};
	},
	onPullDownRefresh() {},
	onLoad(option) {
		this.$api.getApplylist({ subscribeStatus: 1, exceedExamExpend: 2 }).then(res => {
			if (res.data.code === 200) {
				this.listData = res.data.rows;
			}
		});
	},
	onShow() {
		/* if(this.current === 2 && this.$method.isLogin()){
			this.$refs.refMy.init();
		} */
	},
	onShareAppMessage(res) {
		var self = this;
		return {
			title: '中正',
			path: `/pages/index/index?inviteCode=` + userInfo == null ? '' : userInfo.userAccount
		};
	},
	methods: {
		isShowFun(times) {
			var timestamp = parseInt(new Date().getTime() / 1000);
			var newDataAge = parseInt(new Date(new Date().toLocaleDateString()).getTime() / 1000);
			//报名开放时间”过了“结束时间点”，【取消预约】按钮隐藏
			if (times.applyEndTime <= timestamp) {
				return false;
			} else {
				//报名开放时间-进行中，【前培标记：已开通】，【取消预约】按钮隐藏
				if (times.beforeStatus === 1) {
					console.log(1);
					return false;
				} else if (times.examStatus !== 0) {
					console.log(2);
					return false;
				} else if (times.applySiteExamTime < newDataAge) {
					console.log(3);
					return false;
				} else if (times.applySiteExamTime > newDataAge) {
					console.log(4);
					return true;
				} else if (times.applySiteExamTime == newDataAge) {
					console.log(5);
					var hours = new Date().getHours();
					var mins = new Date().getMinutes();
					var arrays = times.applySiteStartTime.split(':').map(Number);
					if (arrays[0] > hours) {
						return true;
					} else if (arrays[0] < hours) {
						return false;
					} else {
						if (arrays[1] <= mins) {
							return false;
						} else {
							return true;
						}
					}
				} else {
					return true;
				}
			}
		},
		showDetails(item) {
			this.activeList = JSON.parse(JSON.stringify(item));
			this.details_show = true;
		},
		cancelBtn() {
			this.cancel_show = true;
		},
		hideModel() {
			this.details_show = false;
		},
		submit() {
			var bols = this.isShowFun(this.activeList);
			if (!bols) {
				uni.showToast({
					icon: 'none',
					title: '当前已无法取消预约'
				});
				return;
			}
			this.$api
				.editApply({
					subscribeId: this.activeList.subscribeId,
					subscribeStatus: 2
				})
				.then(res => {
					if (res.data.code === 200) {
						this.cancel_show = false;
						this.details_show = false;
						this.$api.getApplylist({ subscribeStatus: 1, exceedExamExpend: 2 }).then(res => {
							this.listData = res.data.rows;
						});
					}
				});
		},
		change(index) {
			if (this.current === index) {
				return;
			}
			this.current = index;
			var data = {};
			if (index === 0) {
				data = {
					subscribeStatus: 1,
					exceedExamExpend: 2
				};
			}
			if (index === 1) {
				data = {
					subscribeStatus: 2
				};
			}
			if (index === 2) {
				data = {
					subscribeStatus: 1,
					exceedExamExpend: 1
				};
			}
			this.$api.getApplylist(data).then(res => {
				if (res.data.code === 200) {
					this.listData = res.data.rows;
				}
			});
		}
	},
	onReachBottom() {}
	// computed: { ...mapGetters(['userInfo']) }
};
</script>
<style>
page {
	background: #eaeef1;
}
.detailsModel .u-mode-center-box {
	border-radius: 24rpx;
}
</style>
<style scoped lang="scss">
.noData {
	text-align: center;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	margin: 200rpx 0;
}
.examMain {
	padding: 8rpx;
	.time {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.main {
		background: #ffffff;
		border-radius: 16rpx;
		margin: 20rpx 0;
	}
	.top {
		height: 103rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #eeeeee;
		.subject {
			max-width: 514rpx;
			height: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #007aff;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 31rpx;
		height: 80rpx;
		padding-right: 24rpx;
		border-bottom: 1px solid #eeeeee;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		.right {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
		}
	}
}
.detailsBox {
	width: 640rpx;
	background: #ffffff;
	border-radius: 24rpx;
	.time {
		margin: 32rpx 0;
		padding: 0 37rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.boxItem {
		margin-left: 36rpx;
		margin-bottom: 29rpx;
		&.border {
			border-bottom: 1px solid #eee;
		}
		.title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #007aff;
			position: relative;
			&::before {
				content: '';
				width: 4rpx;
				height: 24rpx;
				background: #007aff;
				border-radius: 2rpx;
				position: absolute;
				top: 6rpx;
				left: -8rpx;
			}
		}
		.item {
			margin: 24rpx 0;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			.val {
				color: #333333;
			}
		}
	}
	.foot {
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: center;
		.btn {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #f5f5f5;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #007aff;
			&.cancel {
				background: #ff3b30;
				color: #ffffff;
			}
		}
		.abtns {
			width: 526rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #007aff;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
		}
	}
}
.tipBox {
	width: 640rpx;
	padding: 30rpx 20rpx 40rpx;
	background: #ffffff;
	border-radius: 24rpx;
	font-family: PingFang SC;
	.title {
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 40rpx;
	}
	.main {
		font-size: 30rpx;
		font-weight: 500;
		color: #666666;
		line-height: 48rpx;
		margin-bottom: 40rpx;
	}
	.btn {
		display: flex;
		justify-content: center;
		.btn1 {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #f5f5f5;
			border-radius: 40px;
			font-size: 30rpx;
			font-weight: bold;
			color: #007aff;
			margin: 0 20rpx;
			&.submit {
				background: #007aff;
				color: #fff;
			}
		}
	}
}
</style>