zc_saas_h5/pages5/examList/index.vue

<template>
	<view>
		<nav-bar title="模考预约" class="nav"></nav-bar>
		<view class="tabs">
			<view class="tab" :class="{ active: param.mockStatus == 0 }" data-index="1" @click="tab(0)">
				<view>未考试</view>
			</view>
			<view class="tab" :class="{ active:  param.mockStatus == 1 }" data-index="2" @click="tab(1)">
				<view>已结束</view>
			</view>
			<view class="sort" @click="showSort = true">
				筛选
			</view>
		</view>
		
		
		<view class="record">
			<template v-if=" param.mockStatus == 0">
				<view class="examList" v-for="(item,index) in recordList" :key="index">
					<view class="main">
						<view class="top" @click="showDetails(item)">
							<view class="subject">{{item.applyName}}</view>
						</view>
						<view class="item">
							<view class="left">项目</view>
							<view class="right">{{ item.businessName }} {{item.projectName}}</view>
						</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.subjectName}}</view>
						</view>
						<view class="item">
							<view class="left">考试时间</view>
							<view v-if="item.mockActivity == 0" class="right">
								{{ $method.timestampToTime(item.applySiteExamTime) }}
								{{ item.applySiteStartTime }} - {{ item.applySiteEndTime }}
							</view>
						</view>
						<view class="btn-wrap">
							<view class="btn-line">
								<!-- mockActivity 1是活动模考，0否 && (!item.handStatus || item.handStatus == 0)-->
								<view v-if="item.mockActivity == 1 && (!item.handStatus || item.handStatus == 0) " class="btn" @click="goExamCount(item,index)">去考试</view>
								<view v-else>
								<view class="btn test-disabled" v-if="goTest(item)" @click="goExamCount(item,index)">去考试</view>
								<view class="btn test-disabled"  v-else-if="item.handStatus">已考试</view>
								<view class="btn" v-else @click="goExamCount(item,index)">去考试</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			
			<template v-if=" param.mockStatus == 1">
				<view class="examList" v-for="(item,index) in recordList" :key="index">
					<view class="main">
						<view class="top" @click="showDetails(item)">
							<view class="subject">{{item.applyName}}</view>
						</view>
						<view class="item">
							<view class="left">项目</view>
							<view class="right">{{ item.businessName }} {{item.projectName}}</view>
						</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.subjectName}}</view>
						</view>
						<view class="item">
							<view class="left">考试时间</view>
							<view class="right">
								{{ $method.timestampToTime(item.applySiteExamTime) }}
								{{ item.applySiteStartTime }} - {{ item.applySiteEndTime }}
							</view>
						</view>
						<view class="btn-wrap">
							<view class="btn-line" v-if="item.reSubscribe == 1">
								<view class="btn border" @click="reApply(item)">重新预约</view>
							</view>
							<template v-else>
								<view class="btn-line">
									<view class="text" v-if="item.handStatus">当前报告含主观题需人工阅卷，阅卷完成后显示完整报告</view>
									<view class="text" v-if="!item.handStatus">由于未按时参加考试，主观题将不会提交至后台进行人工阅卷</view>
									<view class="btn border" :class="{disabled : item.canDo === 0,'btn--half':item.handStatus}" @click="doQuestion(item)">去做题</view>
									<view class="btn btn--half border" @click="report(item)" v-if="item.handStatus">查看报告</view>
								</view>
								<view class="btn-line" v-if="item.liveEndTime && item.liveStartTime && item.liveUrl">
									<view class="text-half">
										<view>模考讲解直播时间</view>
										<view>{{$method.timestampToTime(item.liveStartTime,false)}} - {{$method.timestampToTime(item.liveEndTime,false)}}</view>
										
									</view>
									<view class="btn btn--half border" @click="goLive(item)">去查看</view>
								</view>
							</template>
							
						</view>
						
					</view>
				</view>
			</template>
			
		</view>
		
		<view class="modal" :style="{top:modalTop+'px'}" v-if="showSort">
			<view class="content">
				<view class="item">
					<view class="item__title">考试时间</view>
					<view class="item__box">
						<view class="text">
							<picker mode="date"  :value="param.startTime" :end="endDate" @change="bindDateFromChange">
								<view class="uni-input">{{param.startTime || '开始时间'}}</view>
							</picker>
							- 
							<picker mode="date" :value="param.endTime" :end="endDate"  @change="bindDateToChange">
								<view class="uni-input">{{param.endTime || '结束时间'}}</view>
							</picker>
						</view>
						<u-icon class="icon" name="calendar"></u-icon>
					</view>
				</view>
				
				<view class="item">
					<view class="item__title">考试标题</view>
					<view class="item__box">
							<picker class="picker" mode="selector" :range="listApplyName" range-key="applyName" :value="param.applyName" @change="bindTitleChange">
								<view style="width:650rpx;height:40rpx;">{{param.applyName}}</view>
							</picker>
						<u-icon class="icon" name="arrow-down"></u-icon>
					</view>
				</view>
				
			</view>
			<view class="modal_wrap" @click="showSort = false"></view>
		</view>
		
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import {WEBVIEW_URL} from '@/common/request.js'
export default {
	data() {
		return {
			showSort:false,
			index: 0,
			list: [],
			list1: [],
			recordList: [],
			goodsData: {},
			param: {
				pageNum: 1,
				pageSize: 10,
				mockStatus:0,
				endTime:'',
				startTime:'',
				applyName:''
			},
			nowTime:0,
			dateFrom:'',
			dateTo:'',
			isRepeat:false,
			total: 0,
			activeIndex: 0,
			typeIndex:0,
			itemIndex:'',
			modalTop:0,
			endDate:'',
			titleName:3,
			listApplyName:[],
		};
	},
	computed:{
		...mapGetters(['userInfo'])
	},
	onLoad(option) {
		console.log('查看返回的onloaddddd')
		this.param.mockStatus = option.state || 0
		
		// this.endDate = this.$method.timestampToTime(new Date().getTime() / 1000).replace(/-/g,'/');
			
		// this.mockSubscribeListSubscribe();
		// uni.getSystemInfo({
		// 	success:(e) => {
		// 		let info = uni.createSelectorQuery().select(".nav");
		// 		info.boundingClientRect((navData) => { //data - 各种参数
				
		// 			let info = uni.createSelectorQuery().select(".tabs");
		// 			info.boundingClientRect((tabData) => { //data - 各种参数
		// 				this.modalTop = navData.height + tabData.height
		// 				console.log(navData) // 获取元素宽度
		// 				console.log(tabData) // 获取元素宽度
		// 			}).exec()
		// 		}).exec()
		// 	}
		// })
	},
	onShow() {
		console.log('查看返回的oonshow')
		this.endDate = this.$method.timestampToTime(new Date().getTime() / 1000).replace(/-/g,'/');
			
		this.mockSubscribeListSubscribe();
		uni.getSystemInfo({
			success:(e) => {
				let info = uni.createSelectorQuery().select(".nav");
				info.boundingClientRect((navData) => { //data - 各种参数
				
					let info = uni.createSelectorQuery().select(".tabs");
					info.boundingClientRect((tabData) => { //data - 各种参数
						this.modalTop = navData.height + tabData.height
						console.log(navData) // 获取元素宽度
						console.log(tabData) // 获取元素宽度
					}).exec()
				}).exec()
			}
		})
	},
	onPullDownRefresh() {
		let that = this;
		this.param.pageNum = 1;
		this.mockSubscribeListSubscribe();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	},
	onReachBottom() {
		console.log(this.total,'total');
		console.log(this.recordList.length,'length')
		if (this.recordList.length < this.total) {
			this.param.pageNum++;
			this.mockSubscribeListSubscribe();
		}
	},
	onShow() {
		this.nowTime = +this.$method.timest();
		if(this.itemIndex !== '') {
			this.refreshByIndex();
		}
		
	},
	methods: {
		mockApplyListApplyName() {
			let param = JSON.parse(JSON.stringify(this.param));
			if(param.endTime) {
				param.endTime = this.$method.TimeTotimestamp(param.endTime)
			}
			
			if(param.startTime) {
				param.startTime = this.$method.TimeTotimestamp(param.startTime)
			}
			console.log(param,'param')
			this.$api.mockApplyListApplyName(param).then((res) => {
				this.listApplyName = res.data.rows;
				console.log(this.listApplyName,'listApplyName')
				this.param.applyName = "";
				this.mockSubscribeListSubscribe();
			});
		},
		reApply(item){
			uni.redirectTo({
				url:'/pages5/examAppointList/index'
			})
		},
		report(item) {
			uni.navigateTo({
			  url:
			    "/pages5/examReport/index?&examId=" +
			    item.examId +
			    "&id=" +
			    item.recordId+
					"&eachExamId="+item.eachExamId+
					"&subscribeId="+item.subscribeId
			});
		},
		doQuestion(item) {
			if(item.canDo === 0) {
				uni.showToast({
					icon:'none',
					msg:'请等待所有科目考试结束后再进入刷题'
					
				})
				return;
			}
			
			uni.navigateTo({
				url:'../examBank/index?examId='+item.examId+'&eachExamId='+item.eachExamId
			})
		},
		goTest(item) {
			if (item.mockActivity && item.mockActivity == 1) {
				return false
			}
			let startTime = this.$method.TimeTotimestamp(this.$method.timestampToTime(item.applySiteExamTime) + ' ' + item.applySiteStartTime)
			let canGo = (startTime-this.nowTime) <= (600) && (startTime-this.nowTime) >= (-(item.timeLimit * 60)  || 0)
			
			return !canGo
		},
		isStart(item) {
			let startTime = this.$method.TimeTotimestamp(
				this.$method.timestampToTime(item.applySiteExamTime) +
					" " +
					item.applySiteStartTime
			);

			return startTime - this.nowTime <= 600;
		},
		mockSubscribeListSubscribe() {
			let param = JSON.parse(JSON.stringify(this.param))
			if(param.endTime) {
				param.endTime = this.$method.TimeTotimestamp(param.endTime)
			}
			
			if(param.startTime) {
				param.startTime = this.$method.TimeTotimestamp(param.startTime)
			}
			// mock/subscribe/listSubscribe
			this.$api.mockSubscribeListSubscribe(param).then(res => {
				this.recordList = []
				this.recordList.push(...res.data.rows)
				this.total = res.data.total
			})
		},
		refreshByIndex() {
			let param = JSON.parse(JSON.stringify(this.param))
			if(param.endTime) {
				param.endTime = this.$method.TimeTotimestamp(param.endTime)
			}
			
			if(param.startTime) {
				param.startTime = this.$method.TimeTotimestamp(param.startTime)
			}
			param.pageNum = this.itemIndex+1;
			param.pageSize =  1
			this.$api.mockSubscribeListSubscribe(param).then(res => {
				this.$set(this.recordList,this.itemIndex,res.data.rows[0])
				this.itemIndex = ''
			})
		},
		
		goLive(item) {
			let uuid = new Date().valueOf() + ""
      		// buyCourse 是否购买课程：1是 0否
			let encode = encodeURIComponent(WEBVIEW_URL+'pages/live/index?token='+uni.getStorageSync('token')+'&userInfo='+JSON.stringify(this.userInfo)+'&channelId='
			+item.liveUrl+'&buyCourse=1'+'&ident='+uuid)
			uni.navigateTo({
				url:`../../pages/webview/index?url=`+encode
			})
		},
		async goExamCount(item,index) {
			console.log('item', item)
			if (item.mockActivity && item.mockActivity == 1) {
				await this.$http({
					url: '/mock/apply/addMockTime',
					method: 'post',
					data: {
						applyId: item.applyId,
						duration: item.duration,
						majorId: item.majorId,
						subjectId: item.subjectId
					},
				}).then((res) => {
					const { examTime, startTime, endTime, eachExamId} = res.data.data
					item.applySiteExamTime = examTime // 当前时间的时间戳
					item.applySiteStartTime = startTime
					item.applySiteEndTime = endTime
					item.eachExamId = eachExamId
					// item.applySiteExamTime = parseInt(new Date().getTime()/1000) // 当前时间的时间戳
					// item.applySiteStartTime = this.$method.timestampToTime(new Date().getTime()/1000, false, false, true)
					// let min = item.duration * 60 *1000 + new Date().getTime()
					// item.applySiteEndTime = this.$method.timestampToTime(min/1000, false, false, true)
					console.log('item', item)
				})
				
			}
			
			if(this.goTest(item)) {
				uni.showToast({
					icon:'none',
					title:'不在考试时间'
				})
				return;
			}

			this.itemIndex = index;
			uni.navigateTo({
				url:'../examCount/index?start='+this.$method.TimeTotimestamp(this.$method.timestampToTime(item.applySiteExamTime) + ' ' + item.applySiteStartTime)+'&limit='+item.timeLimit+'&examId='+item.examId+'&eachExamId='+item.eachExamId+'&subscribeId='+item.subscribeId+'&mockName='+item.applyName +'&examEndTime='+this.$method.TimeTotimestamp(this.$method.timestampToTime(item.applySiteExamTime) + ' ' + item.applySiteEndTime)
			})
		},
		
		sort() {
			
		},
		
		appoint(item) {
			this.appointModal = true;
		},
		tab(state) {
			if(this.param.mockStatus == state) {
				return;
			}
			this.recordList = [];
			this.param.endTime = '';
			this.param.startTime = '';
			this.param.applyName = '';
			this.param.pageNum = 1;
			this.param.mockStatus = state;
			this.mockSubscribeListSubscribe()
		},
		bindDateFromChange(e) {
			this.param.startTime = e.detail.value
			this.param.pageNum = 1;
			this.param.applyName = '';
			this.recordList = []
			this.mockApplyListApplyName();
		},
		
		bindDateToChange(e) {
				this.param.endTime = e.detail.value
				this.param.pageNum = 1;
				this.param.applyName = '';
				this.recordList = []
				this.mockApplyListApplyName();
		},
		
		bindTitleChange(e) {
			if (this.listApplyName.length) {
				let index = e.detail.value;
				this.param.applyName = this.listApplyName[index].applyName
				
			} else {
				this.param.applyName  =''
			}
			this.param.pageNum = 1;
			this.recordList = []
			this.mockSubscribeListSubscribe();
		}
	}
};
</script>
<style>
page {
	background: #eaeef1;
}
</style>
<style lang="scss" scope>
	.animals{
		transition: all 0.3s;
		transform: rotate(180deg);
	}
