uniapp 计时器+倒计时/课件播放防作弊/监听返回调用接口(存档)

<template>
	<view>

		<view class="condition">
			<u-search placeholder="请搜索" bgColor="#FFFFFF" actionText="" @search="search"></u-search>
			<view class="flex" @click='screen'>
				<text>筛选</text>
				<u-icon name="setting"></u-icon>
			</view>
		</view>
		<u-loading-icon v-if='loading' text="加载中" textSize="18"></u-loading-icon>
		<view v-else>

			<view class="box_item" v-for="(item,index) in list" @click="gotoVideo(item.coursewareId,item.id)">
				<view class="text_title">
					{{item.coursewareName || '-'}}
				</view>
				<view class="text_jj">
					简介:{{item.describe || '-'}}
				</view>
				<view class="text_jj">
					课件级别:{{item.coursewareName || '-'}}
				</view>

				<view class="text_jj1">
					更新时间:{{item.learnTime || '-'}}
				</view>
				<progress :percent="item.percentage" show-info stroke-width="3" />
			</view>
		</view>
		<u-popup :show="show" mode="right" @close="close">
			<view class="popup">
				<view class="frequency">所属机构</view>
				<picker @change="changeOrganization" :range="organizationList"  range-key="label">
					<text class="font14">
						{{organization_value==null?'请选择':organization_name}}
					</text>
				</picker>
				<view class="frequency margin-top20">课件类型</view>
				<picker @change="changeCourseware" :range="coursewareList"  range-key="label">
					<view class="font14">
						{{courseware_value==null?'请选择':courseware_name}}
					</view>
				</picker>
				<view class="frequency margin-top20">课件类别</view>
				<picker @change="changeClassfiy" :range="classfiyList"  range-key="label">
					<view class="font14">
						{{classfiy_value==null?'请选择':classfiy_name}}
					</view>
				</picker>	
				<view class="frequency margin-top20">课件名称</view>
				<u--input v-model="test_name"  disabledColor="#ffffff" placeholder="请输入名称" border="none">
				</u--input>
				<view class="margin-top20"></view>
				<u-form labelPosition="left" labelWidth='60'>
					<u-form-item label="时间" @click="showTime">
						<u--input v-model="time" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u-form>
				<view class="bottom-btn">
					<u-button class="unified-btn bottom-reset" @click="reset">重置</u-button>
					<u-button class="unified-btn bottom-submit" @click="close">确定</u-button>
				</view>
			</view>
			<u-calendar :minDate="minDate" :maxDate="maxDate" :show="showCalendar" mode="range" @confirm="confirm"
				@close="showCalendar=false">
			</u-calendar>
		</u-popup>
	</view>
</template>

