workApp/pages/teacherStudy/learningMonitor/taskDetails.vue

<template>
	<view class="page_body">
		<!-- 头部 -->
		<nav-bar height="96" title="任务详情" :onlyTitle="true" :showHeaderborder="true" @GoBack="GoBack"></nav-bar>
		<!-- 吸顶 -->
		<uv-sticky offsetTop="0" customNavHeight="98rpx">
			<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>
		</uv-sticky>
		<view class="scroll_view_box" :style="{'height': state.isSticky ? 'calc(100% - 296rpx)' : 'calc(100% - 96rpx)'}">
			<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>
					<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"> -->
				<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>
				<uni-load-more v-if="state.tabListData.length > 0" :status="state.loadStatus" />
			</scroll-view>	
		</view>
	</view>
</template>

<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 navBar from '@/components/navBar.vue';
	import {
		queryMinitorDetailData
	} from '@/reqApi/teacherStudy.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref,
		nextTick,
		getCurrentInstance,
		onMounted
	} from 'vue';
	const state = reactive({
		id: '', //任务id
		courseType: '', //研修场景
		searchWord: '', //搜索关键词
		searchInputStyles: { //搜索框样式
			borderColor: '#DCDFE6',
			color: '#333333'
		},
		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: 10,
		pageNum: 1,
		scrollTop: 0,
		oldScrollTop: 0,
		isRefreshing: false, //设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
		isLoading: true, //加载中
		noMoreData: false, //没有更多数据了
		loadStatus: 'more', //loading状态
		details: {}, //详情信息
		tabListData: [], //数据
		tabListDatas:[],//所有数据
		pages:0,
		searchBoxTop:0,//搜索框距离顶部的高度
		isSticky:false,//是否吸顶
	});
	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(() => {
		OnLoadData(true,true); // 数据加载完成后触发 checkTextOverflow
	});

	const checkTextOverflow = () => {
		nextTick(() => {
			const instance = getCurrentInstance();
			const query = instance && instance.proxy 
				? uni.createSelectorQuery().in(instance.proxy) 
				: uni.createSelectorQuery();
			
			query.select('.task_desc_all').boundingClientRect();
			query.select('.task_desc').boundingClientRect();
			query.select('.page_content_data').boundingClientRect();
			
			query.exec((res) => {
				const rectAll = res[0];
				const rectShort = res[1];
				const rectPageData = res[2];
			
				const taskDescAllHeight = rectAll?.height || 0;
				const taskDescHeight = rectShort?.height || 0;
				state.searchBoxTop = rectPageData?.top || 0;
			
				state.showExpandBtn = taskDescAllHeight > taskDescHeight + 1;
			});
		});
	}
	// 展开收起切换
	const toggleExpand = () => {
		state.isExpand = !state.isExpand;
		nextTick(() => {
			const instance = getCurrentInstance();
			// 自动选择查询上下文，消除重复if‑else
			const query = instance && instance.proxy
				? uni.createSelectorQuery().in(instance.proxy)
				: uni.createSelectorQuery();
			
			// 只注册查询，不在回调做赋值
			query.select('.page_content_data').boundingClientRect();
			
			// exec才真正执行查询，res[0]对应上面select的结果
			query.exec((res) => {
				const rect = res?.[0];
				state.searchBoxTop = rect?.top || 0;
			});
		});
	}
	//切换tab
	const SelectTabsValue = (val) => {
		state.tabsSelected = val;
		OnLoadData(true);
	}
	//搜索
	const HandleSearchInput = (val) => {
		state.searchWord = val;
		OnLoadData(true);
	}
	/*
	 *详情
	 * initPage:初始分页 从第一开始
	 * initData:初始加载
	 */
	const OnLoadData = (initPage,initData = false) => {
		state.isLoading = true;
		state.loadStatus = 'loading';
		if (initPage) {
			state.pageNum = 1; //如果是下拉刷新、重新查询 默认加载第一页
			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;
					let total = 0; //总数
					if (res?.data?.courseType === 0) { //必修任务
						state.tabListDatas = res?.data?.tableTaskData || [];
						total = state.tabListDatas?.length || '0';
					} else {
						if (state.tabsSelected == '4') { //自主研修-已完成
							state.tabListDatas = res?.data?.tableSelfOverData?.records || [];
							total = res?.data?.tableSelfOverData?.total || '0';
						} else { //自主研修-学习中
							state.tabListDatas = res?.data?.tableSelfUnOverData?.records || [];
							total = res?.data?.tableSelfUnOverData?.total || '0';
						}
					}
					state.pages = Math.ceil(total / state.pageSize); //总页数
					//默认加载
					state.tabListData = state.tabListDatas.slice(0, state.pageSize);
					//没有更多了
					state.noMoreData = state.pageNum == state.pages;
					//分页+1
					state.pageNum++;
					state.isLoading = false;
					state.isRefreshing = false;//下拉刷新未被触发
					state.loadStatus = state.noMoreData?'no-more':'more';
					if(initData){
						checkTextOverflow();
					}
				}
			}).finally(() => {
				//返回到页面顶部
				if (initPage) {
					GoTop();
				}
			})
		}else{
			const start = (state.pageNum - 1) * state.pageSize;
			const end = start + state.pageSize;
			const list = state.tabListDatas.slice(start, end);
			state.tabListData = [...state.tabListData, ...list];
			state.noMoreData = state.pageNum == state.pages;
			state.pageNum++;
			setTimeout(() => {
				state.isLoading = false;
				state.isRefreshing = false; //下拉刷新未被触发
				state.loadStatus = state.noMoreData?'no-more':'more';
			}, 0)
		}
	}
	// 自定义下拉刷新被触发	 下拉刷新
	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({
			delta: 1
		});
	}
