workApp/pages/teacherHonor/honorAudit/index.vue

<template>
	<!-- 头部 -->
	<nav-bar height="224" backPath="workspace" title="教师专业发展" :tabList="state.tabList" :onlyTitle="false" :showFilterPicker="false" :showTabs="true" :showTabBtns="false" rightWidth="0rpx" @CommonFilterData="CommonFilterData"></nav-bar>
	<view class="page_content">
		<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_list">
				<view class="list_item" v-for="item in state.pageList" :key="item.honorTypeId" @click="HonorAuditDetail(item.honorTypeId,item.honorTypeName)">
					<view class="honor_name">{{item.honorTypeName}}</view>
					<view class="audit_status">
						<view class="status wait" v-if="state.honorStatus==='0'">待审核：{{item.number}}</view>
						<view class="status pass" v-if="state.honorStatus==='1'">已审核：{{item.number}}</view>
						<view class="status reject" v-if="state.honorStatus==='2'">已驳回：{{item.number}}</view>
						<view class="btn">{{state.honorStatus==='0'?'开始审核':'查看详情'}}</view>
					</view>
				</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>
			<uni-load-more v-if="state.pageList.length > 0" :status="state.loadStatus" />
		</scroll-view>
	</view>
</template>

<script setup>
	import navBar from '@/components/navBar.vue';
	import {queryHonorReviewDataList} from '@/reqApi/teacherHonor.js';
	import {
		reactive,
		nextTick,
		onMounted
	} from 'vue';
	const state = reactive({
		tabList:[{
            label:'待审核',
            value:'0'
        },{
            label:'已审核',
            value:'1'
        },{
            label:'已驳回',
            value:'2',
        }],
		pageLists:[],//全部数据
		pageList:[],//列表数据
		queryStr:'',
		honorStatus:'0',//0-待审核，1-已审核(审核通过),2-已驳回(审核失败)
		pageSize: 30,
		pageNum: 1,
		pages:0,
		scrollTop:0,
		oldScrollTop:0,
		isRefreshing:false,//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
		isLoading:true,//加载中
		noMoreData:false,//没有更多数据了
		loadStatus:'more',//loading状态
	})
	onMounted(() => {
		OnLoadData(true);
	});
	//切换条件选择器
	const CommonFilterData = (filterOptions,type) => {
		const { searchWord,tabsSelected } = filterOptions;
		state.queryStr = searchWord;
		state.honorStatus = tabsSelected;
		OnLoadData(true)
	}
	/*
	*获取数据
	* initPage:初始分页 从第一开始
	*/
	const OnLoadData = (initPage) => {
		state.isLoading = true;
		state.loadStatus = 'loading';
		if (initPage) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			state.pageNum = 1;//如果是下拉刷新、重新查询 默认加载第一页
			state.pageLists = [];
			state.pageList = [];
			queryHonorReviewDataList({
				honorStatus:state.honorStatus,
				queryStr:state.queryStr
			}).then(res=>{
				if(res.code == 200){
					const tableData = res?.data || [];
					state.pageLists = tableData;//全部数据
					const total = tableData?.length || 0;//总数
					state.pages = Math.ceil(total / state.pageSize);//总页数
					//默认加载
					state.pageList = state.pageLists.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';
				}
			}).finally(()=>{
				// uni.hideLoading();
				//返回到页面顶部
				if(initPage){
					GoTop();
				}
			})
		}else{
			const start = (state.pageNum - 1) * state.pageSize;
			const end = start + state.pageSize;
			const list = state.pageLists.slice(start, end);
			state.pageList = [...state.pageList, ...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) => {
		state.oldScrollTop = e.detail.scrollTop;
	}
	//返回到顶部
	const GoTop = () => {
		// 解决view层不同步的问题
		state.scrollTop = state.oldScrollTop;
		nextTick(() => {
			state.scrollTop = 0
		});
	}
	const HonorAuditDetail = (honorTypeId,honorTypeName) => {
		uni.navigateTo({
			url: `/pages/teacherHonor/honorAudit/honorAuditDetail?honorTypeId=${honorTypeId}&honorStatus=${state.honorStatus}&honorTypeName=${encodeURIComponent(honorTypeName)}`
		});
	}
</script>

<style lang="scss" scoped>
	.page_content{
		height: calc(100% - 360rpx);
		.scroll_view_y{
			height: 100%;
			.refresh_loading{
				padding: 10rpx 0;
			}
		}
		.page_list{
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			gap: 24rpx 22rpx;
			.list_item{
				display: flex;
				flex-direction: column;
				width: calc((100% - 22rpx) / 2);
				min-height: 156rpx;
				padding: 24rpx;
				background: linear-gradient( 180deg, #EDF4FF 0%, #FFFFFF 100%);
				border-radius: 20rpx;
				border: 2rpx solid #E4E7ED;
				box-sizing: border-box;
				.honor_name{
					width: 100%;
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.audit_status{
					margin-top: 24rpx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					.status{
						font-weight: 400;
						font-size: 24rpx;
						flex: 1;
						word-break: break-all;
						margin-right: 5rpx;
						&.wait{
							color: #2E64FA;
						}
						&.pass{
							color: #2BC644;
						}
						&.reject{
							color: #F56C6C;
						}
					}
				}
				.btn{
					font-weight: 400;
					font-size: 24rpx;
					color: #2E64FA;
					flex-shrink: 0;
				}
			}
		}
	}
</style>