<script>
	import {
		getAllClass,
		coursewareRecord,
		getDictItems,
		appPersonnelStatistical,
		getDeptDetail,
		getAllClassfiy,
		getDictCourseware,
		getJobsWillLearnPage
	} from '@/common/login.js'

	export default {
		data() {
			return {
				loading:true,
				show: false,
				list: [],
				page: 1,
				name: '',
				form: {
					startTime: '',
					endTime: '',
					classId: '',
					type: '',
					name: ''
				},
				time: '',
				showCalendar: false,
				organizationList:[],
				organization_value:null,
				organization_name:'',
				coursewareList:[],//课件类型
				courseware_name:'',
				courseware_value:null,
				classfiyList:[],//类别列表
				classfiy_value:null,//类别value
				classfiy_name:'',//类别name
				test_name:'',//课件名称
				title:'',
				value:''
			}
		},
		onLoad(options) {
			console.log("哪里来的",options.name,options.value);
			this.title = options.name
			this.value = options.value
			if(options.name == '我的学习'){
				this.getData({})
				this.getCourseware({})
				this.getClassfiy({})
				this.getOrganization({})
				this.getYear()
			}else{
				//岗位必学+课件中心
				this.getMustData({})
				this.getCourseware({})
				this.getClassfiy({})
				this.getOrganization({})
				this.getYear()
			}
		},
		methods: {
			// 获取日常任务
			async getData(params) {
				const res = await coursewareRecord(Object.assign({
					current: this.page,
					size: 10,
					keyWord: this.form.name || '',
					coursewareName:'',//课件名称
					affiliationId: '',//机构
					type:'',//课件类型
					classId:'',//课件类别
					startTime: '',
					endTime: '',
				}, params))
				console.log(res)
				this.list = this.list.concat(res.result.records);
				this.loading = false
			},
			async getMustData(params){
				let isPost = 0
				if(this.value == '岗位必学'){
					isPost = 1
				}
				const res = await getJobsWillLearnPage(Object.assign({
					current: this.page,
					size: 10,
					keyWord: this.form.name,
					coursewareName:'',//课件名称
					affiliationId: '',//机构
					type:'',//课件类型
					classId:'',//课件类别
					startTime: '',
					endTime: '',
					isPost:isPost //0--课件中心  1--岗位必学
				}, params))
				console.log(res)
				this.list = this.list.concat(res.result.records);
				this.loading = false
			},
			//六号线接口
			async getOrganization(params){
				this.loading = true
				const res = await getDeptDetail(Object.assign({
					orgCategory:2,
				}, params))
				let list = []
				for (var i = 0; i < res.result.length; i++) {
					list.push(
					{label:res.result[i].departName,
					value:res.result[i].id}
					)
				}
				this.organizationList = list
				console.log("机构",this.organizationList)
				this.loading = true
			},
			//选择六号线
			changeOrganization(e){
				console.log("e",e);
				const index = e.detail.value*1
				this.organization_value = this.organizationList[index].value
				this.organization_name = this.organizationList[index].label
			},
			
			//课件类型
			async getCourseware(params){
				this.loading = true
				const res = await getDictCourseware(Object.assign({
					dictCode:'courseware_type',
				}, params))
				let list = []
				for (var i = 0; i < res.result.length; i++) {
					list.push({
						label:res.result[i].title,
						value:res.result[i].value
						})
				}
				this.coursewareList = list
				console.log("课件类型",res)
				this.loading = false
			},
			//选择课件类型
			changeCourseware(e){
				console.log("选择课件类型",e);
				const index = e.detail.value*1
				this.courseware_value  = this.coursewareList[index].value
				this.courseware_name  = this.coursewareList[index].label
			},
			//获取类别接口
			async getClassfiy(params){
				this.loading = true
				const res = await getAllClassfiy(Object.assign({
					postId:'',
				}, params))
				let list = []
				for (var i = 0; i < res.result.length; i++) {
					list.push({
						label:res.result[i].postName,
						value:res.result[i].id
						})
				}
				this.classfiyList = list
				console.log("取类别接口",res)
				this.loading = false
			},
			//选择类别
			changeClassfiy(e){
				console.log("选择类别",e);
				const index = e.detail.value*1
				this.classfiy_value  = this.classfiyList[index].value
				this.classfiy_name  = this.classfiyList[index].label
			},
			// 筛选
			screen() {
				this.show = true
			},
			// 关闭
			close() {
				this.list = []
				this.show = false
				let form = {
					current: this.page || '',
					size: 10,
					keyWord: this.form.name || '',
					coursewareName:this.test_name || '',//课件名称
					affiliationId: this.organization_value || '',//机构
					type:this.courseware_value || '',//课件类型
					classId:this.classfiy_value || '',//课件类别
					startTime: this.form.startTime || '',
					endTime: this.form.endTime || '',
				}
				console.log("form",form);
				this.getData(form)
			},
			// 重置
			reset() {
				this.time = ''
				this.form.startTime = ''
				this.form.endTime = ''
				this.test_name='',
				this.organization_value=null,
				this.organization_name='',
				this.depart_value=null,
				this.depart_name='',
				this.courseware_name='',
				this.courseware_value=null
			},
			// 打开日历
			showTime() {
				this.showCalendar = true
			},
			// 选择日历
			confirm(e) {
				this.form.startTime = e[0]
				this.form.endTime = e[e.length - 1]
				this.time = e[0] + '至' + e[e.length - 1]
				this.showCalendar = false
			},
			// 搜索框
			search(value) {
				this.list = []
				this.form.name = value
				if(this.title == '我的学习'){
					this.getData()
				}else{
					this.getMustData()
				}
			},
			// 获取当前年份
			getYear() {
				const date = new Date()
				this.minDate = date.getFullYear() + '-01-01'
				this.maxDate = date.getFullYear() + '-12-31'
			},
			//跳转播放
			gotoVideo(coursewareId,id){
				if(this.title == '我的学习'){
					uni.navigateTo({
						url:'../app/procenterdetail?coursewareId='+ coursewareId + '&name=' + this.title + '&id=' + id + '&value=' + this.value
					})
				}else{
					uni.navigateTo({
						url:'../app/procenterdetail?id='+ id + '&name=' + this.title + '&value=' + this.value
					})
				}
				
			}
		},

		//上拉加载
		onReachBottom() {
			this.page++;
			if(this.title == '我的学习'){
				this.getData({})
			}else{
				this.getMustData({})
			}
		},
		
	}
</script>

<style>
	page {
		background-color: #EFF1F5;
	}

	.popup picker {
		display: flex;
		align-items: center;
		height: 80upx;
	}

	.img_lok {
		height: 26upx;
		width: 26upx;
	}

	.box_item {
		padding: 30upx;
		margin-top: 20upx;
		background-color: #ffffff;
	}

	.text_jj {
		margin-top: 10upx;
		color: #333;
		font-size: 28upx;
	}

	.text_jj1 {

		display: flex;
		margin-top: 10upx;
		color: #333;
		font-size: 28upx;
	}

	.text_title {
		color: #333;
		font-size: 32upx;
	}
</style>
<style lang="scss" scoped>
	.u-tabs {
		background-color: #ffffff;
	}
	.margin-top20{
		margin-top: 20px;
	}

	
	.font14{
		font-size: 14px;
	}
	.task-list {
		.content {
			color: #00000073;
		}

		.left {
			margin-left: 40rpx;
		}

		.green {
			color: #45CEA1;
		}

		.red {
			color: #FF5F56;
		}
	}

	.u-input {
		width: 400rpx;
	}
</style>

 

一个播放视频时,周期性开始倒计时,需要用户点击,倒计时结束未点击,视频暂停播放