zc_saas_h5/pages2/exam/exam_result.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: 280rpx;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">
							<view class="left">考试成绩</view>
							<view class="right">{{ item.performance }}分</view>
						</view>
						<view class="item">
							<view class="left">考试结果</view>
							<view class="right pass" v-if="item.result === 1">通过</view>
							<view class="right nopass" v-if="item.result === 0">未通过</view>
						</view>
						<view class="item" v-if="item.result === 1">
							<view class="left">证书编号</view>
							<view class="right">{{ item.certificateCode }}</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>
				<view class="boxItem">
					<view class="title">考试成绩和证书信息</view>
					<view class="item">
						考试成绩：
						<text class="val">{{activeList.performance}}分</text>
					</view>
					<view class="item" v-if="activeList.result === 1">
						考试结果：
						<text class="val pass">通过</text>
					</view>
					<view class="item" v-if="activeList.result === 0">考试结果：<text class="val nopass">未通过</text></view>
					<view class="item" v-if="activeList.result === 1">
						证书编号：
						<text class="val">{{activeList.certificateCode}}</text>
					</view>
				</view>
				<u-line color="#EEEEEE" />
				<view class="foot"><view class="btn" @click="hideModel">知道了</view></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			details_show: false,
			list: [
				{
					name: '已通过'
				},
				{
					name: '未通过'
				}
			],
			list1: [1, 2, 3],
			listData: [],
			current: 0,
			activeList:{
				applySiteStartTime: '',
				applySiteEndTime: '',
				applySiteStartTrainTime: '',
				applySiteEndTrainTime: ''
			},
		};
	},
	onPullDownRefresh() {},
	onLoad(option) {
		if (this.$method.isGoLogin()) { // 从公众号消息进来的没登录需要跳到登录页，登录后返回
			return;
		}
		if (String(option.current)) {
			this.current = +option.current
			this.change(+option.current)
			return
		}
		this.$api.getApplylist().then(res => {
			if (res.data.code === 200) {
				var a = [];
				var b = [];
				res.data.rows.forEach(items => {
					if (items.result === 1) {
						a.push(items);
					}
					if (items.result === 0) {
						b.push(items);
					}
				});
				this.list = [
					{
						name: `已通过(${a.length})`
					},
					{
						name: `未通过(${b.length})`
					}
				];
				this.listData = a
			}
		});
	},
	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: {
		showDetails(item) {
			this.activeList = JSON.parse(JSON.stringify(item));
			this.details_show = true;
		},
		hideModel() {
			this.details_show = false;
		},
		change(index) {
			// if (this.current === index) {
			// 	return;
			// }
			this.current = index;
			var data = {};
			if (index === 0) {
				data.result = 1;
			}
			if (index === 1) {
				data.result = 0;
			}
			this.$api.getApplylist(data).then(res => {
				this.listData = res.data.rows;
			});
			this.current = index;
		}
	},
	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: 160rpx 0;
}
.pass {
	color: #34c759 !important;
}
.nopass {
	color: #ff3b30 !important;
}
.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: -12rpx;
			}
		}
		.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: 526rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #f5f5f5;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			background: #007aff;
			color: #ffffff;
		}
	}
}
.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>