jpcj-xcx/components/home/index.vue

<template>
	<view class="content">
		<view class="top-box">
			<van-row>
				<van-col span="24">
					<view class="timingBox">
						<view class="classHourStatistics">
							<view class="unbind" v-if="unbindFlag">
								<text>未绑定身份证\n前往我的页面绑定</text>
							</view>
							<view class="timing-item">
								<text>科一学时</text>
								<text class="timing-time">{{infoData.km1+0}}/{{info[0].ration+0}}</text>
							</view>
							<view class="timing-item">
								<text>科二学时</text>
								<text class="timing-time">{{infoData.km2+0}}/{{info[1].ration+info[2].ration}}</text>
							</view>
							<view class="timing-item">
								<text>科三学时</text>
								<text class="timing-time">{{infoData.km3+0}}/{{info[3].ration+info[4].ration}}</text>
							</view>
							<view class="timing-item">
								<text>科四学时</text>
								<text class="timing-time">{{infoData.km4+0}}/{{info[5].ration+0}}</text>
							</view>
						</view>
						<view class="jsbox">
							<view class="bt">
								<van-icon name="/static/imgs/我要计时.png" />
								<text>我要计时</text>
							</view>
							<view :class="['js',{dh:dhfalg}]">
								<van-button :loading='btnLoading' :loading-text='loadingText' custom-class="jsbtn" @click='timeBtn'>{{timeTitle}}</van-button>
								<text class="timeText">{{timeText}}</text>
							</view>
							<text class="ts">注：退出即停止计时,不满60s不计入学时</text>
						</view>
					</view>
				</van-col>
				<!-- <van-col span="6">
					<square icon='/static/imgs/包过保证icon.png' title='包过保证' @tap='go()' />
					<square icon='/static/imgs/模拟考试icon.png' title='模拟考试' @tap="go('/pages/question/mockExam')" />
				</van-col> -->
			</van-row>

			<van-row>
				<van-col span="6">
					<!-- <square icon='/static/imgs/图标练习icon.png' title='图标练习' @tap='go()' /> -->
					<square icon='/static/imgs/模拟考试icon.png' title='模拟考试' @tap="go('/pages/question/mockExam')" />
				</van-col>
				<van-col span="6">
					<square icon='/static/imgs/顺序测试icon.png' title='顺序测试' @tap="go('/pages/question/sequential')" />
				</van-col>
				<van-col span="6">
					<square icon='/static/imgs/随机测试icon.png' title='随机测试' @tap="go('/pages/question/random')" />
				</van-col>
				<van-col span="6">
					<square icon='/static/imgs/错题收藏icon.png' title='错题收藏' @tap="go('/pages/question/wrongTitle')" />
				</van-col>
			</van-row>
		</view>



		<view class="item-box">
			<view class="item-titBox">
				<text class="item-tit">新手上路</text>
				<text class="item-tit-right" @tap='go()'>更多视频 ></text>
			</view>
			<view class="video-box">
				<video class="myVideo" id="myVideo" src="http://image.jppt.com.cn/zzjs/2021-03-18/media/1616051225707.mp4"
				 object-fit='fill' controls @play='videoPlay'></video>
				<view class="tit-box">
					<text class="video-box-tit">考点视频</text>
					<button class="video-box-btn" @tap='go()'>去观看</button>
				</view>

				<video class="myVideo" id="myVideo2" src="http://image.jppt.com.cn/zzjs/2021-03-18/media/1616051225707.mp4"
				 object-fit='fill' controls @play='videoPlay2'></video>
				<view class="tit-box">
					<text class="video-box-tit">3D模拟练车</text>
					<button class="video-box-btn" @tap='go()'>去练习</button>
				</view>

			</view>
		</view>

		<!-- <view class="item-box">
			<view class="item-titBox">
				<text class="item-tit">驾考学堂</text>
			</view>
			<view class="video-box">
				<van-row>
					<van-col span="6">
						<square icon='/static/img/home/三力测试@3x.png' title='三力测试' @tap='go()' />
					</van-col>
					<van-col span="6">
						<square icon='/static/img/home/驾驶许可@3x.png' title='驾驶许可' @tap='go()' />
					</van-col>
					<van-col span="6">
						<square icon='/static/img/home/驾照种类@3x.png' title='驾照种类' @tap='go()' />
					</van-col>
					<van-col span="6">
						<square icon='/static/img/home/驾照有效期@3x.png' title='驾照有效期' @tap='go()' />
					</van-col>
					<van-col span="6">
						<square icon='/static/img/home/年龄条件@3x.png' title='年龄条件' @tap='go()' />
					</van-col>
					<van-col span="6">
						<square icon='/static/img/home/身体条件@3x.png' title='身体条件' @tap='go()' />
					</van-col>
					<van-col span="6">
						<square icon='/static/img/home/身体条件@3x.png' title='预约考试' @tap='go()' />
					</van-col>
					<van-col span="6">
						<square icon='/static/img/home/身体条件@3x.png' title='成绩查询' @tap='go()' />
					</van-col>
				</van-row>
			</view>
		</view> -->


	</view>
