Forráskód Böngészése

教师研修任务详情、视频详情

liurongli 3 hete
szülő
commit
e3f15a04ec

+ 5 - 1
components/custom-popup-dialog.vue

@@ -1,6 +1,6 @@
 <template>
 	<!-- 自定义弹框组件 -->
-	<uni-popup ref="popupDialog">
+	<uni-popup ref="popupDialog" :is-mask-click="isMaskClick">
 		<view class="dialog_wrap" :style="{ width: `${dialogWidth}rpx` }">
 			<view class="dialog_title" v-if="showTitle">
 				<view class="dialog_title_lt">
@@ -40,6 +40,10 @@
 			type: String,
 			default: '610'
 		},
+		isMaskClick:{//蒙版点击是否关闭弹窗
+			type: Boolean,
+			default: true
+		},
 		showDialogClose: {//关闭按钮
 			type: Boolean,
 			default: true

+ 1 - 1
pages/login/index.vue

@@ -4,7 +4,7 @@
 			Hi~欢迎使用
 		</view>
 		<view class="login_title">
-			大数据精准教学诊断平台——教师端
+			大数据精准教学诊断平台
 		</view>
 		<view class="login_content">
 			<view class="user_name">

+ 292 - 160
pages/teacherStudy/learningMonitor/taskDetails.vue

@@ -2,105 +2,152 @@
 	<view class="page_body">
 		<!-- 头部 -->
 		<nav-bar height="96" title="任务详情" :onlyTitle="true" :showHeaderborder="true" @GoBack="GoBack"></nav-bar>
-		<view class="page_content padding_btm">
-			<view class="task_title">{{state?.details?.courseName}}</view>
-			<view class="task_class_collect">
-				<view class="task_class_name">
-					<text class="class_item">{{state?.details?.courseType===0?'必修任务':'自主研修'}}</text>
-					<text class="class_item"
-						v-if="state?.details?.teachCourseTypeName">{{state?.details?.teachCourseTypeName}}</text>
-					<text class="class_item"
-						v-if="state?.details?.teachCourseTypeClassName">{{state?.details?.teachCourseTypeClassName}}</text>
-					<text class="class_item" v-if="state?.details?.createdBy">{{state?.details?.createdBy}}</text>
-				</view>
-				<view class="task_collect">
-					<view class="preview">
-						<image class="img" src="@/static/image/icon/preview.png"></image>
-						<text class="text">{{state?.details?.watchCount || 0}}</text>
-					</view>
-					<view class="collect">
-						<image class="img" src="@/static/image/icon/collect.png"></image>
-						<text class="text">{{state?.details?.followCount || 0}}</text>
-					</view>
-				</view>
-			</view>
-			<view class="task_time">
-				<view class="time_day">
-					<text class="time_item">{{state?.details?.courseStartDatetime?.split(' ')?.[0]}}</text>
-					<template v-if="state?.details?.courseType===0">
-						<text class="time_item">至</text>
-						<text class="time_item">{{state?.details?.courseEndDatetime?.split(' ')?.[0]}}</text>
-					</template>
-					<text class="time_item"
-						v-if="state?.details?.courseType===0 && state?.details?.courseStatus!=2">剩余{{state?.details?.remainingTime}}</text>
-				</view>
-				<view
-					v-if="state?.details?.courseType===0 || (state?.details?.courseStatus===0 || state?.details?.courseStatus===2)"
-					:class="['task_status', {'going':state?.details?.courseStatus===0,'finished':state?.details?.courseStatus===2}]">
-					{{state?.details?.courseStatus===0 ? '进行中' : '已结束'}}</view>
-			</view>
-			<view :class="['task_desc',{'over':!state.isExpand}]">
-				课程简介:{{state?.details?.courseContent}}
-			</view>
-			<view class="task_desc_all">
-				课程简介:{{state?.details?.courseContent}}
-			</view>
-			<view class="expand_btn" v-if="state.showExpandBtn" @click="toggleExpand"><text class="expand_text">{{!state.isExpand?'展开':'收起'}}</text><uni-icons
-					class="expand_icon" :type="!state.isExpand?'down':'up'"></uni-icons></view>
-		</view>
-		<view class="row_gap"></view>
 		<!-- 吸顶 -->
 		<uv-sticky style="top:98rpx">
-			<!-- 搜索框 -->
-			<uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
-				:placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
-				<template #left>
-					<image src="/static/image/overview/search.png" class="search_icon"></image>
-				</template>
-			</uni-easyinput>
-			<scroll-view class="scroll_tabs" scroll-x="true" scroll-left="0" :show-scrollbar="false">
-				<view :class="['tab_item',{'selected':item.value==state.tabsSelected}]" v-for="item in state.tabList"
-					:key="item.value" @click="SelectTabsValue(item.value)">
-					{{item.label}}
-				</view>
-			</scroll-view>
-		</uv-sticky>
-		<view class="page_content">
-			<view class="total">
-				<template v-if="state?.details?.courseType===0">
-					<template v-if="state.tabsSelected==''">共 {{state?.details?.learnCount || 0}} 人</template>
-					<template v-else-if="state.tabsSelected=='3'">共 {{state?.details?.learnUnOverCount || 0}}
-						人</template>
-					<template v-else>共 {{state?.details?.learnFinishCount || 0}} 人</template>
-				</template>
-				<template v-else>
-					<template v-if="state.tabsSelected=='4'">共 {{state?.details?.learnFinishCount || 0}} 人</template>
-					<template v-else>共 {{state?.details?.learnUnOverCount || 0}} 人</template>
-				</template>
+			<view class="search_tabs" v-if="state.isSticky">
+				<!-- 搜索框 -->
+				<uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
+					:placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
+					<template #left>
+						<image src="/static/image/overview/search.png" class="search_icon"></image>
+					</template>
+				</uni-easyinput>
+				<scroll-view class="scroll_tabs" scroll-x="true" scroll-left="0" :show-scrollbar="false">
+					<view :class="['tab_item',{'selected':item.value==state.tabsSelected}]" v-for="item in state.tabList"
+						:key="item.value" @click="SelectTabsValue(item.value)">
+						{{item.label}}
+					</view>
+				</scroll-view>
 			</view>
-			<view class="list_item" v-for="item in state.tabListData" :Key="item.teacherId">
-				<view class="created_progress_status">
-					<text class="created_by">{{item.teacherName}}</text>
-					<view class="item_progress">
-						<view class="progress_bar">
-							<view class="bar_width" :style="{'width': `${item.progress.replace(/%/g, '')}%`}"></view>
+		</uv-sticky>
+		<view class="scroll_view_box">
+			<scroll-view
+				class="scroll_view_y" 
+				:scroll-top="state.scrollTop" 
+				scroll-y="true" 
+				:refresher-enabled="false"
+				:enable-back-to-top="true" 
+				:show-scrollbar="false" 
+				:scroll-with-animation="true"
+				refresher-default-style="none" 
+				refresher-background="#F8F9FD" 
+				:refresher-triggered="state.isRefreshing"
+				@scrolltolower="OnLoadMore" 
+				@refresherrefresh="OnRefresh" 
+				@scroll="OnScroll">
+				<view class="refresh_loading" v-if="state.isRefreshing"><uni-load-more status="loading" /></view>
+				<view class="page_content padding_btm">
+					<view class="task_title">{{state?.details?.courseName}}</view>
+					<view class="task_class_collect">
+						<view class="task_class_name">
+							<text class="class_item">{{state?.details?.courseType===0?'必修任务':'自主研修'}}</text>
+							<text class="class_item"
+								v-if="state?.details?.teachCourseTypeName">{{state?.details?.teachCourseTypeName}}</text>
+							<text class="class_item"
+								v-if="state?.details?.teachCourseTypeClassName">{{state?.details?.teachCourseTypeClassName}}</text>
+							<text class="class_item" v-if="state?.details?.createdBy">{{state?.details?.createdBy}}</text>
+						</view>
+						<view class="task_collect">
+							<view class="preview">
+								<image class="img" src="@/static/image/icon/preview.png"></image>
+								<text class="text">{{state?.details?.watchCount || 0}}</text>
+							</view>
+							<view class="collect">
+								<image class="img" src="@/static/image/icon/collect.png"></image>
+								<text class="text">{{state?.details?.followCount || 0}}</text>
+							</view>
+						</view>
+					</view>
+					<view class="task_time">
+						<view class="time_day">
+							<text class="time_item">{{state?.details?.courseStartDatetime?.split(' ')?.[0]}}</text>
+							<template v-if="state?.details?.courseType===0">
+								<text class="time_item">至</text>
+								<text class="time_item">{{state?.details?.courseEndDatetime?.split(' ')?.[0]}}</text>
+							</template>
+							<text class="time_item"
+								v-if="state?.details?.courseType===0 && state?.details?.courseStatus!=2">剩余{{state?.details?.remainingTime}}</text>
+						</view>
+						<view
+							v-if="state?.details?.courseType===0 || (state?.details?.courseStatus===0 || state?.details?.courseStatus===2)"
+							:class="['task_status', {'going':state?.details?.courseStatus===0,'finished':state?.details?.courseStatus===2}]">
+							{{state?.details?.courseStatus===0 ? '进行中' : '已结束'}}
 						</view>
-						<view class="progress_label">{{`${item.progress.replace(/%/g, '') || '0'}`}}%</view>
 					</view>
-					<view
-						:class="['item_status',{'await':item.learnStatus == 1 || item.learnStatus == 3,'finish':item.learnStatus == 4}]"
-						v-if="state.courseType==='0' || (state.courseType==='1' && state.tabsSelected =='4')">
-						{{item.learnStatus == 1 || item.learnStatus == 3 ?'待完成':'已完成'}}
+					<view :class="['task_desc',{'over':!state.isExpand}]">
+						课程简介:{{state?.details?.courseContent}}
 					</view>
+					<view class="task_desc_all">
+						课程简介:{{state?.details?.courseContent}}
+					</view>
+					<view class="expand_btn" v-if="state.showExpandBtn" @click="toggleExpand"><text
+							class="expand_text">{{!state.isExpand?'展开':'收起'}}</text><uni-icons class="expand_icon"
+							:type="!state.isExpand?'down':'up'"></uni-icons></view>
 				</view>
-				<view class="item_time"
-					v-if="(item.learnStartDatetime && item.learnStartDatetime!='-') || (item.learnEndDatetime && item.learnEndDatetime!='-')">
-					<text class="time"
-						v-if="item.learnStartDatetime && item.learnStartDatetime!='-'">开始时间:{{item.learnStartDatetime}}</text>
-					<text class="time"
-						v-if="item.learnEndDatetime && item.learnEndDatetime!='-'">结束时间:{{item.learnEndDatetime}}</text>
+				<view class="row_gap"></view>
+				<!-- 吸顶 -->
+				<!-- <uv-sticky style="top:98rpx"> -->
+				<view class="search_tabs">
+					<!-- 搜索框 -->
+					<uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
+						:placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
+						<template #left>
+							<image src="/static/image/overview/search.png" class="search_icon"></image>
+						</template>
+					</uni-easyinput>
+					<scroll-view class="scroll_tabs" scroll-x="true" scroll-left="0" :show-scrollbar="false">
+						<view :class="['tab_item',{'selected':item.value==state.tabsSelected}]" v-for="item in state.tabList"
+							:key="item.value" @click="SelectTabsValue(item.value)">
+							{{item.label}}
+						</view>
+					</scroll-view>
+				</view>	
+				<!-- </uv-sticky> -->
+				<view class="page_content page_content_data">
+						<view class="total">
+							<template v-if="state?.details?.courseType===0">
+								<template v-if="state.tabsSelected==''">共 {{state?.details?.learnCount || 0}} 人</template>
+								<template v-else-if="state.tabsSelected=='3'">共 {{state?.details?.learnUnOverCount || 0}}
+									人</template>
+								<template v-else>共 {{state?.details?.learnFinishCount || 0}} 人</template>
+							</template>
+							<template v-else>
+								<template v-if="state.tabsSelected=='4'">共 {{state?.details?.learnFinishCount || 0}}
+									人</template>
+								<template v-else>共 {{state?.details?.learnUnOverCount || 0}} 人</template>
+							</template>
+						</view>
+						<view class="list_item" v-for="item in state.tabListData" :Key="item.teacherId">
+							<view class="created_progress_status">
+								<text class="created_by">{{item.teacherName}}</text>
+								<view class="item_progress">
+									<view class="progress_bar">
+										<view class="bar_width" :style="{'width': `${item.progress.replace(/%/g, '')}%`}">
+										</view>
+									</view>
+									<view class="progress_label">{{`${item.progress.replace(/%/g, '') || '0'}`}}%</view>
+								</view>
+								<view
+									:class="['item_status',{'await':item.learnStatus == 1 || item.learnStatus == 3,'finish':item.learnStatus == 4}]"
+									v-if="state.courseType==='0' || (state.courseType==='1' && state.tabsSelected =='4')">
+									{{item.learnStatus == 1 || item.learnStatus == 3 ?'待完成':'已完成'}}
+								</view>
+							</view>
+							<view class="item_time"
+								v-if="(item.learnStartDatetime && item.learnStartDatetime!='-') || (item.learnEndDatetime && item.learnEndDatetime!='-')">
+								<text class="time"
+									v-if="item.learnStartDatetime && item.learnStartDatetime!='-'">开始时间:{{item.learnStartDatetime}}</text>
+								<text class="time"
+									v-if="item.learnEndDatetime && item.learnEndDatetime!='-'">结束时间:{{item.learnEndDatetime}}</text>
+							</view>
+						</view>
+						<view class="no_data" v-if="!state.isLoading && state.tabListData.length == 0">
+							<image class="no_data_img" src="@/static/image/bg/no_data.png"></image>
+							<text class="no_data_text">暂无数据</text>
+						</view>
 				</view>
-			</view>
+				<uni-load-more v-if="state.tabListData.length > 0" :status="state.loadStatus" />
+			</scroll-view>	
 		</view>
 	</view>
 </template>
@@ -152,12 +199,19 @@
 			value: '3'
 		}], //自主研修
 		showExpandBtn: false, //是否显示展开按钮
