workApp/pages/notice/mine/index.vue

<template>
	<view class="page_mine">
		<notice-header title="我的通知"></notice-header>

		<view class="mine_content">
			<view class="tabs_bar">
				<text v-for="(tab, idx) in tabs" :key="idx" class="tab_item" :class="{ active: activeTab === idx }" @click="activeTab = idx">{{ tab }}</text>
			</view>

			<scroll-view scroll-y class="notice_list">
				<view v-for="item in noticeList" :key="item.id" class="notice_item">
					<view class="notice_content">
						<view class="notice_title_row">
							<uni-icons type="info" size="20" color="#4A6CF7"></uni-icons>
							<text class="notice_title">{{ item.title }}</text>
						</view>
						<view class="notice_meta">
							<text class="status_tag" :class="item.statusClass">{{ item.status }}</text>
							<text class="meta_text">{{ item.category }}</text>
							<text class="meta_text">{{ item.department }}</text>
							<text class="meta_text">{{ item.time }}</text>
						</view>
					</view>
					<view class="notice_stats">
						<text class="stats_text">已读: {{ item.readCount }}人</text>
						<text class="stats_text">未读: {{ item.unreadCount }}人</text>
					</view>
					<view class="notice_actions">
						<text v-if="item.status === '待发布'" class="action_btn delete" @click="handleDelete(item.id)">删除</text>
						<text v-if="item.status !== '已关闭'" class="action_btn edit" @click="handleEdit(item.id)">编辑</text>
						<text class="action_btn detail" :class="{ disabled: item.status === '待发布' }" @click="handleDetail(item.id)">详情</text>
					</view>
				</view>

				<view v-if="noticeList.length === 0" class="no_data">
					<text class="no_data_text">暂无通知</text>
				</view>
			</scroll-view>
		</view>

		<common-tabbar></common-tabbar>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
import NoticeHeader from '@/components/notice-header.vue';

const tabs = ['全部', '待发布', '已发布', '已关闭'];
const activeTab = ref(0);

const noticeList = ref([
	{
		id: '1',
		title: '25-26学年第一学期初一期中考试安排通知',
		status: '已发布',
		statusClass: 'status-published',
		category: '教学教务',
		department: '教务处',
		time: '2024-06-03 18:00:00',
		readCount: 1500,
		unreadCount: 50
	},
	{
		id: '2',
		title: '关于开展教师培训的通知',
		status: '已发布',
		statusClass: 'status-published',
		category: '教师培训',
		department: '人事处',
		time: '2024-06-02 10:00:00',
		readCount: 280,
		unreadCount: 15
	},
	{
		id: '3',
		title: '暑期放假安排通知',
		status: '待发布',
		statusClass: 'status-pending',
		category: '学校通知',
		department: '校长办公室',
		time: '2024-06-01 09:00:00',
		readCount: 0,
		unreadCount: 0
	}
]);

const goBack = () => {
	uni.navigateBack();
};

const handleDelete = (id) => {
	uni.showModal({
		title: '确认删除',
		content: '确定要删除这条通知吗？',
		success: (res) => {
			if (res.confirm) {
				noticeList.value = noticeList.value.filter(item => item.id !== id);
				uni.showToast({ title: '删除成功', icon: 'success' });
			}
		}
	});
};

const handleEdit = (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.showToast({ title: `查看详情: ${id}`, icon: 'none' });
};
</script>

<style lang="scss">
.page_mine {
	min-height: 100vh;
	background-color: #F5F5F5;
	padding-bottom: 120rpx;
}

.mine_content {
	padding-top: 100rpx;
}

.tabs_bar {
	display: flex;
	padding: 20rpx 24rpx;
	background-color: #FFFFFF;
	gap: 40rpx;

	.tab_item {
		font-size: 28rpx;
		color: #666666;
		position: relative;

		&.active {
			color: #2E64FA;
			font-weight: 600;

			&::after {
				content: '';
				position: absolute;
				bottom: -16rpx;
				left: 0;
				right: 0;
				height: 4rpx;
				background-color: #2E64FA;
				border-radius: 2rpx;
			}
		}
	}
}

.notice_list {
	height: calc(100vh - 320rpx);
	padding: 16rpx 24rpx;
}

.notice_item {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 16rpx;

	.notice_content {
		.notice_title_row {
			display: flex;
			align-items: flex-start;
			margin-bottom: 12rpx;

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

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

			.status_tag {
				font-size: 22rpx;
				padding: 4rpx 12rpx;
				border-radius: 4rpx;

				&.status-pending {
					background-color: rgba(74, 108, 247, 0.1);
					color: #4A6CF7;
				}

				&.status-published {
					background-color: rgba(82, 196, 26, 0.1);
					color: #52C41A;
				}

				&.status-closed {
					background-color: rgba(245, 108, 108, 0.1);
					color: #F56C6C;
				}
			}

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

	.notice_stats {
		display: flex;
		margin-top: 12rpx;
		padding-top: 12rpx;
		border-top: 1rpx dashed #E8E8E8;

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

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

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

		.action_btn {
			font-size: 24rpx;
			padding: 8rpx 24rpx;
			border-radius: 8rpx;

			&.delete {
				background-color: rgba(245, 108, 108, 0.1);
				color: #F56C6C;
			}

			&.edit {
				background-color: rgba(74, 108, 247, 0.1);
				color: #4A6CF7;
			}

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

				&.disabled {
					background-color: #CCCCCC;
				}
			}
		}
	}
}

.no_data {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100rpx 0;

	.no_data_text {
		font-size: 28rpx;
		color: #999999;
	}
}

.mine_tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-around;
	background-color: #FFFFFF;
	padding: 16rpx 0;
	padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
	border-top: 1rpx solid #F0F0F0;
	height: 84px;
	box-sizing: border-box;

	.tabbar_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.tabbar_icon {
			width: 48rpx;
			height: 48rpx;
		}

		.tabbar_text {
			font-size: 22rpx;
			color: #999999;
			margin-top: 4rpx;
		}

		&.active {
			.tabbar_text {
				color: #2E64FA;
			}
		}
	}
}
</style>