</template>

<script>
	import square from '@/components/square/index.vue'
	import {
		addTime,
		getTime,
		getTimeInfo
	} from '@/api/studytime.js'
	import {
		getInfo
	} from '@/api/login.js'
	export default {
		components: {
			square
		},
		data() {
			return {
				dhfalg: false,
				timeText: "00:00:00",
				timeTitle: '开始',
				info: [],
				infoData: {},
				unbindFlag: false,
				timeStatus: 0,
				timeFn: this.timeStart(),
				btnLoading: false,
				loadingText: ''
			}
		},
		mounted() {
			this.initInfo()
		},
		methods: {
			async initInfo() {
				if (uni.getStorageSync('time')) {
					this.timeText = new Date(uni.getStorageSync('time')).toJSON().slice(11, -5)
					this.timeTitle = '继续'
				}
				let studentInfo = await getInfo()
				if (studentInfo.data.student.gzptUserId) {
					let info = await getTimeInfo()
					this.info = info.rows
					let infoData = await getTime()
					this.infoData = infoData.rows[0]
				} else {
					//未绑定身份证
					this.unbindFlag = true
				}

			},
			videoPlay(e) {
				uni.createVideoContext('myVideo2', this).pause();
			},
			videoPlay2(e) {
				uni.createVideoContext('myVideo', this).pause();
			},
			go(url) {
				uni.navigateTo({
					url
				});
			},
			timeBtn(e) {
				let timeObj = this.timeFn();
				console.log(timeObj)
				if (timeObj.timeStatus == 1) {
					this.dhfalg = true;
					this.loadingText = '计时中'
					this.btnLoading = true;
					setTimeout(() => {
						this.btnLoading = false;
						this.timeTitle = '上传学时'
					}, 1000)
				}
				if (timeObj.timeStatus == 2) {
					this.dhfalg = false;
					this.loadingText = '上传中'
					this.btnLoading = true;
					try {
						let sysInfo = uni.getStorageSync('sysInfo')
						addTime({
							beginTime: new Date(timeObj.start).toISOString().slice(0, -5).replace('T', ' '),
							endTime: new Date(timeObj.end).toISOString().slice(0, -5).replace('T', ' '),
							isSubmit: 6,
							pxkm: this.infoData.km1 >= this.info[5].ration ? 4 : 1,
							classid: '小程序',
							reason: `小程序&${sysInfo.platform}&${sysInfo.model}`,
							source: 1,
							trainType: `小程序`,
							trainTime: ~~(timeObj.time / 60 / 1000)
						}).then(res => {
							if (res.code == 200) {
								this.btnLoading = false;
								this.timeText = "上传成功"
								uni.removeStorageSync('timeStart')
								uni.removeStorageSync('time')
								this.timeTitle = '开始'
							} else {
								this.btnLoading = false;
								console.log('上传学时异常!!')
								this.timeTitle = '恢复'
							}
						}, err => {
							this.btnLoading = false;
							console.log('上传学时异常!!')
							this.timeTitle = '恢复'
						})
					} catch (e) {
						this.btnLoading = false;
						this.timeTitle = '恢复'
					}

				}
			},
			timeStart() {
				let timerID,
					time,
					timeStatus = 0,
					start,
					end
				return () => {
					timeStatus += 1;
					if (timeStatus == 1) {
						if (uni.getStorageSync('time')) {
							time = uni.getStorageSync('time')
						} else {
							start = new Date().getTime()
							time = 0
							uni.setStorageSync('timeStart', start)
						}
						timerID = setInterval(() => {
							time += 100
							if (time % 1000 == 0) {
								uni.setStorageSync('time', time)
							}
							this.timeText = new Date(time).toJSON().slice(11, -5)
						}, 100)
						return {
							start: uni.getStorageSync('timeStart'),
							time,
							timeStatus
						}
					}
					if (timeStatus >= 2) {
						timeStatus = 0;
						let timeObj = {
							start: uni.getStorageSync('timeStart'),
							end: new Date().getTime(),
							time: uni.getStorageSync('time'),
							timeStatus: 2
						}
						clearInterval(timerID);
						// uni.removeStorageSync('timeStart')
						// uni.removeStorageSync('time')
						return timeObj
					}

				}
			}
		}
	}
