workApp/pages/teacherHonor/honorOverview/index.vue

<template>
	<!-- 头部 -->
	<nav-bar height="120" backPath="workspace" title="教师专业发展" :showHeaderborder="true" :showFilterPicker="false" :showTabs="false" :onlyTitle="false" rightWidth="0rpx" @CommonFilterData="CommonFilterData"></nav-bar>
	<view class="page_content">
		<view class="count_list">
			<view class="count_item">
				<text class="title">全部荣誉</text>
				<text class="count">{{state.countList.honorCount}}</text>
			</view>
			<view class="count_item">
				<text class="title">待审核</text>
				<text class="count">{{state.countList.reViewCount}}</text>
			</view>
			<view class="count_item">
				<text class="title">已完成</text>
				<text class="count">{{state.countList.overCount}}</text>
			</view>
			<view class="count_item">
				<text class="title">已驳回</text>
				<text class="count">{{state.countList.overruleCount}}</text>
			</view>
		</view>
		<view class="list_title">
			<view class="title">荣誉类型</view>
			<view class="add_btn" @click="AddEditHonorType('add')">
				<uni-icons class="btn_icon" type="plusempty"></uni-icons>
				<text class="btn_text">新建类型</text>
			</view>
		</view>
		<view class="honor_list">
			<template v-if="state.tableData.length > 0">
				<view class="list_item" v-for="item in state.tableData" :key="item.honorTypeId">
					<view class="item_name">
						<text class="name">{{item.honorTypeName}}</text>
						<view class="more_icon" @click="ShowMorePopupDialog(item.honorTypeName,item.honorTypeId,item.deleteStatus)">
							<uni-icons type="more-filled" style="color: #999999;font-size: 32rpx;"></uni-icons>
						</view>
					</view>
					<view class="item_sum">
						<image class="cup" src="@/static/image/icon/honor_cup.png"></image>
						<view class="sum">共{{item.number}}项</view>
						<template v-if="Number(item.reviewStatus) === 0">
							<image class="seal" src="@/static/image/icon/honor_seal.png"></image>
							<view class="audit">需审核</view>
						</template>
					</view>
				</view>
			</template>
			<no-data v-if="!state.isLoading && state.tableData.length == 0" />
		</view>
	</view>
	<custom-popup-dialog ref="popupDialogRef" :title="state.popupDialog.title" :isMaskClick="true" :showDialogClose="false" :showDialogFooter="false" @DialogConfirm="DialogConfirm">
		<view class="popup_content">
			<view class="content_item" @click="AddEditHonorType('edit')">
				<view class="content_item_left">
					<image class="img" src="/static/image/icon/edit.png"></image>
					<text class="text">编辑</text>
				</view>
				<uni-icons class="content_item_right" type="right" style="color: #333333;font-size: 36rpx;"></uni-icons>
			</view>
			<view class="content_item" @click="DeleteHonorTypeItem">
				<view class="content_item_left">
					<image class="img" src="/static/image/icon/delete.png"></image>
					<text :class="['text',{'red':state.popupDelDialog.deleteStatus!=1,'disabled':state.popupDelDialog.deleteStatus==1}]">删除</text>
				</view>
			</view>
		</view>
	</custom-popup-dialog>
	<!-- 删除确认框 -->
	<popup-dialog ref="popupDelDialogRef" :showFootBorder="true" :content="state.popupDelDialog.content" @DialogConfirm="DialogDelConfirm" />
</template>

