workApp/pages/teacherHonor/myHonor/index.vue

<template>
	<!-- 头部 -->
	<nav-bar height="336" backPath="workspace" title="教师专业发展" rightType="button" :tabList="state.tabList" :tabBtns="state.tabBtns" :onlyTitle="false" :showFilterPicker="false" :showTabs="true" :showTabBtns="true" rightWidth="0rpx" @CommonFilterData="CommonFilterData">
		<template #headRightIcon>
			<view class="upload_button">
				<image class="img" src="@/static/image/icon/plusempty.png"></image>
				<text class="text" @click="UploadEditMyHonor('')">上传荣誉</text>
			</view>
		</template>
		<template #tab_btns_lef>
			<view class="select_box" @click="ShowDateTimePopup">
				<view class="select_label">{{state.dateTypeText}}</view>
				<uni-icons :type="state.showStatus?'up':'down'" class="select_icon"></uni-icons>
			</view>
			<!-- <uni-data-select class="date_select" v-model="state.dateType" :clear="false" placeholder="请选择" :localdata="state.dateTypeList">
			</uni-data-select> -->
		</template>
	</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.id" @click="UploadEditMyHonor(item)">
					<view class="item_honor_type">
						<view class="type_item_left">
							<view class="honor_type_item">{{item.awardDatetime}}</view>
							<view class="honor_type_item">{{item.honorTypeName}}</view>
						</view>
						<!-- reviewStatus: 0 需审核  1 无审核 honorStatus:0 待审核  1 已完成  2 已驳回 -->
						<view :class="['del',{'disable':Number(item.reviewStatus) === 0 && Number(item.honorStatus) === 1}]" @click.stop="DeleteMyHonor(item)">删除</view>
					</view>
					<view class="honor_content">
						<image class="honor_pic" :src="item.certPicUrl"></image>
						<view class="honor_info">
							<view class="honor_name">{{item.honorName}}</view>
							<view class="teacher_name">获奖人：{{item.teacherName}}</view>
							<!-- reviewStatus: 0 需审核  1 无审核 honorStatus:0 待审核  1 已完成  2 已驳回 -->
							<view :class="['honor_status',{'waiting':item.honorStatus===0,'finish':item.reviewStatus == 1 || item.honorStatus===1,'reject':item.honorStatus===2}]">
								<template v-if="item.honorStatus===0">待审核</template>
								<template v-if="item.reviewStatus == 1 || item.honorStatus===1">已完成</template>
								<template v-if="item.honorStatus===2">已驳回</template>
							</view>
							<view class="created_at">上传时间：{{item.createdAt}}</view>
						</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>
	<!-- 删除确认框 -->
	<popupDialog ref="popupDelDialogRef" :showFootBorder="true" :content="state.popupDelDialog.content" @DialogConfirm="DialogDelConfirm" />
	<uni-popup class="my_honor_selector_popup" ref="topPopup" :animation="false" type="top" background-color="#fff" :style="{'top':`${state.selectorPopupTop}rpx`}" @change="ChangeSelectorPopup">
		<view :class="['selector_item',{'selector_item_active':state.dateType==item.value}]" v-for="item in state.dateTypeList" @click="SelectDateTime(item)">
			<view class="selector_item_text">{{item.text}}</view>
			<uni-icons type="checkmarkempty" v-if="state.dateType==item.value" class="selector_item_icon"></uni-icons>
		</view>
	</uni-popup>
</template>

