视频详情、任务详情

pages/teacherStudy/learningMonitor/index.vue

@@ -33,7 +33,7 @@
 					</view>
 					<view class="item_complete_status">
 						<text class="complete_status">完成情况：{{item.learnOver ?? '-'}}/{{item.learnCount ?? '-'}}</text>
-						<text class="btn_detail" @click="GoTaskDetails(item.id)">查看详情</text>
+						<text class="btn_detail" @click="GoTaskDetails(item.id,state.courseType)">查看详情</text>
 					</view>
 				</view>
 			</view>
@@ -230,9 +230,9 @@
 		});
 	}
 	//视频详情
-	const GoTaskDetails = (id) => {
+	const GoTaskDetails = (id,courseType) => {
 		uni.navigateTo({
-			url: `/pages/teacherStudy/learningMonitor/taskDetails?id=${id}`
+			url: `/pages/teacherStudy/learningMonitor/taskDetails?id=${id}&courseType=${courseType}`
 		});
 	}
 </script>

pages/teacherStudy/learningMonitor/taskDetails.vue

@@ -3,37 +3,50 @@
 		<!-- 头部 -->
 		<nav-bar height="96" title="任务详情" :onlyTitle="true" :showHeaderborder="true" @GoBack="GoBack"></nav-bar>
 		<view class="page_content padding_btm">
-			<view class="task_title">期中考试集体研讨会的通知期中考试集体研讨会的通知</view>
+			<view class="task_title">{{state?.details?.courseName}}</view>
 			<view class="task_class_collect">
 				<view class="task_class_name">
-					<text class="class_item">必修任务</text>
-					<text class="class_item">课堂观摩</text>
-					<text class="class_item">教务处</text>
+					<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">2761</text>
+						<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">2761</text>
+						<text class="text">{{state?.details?.followCount || 0}}</text>
 					</view>
 				</view>
 			</view>
 			<view class="task_time">
 				<view class="time_day">
-					<text class="time_item">2025-02-02</text>
-					<text class="time_item">至</text>
-					<text class="time_item">2025-02-02</text>
-					<text class="time_item">剩余3天</text>
+					<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 class="task_status finished">进行中</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">
-				课程简介：文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案
+			<view :class="['task_desc',{'over':!state.isExpand}]">
+				课程简介：{{state?.details?.courseContent}}
 			</view>
-			<view class="expand_btn"><text class="expand_text">展开</text><uni-icons class="expand_icon" type="down"></uni-icons></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>
 		<!-- 吸顶 -->
@@ -46,27 +59,46 @@
 				</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)">
+				<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">共 230 人</view>
-			<view class="list_item">
+			<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">刘惟安</text>
+					<text class="created_by">{{item.teacherName}}</text>
 					<view class="item_progress">
 						<view class="progress_bar">
-							<view class="bar_width" style="width: 49%;"></view>
+							<view class="bar_width" :style="{'width': `${item.progress.replace(/%/g, '')}%`}"></view>
 						</view>
-						<view class="progress_label">80%</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 class="item_status await">待完成</view>
 				</view>
-				<view class="item_time">
-					<text class="time">开始时间：2025-11-01</text>
-					<text class="time">结束时间：2025-11-04</text>
+				<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>
@@ -76,38 +108,152 @@
 <script setup>
 	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
 	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
-	import uvSticky from '@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue';//吸顶
+	import uvSticky from '@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue'; //吸顶
 	import navBar from '@/components/nav-bar.vue';