-		isExpand:false,//是否展开
-		pageSize: 100,
+		isExpand: false, //是否展开
+		pageSize: 10,
 		pageNum: 1,
+		scrollTop: 0,
+		oldScrollTop: 0,
+		isRefreshing: false, //设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
+		isLoading: true, //加载中
+		noMoreData: false, //没有更多数据了
+		loadStatus: 'more', //loading状态
 		details: {}, //详情信息
 		tabListData: [], //数据
-		listDatatotal: '',
+		searchBoxTop:0,//搜索框距离顶部的高度
+		isSticky:false,//是否吸顶
 	});
 	onLoad((option) => {
 		state.id = option.id;
@@ -166,45 +220,49 @@
 		state.tabsSelected = option.courseType === '0' ? '' : '4';
 	})
 	onMounted(() => {
-		getMinitorDetailData(); // 数据加载完成后触发 checkTextOverflow
+		OnLoadData(true,true); // 数据加载完成后触发 checkTextOverflow
 	});
 
 	const checkTextOverflow = () => {
 		nextTick(() => {
-			setTimeout(() => {
-				const instance = getCurrentInstance();
-				// 安全保护
-				if (!instance || !instance.proxy) {
-					// 备用方案:全局查询(要求元素 class 唯一)
-					let taskDescAllHeight = 0,
-						taskDescHeight = 0;
-					const query = uni.createSelectorQuery();	
-					query.select('.task_desc_all').boundingClientRect((rect) => {
-						taskDescAllHeight = rect?.height || 0;
-					});
-					query.select('.task_desc').boundingClientRect((rect) => {
-						taskDescHeight = rect?.height || 0;
-					});
-					query.exec(() => {
-						// 所有回调执行完毕后触发
-						state.showExpandBtn = taskDescAllHeight > taskDescHeight + 1;
-					});
-					return;
-				}
+			const instance = getCurrentInstance();
+			// 安全保护
+			if (!instance || !instance.proxy) {
+				// 备用方案:全局查询(要求元素 class 唯一)
 				let taskDescAllHeight = 0,
 					taskDescHeight = 0;
-				const query = uni.createSelectorQuery().in(instance.proxy);
+				const query = uni.createSelectorQuery();
 				query.select('.task_desc_all').boundingClientRect((rect) => {
 					taskDescAllHeight = rect?.height || 0;
 				});
 				query.select('.task_desc').boundingClientRect((rect) => {
 					taskDescHeight = rect?.height || 0;
 				});
+				query.select('.page_content_data').boundingClientRect((rect) => {
+					state.searchBoxTop = rect?.top || 0;
+				});
 				query.exec(() => {
 					// 所有回调执行完毕后触发
 					state.showExpandBtn = taskDescAllHeight > taskDescHeight + 1;
 				});
-			}, 100);
+				return;
+			}
+			let taskDescAllHeight = 0,
+				taskDescHeight = 0;
+			const query = uni.createSelectorQuery().in(instance.proxy);
+			query.select('.task_desc_all').boundingClientRect((rect) => {
+				taskDescAllHeight = rect?.height || 0;
+			});
+			query.select('.task_desc').boundingClientRect((rect) => {
+				taskDescHeight = rect?.height || 0;
+			});
+			query.select('.page_content_data').boundingClientRect((rect) => {
+				state.searchBoxTop = rect?.top || 0;
+			});
+			query.exec(() => {
+				// 所有回调执行完毕后触发
+				state.showExpandBtn = taskDescAllHeight > taskDescHeight + 1;
+			});
 		});
 	}
 	// 展开收起切换
