workApp/pages/teacherStudy/learningMonitor/taskDetails.vue

<template>
	<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>
			<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>
	</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/nav-bar.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: 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({
			delta: 1
		});
	}
</script>

<style scoped lang="scss">
	.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_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 {
		padding-bottom: 24rpx;
		background-color: #FFFFFF;
	}

	.total {
		width: 100%;
		display: flex;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		padding-bottom: 24rpx;
		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;
			}
		}
	}
</style>