dati/pages/examination/index.vue

<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left"></view>
				<view class="kaoshi-head-m">考试</view>
			</view>
		</view>
		<!--#endif-->
		<view class="kaoshi-head-nav">
			<view class="kaoshi-head-nav-flex">
				<view @tap="navTo('/pages/examination/examinationList/index?from_type=2')">
					<image :src="static_media.img01" class="kaoshi-head-nav-img"></image>
					<view>模拟考试</view>
				</view>
			</view>
			<view class="kaoshi-head-nav-flex">
				<view @tap="navTo('/pages/examination/examinationList/index?from_type=1')">
					<image :src="static_media.img02" class="kaoshi-head-nav-img"></image>
					<view>正式考试</view>
				</view>
			</view>
			<view class="kaoshi-head-nav-flex">
				<view @tap="navTo('/pages/my/examWrongQuestion/index')">
					<image :src="static_media.img03" class="kaoshi-head-nav-img"></image>
					<view>考试错题</view>
				</view>
			</view>
			<view class="kaoshi-head-nav-flex">
				<view @tap="navTo('/pages/my/recording/index')">
					<image :src="static_media.img04" class="kaoshi-head-nav-img"></image>
					<view>考试记录</view>
				</view>
			</view>
		</view>
		<view class="kaoshi-tiku-title" v-if="mockList.length > 0">
			<view class="kaoshi-tiku-title-l">模拟考试</view>
			<navigator open-type="navigate" url="/pages/examination/examinationList/index?from_type=2"
				hover-class="none" class="kaoshi-tiku-title-r">
				查看全部
			</navigator>
		</view>
		<view class="kaoshi-tiku">
			<block v-for="(item, index) in mockList" :key="index">
				<view class="kaoshi-tiku-content" @tap="choice_exam(item)">
					<view class="kaoshi-tiku-content-flex">
						<view class="kaoshi-tiku-content-top">
							<view>{{ item.exam_name }}
							<view v-if="item.is_vip == 1 && !subjectVip" class="vip">
								<image src="../../static/img/vip.png" mode=""></image>
								<view>VIP</view>
							</view></view>
						</view>
					</view>
					<view class="kaoshi-tiku-content-flex">
						<view class="kaoshi-tiku-content-bottom">
							<view class="iconfont icon-shijian1"></view>
							<view class="pub-gray">{{item.start_date}} - {{item.end_date}}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="kaoshi-tiku-title" v-if="examList.length > 0">
			<view class="kaoshi-tiku-title-l">正式考试</view>
			<navigator open-type="navigate" url="/pages/examination/examinationList/index?from_type=1"
				hover-class="none" class="kaoshi-tiku-title-r">
				查看全部
			</navigator>
		</view>
		<view class="kaoshi-tiku">
			<block v-for="(item, index) in examList" :key="index">
				<view class="kaoshi-tiku-content" @tap="choice_exam(item)">
					<view class="kaoshi-tiku-content-flex">
						<view class="kaoshi-tiku-content-top">
							<view>{{ item.exam_name }}
							<view v-if="item.is_vip == 1 && !subjectVip" class="vip">
								<image src="../../static/img/vip.png" mode=""></image>
								<view>VIP</view>
							</view></view>
						</view>
					</view>
					<view class="kaoshi-tiku-content-flex">
						<view class="kaoshi-tiku-content-bottom">
							<view class="iconfont icon-shijian1"></view>
							<view class="pub-gray">{{item.start_date}} - {{item.end_date}}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="tan" v-if="showModal">
			<view class="tan-mask" @tap="isShowModal"></view>
			<view class="tan-modal">
				<view class="tan-title">
					<view>{{current_exam.exam_name}}</view>
				</view>
				<view class="tan-content">
					<view class="exam-tan-content">
						<view class="exam-tan-content-flex">
							<span>题数</span>
							<view>{{current_exam.num}}题</view>
						</view>
						<view class="exam-tan-content-flex">
							<span>总分</span>
							<view>{{current_exam.score}}分</view>
						</view>
						<view class="exam-tan-content-flex">
							<span>参考时间</span>
							<view>{{current_exam.givetime}}分钟</view>
						</view>
						<view class="exam-tan-content-flex">
							<span>模式</span>
							<view>{{current_exam.type_text}}</view>
						</view>
					</view>
					<view class="exam-tan-button" @tap="examBegin(current_exam)">开始答题
					</view>
				</view>
			</view>
		</view>
		<authVip v-if="showAuthVip" @hideAuthVip="showAuthVip = false"></authVip>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import Error from '@/core/untils/error/index';
	import authVip from '@/components/authVip.vue'
	export default {
		data() {
			return {
				mockList: [],
				examList: [],
				showModal: false,
				current_exam: [],
				showAuthVip: false,
			};
		},
		async onShow() {
			if (this.userinfo.token) {
				this.get_mock_list();
				this.get_exam_list();
				await this.$myUserLogin.getSubvip(this.subject.id)
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			// #endif
		},
		computed: {
			...mapState(['subject', 'userinfo', 'subjectVip']),
			static_media() {
				return {
					img01: this.$myConfig.localMedia + '/static/img/kaoshi-icon1.png',
					img02: this.$myConfig.localMedia + '/static/img/kaoshi-icon2.png',
					img03: this.$myConfig.localMedia + '/static/img/kaoshi-icon3.png',
					img04: this.$myConfig.localMedia + '/static/img/kaoshi-icon4.png'
				};
			},
		},
		components: {
			authVip
		},
		methods: {
			isShowModal: function() {
				this.showModal = !this.showModal
			},
			//跳转前需要登录
			navTo(url) {
				if (this.$myUserLogin.getToken()) {
					this.$openrul(url)
				} else {
					Error.errorNotLoggedIn();
				}
			},
			//点击考试项目，弹窗显示相关信息
			choice_exam(item) {
				if (!this.subjectVip && item.is_vip) {
					this.showAuthVip = true
					return
				}
				if (item.is_allow == 1) {
					this.current_exam = item
					this.$nextTick(() => {
						this.isShowModal()
					})
				} else if (item.is_allow == 0) {
					uni.showToast({
						icon: 'none',
						title: '您已参加过本场考试，不能重复考试'
					})
					return;
				}
			},
			async get_mock_list() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.mockExaminationList,
					data: {
						subject_id: this.subject.id,
						page: 1,
						limit: 4
					},
					needLogin: true
				});
				if (res.code === 1) {
					this.mockList = res.data.data
				}
			},
			async get_exam_list() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.examinationList,
					data: {
						subject_id: this.subject.id,
						page: 1,
						limit: 4
					},
					needLogin: true
				});
				if (res.code === 1) {
					this.examList = res.data.data
				}
			},
			// 考试开始，向后台发送开始考试的考试id，返回当前考试结束时间
			async examBegin(item) {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.exam_begin,
					data: {
						exam_id: item.id
					},
					needLogin: true
				});
				if (res.code == 1) {
					let end_time = res.data.endtime
					this.goto_detail(item, end_time)
				}
			},
			goto_detail(item, end_time) {
				this.showModal = !this.showModal
				this.$openrul('/pages/examination/examinationList/detail?id=' + item.id + '&from_type=' + item.type +
					'&exam_name=' + item.exam_name + '&title=' + item.type_text + '&end_time=' + end_time)
			},
		}
	};
