workApp/pages/materialCollection/reviewMaterial/auditDetail.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">
				<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?.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?.createBy}}</text>
					</view>
					<view class="task_time">
						<view class="time_day">
							<text class="time_item">{{state?.details?.startTime}}</text>
							<text class="time_item">至</text>
							<text class="time_item">{{state?.details?.endTime}}</text>
							<text class="time_item" v-if="remainingDays(state?.details?.endTime) > 0">剩余{{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>
				<!-- 吸顶 -->
				<!-- <uv-sticky style="top:98rpx"> -->
				<view class="search_tabs">
					<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">共 {{state.pageList?.length || 0}} 人</view>
						<view class="list_item" v-for="item in state.pageList" :Key="item.id">
							<view class="item_name_file">
								<view class="name_file">
									<text class="name">{{item.targetName}}</text>
									<text class="file_num">文件数量：{{item?.taskTargetFileVos?.length || 0}}</text>
								</view>
								<view class="btn" @click="handleAudit(item)">{{state.tabsSelected>0?'查看':'审核'}}</view>
							</view>
							<view class="item_info">
								<text class="info_text">{{item.showInfo}}</text>
								<text class="info_text">{{item?.taskTargetFileVos?.[item.taskTargetFileVos.length -1]?.createTime}}</text>
							</view>
						</view>
						<view class="no_data" v-if="!state.isLoading && state.pageList.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.pageList.length > 0" :status="state.loadStatus" />
			</scroll-view>	
		</view>
	</view>
</template>

<script setup>
	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 { remainingDays } from '@/common/common.js';
	import {getReviewTaskList} from '@/reqApi/notification.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref,
		nextTick,
		getCurrentInstance,
		onMounted,
		onUnmounted
	} from 'vue';
	const state = reactive({
		taskId: '', //任务id
		tabsSelected: 0, //默认选中tab值
		tabList: [{
			label: '待审核',
			value: 0
		}, {
			label: '已审核',
			value: 1
		}, {
			label: '已驳回',
			value: 2
		}], //tab列表
		showExpandBtn: false, //是否显示展开按钮
		isExpand: false, //是否展开
		pageSize: 50,
		pageNum: 1,
		scrollTop: 0,
		oldScrollTop: 0,
		isRefreshing: false, //设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
		isLoading: true, //加载中
		noMoreData: false, //没有更多数据了
		loadStatus: 'more', //loading状态
		details: {}, //详情信息
		pageList: [], //列表数据
		searchBoxTop:0,//搜索框距离顶部的高度
		isSticky:false,//是否吸顶
	});
	const statusClassMap = {
		1: 'status_published',
		2: 'status_closed'
	};
	const taskStatusMap = {
		1: '进行中',
		2: '已结束'
	};
	onShow(()=>{
		const isLoadReviewMaterialDetailList = uni.getStorageSync('isLoadReviewMaterialDetailList');
		if(isLoadReviewMaterialDetailList){//审核驳回通过返回刷新列表
			OnLoadData(true);
		}
	})
	onLoad((option) => {
		state.taskId = option.taskId;
	})
	onMounted(() => {
		state.details = uni.getStorageSync('collectReviewDetailInfo') || {};
		OnLoadData(true,true); // 数据加载完成后触发 checkTextOverflow
	});
	onUnmounted(() => {
		// uni.removeStorageSync('isLoadReviewMaterialDetailList');//移除缓存
		uni.removeStorageSync('collectReviewDetailInfo');//移除缓存
	})
	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.select('.page_content_data').boundingClientRect((rect) => {
					state.searchBoxTop = rect?.top || 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.select('.page_content_data').boundingClientRect((rect) => {
				state.searchBoxTop = rect?.top || 0;
			});
			query.exec(() => {
				// 所有回调执行完毕后触发
				state.showExpandBtn = taskDescAllHeight > taskDescHeight + 1;
			});
		});
	}
	// 展开收起切换
	const toggleExpand = () => {
		state.isExpand = !state.isExpand;
		nextTick(() => {
			const instance = getCurrentInstance();
			// 安全保护
			if (!instance || !instance.proxy) {
				// 备用方案：全局查询（要求元素 class 唯一）
				query.select('.page_content_data').boundingClientRect((rect) => {
					state.searchBoxTop = rect?.top || 0;
				});
				return;
			}
			query.select('.page_content_data').boundingClientRect((rect) => {
				state.searchBoxTop = rect?.top || 0;
			});
		});
	}
	//切换tab
	const SelectTabsValue = (val) => {
		state.tabsSelected = val;
		OnLoadData(true);
	}
	//搜索
	const HandleSearchInput = (val) => {
		state.searchWord = val;
		OnLoadData(true);
	}
	const ToSafeArr = (val) => {
	  if (Array.isArray(val)) return val
	  return val ? [val] : []
	}
	/*
	 *详情
	 * initPage:初始分页 从第一开始
	 * initData:初始加载
	 */
	const OnLoadData = (initPage,initData = false) => {
		// uni.showLoading({
		// 	title: '加载中'
		// });
		if (initPage) state.pageNum = 1;//如果是下拉刷新、重新查询 默认加载第一页
		state.isLoading = true;
		state.loadStatus = 'loading';
		getReviewTaskList({
			taskId: state.taskId,
			reviewStatus: state.tabsSelected,
			pageNum:  state.pageNum,
			pageSize:  state.pageSize
		}).then(res=>{
			if(res.code == 200){
				const total = Number(res?.data?.reviewInfoVoPageResult?.total) || 0;//总数
				const pages = Math.ceil(total / state.pageSize);//总页数
				const recordsData = res?.data?.reviewInfoVoPageResult?.records || [];
				state.pageList = initPage ? recordsData : [...state.pageList,...recordsData];
				state.noMoreData = state.pageNum == pages;
				state.pageNum++;
				if(initData){
					checkTextOverflow();
				}
			}
		}).finally(()=>{
			// uni.hideLoading();
			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 handleAudit = (item) => {
		uni.setStorageSync('reviewMaterialDetailData', item);//详情数据
		uni.navigateTo({
			url: `/pages/materialCollection/reviewMaterial/auditResult?taskStatus=${state?.details.taskStatus}`
		});
	};
	//返回
	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;
			// height: calc(100% - 96rpx);
		}
		.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: 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;
	}
	:deep(.search_tabs){
		display: flex;
		width: 100%;
		flex-direction: column;
		background-color: #FFFFFF;
		padding: 24rpx;
		border-bottom: 2rpx solid #F3F3F3;
	}
	.scroll_tabs {
		margin-top:0;
		padding: 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;
		.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{
				width: 104rpx;
				height: 64rpx;
				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;
			}
		}
	}
	.no_data{
		margin-top: 24rpx;
	}
</style>