workApp/pages/materialCollection/submitMaterial/taskDetail.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?.taskName}}</view>
			<view class="task_class_collect">
				<text class="class_item">{{state?.details?.departmentName}}</text>
				<text class="class_item">{{state?.details?.materialCategoryName}}</text>
				<text class="class_item">{{state?.details?.createdBy}}</text>
			</view>
			<view class="task_time">
				<view class="time_day">
					<text class="time_item">{{formatTimeWithoutSeconds(state?.details?.startTime)}}</text>
					<text class="time_item">至</text>
					<text class="time_item">{{formatTimeWithoutSeconds(state?.details?.endTime)}}</text>
					<text class="time_item" v-if="state?.details?.taskStatus === 1 && remainingDays(state?.details?.endTime)">剩余{{remainingDays(state?.details?.endTime)}}</text>
				</view>
				<view :class="['task_status', statusClassMap[state?.details?.taskStatus]]">
					{{taskStatusMap[state?.details?.taskStatus]}}
				</view>
			</view>
			<view :class="['task_desc',{'over':!state.isExpand}]">
				采集要求：{{state?.details?.collectionRequire}}
			</view>
			<view class="task_desc_all">
				采集要求：{{state?.details?.collectionRequire}}
			</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>
		<view class="page_content">
			<view class="total">
				<view class="status_tag" :class="state.auditStatus">
					<text>{{ tabStatusClassMap[state.auditStatus] }}：{{ state?.details?.taskTargetNum }}</text>
				</view>
			</view>
			<template v-for="item in (state?.details?.taskTargetVos || [])">
				<view class="list_item" v-if="item.isShow!==1" :Key="item.id">
					<view class="item_name_file">
						<view class="name_file">
							<text class="name">{{item.targetName}}</text>
							<text class="file_num">文件数量：{{item?.fileNum || 0}}</text>
						</view>
						<view class="btn" @click="HandleDetail(item.id)">{{state.auditStatus == 'notSubmitList'?'立即提交':'查看'}}</view>
					</view>
					<view class="item_info">
						<template v-for="text in ['departmentName','departmentGroupName','subjectName','gradeName','classTypeName','className','updateTime']">
							<text class="info_text" v-if="item?.[text]" :key="text">
								<template v-if="text=='updateTime'">{{formatTimeWithoutSeconds(item?.[text])}}</template>
								<template v-else>{{item?.[text]}}</template>
							</text>
						</template>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import navBar from '@/components/navBar.vue';
	import { remainingDays,formatTimeWithoutSeconds } from '@/common/common.js';
	import {onLoad,onShow} from '@dcloudio/uni-app';
	import {
		reactive,
		ref,
		nextTick,
		getCurrentInstance,
		onMounted,
		onUnmounted
	} from 'vue';
	const state = reactive({
		taskId: '', //任务id
		auditStatus:'',//审核状态
		showExpandBtn: false, //是否显示展开按钮
		isExpand: false, //是否展开
		details: {}, //详情信息
	});
	const statusClassMap = {
		1: 'status_published',
		2: 'status_closed'
	};
	const taskStatusMap = {
		1: '进行中',
		2: '已结束'
	};
	const tabStatusClassMap = {
		'notSubmitList':'待提交',// 待提交
		'notReviewList':'审核中',// 审核中
		'reviewReasonList':'已驳回',// 已驳回
		'reviewList':'已提交'// 已提交
	};
	onShow(()=>{
		const isLoadSubmitMaterialTaskDetail = uni.getStorageSync('isLoadSubmitMaterialTaskDetail');
		if(isLoadSubmitMaterialTaskDetail){
			OnLoadData();
		}
	})
	onUnmounted(()=>{
		uni.removeStorageSync('isLoadSubmitMaterialTaskDetail');
	})
	onLoad((option) => {
		state.taskId = option.taskId;
		state.auditStatus = option.auditStatus;
	})
	onMounted(() => {
		OnLoadData();
		checkTextOverflow();
	});
	const OnLoadData = () => {
		state.details = uni.getStorageSync('submitMaterialDetailInfo') || {};
		const taskTargetData = state?.details?.taskTargetVos || [];
		state.details.taskTargetNum = taskTargetData.filter(item=>item.isShow!=1)?.length;
	}
	const checkTextOverflow = () => {
		nextTick(() => {
			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;
			});
		});
	}
	// 展开收起切换
	const toggleExpand = () => {
		state.isExpand = !state.isExpand;
	}
	//提交材料
	const HandleDetail = (targetId) => {
		let auditStatus = '';
		if(state.auditStatus == 'notSubmitList'){
			auditStatus = '1';
		}else if(state.auditStatus == 'notReviewList'){
			auditStatus = '2';
		}else if(state.auditStatus == 'reviewReasonList'){
			auditStatus = '3';
		}else if(state.auditStatus == 'reviewList'){
			auditStatus = '4';
		}else{
			auditStatus = '';
		}
		uni.navigateTo({
			url: `/pages/materialCollection/submitMaterial/submitDetail?taskId=${state.taskId}&targetId=${targetId}&auditStatus=${auditStatus}`
		});
	}
	//返回
	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: inline-flex;
				align-items: center;
				flex-wrap: wrap;
				width: 100%;
				margin-top: 16rpx;
				gap: 16rpx;
				.class_item {
					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;

					&.status_pending {
						background: rgba(46, 100, 250, 0.1);
						color: #2E64FA;
					}
					
					&.status_published {
						background: rgba(82, 196, 26, 0.1);
						color: #2BC644;
					}
					
					&.status_closed {
						background: #6666661a;
						color: #666666;
					}
				}
			}

			.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;
	}

	.total {
		width: 100%;
		display: flex;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #F3F3F3;
		.status_tag{
			font-size: 24rpx;
			text-align: center;
			padding: 8rpx 12rpx;
			font-weight: 400;
			border-radius: 8rpx;
			flex-shrink: 0;
			&.notSubmitList {
				background: rgba(46,100,250,0.1);
				color: #2E64FA;
			}
			&.notReviewList {
				background: rgba(251,159,52,0.1);
				color: #FB9F34;
			}
			&.reviewReasonList {
				background: rgba(245,108,108,0.1);
				color: #F56C6C;
			}
			&.reviewList {
				background: rgba(43,198,68,0.1);
				color: #2BC644;
			}
		}
	}

	.list_item {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #F3F3F3;
		.item_name_file{
			display: flex;
			width: 100%;
			align-items: center;
			gap: 20rpx;
			.name_file{
				flex:1;
				gap: 20rpx;
				display: flex;
				align-items: center;
				.name{
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
				.file_num{
					font-weight: 400;
					font-size: 24rpx;
					color: #2E64FA;
				}
			}
			.btn{
				padding: 12rpx 24rpx;
				border-radius: 8rpx;
				border: 2rpx solid #2E64FA;
				font-weight: 400;
				font-size: 28rpx;
				color: #2E64FA;
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}
		}
		.item_info{
			margin-top: 16rpx;
			display: flex;
			gap: 16rpx;
			align-items: center;
			flex-wrap: wrap;
			.info_text{
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				flex-shrink: 0;
			}
		}
	}
</style>