-	import { selectCourseDetail,addQuestionAnswerData } from '@/reqApi/teacherStudy.js';
+	import {
+		queryMinitorDetailData
+	} from '@/reqApi/teacherStudy.js';
 	import {
 		onLoad
 	} from '@dcloudio/uni-app';
 	import {
 		reactive,
-		ref
+		ref,
+		nextTick,
+		getCurrentInstance,
+		onMounted
 	} from 'vue';
 	const state = reactive({
 		id: '', //任务id
+		courseType: '', //研修场景
+		searchWord: '', //搜索关键词
 		searchInputStyles: { //搜素框样式
 			borderColor: '#DCDFE6',
 			color: '#333333'
 		},
-		searchInputPlaceholderStyle: 'color: #C0C4CC;fontSize: 28rpx' ,//搜素框样式
-		tabsSelected:'0',
-		tabList:[{
-			label:'全部',
-			value:'0'
-		},{
-			label:'待完成',
-			value:'1'
-		},{
-			label:'已完成',
-			value:'2'
-		}]
+		searchInputPlaceholderStyle: 'color: #C0C4CC;fontSize: 28rpx', //搜素框样式
+		tabsSelected: '', //默认选中tab值
+		tabList: [], //tab列表
+		mustTabList: [{
+			label: '全部',
+			value: ''
+		}, {
+			label: '待完成',
+			value: '3'
+		}, {
+			label: '已完成',
+			value: '4'
+		}], //必修任务
+		selfTabList: [{
+			label: '已完成',
+			value: '4'
+		}, {
+			label: '学习中',
+			value: '3'
+		}], //自主研修
+		showExpandBtn: false, //是否显示展开按钮
+		isExpand:false,//是否展开
+		pageSize: 100,
+		pageNum: 1,
+		details: {}, //详情信息
+		tabListData: [], //数据
+		listDatatotal: '',
 	});
 	onLoad((option) => {
 		state.id = option.id;
+		state.courseType = option.courseType;
+		state.tabList = option.courseType === '0' ? [...state.mustTabList] : [...state.selfTabList];
+		state.tabsSelected = option.courseType === '0' ? '' : '4';
 	})