</script>
<style>
	page {
		background: #f6f6f6;
	}

	.kaoshi-head-nav {
		display: flex;
		justify-content: center;
		text-align: center;
		font-size: 14px;
		color: #605d70;
		padding: 16px 0;
		z-index: 10000;
		background: #fff;
		width: 93%;
		margin: 11px auto;
		border-radius: 6px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
	}

	.kaoshi-head-nav .kaoshi-head-nav-flex {
		flex: 1;
	}

	.kaoshi-head-nav-img {
		width: 38px;
		height: 38px;
	}

	.kaoshi-tiku-title {
		width: 92%;
		margin: 0 auto;
		padding: 12px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.kaoshi-tiku-title-l {
		display: flex;
		font-weight: bold;
		font-size: 17px;
	}

	.kaoshi-tiku-title-r {
		color: #000;
		border: solid 1px #d8d8d8;
		padding: 5px 13px;
		border-radius: 35px;
		font-size: 12px;
	}

	.kaoshi-tiku {
		background: #fff;
		width: 93%;
		margin: 0 auto 8px;
		border-radius: 6px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
	}

	.kaoshi-tiku-content {
		width: 92%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		flex-direction: column;
		font-size: 14px;
		padding: 10px 0;
		border-bottom: solid 1px #f5f5f5;
	}

	.kaoshi-tiku-content .icon-arrow {
		padding-left: 13px;
		color: #b3b3b3;
	}

	.kaoshi-tiku-content-flex {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: inherit;
	}

	.kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
		padding-bottom: 6px;
	}

	.kaoshi-tiku-content .kaoshi-tiku-content:last-child {
		font-size: 14px;
	}

	.kaoshi-tiku .kaoshi-tiku-content:last-child {
		border-bottom: none;
	}

	.icon-shijian1 {
		color: #3c7bfc;
		font-size: 18px;
		padding-right: 2px;
	}

	.kaoshi-tiku-content-top {
		display: flex;
		align-items: center;
		flex: 1;
		font-size: 16px;
	}

	.kaoshi-tiku-content-top img {
		width: 20px;
		height: 22px;
		margin-right: 10px;
	}

	.kaoshi-tiku-content-bottom {
		font-size: 13px;
		display: flex;
		align-items: center;
	}

	/*弹窗*/
	.tan-mask {
		position: fixed;
		z-index: 999;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.tan-modal {
		position: fixed;
		z-index: 999;
		width: 80%;
		max-width: 300px;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #fff;
		text-align: center;
		border-radius: 3px;
		overflow: hidden;
	}

	.tan-title {
		padding: 15px 0;
		border-bottom: solid 1px #f4f4f4;
	}

	.tan-title view {
		font-weight: 400;
		font-size: 17px;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.tan-content {
		width: 90%;
		margin: 0 auto;
		font-size: 14px;
	}

	.exam-tan-content-flex {
		display: flex;
		width: 91%;
		margin: 0 auto;
		padding: 13px 0;
		border-bottom: solid 1px #f4f4f4;
	}

	.exam-tan-content-flex span {
		color: #767676;
		width: 42%;
		text-align: left;
	}

	.exam-tan-button {
		background: #3c7bfc;
		color: #fff;
		padding: 10px;
		margin: 15px 0;
		border-radius: 4px;
		font-size: 16px;
		display: block !important;
	}
</style>