workApp/pages/notice/overview/noticeDetail.vue

<template>
	<view class="notice_detail">
		<view class="detail_header" :style="{ paddingTop: statusBarHeight + 'px' }">
			<uni-icons type="back" size="24" color="#333333" @click="handleBack"></uni-icons>
			<text class="header_title">通知详情</text>
			<text class="header_placeholder"></text>
		</view>

		<view class="detail_content">
			<view class="notice_info">
				<text class="notice_title">{{ noticeItem.title }}</text>
				<view class="notice_meta">
					<view class="notice_left">
						<text class="meta_item">{{ noticeItem.category }}</text>
						<text class="meta_item">{{ noticeItem.department }}</text>
						<text class="meta_item">{{ noticeItem.time }}</text>
					</view>

					<view class="notice_right">
						<view class="status_tag" :class="getStatusClass(noticeItem.noticeStatus)">
							<text>{{ getStatusText(noticeItem.noticeStatus) }}</text>
						</view>
					</view>

				</view>
			</view>

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

					<view class="search_box">
						<image src="/static/image/overview/search.png" class="search_icon"></image>
						<input type="text" class="search_input" placeholder="请输入关键字搜索"
							placeholder-class="search_placeholder" v-model="searchWord" @input="handleSearch" />
					</view>
				</view>

				<view class="stats_row">
					<text class="stats_text">共 {{ noticeItem.readCount + noticeItem.unreadCount }} 人</text>
				</view>

				<scroll-view scroll-y class="reader_list">
					<view v-for="item in filteredReaders" :key="item.id" class="reader_item">
						<view class="reader_row reader_row_first">
							<text class="reader_name">{{ item.name }}</text>
							<view class="read_status" :class="item.readStatus === 1 ? 'read' : 'unread'">
								<text>{{ item.readStatus === 1 ? '已读' : '未读' }}</text>
							</view>
						</view>
						<view  class="reader_row reader_row_second">
							<!-- 部门 -->
							<text v-if="item.departmentName" class="reader_detail">{{ item.departmentName }}</text>
							<text v-if="item.groupName" class="reader_detail">{{ item.groupName }}</text>
							<!-- 班级 -->
							<text v-if="item.gradeName" class="reader_detail">{{ item.gradeName }}</text>
							<text v-if="item.classTypeName" class="reader_detail">{{ item.classTypeName }}</text>
							<text v-if="item.classTypeName" class="reader_detail">{{ item.classTypeName }}</text>
							<!-- 科目 -->
							<text v-if="item.subjectName" class="reader_detail">{{ item.subjectName }}</text>

							<text v-if="item.readTime" class="reader_detail">{{ item.readTime }}</text>
						</view>
					</view>

					<no-data v-if="filteredReaders.length === 0" centered text="暂无数据" />
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
import overviewApi from '@/reqApi/overview.js';
import NoData from '@/components/no-data.vue';
import { useSafeArea } from '@/common/safeArea';

const { statusBarHeight, initSafeArea } = useSafeArea();

const tabs = ['全部', '已读', '未读'];
const activeTab = ref(0);
const searchWord = ref('');
const noticeItem = ref({});
const readerList = ref([]);
const noticeId = ref('');

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

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

const getStatusText = (status) => {
	return statusMap[status] || '';
};

const getStatusClass = (status) => {
	return statusClassMap[status] || '';
};

const filteredReaders = computed(() => {
	let list = readerList.value;
	if (activeTab.value === 1) {
		list = list.filter(item => item.readStatus === 1);
	} else if (activeTab.value === 2) {
		list = list.filter(item => item.readStatus !== 1);
	}
	if (searchWord.value) {
		const keyword = searchWord.value.toLowerCase();
		list = list.filter(item => item.name && item.name.toLowerCase().includes(keyword));
	}
	return list;
});

const fetchReaderList = async () => {
	try {
		const readStatusMap = [-1, 1, 0];
		const params = {
			id: noticeId.value,
			pageNum: 1,
			pageSize: 20,
			readStatus: readStatusMap[activeTab.value],
			word: searchWord.value || ''
		};
		const res = await overviewApi.noticeDetail(params);
		if (res.data && res.data.records && res.data.records.length > 0 && res.data.records[0].userList) {
			readerList.value = res.data.records[0].userList;
		} else {
			readerList.value = [];
		}
	} catch (error) {
		console.error('获取读者列表失败:', error);
		readerList.value = [];
	}
};