<script setup>
	import navBar from '@/components/nav-bar.vue';
	import noData from '@/components/no-data.vue';
	import customPopupDialog from '@/components/custom-popup-dialog.vue';
	import popupDialog from '@/components/popup-dialog.vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import {queryHonorTypeOverView,deleteHonorType} from '@/reqApi/teacherHonor.js';
	import {
		reactive,
		ref,
		onMounted,
		nextTick
	} from 'vue';
	const state = reactive({
		queryStr: '',
		countList:{
			honorCount:'',//全部荣誉
			reViewCount:'',//待审核
			overCount:'',//已完成
			overruleCount:''//已驳回
		},
		isLoading:true,//加载中
		tableData:[],
		popupDialog:{
			title:'',
			id:'',//荣誉id
			deleteStatus:0//0 可删 1 不可删
		},
		popupDelDialog:{
			content:''
		}
	})
	//提示框
	const popupDialogRef = ref(null);
	const popupDelDialogRef = ref(null);
	onMounted(() => {
		OnLoadData();
	});
	const OnLoadData = () => {
		state.isLoading = true;
		queryHonorTypeOverView({
			queryStr:state.queryStr
		}).then(res=>{
			if(res.code == 200 && res.data){
				const { honorCount, reViewCount, overCount, overruleCount,tableData } = res.data;
				state.countList.honorCount = honorCount || 0;
				state.countList.reViewCount = reViewCount || 0;
				state.countList.overCount = overCount || 0;
				state.countList.overruleCount = overruleCount || 0;
				state.tableData = tableData || [];
			}else{
				state.countList.honorCount = '';
				state.countList.reViewCount = '';
				state.countList.overCount = '';
				state.countList.overruleCount = '';
				state.tableData = [];
			}
		}).finally(()=>{
			state.isLoading = false;
		})
	}
	//搜索
	const CommonFilterData = (searchWord,filterPicker,tabsSelected,type) => {
		if(type=='search'){
			state.queryStr = searchWord;
			OnLoadData();
		}
	}
	//编辑 删除
	const ShowMorePopupDialog = (title,id,deleteStatus) => {
		state.popupDialog.title = title;
		state.popupDialog.id = id;
		state.popupDelDialog.deleteStatus = deleteStatus;
		popupDialogRef.value.OpenDialog('bottom');
	}
	//删除弹框
	const DeleteHonorTypeItem = () => {
		if(state.popupDelDialog.deleteStatus == 1) return false
		state.popupDelDialog.content = `确定要删除【${state.popupDialog.title}】吗？`;
		popupDelDialogRef.value.OpenDialog();
	}
	//确定删除
	const DialogDelConfirm = () => {
		deleteHonorType(state.popupDialog.id).then(res=>{
			if(res.code == 200){
				uni.showToast({
					title: '删除成功!',
					icon: 'none'
				});
				OnLoadData();
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
		})
	}
	//新建或编辑荣誉类型
	const AddEditHonorType = (type) => {
		const id = type=='add'?'':state.popupDialog.id;
		uni.navigateTo({
			url: `/pages/teacherHonor/honorOverview/honorTypeDetail?id=${id}`
		});
	}
</script>

<style lang="scss" scoped>
	.count_list{
		width: 100%;
		display: flex;
		margin-top: 32rpx;
		gap: 20rpx;
		.count_item{
			display: flex;
			align-items: center;
			flex-direction: column;
			width: calc((100% - 60rpx) / 4);
			background-color: #F7FAFF;
			border-radius: 20rpx;
			border: 2rpx solid #E4E7ED;
			padding: 18rpx 16rpx 16rpx;
			height: 136rpx;
			box-sizing: border-box;
			.title{
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				text-align: center;
			}
			.count{
				margin-top: 6rpx;
				font-weight: 600;
				font-size: 48rpx;
				color: #333333;
			}
		}
	}
	.list_title{
		width: 100%;
		display: flex;
		margin-top: 40rpx;
		justify-content: space-between;
		align-items: center;
		.title{
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
		.add_btn{
			width: 204rpx;
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #2E64FA;
			border-radius: 8rpx;
			border: 2rpx solid #2E64FA;
			color: #FFFFFF;
			.btn_icon{
				color: #FFFFFF !important;
				font-size: 28rpx !important;
				margin-right: 8rpx;
			}
			.btn_text{
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 44rpx;
			}
		}
	}
	.honor_list{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 22rpx;
		padding-top: 22rpx;
		.list_item{
			display: flex;
			flex-direction: column;
			width: calc((100% - 22rpx) / 2);
			background: linear-gradient( 180deg, #EDF4FF 0%, #FFFFFF 100%);
			border-radius: 20rpx;
			border: 2rpx solid #E4E7ED;
			margin-top: 10rpx;
			padding: 24rpx;
			box-sizing: border-box;
			.item_name{
				display: flex;
				align-items: center;
				width: 100%;
				.name{
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
					margin-right: 8rpx;
					flex:1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.more_icon{
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 32rpx;
					height: 32rpx;
				}
			}
			.item_sum{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				width: 100%;
				margin-top: 38rpx;
				.cup,.seal{
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
				.sum,.audit{
					font-weight: 400;
					font-size: 28rpx;
				}
				.sum{
					color: #2E64FA;
					margin-right: 24rpx;
				}
				.audit{
					color: #F56C6C;
				}
			}
		}
	}
	.popup_content{
		display: flex;
		width: 100%;
		height: 360rpx;
		flex-direction: column;
		margin-top: 8rpx;
		.content_item{
			display: flex;
			width: 100%;
			height: 88rpx;
			padding: 0 48rpx;
			box-sizing: border-box;
			margin-top: 16rpx;
			align-items: center;
			justify-content: space-between;
			.content_item_left{
				display: flex;
				height:100%;
				align-items: center;
				.img{
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
				.text{
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					&.red{
						color: #F56C6C;
					}
					&.disabled{
						color: #bbb;
					}
				}
			}
		}
	}
</style>