</script>

<style lang="scss">
	.dh {
		position: relative;

		&::after {
			content: '';
			background-color: red;
			left: 0;
			top: 0;
			width: 0%;
			height: 100%;
			position: absolute;
			animation: go 1s infinite;
			z-index: 0;
		}

		@keyframes go {
			to {
				width: 100%;
				background-color: greenyellow;
			}
		}
	}

	.jsbox {


		.bt {
			width: 140rpx;
			margin-bottom: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.ts {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #E31818;
		}


		.js {
			height: 70rpx;
			background: #F5F5F5;
			border: 1rpx solid #E8E8E8;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 48rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			overflow: hidden;

			.jsbtn {
				height: 50rpx;
				background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
				border-radius: 25rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				font-weight: 400;
				font-family: PingFang SC;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0;
				z-index: 1;
			}

			.timeText {
				z-index: 1;
			}
		}
	}



	.content {
		width: 100%;
		padding-bottom: 10rpx;
	}



	.item-box {
		background-color: #fff;
		border-radius: 10rpx;
		margin: 10rpx 30rpx;

		.item-titBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid #e8e8e8;

			.item-tit {
				border-left: 8rpx solid #E31818;
				font-size: 30rpx;
				line-height: 58rpx;
				padding: 11rpx;
			}

			.item-tit-right {
				font-size: 26rpx;
				color: #666666;
				line-height: 58rpx;
				padding: 11rpx;
			}
		}

		.video-box {
			padding: 30rpx 20rpx;

			.myVideo {
				width: 650rpx;
				height: 360rpx;
				border-radius: 10rpx;

			}

			.tit-box {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0 26rpx;

				.video-box-tit {
					height: 31rpx;
					font-size: 20rpx;
					border: 1rpx solid #E31A19;
					border-radius: 2rpx;
					padding: 5rpx 9rpx;
					color: #E31818;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.video-box-btn {
					margin: 0;
					height: 40rpx;
					background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FFFFFF;
					font-size: 20rpx;
				}
			}

		}
	}



	.top-box {
		margin: 10rpx 20rpx;
	}

	.unbind {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(35, 34, 33, 0.2);
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: red;
	}

	.timingBox {
		height: 335rpx;
		background-color: #ffffff;
		margin: 10rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 2% 5%;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
		
		.classHourStatistics {
			display: flex;
			justify-content: space-between;

			.timing-item {
				height: 80rpx;
				// box-shadow: -2rpx 2rpx 5rpx #5a5a5a;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				font-size: .8rem;
				padding: 25rpx 15rpx;
				border-radius: 10rpx;

				.timing-time {
					font-size: .8rem;
					border-radius: 10rpx;
				}
			}
		}

	}
</style>