workApp/pages/notice/overview/index.vue

<template>
	<view class="page_notice" :style="{paddingTop: statusBarHeight + 322 + 'rpx', paddingBottom: safeAreaBottom + 160 + 'rpx' }">
		<notice-header title="校内通知" :showSearch="true" :showFilter="true" :showTabs="true" :tabs="tabs"
			:activeTab="activeTab" @tabChange="handleTabChange" @typeChange="handleTypeChange"
			@timeChange="handleTimeChange" @searchChange="handleSearchChange"></notice-header>

		<view class="notice_content">
			<view class="notice_list">
				<scroll-view scroll-y v-for="item in noticeList" :key="item.id" class="notice_item">
					<!-- 通知内容 -->
					<view class="item_content">
						<view class="notice_title_row">
							<image class="notice_icon" :src="item.icon" mode="aspectFit"></image>
							<text class="notice_title">{{ item.title }}</text>
						</view>
						<view class="notice_meta">
							<view class="status_tag" :class="item.statusClass">
								<text>{{ item.status }}</text>
							</view>
							<text class="meta_text textLength">{{ item.category }}</text>
							<text class="meta_text textLength">{{ item.department }}</text>
							<text class="meta_text">{{ item.time }}</text>
						</view>
					</view>
					<!-- 通知底部 -->
					<view class="item_bottom">
						<view class="notice_stats">
							<text class="stats_text">已读: {{ item.readCount }}人</text>
							<text class="stats_text">未读: {{ item.unreadCount }}人</text>
						</view>
						<view class="notice_actions">
							<view class="action_btn " :class="getDeleteClass(item)" @click="handleDelete(item.id)">
								<text>删除</text>
							</view>
							<view class="action_btn edit" @click="handleEdit(item.id)">
								<text>编辑</text>
							</view>
							<view class="action_btn detail" @click="handleDetail(item.id)">
								<text>详情</text>
							</view>
						</view>
					</view>

				</scroll-view>

				<no-data v-if="noticeList.length === 0" text="暂无通知" />
			</view>
		</view>

		<common-tabbar></common-tabbar>

		<ConfirmModal :visible="showDeleteModal" title="提示" content="确定要删除该通知吗？" cancelText="取消" confirmText="确定"
			@cancel="closeDeleteModal" @confirm="confirmDelete"></ConfirmModal>

	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import NoticeHeader from '@/components/notice-header.vue';
import ConfirmModal from '@/components/confirm-modal.vue';
import overviewApi from '@/reqApi/overview.js';
import store from '@/store/index.js';
import NoData from '@/components/no-data.vue';
import { useSafeArea } from '@/common/safeArea';

const { statusBarHeight, safeAreaBottom, initSafeArea } = useSafeArea();

const tabs = ['全部', '待发布', '已发布', '已关闭'];
const activeTab = ref(-1);
const typeId = ref('0');
const timeType = ref(0);
const word = ref('');
const noticeList = ref([]);
const showDeleteModal = ref(false);
const deleteId = ref(null);

const statusMap = {
	0: '待发布',
	1: '已发布',
	2: '已关闭'
};

const statusClassMap = {
	0: 'status-pending',
	1: 'status-published',
	2: 'status-closed'
};

const fetchNoticeList = async () => {
	try {
		const params = {
			noticeStatus: activeTab.value,
			pageParam: {
				pageNum: 1,
				pageSize: 9999
			},
			typeId: typeId.value,
			timeType: timeType.value,
			word: word.value
		};
		const res = await overviewApi.noticesPage(params);
		if (res.data && res.data.records) {
			noticeList.value = res.data.records.map(item => ({
				id: item.id,
				title: item.noticeName,
				status: statusMap[item.noticeStatus],
				noticeStatus: item.noticeStatus,
				statusClass: statusClassMap[item.noticeStatus],
				category: item.typeName,
				department: item.createTeacherName,
				time: item.releaseTime,
				readCount: item.readNum,
				unreadCount: item.unReadNum,
				icon: '/static/image/todo/xiaoxi.png'
			}));
		} else {
			noticeList.value = [];
		}
	} catch (error) {
		console.error('获取通知列表失败:', error);
	}
};

onMounted(() => {
	initSafeArea();
});

onShow(() => {
	fetchNoticeList();
});

