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 v-if="recordList.length">
				<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"
									:class="{'test-disabled': !(item.activityStartTime < nowTime) }"
								 	@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>
				</view>
				<view v-else class="nodata">暂无相关数据</view>
			</template>
			
			<template v-if=" param.mockStatus == 1">
				<view v-if="recordList.length">
				<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>
				</view>
				<view v-else class="nodata">暂无相关数据</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 config from '@/common/config'
export default {
	data() {
		return {
			showSort:false,
			index: 0,
			list: [],
			list1: [],
			recordList: [],
			goodsData: {},
			param: {
				pageNum: 1,
				pageSize: 10,
				mockStatus:0,
				endTime:'',
				startTime:'',
				applyName:''
			},
			nowTime:0,
			sysTime: Date.now(),
			dateFrom:'',
			dateTo:'',
			isRepeat:false,
			total: 0,
			activeIndex: 0,
			typeIndex:0,
			itemIndex:'',
			modalTop:0,
			endDate:'',
			titleName:3,
			listApplyName:[],
		};
	},
	computed:{
		...mapGetters(['userInfo'])
	},
	onLoad(option) {
		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()
			}
		})
	},
	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();
		// }
		this.recordList = []
		this.mockSubscribeListSubscribe();
		
	},
	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+'&subscribeId='+item.subscribeId
			})
		},
		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.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 => {
				console.log('res.data.rows[0]', res.data.rows[0])
				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(config.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) {
			if (item.mockActivity && item.mockActivity == 1) {
				if (!(item.activityStartTime < this.nowTime)) {
					return
				}
				await this.$http({
					url: '/mock/apply/addMockTime',
					method: 'post',
					data: {
						applyId: item.applyId,
						duration: item.duration,
						majorId: item.majorId,
						subjectId: item.subjectId,
						mockMajorSubjectId: item.mockMajorSubjectId
					},
				}).then((res) => {
					if (res.data.code == 200) {
						const { examTime, startTime, endTime, eachExamId, mockActivity} = res.data.data
						let o_item = {
							...item,
							applySiteExamTime: examTime,
							applySiteStartTime: startTime,
							applySiteEndTime: endTime,
							eachExamId: eachExamId,
							mockActivity: mockActivity
						}
						// item.applySiteExamTime = examTime // 当前时间的时间戳
						// item.applySiteStartTime = startTime
						// item.applySiteEndTime = endTime
						// item.eachExamId = eachExamId
						this.toJump(o_item, index)
					} else {
						this.$u.toast(res.data.msg)
						return
					}
					
				})
				
			} else {
				this.toJump(item, index)
			
			}
		},
		toJump(item, index) {
			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)+'&mockActivity=' + item.mockActivity
			})
		},
		
		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;
}
.nodata {
	text-align: center;
    margin-top: 100rpx;
    font-size: 32rpx;
    color: #222;
}
</style>