</script>

<style scoped lang="scss">
	.page_body{
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: auto;
		.scroll_view_box{
			width: 100%;
			display: flex;
			flex-direction: column;
		}
		.scroll_view_y {
			height: 100%;
		
			.refresh_loading {
				padding: 10rpx 0;
			}
		}
	}
	.page_content {
		&.padding_btm {
			padding-bottom: 24rpx;

			.task_title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-top: 24rpx;
			}

			.task_class_collect {
				display: flex;
				align-items: flex-start;
				width: 100%;
				margin-top: 16rpx;

				.task_class_name {
					display: inline-flex;
					align-items: center;
					flex-wrap: wrap;
					flex: 1;
					gap: 16rpx;

					.class_item {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.task_collect {
					display: inline-flex;
					gap: 40rpx;

					.preview,
					.collect {
						display: inline-flex;
						align-items: center;
					}

					.img {
						width: 24rpx;
						height: 24rpx;
						margin-right: 12rpx;
					}

					.text {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}

			.task_time {
				display: flex;
				align-items: flex-start;
				width: 100%;
				margin-top: 16rpx;

				.time_day {
					display: inline-flex;
					align-items: center;
					flex-wrap: wrap;
					flex: 1;

					.time_item {
						font-weight: 400;
						font-size: 24rpx;
						line-height: 48rpx;
						color: #999999;

						&:nth-child(2) {
							margin: 0 8rpx;
						}

						&:nth-child(4) {
							color: #2E64FA;
							margin-left: 16rpx;
						}
					}
				}

				.task_status {
					display: inline-flex;
					align-items: center;
					height: 48rpx;
					padding: 0 12rpx;
					border-radius: 8rpx;
					font-weight: 400;
					font-size: 24rpx;

					&.going {
						background: rgba(43, 198, 68, 0.1);
						color: #2BC644;
					}

					&.finished {
						background: rgba(245, 108, 108, 0.1);
						color: #F56C6C;
					}
				}
			}

			.task_desc {
				margin-top: 24rpx;
				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: relative;

				&.over {
					max-height: 168rpx;
					overflow: hidden;
					transition: all 0.25s;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
			}

			.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 {
					font-weight: 400;
					font-size: 28rpx;
					color: #2E64FA;
					margin-right: 8rpx;
				}

				.expand_icon {
					font-size: 32rpx !important;
					color: #2E64FA !important;
				}
			}
		}
	}

	.row_gap {
		background-color: #F8F9FD;
		width: 100%;
		height: 24rpx;
	}
	:deep(.search_tabs){
		display: flex;
		width: 100%;
		flex-direction: column;
		background-color: #FFFFFF;
		.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;
			}
		}
	}

	.scroll_tabs {
		margin-top:0;
		background-color: #FFFFFF;
	}

	.total {
		width: 100%;
		display: flex;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #F3F3F3;
	}

	.list_item {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #F3F3F3;

		.created_progress_status {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;

			.created_by {
				flex: 1;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}

			.item_progress {
				display: inline-flex;
				align-items: center;
				width: 346rpx;

				.progress_bar {
					width: 200rpx;
					height: 12rpx;
					background-color: #E2E6F0;
					border-radius: 14rpx;
					position: relative;
					flex-shrink: 0;

					.bar_width {
						position: absolute;
						left: 0;
						top: 0;
						height: 12rpx;
						background-color: #2E64FA;
						border-radius: 14rpx;
					}
				}

				.progress_label {
					flex: 1;
					margin-left: 24rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #666666;
				}
			}

			.item_status {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 96rpx;
				height: 48rpx;
				border-radius: 8rpx;
				font-weight: 400;
				font-size: 24rpx;
				margin-left: 30rpx;

				&.await {
					background-color: rgba(46, 100, 250, 0.1);
					color: #2E64FA;
				}

				&.finish {
					background-color: rgba(43, 198, 68, 0.1);
					color: #2BC644;
				}
			}
		}

		.item_time {
			display: flex;
			width: 100%;
			align-items: center;
			flex-wrap: wrap;
			gap: 16rpx;
			margin-top: 18rpx;

			.time {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
	.no_data{
		margin-top: 24rpx;
	}
</style>