+	onMounted(() => {
+		getMinitorDetailData(); // 数据加载完成后触发 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;
+				}
+				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.exec(() => {
+					// 所有回调执行完毕后触发
+					state.showExpandBtn = taskDescAllHeight > taskDescHeight + 1;
+				});
+			}, 100);
+		});
+	}
+	// 展开收起切换
+	const toggleExpand = () => {
+		state.isExpand = !state.isExpand;
+	}
+	//切换tab
+	const SelectTabsValue = (val) => {
+		state.tabsSelected = val;
+		getMinitorDetailData();
+	}
+	//搜索
+	const HandleSearchInput = (val) => {
+		state.searchWord = val;
+		getMinitorDetailData();
+	}
+	//详情
+	const getMinitorDetailData = () => {
+		queryMinitorDetailData({
+			id: state.id,
+			learnStatus: state.tabsSelected,
+			queryStr: state.searchWord,
+			pageSize: state.pageSize,
+			pageNum: state.pageNum
+		}).then(res => {
+			if (res.code == 200) {
+				state.details = res?.data || null;
+				if (res?.data?.courseType === 0) { //必修任务
+					const tableTaskData = res?.data?.tableTaskData?.records || [];
+					const total = res?.data?.tableTaskData?.total || '0';
+					state.tabListData = tableTaskData;
+					state.listDatatotal = total;
+				} else {
+					if (state.tabsSelected == '4') { //自主研修-已完成
+						const tableSelfOverData = res?.data?.tableSelfOverData?.records || [];
+						const total = res?.data?.tableSelfOverData?.total || '0';
+						state.tabListData = tableSelfOverData;
+						state.listDatatotal = total;
+					} else { //自主研修-学习中
+						const tableSelfUnOverData = res?.data?.tableSelfUnOverData?.records || [];
+						const total = res?.data?.tableSelfUnOverData?.total || '0';
+						state.tabListData = tableSelfUnOverData;
+						state.listDatatotal = total;
+					}
+				}
+				checkTextOverflow();
+			}
+		})
+	}
 	//返回
 	const GoBack = () => {
 		uni.navigateBack({
@@ -118,75 +264,90 @@
 
 <style scoped lang="scss">
 	.page_content {
-		&.padding_btm{
+		&.padding_btm {
 			padding-bottom: 24rpx;
-			.task_title{
+
+			.task_title {
 				font-weight: 500;
 				font-size: 32rpx;
 				color: #333333;
 				margin-top: 24rpx;
 			}
-			.task_class_collect{
+
+			.task_class_collect {
 				display: flex;
 				align-items: flex-start;
 				width: 100%;
 				margin-top: 16rpx;
-				.task_class_name{
+
+				.task_class_name {
 					display: inline-flex;
 					align-items: center;
 					flex-wrap: wrap;
 					flex: 1;
 					gap: 16rpx;
-					.class_item{
+
+					.class_item {
 						font-weight: 400;
 						font-size: 24rpx;
 						color: #999999;
 					}
 				}
-				.task_collect{
+
+				.task_collect {
 					display: inline-flex;
 					gap: 40rpx;
-					.preview,.collect{
+
+					.preview,
+					.collect {
 						display: inline-flex;
 						align-items: center;
 					}
-					.img{
+
+					.img {
 						width: 24rpx;
 						height: 24rpx;
 						margin-right: 12rpx;
 					}
-					.text{
+
+					.text {
 						font-weight: 400;
 						font-size: 24rpx;
 						color: #999999;
 					}
 				}
 			}
-			.task_time{
+
+			.task_time {
 				display: flex;
 				align-items: flex-start;
 				width: 100%;
 				margin-top: 16rpx;
-				.time_day{
+
+				.time_day {
 					display: inline-flex;
 					align-items: center;
 					flex-wrap: wrap;
 					flex: 1;
-					.time_item{
+
+					.time_item {
 						font-weight: 400;
 						font-size: 24rpx;
 						line-height: 48rpx;
 						color: #999999;
-						&:nth-child(2){
+
+						&:nth-child(2) {
 							margin: 0 8rpx;
 						}
-						&:nth-child(4){
+
+						&:nth-child(4) {
 							color: #2E64FA;
 							margin-left: 16rpx;
 						}
 					}
 				}
-				.task_status{
+
+				.task_status {
 					display: inline-flex;
 					align-items: center;
 					height: 48rpx;
@@ -194,17 +355,20 @@
 					border-radius: 8rpx;
 					font-weight: 400;
 					font-size: 24rpx;
-					&.going{
-						background: rgba(43,198,68,0.1);
+
+					&.going {
+						background: rgba(43, 198, 68, 0.1);
 						color: #2BC644;
 					}
-					&.finished{
-						background: rgba(245,108,108,0.1);
+
+					&.finished {
+						background: rgba(245, 108, 108, 0.1);
 						color: #F56C6C;
 					}
 				}
 			}
-			.task_desc{
+
+			.task_desc {
 				margin-top: 24rpx;
 				display: flex;
 				width: 100%;
@@ -214,40 +378,64 @@
 				font-size: 28rpx;
 				color: #999999;
 				line-height: 44rpx;
-				max-height: 168rpx;
 				box-sizing: border-box;
-				overflow: hidden;
-				transition: all 0.25s;
-				display: -webkit-box;
-				-webkit-line-clamp: 3;
-				-webkit-box-orient: vertical;
 				position: relative;
+				&.over{
+					max-height: 168rpx;
+					overflow: hidden;
+					transition: all 0.25s;
+					display: -webkit-box;
+					-webkit-line-clamp: 3;
+					-webkit-box-orient: vertical;
+				}
 			}
-			.expand_btn{
+
+			.task_desc_all {
+				display: flex;
+				width: 100%;
+				padding-top: 24rpx;
+				border-top: 2rpx solid #F3F3F3;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #999999;
+				line-height: 44rpx;
+				box-sizing: border-box;
+				position: absolute;
+				left: -9999px;
+				top: 0;
+				visibility: hidden; // 不可见但占据空间（不影响布局，因为absolute）
+				pointer-events: none;
+			}
+
+			.expand_btn {
 				width: 100%;
 				height: 40rpx;
 				background-color: #FFFFFF;
 				display: flex;
 				justify-content: flex-end;
 				align-items: center;
-				.expand_text{
+
+				.expand_text {
 					font-weight: 400;
 					font-size: 28rpx;
 					color: #2E64FA;
 					margin-right: 8rpx;
 				}
-				.expand_icon{
+
+				.expand_icon {
 					font-size: 32rpx !important;
 					color: #2E64FA !important;
 				}
 			}
 		}
 	}
-	.row_gap{
+
+	.row_gap {
 		background-color: #F8F9FD;
 		width: 100%;
 		height: 24rpx;
 	}
+
 	:deep(.search_box) {
 		display: flex;
 		align-items: center;
@@ -256,16 +444,19 @@
 		padding: 24rpx;
 		box-sizing: border-box;
 		background-color: #FFFFFF;
-		.is-input-border{
+
+		.is-input-border {
 			border-radius: 8rpx;
 			border: 2rpx solid #DCDFE6;
 			border-color: #DCDFE6 !important;
 		}
+
 		.search_icon {
 			width: 32rpx;
 			height: 32rpx;
-			margin-left:24rpx;
+			margin-left: 24rpx;
 		}
+
 		.uni-easyinput__content-input {
 			padding-left: 8rpx !important;
 			font-size: 28rpx;
@@ -273,11 +464,13 @@
 			height: 72rpx;
 		}
 	}
-	.scroll_tabs{
+
+	.scroll_tabs {
 		padding-bottom: 24rpx;
 		background-color: #FFFFFF;
 	}
-	.total{
+
+	.total {
 		width: 100%;
 		display: flex;
 		font-weight: 400;
@@ -286,43 +479,51 @@
 		padding-bottom: 24rpx;
 		border-bottom: 2rpx solid #F3F3F3;
 	}
-	.list_item{
+
+	.list_item {
 		display: flex;
 		flex-direction: column;
 		width: 100%;
 		padding: 24rpx 0;
 		border-bottom: 2rpx solid #F3F3F3;
-		.created_progress_status{
+
+		.created_progress_status {
 			display: flex;
 			width: 100%;
 			justify-content: space-between;
 			align-items: center;
-			.created_by{
-				flex:1;
+
+			.created_by {
+				flex: 1;
 				font-weight: 500;
 				font-size: 32rpx;
 				color: #333333;
 			}
-			.item_progress{
+
+			.item_progress {
 				display: inline-flex;
 				align-items: center;
-				width: 308rpx;
-				.progress_bar{
+				width: 346rpx;
+
+				.progress_bar {
 					width: 200rpx;
 					height: 12rpx;
 					background-color: #E2E6F0;
 					border-radius: 14rpx;
 					position: relative;
-					.bar_width{
+					flex-shrink: 0;
+
+					.bar_width {
 						position: absolute;
-						left:0;
-						top:0;
+						left: 0;
+						top: 0;
 						height: 12rpx;
 						background-color: #2E64FA;
 						border-radius: 14rpx;
 					}
 				}
-				.progress_label{
+
+				.progress_label {
 					flex: 1;
 					margin-left: 24rpx;
 					font-weight: 400;
@@ -330,7 +531,8 @@
 					color: #666666;
 				}
 			}
-			.item_status{
+
+			.item_status {
 				display: inline-flex;
 				align-items: center;
 				justify-content: center;
@@ -339,25 +541,29 @@
 				border-radius: 8rpx;
 				font-weight: 400;
 				font-size: 24rpx;
-				margin-left: 68rpx;
-				&.await{
-					background-color: rgba(46,100,250,0.1);
+				margin-left: 30rpx;
+
+				&.await {
+					background-color: rgba(46, 100, 250, 0.1);
 					color: #2E64FA;
 				}
-				&.finish{
-					background-color: rgba(43,198,68,0.1);
+
+				&.finish {
+					background-color: rgba(43, 198, 68, 0.1);
 					color: #2BC644;
 				}
 			}
 		}
-		.item_time{
+
+		.item_time {
 			display: flex;
 			width: 100%;
 			align-items: center;
 			flex-wrap: wrap;
-			gap:16rpx;
+			gap: 16rpx;
 			margin-top: 18rpx;
-			.time{
+
+			.time {
 				font-weight: 400;
 				font-size: 24rpx;
 				color: #999999;

pages/teacherStudy/videoDetails.vue

@@ -21,8 +21,21 @@
 			</view>
 			<view class="video_title">{{state?.videoInfo?.courseName}}</view>
 			<view class="video_progress">
-				<text class="video_progress_text" v-if="state?.videoInfo?.courseType===0">必修任务：{{state.videoInfo.courseStatus===0?`剩余${state.videoInfo.remainingTime}`:'已结束'}}</text>
-				<text class="video_progress_text">观看进度：{{state?.videoInfo?.progress}}</text>
+				<view class="video_progress_box">
+					<text class="video_progress_text" v-if="state?.videoInfo?.courseType===0">必修任务：{{state.videoInfo.courseStatus===0?`剩余${state.videoInfo.remainingTime}`:'已结束'}}</text>
+					<text class="video_progress_text">观看进度：{{state?.videoInfo?.progress}}</text>
+				</view>
+				<view class="task_collect">
+					<view class="preview">
+						<image class="img" src="@/static/image/icon/preview.png"></image>
+						<text class="text">{{state?.videoInfo?.watchCount || 0}}</text>
+					</view>
+					<view class="collect" v-if="state?.videoInfo?.courseType===1" @click="ChangeFollowStatus()">
+						<uni-icons v-if="state?.videoInfo?.followStatus==1" class="img filled" type="heart-filled"></uni-icons>
+						<uni-icons v-else class="img" type="heart"></uni-icons>
+						<text :class="['text',{'filled':state?.videoInfo?.followStatus==1}]">{{state?.videoInfo?.followCount || 0}}</text>
+					</view>
+				</view>
 			</view>
 			<view class="video_class_name">
 				<text class="class_name_item">{{state?.videoInfo?.teachCourseTypeName}}</text>
@@ -49,9 +62,10 @@
 
 <script setup>
 	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
+	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 } from '@/reqApi/teacherStudy.js';
+	import { selectCourseDetail,addQuestionAnswerData,updateFollowCount } from '@/reqApi/teacherStudy.js';
 	import {
 		onLoad,
 		onUnload
@@ -154,6 +168,15 @@
 	  const ss = addZero(s);
 	  return `${hh}:${mm}:${ss}`;
 	}
+	//收藏
+	const ChangeFollowStatus = () => {
+		updateFollowCount(state.id).then(res=>{
+			if(res.code == 200){
+				state.videoInfo.followStatus = state.videoInfo.followStatus===1?0:1;
+				state.videoInfo.followCount = res.data;
+			}
+		})
+	}
 	//页面销毁时触发
 	onUnload(()=>{
 		
@@ -191,11 +214,48 @@
 		justify-content: space-between;
 		width: 100%;
 		margin-top: 16rpx;
-		.video_progress_text{
-			font-weight: 400;
-			font-size: 24rpx;
-			color: #2E64FA;
+		align-items: flex-start;
+		.video_progress_box{
+			display: inline-flex;
+			flex-wrap: wrap;
+			gap: 20rpx;
+			.video_progress_text{
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #2E64FA;
+			}
 		}
+		.task_collect {
+			display: inline-flex;
+			gap: 20rpx;
+		
+			.preview,
+			.collect {
+				display: inline-flex;
+				align-items: center;
+			}
+		
+			.img {
+				width: 24rpx;
+				height: 24rpx;
+				margin-right: 12rpx;
+				font-size: 24rpx !important;
+				color: #999999 !important;
+				&.filled{
+					color: #2e64fa !important;
+				}
+			}
+		
+			.text {
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #999999;
+				&.filled{
+					color: #2e64fa;
+				}
+			}
+		}
+		
 	}
 	.video_class_name{
 		display: flex;

reqApi/teacherStudy.js

@@ -18,4 +18,10 @@ export function selectCourseDetail(id) {//视频详情
 }
 export function addQuestionAnswerData(data) {//教师学习课程答案信息填报接口
 	return request.post('/api/v1/teachCourse/addQuestionAnswerData', data)
+}
+export function queryMinitorDetailData(data) {//查询学习监控页面详细信息接口
+	return request.post('/api/v1/teachCourseMinitor/queryMinitorDetailData', data)
+}
+export function updateFollowCount(teachingCourseId) {//关注-取消关注课程接口，返回关注数量
+	return request.get(`/api/v1/teachCourse/updateFollowCount/${teachingCourseId}`)
 }

style/common.scss

@@ -495,6 +495,16 @@ uni-page-body {
 			font-size: 40rpx !important;
 		}
 	}
+	.uni-navbar__header-container{
+		.uni-navbar__header-container-inner{
+			font-size: 32rpx;
+			.uni-nav-bar-text{
+				font-weight: 500;
+				font-size: 32rpx;
+				color: #333333;
+			}
+		}
+	}
 }
 //表单样式
 .forms_style {