.tabs {
	position: fixed;
	left: 0;
	width: 100%;
	display: flex;
	z-index: 10;
	background: #ffffff;
	padding:18rpx 0;
	border-bottom:1px solid #eee;
	.tab {
		padding:0 18rpx;
		flex: 1;
		background: #ffffff;
		font-size: 32rpx;
		color: #999999;
		text-align: center;
		position:relative;
		
		&:nth-of-type(2) {
			border-right:1px solid #EEEEEE;
		}

		&.active {
			color: #333333;
			
			&::before{
				content:'';
				position:absolute;
				width: 24px;
				height: 4px;
				background: #007AFF;
				border-radius: 2px;
				left:50%;
				margin-left:-12px;
				bottom:-18rpx;
			}
		}
	}
	
	.sort {
		width:160rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #999999;
	}
}

.record {
	margin-top:80rpx;
	padding: 16rpx 16rpx;
	.examList {
		.main {
			background: #ffffff;
			border-radius: 16rpx;
			margin: 20rpx 0;
		}
		.top {
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			color:#333333;
			font-weight: bold;
			border-bottom: 1px solid #eeeeee;
		}
		.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;
			color: #666666;
			.right {
				font-size: 28rpx;
			}
		}
		
		.btn-wrap {
			padding:24rpx 16rpx ;
			border-bottom:1px solid #EEEEEE;
			
			.btn-line {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
			}
			
			.text {
				width:100%;
				color:#F5222D;
				font-size: 24rpx;
				text-align: center;
			}
			
			.text-half {
				color:#666666;
				font-size: 24rpx;
				width:320rpx;
				margin:8rpx;
			}
			
			.btn {
				margin:8rpx;
				width: 528rpx;
				height: 64rpx;
				background: #007AFF;
				border-radius: 16rpx;
				text-align: center;
				line-height: 64rpx;
				color:#fff;
				
				&--half {
					width:320rpx;
				}
				
				
				&.border {
					background:#fff;
					color:#007AFF;
					border:1px solid #007AFF;
				}
				
				
				&.disabled {
					color:#D9D9D9;
					border-color:#D9D9D9;
				}
				
				&.test-disabled {
					color:#fff;
					background:#D9D9D9;
				}
			}
		}
	}
}


.modal {
	bottom:0;
	z-index: 199999999;
	position: fixed;
	left: 0;
	width: 100%;

	.content {
		overflow: hidden;
		position: relative;
		z-index: 10;
		background: #fff;
		padding: 20rpx 12rpx 16rpx;
		
		.item {
			&__title {
				padding:16rpx 0;
				font-size: 28rpx;
				color: #999999;
			}
			
			&__box {
				padding:0 16rpx;
				display: flex;
				width: 718rpx;
				height: 80rpx;
				background: #FFFFFF;
				border: 1px solid #EEEEEE;
				border-radius: 16rpx;
				align-items: center;
				
				
				.text {
					flex:1;
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.modal_wrap {
		position: absolute;
		left: 0;
		width: 100%;
		top: 0;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
	}
}

.activesty {
	background: #007aff !important;
	color: #fff !important;
}
</style>