@@ -214,15 +272,22 @@
 	//切换tab
 	const SelectTabsValue = (val) => {
 		state.tabsSelected = val;
-		getMinitorDetailData();
+		OnLoadData(true);
 	}
 	//搜索
 	const HandleSearchInput = (val) => {
 		state.searchWord = val;
-		getMinitorDetailData();
+		OnLoadData(true);
 	}
-	//详情
-	const getMinitorDetailData = () => {
+	/*
+	 *详情
+	 * initPage:初始分页 从第一开始
+	 * initData:初始加载
+	 */
+	const OnLoadData = (initPage,initData = false) => {
+		if (initPage) state.pageNum = 1; //如果是下拉刷新、重新查询 默认加载第一页
+		state.isLoading = true;
+		state.loadStatus = 'loading';
 		queryMinitorDetailData({
 			id: state.id,
 			learnStatus: state.tabsSelected,
@@ -232,28 +297,70 @@
 		}).then(res => {
 			if (res.code == 200) {
 				state.details = res?.data || null;
+				let total = 0,
+					tabListData = []; //总数
 				if (res?.data?.courseType === 0) { //必修任务
-					const tableTaskData = res?.data?.tableTaskData?.records || [];
-					const total = res?.data?.tableTaskData?.total || '0';
-					state.tabListData = tableTaskData;
-					state.listDatatotal = total;
+					tabListData = res?.data?.tableTaskData?.records || [];
+					total = res?.data?.tableTaskData?.total || '0';
 				} else {
 					if (state.tabsSelected == '4') { //自主研修-已完成
-						const tableSelfOverData = res?.data?.tableSelfOverData?.records || [];
-						const total = res?.data?.tableSelfOverData?.total || '0';
-						state.tabListData = tableSelfOverData;
-						state.listDatatotal = total;
+						tabListData = res?.data?.tableSelfOverData?.records || [];
+						total = res?.data?.tableSelfOverData?.total || '0';
 					} else { //自主研修-学习中
-						const tableSelfUnOverData = res?.data?.tableSelfUnOverData?.records || [];
-						const total = res?.data?.tableSelfUnOverData?.total || '0';
-						state.tabListData = tableSelfUnOverData;
-						state.listDatatotal = total;
+						tabListData = res?.data?.tableSelfUnOverData?.records || [];
+						total = res?.data?.tableSelfUnOverData?.total || '0';
 					}
 				}
-				checkTextOverflow();
+				const pages = Math.ceil(total / state.pageSize); //总页数
+				state.tabListData = initPage ? tabListData : [...state.tabListData, ...tabListData];
+				state.noMoreData = state.pageNum == pages;
+				state.pageNum++;
+				if(initData){
+					checkTextOverflow();
+				}
+			}
+		}).finally(() => {
+			state.isLoading = false;
+			state.isRefreshing = false; //下拉刷新未被触发
+			if (state.noMoreData) {
+				state.loadStatus = 'no-more';
+			} else {
+				state.loadStatus = 'more';
+			}
+			//返回到页面顶部
+			if (initPage) {
+				GoTop();
 			}
 		})
 	}
+	// 自定义下拉刷新被触发	 下拉刷新
+	const OnRefresh = () => {
+		state.isRefreshing = true; //下拉刷新已经被触发
+		OnLoadData(true);
+	}
+	//滚动到底部/右边 触发上拉刷新
+	const OnLoadMore = () => {
+		if (state.isLoading || state.noMoreData) return;
+		OnLoadData(false);
+	}
+	//	滚动时触发
+	const OnScroll = (e) => {
+		const scrollTop = e.detail.scrollTop;
+		if(scrollTop > state.searchBoxTop){
+			state.isSticky = true;
+		}else{
+			state.isSticky = false;
+		}
+		state.oldScrollTop = scrollTop;
+	}
+	//返回到顶部
+	const GoTop = () => {
+		// 解决view层不同步的问题
+		state.scrollTop = state.oldScrollTop;
+		nextTick(() => {
+			state.scrollTop = 0
+		});
+	}
 	//返回
 	const GoBack = () => {
 		uni.navigateBack({
@@ -263,6 +370,23 @@
 </script>
 
 <style scoped lang="scss">
+	.page_body{
+		height: 100%;
+		min-height: auto;
+		.scroll_view_box{
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			height: calc(100% - 96rpx);
+		}
+		.scroll_view_y {
+			height: 100%;
+		
+			.refresh_loading {
+				padding: 10rpx 0;
+			}
+		}
+	}
 	.page_content {
 		&.padding_btm {
 			padding-bottom: 24rpx;
@@ -380,7 +504,8 @@
 				line-height: 44rpx;
 				box-sizing: border-box;
 				position: relative;
-				&.over{
+
+				&.over {
 					max-height: 168rpx;
 					overflow: hidden;
 					transition: all 0.25s;
@@ -435,33 +560,37 @@
 		width: 100%;
 		height: 24rpx;
 	}
-
-	:deep(.search_box) {
+	:deep(.search_tabs){
 		display: flex;
-		align-items: center;
-		box-sizing: border-box;
 		width: 100%;
-		padding: 24rpx;
-		box-sizing: border-box;
-		background-color: #FFFFFF;
-
-		.is-input-border {
-			border-radius: 8rpx;
-			border: 2rpx solid #DCDFE6;
-			border-color: #DCDFE6 !important;
-		}
-
-		.search_icon {
-			width: 32rpx;
-			height: 32rpx;
-			margin-left: 24rpx;
-		}
-
-		.uni-easyinput__content-input {
-			padding-left: 8rpx !important;
-			font-size: 28rpx;
-			color: #333333;
-			height: 72rpx;
+		flex-direction: column;
+		.search_box {
+			display: flex;
+			align-items: center;
+			box-sizing: border-box;
+			width: 100%;
+			padding: 24rpx;
+			box-sizing: border-box;
+			background-color: #FFFFFF;
+		
+			.is-input-border {
+				border-radius: 8rpx;
+				border: 2rpx solid #DCDFE6;
+				border-color: #DCDFE6 !important;
+			}
+		
+			.search_icon {
+				width: 32rpx;
+				height: 32rpx;
+				margin-left: 24rpx;
+			}
+		
+			.uni-easyinput__content-input {
+				padding-left: 8rpx !important;
+				font-size: 28rpx;
+				color: #333333;
+				height: 72rpx;
+			}
 		}
 	}
 
@@ -570,4 +699,7 @@
 			}
 		}
 	}
+	.no_data{
+		margin-top: 24rpx;
+	}
 </style>

+ 40 - 11
pages/teacherStudy/videoDetails.vue

@@ -52,7 +52,7 @@
 		</view>
 	</view>
 	<!-- 提示框 -->
-	<custom-popup-dialog ref="popupDialogRef" title="试题弹出" dialogWidth="702" :showCloseBtn="false" @DialogConfirm="DialogConfirm">
+	<custom-popup-dialog ref="popupDialogRef" title="试题弹出" dialogWidth="702" :isMaskClick="false" :showDialogClose="false" :showCloseBtn="false" @DialogConfirm="DialogConfirm">
 		<view class="dialog_questions_input">
 			<view class="questions_title">{{state?.question?.codeName}}:{{state?.question?.questionsName}}</view>
 			<uni-easyinput type="textarea" v-model="state.questionsAnswer" :style="state.easyinputStyle" placeholder="请输入你的回答" placeholderStyle="font-weight: 400;font-size: 28rpx;color: #999999;"></uni-easyinput>
@@ -65,7 +65,7 @@
 	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
 	import navBar from '@/components/nav-bar.vue';
 	import customPopupDialog from '@/components/custom-popup-dialog.vue';
-	import { selectCourseDetail,addQuestionAnswerData,updateFollowCount } from '@/reqApi/teacherStudy.js';
+	import { selectCourseDetail,addQuestionAnswerData,updateFollowCount,synTeachLearnData } from '@/reqApi/teacherStudy.js';
 	import {
 		onLoad,
 		onUnload
@@ -84,7 +84,8 @@
 			color: '#303133',
 			borderColor: '#E9E9E9'
 		},
-		questionsAnswer:''
+		questionsAnswer:'',
+		lastValidTime:'',//上一次的播放进度
 	});
 	//提示框
 	const popupDialogRef = ref(null);
@@ -100,14 +101,23 @@
 	const GetCourseDetail = () => {
 		selectCourseDetail(state.id).then(res => {
 			if(res.code == 200){
-				state.videoInfo = res.data;
-				state.videoInfo.initialTime = timeToSecond(state.videoInfo.courseLearnTime || '');
-				state.videoInfo.duration = timeToSecond(state.videoInfo.videoTime || '')
+				const resData = res.data;
+				resData.initialTime = timeToSecond(resData.courseLearnTime ?? '');//视频初始播放位置
+				state.lastValidTime = resData.initialTime;//上一次播放进度
+				resData.duration = timeToSecond(resData.videoTime ?? '');//视频时长,单位为秒(s)
+				if(resData?.questionsList?.length > 0){
+					resData.questionsList.forEach(item=>{
+						const showTimeDate = timeToSecond(item.showTime);
+						item.isWriteAnswer = showTimeDate < resData.initialTime;//是否已作答 true 已作答
+					})
+				}
+				state.videoInfo = resData;
 			}
 		})
 	}
 	//计算秒数
 	const timeToSecond = (timeStr) => {
+		if(timeStr == '') return 0
 		const timeArr = timeStr.split(':');
 		const [h, m, s] = timeArr.map(item => Number(item));
 		return h * 3600 + m * 60 + s;
@@ -115,15 +125,24 @@
 	//播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次
 	const videoTimeupdate = (event) => {
 		const currentTime = event.detail.currentTime;
+		// 1. 判断:如果当前时间小于记录值,说明在回退
+		const diff = (Number(currentTime) - Number(state.lastValidTime)).toFixed(2);
+		const dragStatus = state.videoInfo.dragStatus || 0;//0 不可拖拽、默认不可拖拽
+		if (diff > 0.35 && dragStatus == 0) {
+			videoCtx.value.seek(state.lastValidTime);
+		}
 		state.currentTime = formatSecondsToHms(currentTime);
 		const questionsList = state?.videoInfo?.questionsList || [];
 		const question = questionsList.find(item=>item.showTime == state.currentTime);//视频显示的时间
-		state.question = question;//试题弹框信息
-		if(question){
+		if(question && !question.isWriteAnswer){//未作答
 			videoCtx?.value?.pause();//暂停播放
 			state.questionsAnswer = '';
+			state.question = question;//试题弹框信息
 			popupDialogRef.value.OpenDialog();
 		}
+		state.lastValidTime = currentTime;//上一次播放进度
+		// 教师学习进度更新接口
+		setSynTeachLearnData();
 	}
 	//提交试题
 	const DialogConfirm = () => {
@@ -140,8 +159,8 @@
 			teachQuestionsAnswer: state.questionsAnswer
 		}).then(res=>{
 			if(res.code == 200){
+				state.question.isWriteAnswer = true;//状态修改成已作答
 				popupDialogRef.value.CloseDialog();//关闭弹框
-				console.log(videoCtx?.value)
 				videoCtx?.value?.play();//播放
 			}else{
 				uni.showToast({
@@ -150,7 +169,17 @@
 				})
 			}
 		})
-		
+	}
+	//教师学习进度更新接口
+	const setSynTeachLearnData = () => {
+		const videoTime = state.videoInfo.videoTime ?? '';//视频时长
+		// 学习状态: 1-已结束(原已过期状态-课程结束了,但是用户没学完),2-待开始,3-未完成,4-已完成
+		const learnStatus = state.videoInfo.learnStatus ?? 3;//视频时长
+		synTeachLearnData({
+			teachCourseId:state.id,
+			courseLearnTime:state.currentTime,
+			learnStatus:state.currentTime==videoTime && learnStatus!=1 && learnStatus!=4?4:learnStatus
+		})
 	}
 	// 数字补零工具
 	const addZero = (num) => {
@@ -179,7 +208,7 @@
 	}
 	//页面销毁时触发
 	onUnload(()=>{
-		
+		videoCtx?.value?.pause();//暂停播放
 	})
 	//返回
 	const GoBack = () => {

+ 3 - 0
reqApi/teacherStudy.js

@@ -24,4 +24,7 @@ export function queryMinitorDetailData(data) {//查询学习监控页面详细
 }
 export function updateFollowCount(teachingCourseId) {//关注-取消关注课程接口,返回关注数量
 	return request.get(`/api/v1/teachCourse/updateFollowCount/${teachingCourseId}`)
+}
+export function synTeachLearnData(data) {//教师学习进度更新接口
+	return request.post('/api/v1/teachCourseCenter/synTeachLearnData',data)
 }