<script setup>
	import navBar from '@/components/navBar.vue';
	import uniDataSelect from '@/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue';
	import popupDialog from '@/components/popupDialog.vue';
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import {queryHonorTypeList,queryHonorList,deleteHonorData} from '@/reqApi/teacherHonor.js';
	import {
		reactive,
		nextTick,
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	const state = reactive({
		tabList:[],
		dateTypeList:[{
			text:'全部',
			value:'',
		},{
			text:'最近3月',
			value:'3',
		},{
			text:'最近半年',
			value:'6',
		},{
			text:'最近1年',
			value:'12',
		}],
		tabBtns:[{
			label:'全部',
			value:'',
		},{
			label:'待审核',
			value:'0',
		},{
			label:'已完成',
			value:'1',
		},{
			label:'已驳回',
			value:'2',
		}],
		pageLists:[],//全部数据
		pageList:[],//列表数据
		honorTypeId:'',//荣誉类型
		dateType:'',//获奖时间 全部-不传值，最近三个月-3,最近 6 个月-6,最近一年-12	
		dateTypeText:'全部',
		honorStatus:'',//0-待审核，1-已审核(审核通过),2-已驳回(审核失败)
		pageSize: 30,
		pageNum: 1,
		pages:0,
		scrollTop:0,
		oldScrollTop:0,
		isRefreshing:false,//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
		isLoading:true,//加载中
		noMoreData:false,//没有更多数据了
		loadStatus:'more',//loading状态
		popupDelDialog:{
			id:'',
			content:'是否确认删除？'
		},
		selectorPopupTop:'313',//弹框距离顶部的高度
		showStatus:false,
	})
	const topPopup = ref(null);
	const popupDelDialogRef = ref(null);
	onShow(()=>{
		const isLoadMyHonorList = uni.getStorageSync('isLoadMyHonorList');
		if(isLoadMyHonorList){
			OnLoadData(true);
		}
	})
	onMounted(() => {
		const sys = uni.getSystemInfoSync();
		const statusBarRpx = sys.statusBarHeight * 750 / sys.screenWidth;
		state.selectorPopupTop = Math.ceil(Math.ceil(statusBarRpx) + 313);
		GetHonorTypeList();
		OnLoadData(true);
	});
	onUnmounted(()=>{
		uni.setStorageSync('isLoadHonorOverview', false);
	})
	//查询荣誉类型列表
	const GetHonorTypeList = () => {
		queryHonorTypeList().then(res=>{
			if(res.code == 200){
				const list = res?.data || [];
				const tabList = list.map(item=>({
					...item,
					label:item.honorTypeName,
					value:item.id
				}))
				state.tabList = [{label:'全部',value:''},...tabList];
			}
		})
	}
	//切换条件选择器
	const CommonFilterData = (filterOptions,type) => {
		const { tabsSelected,tabBtnSelected } = filterOptions;
		state.honorTypeId = tabsSelected;
		state.honorStatus = tabBtnSelected;
		OnLoadData(true)
	}
	/*
	*获取数据
	* initPage:初始分页 从第一开始
	*/
	const OnLoadData = (initPage) => {
		state.isLoading = true;
		state.loadStatus = 'loading';
		if (initPage) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			state.pageNum = 1;//如果是下拉刷新、重新查询 默认加载第一页
			queryHonorList({
				honorTypeId:state.honorTypeId,//荣誉类型
				honorStatus:state.honorStatus,//0-待审核，1-已审核(审核通过),2-已驳回(审核失败)
				startDatetime:'',
				endDatetime:'',
				dateType:state.dateType,
			}).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
		});
	}
	/*
	*删除
	*reviewStatus: 0 需审核  1 无审核
	*honorStatus:0 待审核  1 已完成  2 已驳回
	*/
	const DeleteMyHonor = (item) => {
		if(Number(item.reviewStatus) === 0 && Number(item.honorStatus) === 1) return false;
		state.popupDelDialog.id = item.id;
		popupDelDialogRef.value.OpenDialog();
	}
	//确定删除
	const DialogDelConfirm = () => {
		deleteHonorData(state.popupDelDialog.id).then(res=>{
			if(res.code == 200){
				uni.showToast({
					title: '删除成功!',
					icon: 'none'
				});
				OnLoadData(true);
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
		})
	}
	//上传 修改 查看荣誉
	const UploadEditMyHonor = (item) => {
		const id = item?.id || '';
		let honorStatus = Number(item.honorStatus);//0 待审核  1 已完成  2 已驳回
		let reviewStatus = Number(item.reviewStatus);//0 需审核  1 无审核
		let type = '',honorName = '';
		if(item){
			type = reviewStatus === 1  || honorStatus === 0 ? 'edit' : 'view';
			honorName = type == 'view' ? encodeURIComponent(item.honorName) : '';
		}else{
			type = 'upload'
		}
		uni.navigateTo({
			url: `/pages/teacherHonor/myHonor/uploadEditMyHonor?id=${id}&type=${type}&honorName=${honorName}`
		});
	}
	//显示弹框
	const ShowDateTimePopup = () => {
		topPopup.value.open();
	}
	const SelectDateTime = (item) => {
		state.dateTypeText = item.text;
		state.dateType = item.value;
		topPopup.value.close();
	}
	const ChangeSelectorPopup = (e) => {
		state.showStatus = e.show;
	}
</script>

<style lang="scss" scoped>
	.date_select{
		width: 196rpx;
		flex: auto;
		flex-shrink: 0;
		:deep(.uni-select__selector){
			position: fixed !important;
			top:313rpx !important;
			left: 24rpx;
			width: 196rpx;
		}
	}
	.select_box{
		width: 196rpx;
		height: 72rpx;
		padding: 16rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid #DCDFE6;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		.select_label{
			flex:1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.select_icon{
			font-size: 32rpx;
			margin-left: 10rpx;
		}
	}
	.page_content{
		height: calc(100% - 472rpx);
		.scroll_view_y{
			height: 100%;
			.refresh_loading{
				padding: 10rpx 0;
			}
		}
		.page_list{
			display: flex;
			width: 100%;
			flex-direction: column;
			.list_item{
				display: flex;
				width: 100%;
				flex-direction: column;
				margin-top: 32rpx;
				&:nth-child(1){
					margin-top: 0;
				}
				.item_honor_type{
					display: flex;
					width: 100%;
					align-items: center;
					.type_item_left{
						display: flex;
						flex:1;
						align-items: center;
						overflow: hidden;
					}
					.del{
						font-weight: 400;
						font-size: 28rpx;
						color: #F56C6C;
						&.disable{
							color: #bbbbbb;
							
						}
					}
					.honor_type_item{
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						&:nth-child(1){
							font-weight: 500;
							margin-right: 24rpx;
						}
						&:nth-child(2){
							flex:1;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
				.honor_content{
					margin-top: 16rpx;
					display: flex;
					width: 100%;
					padding: 16rpx;
					box-sizing: border-box;
					background-color: #F8FAFE;
					border-radius: 15rpx;
					border: 2rpx solid #EBEEF5;
					.honor_pic{
						width: 320rpx;
						height: 200rpx;
						border-radius: 8rpx;
						margin-right: 16rpx;
						flex-shrink: 0;
					}
					.honor_info{
						flex:1;
						display: flex;
						justify-content: space-around;
						flex-direction: column;
						overflow: hidden;
						.honor_name{
							font-weight: 500;
							font-size: 32rpx;
							color: #333333;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.teacher_name{
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.honor_status{
							font-weight: 500;
							font-size: 28rpx;
							width: 100%;
							&.waiting{
								color: #2E64FA;
							}
							&.finish{
								color: #2BC644;
							}
							&.reject{
								color: #F56C6C;
							}
						}
						.created_at{
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: 400;
							font-size: 28rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}
</style>