const handleSearch = () => {
	fetchReaderList();
};

const handleTabChange = (idx) => {
	activeTab.value = idx;
	fetchReaderList();
};

const handleBack = () => {
	const pages = getCurrentPages();
	if (pages.length > 1) {
		const prevPage = pages[pages.length - 2];
		if (prevPage.route === 'pages/notice/overview/index') {
			uni.navigateBack();
		} else {
			uni.redirectTo({ url: '/pages/notice/overview/index' });
		}
	} else {
		uni.redirectTo({ url: '/pages/notice/overview/index' });
	}
};

onMounted(() => {
	initSafeArea();
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];
	const itemStr = currentPage.options?.item;
	const id = currentPage.options?.id;

	if (itemStr) {
		try {
			const item = JSON.parse(decodeURIComponent(itemStr));
			noticeItem.value = item;
		} catch (e) {
			console.error('解析详情数据失败:', e);
		}
	}

	if (id) {
		noticeId.value = id;
		fetchReaderList();
	}
});
</script>

<style lang="scss" scoped>
.notice_detail {
	width: 100%;
	height: 100vh;
	background-color: #F5F5F5;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;

	.detail_header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
		background-color: #FFFFFF;
		border-bottom: 2rpx solid #F3F3F3;
		flex-shrink: 0;

		.header_title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}

		.header_placeholder {
			width: 48rpx;
		}
	}

	.detail_content {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.notice_info {
		background-color: #FFFFFF;
		padding: 32rpx 24rpx;
		margin-bottom: 16rpx;

		.notice_title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			line-height: 1.5;
			display: block;
			margin-bottom: 16rpx;
		}

		.notice_meta {
			display: flex;
			align-items: center;
			justify-content: space-between;

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

				.meta_item {
					font-size: 24rpx;
					color: #999999;
					line-height: 48rpx;
				}
			}

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

					&.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;
					}
				}
			}
		}
	}

	.reader_container {
		background-color: #FFFFFF;
		border-radius: 8rpx;
		overflow: hidden;
		padding: 24rpx;
		flex: 1;
		display: flex;
		flex-direction: column;

		.tabs_bar {
			display: flex;
			align-items: center;
			gap: 48rpx;
			// border-bottom: 2rpx solid #EBEEF5;
			height: 72rpx;

			.tabs_left {
				display: flex;
				align-items: center;
				gap: 48rpx;

				.tab_item {
					font-size: 28rpx;
					color: #999999;
					font-weight: 400;
					position: relative;
					// margin-right: 48rpx;

					&.active {
						color: #2E64FA;
						font-weight: 500;
						font-size: 32rpx;

						&::after {
							content: '';
							position: absolute;
							bottom: -10rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 64rpx;
							height: 4rpx;
							background-color: #2E64FA;
							// border-radius: 2rpx;
						}
					}
				}
			}

			.search_box {
				flex: 1;
				display: flex;
				align-items: center;
				// background-color: #F5F7FA;
				border-radius: 8rpx;
				border: 2rpx solid #DCDFE6;
				width: 320rpx;
				height: 72rpx;

				.search_icon {
					width: 32rpx;
					height: 32rpx;
					margin-left: 24rpx;
					margin-right: 8rpx;
				}

				.search_input {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					margin-right: 32rpx;
				}

				.search_placeholder {
					color: #C0C4CC;
				}
			}
		}

		.stats_row {
			// padding: 0 24rpx;
			margin-bottom: 16rpx;
			margin-top: 24rpx;

			.stats_text {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.reader_list {
			flex: 1;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			::-webkit-scrollbar {
				display: none;
			}

			.reader_item {
				border-top: 2rpx solid #F3F3F3;
				padding: 24rpx 0;
				.reader_row {
					display: flex;
					align-items: center;
					gap: 16rpx;

					&.reader_row_first {
						justify-content: space-between;
						margin-bottom: 16rpx;
					}

					&.reader_row_second {
						flex-wrap: wrap;
						height: 34rpx;
						line-height: 34rpx;
					}

					.reader_name {
						font-size: 24rpx;
						font-weight: 500;
						color: #333333;
					}

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

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

						&.read {
							background: rgba(82, 196, 26, 0.1);
							color: #2BC644;
						}

						&.unread {
							background: rgba(46, 100, 250, 0.1);
							color: #2E64FA;
						}
					}
				}
			}

		}
	}
}
</style>