const handleTabChange = (status) => {
	activeTab.value = status;
	fetchNoticeList();
};

const handleTypeChange = (id) => {
	typeId.value = id;
	fetchNoticeList();
};

const handleTimeChange = (time) => {
	timeType.value = time;
	fetchNoticeList();
};

const handleSearchChange = (searchWord) => {
	word.value = searchWord;
	fetchNoticeList();
};

const getDeleteClass = (item) => {
	if (item.noticeStatus !== 2) {
		return 'delete disabled';
	}
	return 'delete ';
};

const handleDelete = (id) => {
	const item = noticeList.value.find(item => item.id === id);
	if (item && item.noticeStatus !== 2) {
		return;
	}
	deleteId.value = id;
	showDeleteModal.value = true;
};

const closeDeleteModal = () => {
	showDeleteModal.value = false;
	deleteId.value = null;
};

const confirmDelete = async () => {
	if (!deleteId.value) {
		closeDeleteModal();
		return;
	}
	try {
		await overviewApi.delete_notices({ id: deleteId.value });
		noticeList.value = noticeList.value.filter(item => item.id !== deleteId.value);
		uni.showToast({ title: '删除成功', icon: 'success' });
	} catch (error) {
		uni.showToast({ title: '删除失败', icon: 'none' });
	}
	closeDeleteModal();
};

const handleEdit = (id) => {
	const item = noticeList.value.find(item => item.id === id);
	uni.navigateTo({ url: `/pages/notice/publish/index?id=${id}` });
};

const handleDetail = (id) => {
	const item = noticeList.value.find(item => item.id === id);
	if (item && item.status === '待发布') {
		uni.showToast({ title: '待发布通知暂无法查看详情', icon: 'none' });
		return;
	}
	uni.navigateTo({ url: `/pages/notice/overview/noticeDetail?id=${id}` });
};
</script>

<style lang="scss">
.page_notice {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	box-sizing: border-box;
}

.notice_content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-left: 0rpx;
	padding-right: 0rpx;
}

.notice_list {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 24rpx;
}

.notice_item {
	background-color: #F9FAFF;
	border-radius: 20rpx;
	margin-bottom: 24rpx;
	border: 2rpx solid #E4E7ED;

	.item_content {
		padding: 24rpx;

		.notice_title_row {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;

			.notice_icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			.notice_title {
				flex: 1;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.notice_meta {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 16rpx;

			.status_tag {
				font-size: 24rpx;
				height: 48rpx;
				width: 96rpx;
				text-align: center;
				line-height: 48rpx;
				border-radius: 4rpx;
				font-weight: 400;
				border-radius: 8rpx;

				&.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: rgba(245, 108, 108, 0.1);
					color: #F56C6C;
				}
			}

			.meta_text {
				font-size: 24rpx;
				color: #999999;
				line-height: 48rpx;
			}
			.textLength {
					max-width: 160rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
		}
	}

	.item_bottom {
		border-top: 2rpx solid #E4E7ED;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 16rpx;

		.notice_stats {
			display: flex;

			.stats_text {
				font-size: 24rpx;
				color: #999999;

				&:first-child {
					margin-right: 32rpx;
				}
			}
		}

		.notice_actions {
			display: flex;
			justify-content: flex-end;
			gap: 16rpx;

			.action_btn {
				font-size: 24rpx;
				padding: 12rpx 24rpx;
				border-radius: 8rpx;
				border: 2rpx solid transparent;

				&.delete {
					border-color: #F56C6C;
					color: #F56C6C;
					background-color: #FFFFFF;

					&.disabled {
						border-color: #C0C4CC;
						color: #C0C4CC;
						background-color: #FFFFFF;
					}
				}

				&.edit {
					border-color: #2E64FA;
					color: #2E64FA;
					background-color: #FFFFFF;

					&.disabled {
						border-color: #C0C4CC;
						color: #C0C4CC;
						background-color: #FFFFFF;
					}
				}

				&.detail {
					background-color: #2E64FA;
					color: #FFFFFF;

					&.disabled {
						border-color: #C0C4CC;
						color: #C0C4CC;
						background-color: #FFFFFF;
					}
				}
			}
		}
	}

	&:last-child {
		margin-bottom: 0;
	}
}
</style>