yunzerwebsiteallinone/uniapp/pages/oa/notice/detail.vue

<template>
	<view class="page">
		<scroll-view class="body" scroll-y :show-scrollbar="false">
		<view class="body-inner">
			<view v-if="loading" class="state-box">
				<text class="state-text">加载中...</text>
			</view>
			<u-empty
				v-else-if="!notice"
				mode="list"
				:icon-size="80"
				text="公告不存在或已被删除"
			/>
			<block v-else>
				<view class="detail-card">
					<view class="tag-row">
						<u-tag v-if="notice.is_top" text="置顶" type="error" size="mini" />
						<u-tag
							:text="getNoticeLevelLabel(notice.level)"
							:type="levelTagType(notice.level)"
							size="mini"
							plain
						/>
						<u-tag :text="getNoticeTypeLabel(notice.notice_type)" type="primary" size="mini" plain />
					</view>
					<text class="title">{{ notice.title }}</text>
					<view class="meta">
						<text>{{ notice.publisher_name || '系统' }}</text>
						<text>·</text>
						<text>{{ notice.publish_time || '-' }}</text>
					</view>
					<view class="stat-row">
						<view class="stat-item">
							<FaIcon name="eye" color="#8a94ad" :size="13" />
							<text>{{ notice.read_count || 0 }} 次阅读</text>
						</view>
					</view>
				</view>

				<view class="content-card">
					<text class="content">{{ notice.content || '（无正文）' }}</text>
				</view>
			</block>
			<view class="bottom-space" />
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getNotice, getNoticeTypeLabel, getNoticeLevelLabel } from '@/api/oa.js'
import { isLoggedIn } from '@/utils/auth.js'

const id = ref(0)
const notice = ref(null)
const loading = ref(true)

onMounted(() => {
	if (!isLoggedIn()) {
		uni.reLaunch({ url: '/pages/login/login' })
		return
	}
	const pages = getCurrentPages()
	const current = pages[pages.length - 1]
	id.value = Number((current && current.options && current.options.id) || 0)
	loadDetail()
})

/** 公告级别 → u-tag 类型：1 重要 / 2 紧急 / 其他 普通 */
function levelTagType(level) {
	const n = Number(level)
	if (n === 1) return 'warning'
	if (n === 2) return 'error'
	return 'info'
}

async function loadDetail() {
	if (!id.value) {
		loading.value = false
		return
	}
	loading.value = true
	try {
		notice.value = await getNotice(id.value)
	} catch (e) {
		notice.value = null
	} finally {
		loading.value = false
	}
}
</script>

<style lang="scss" scoped>
@import '@/src/styles/page-common.scss';

.page {
	min-height: 100vh;
	background: $color-bg-page;
	display: flex;
	flex-direction: column;
}

.body {
	flex: 1;
	height: 0;
}

.body-inner {
	padding: 24rpx $page-padding-x 0;
}

.detail-card {
	@include card;
	padding: 32rpx 28rpx;
}

.tag-row {
	display: flex;
	align-items: center;
	gap: 10rpx;
	margin-bottom: 18rpx;
}

.title {
	display: block;
	font-size: 38rpx;
	font-weight: 600;
	line-height: 1.45;
	color: $color-text;
}

.meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8rpx;
	margin-top: 18rpx;
	font-size: 24rpx;
	color: $color-text-muted;
}

.stat-row {
	margin-top: 18rpx;
	padding-top: 18rpx;
	border-top: 1rpx solid $color-divider;
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 23rpx;
	color: $color-text-muted;
}

.content-card {
	@include card;
	margin-top: 20rpx;
	padding: 32rpx 28rpx;
}

.content {
	font-size: 29rpx;
	line-height: 1.75;
	color: $color-text;
	white-space: pre-wrap;
	word-break: break-all;
}

.state-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 200rpx 48rpx;
	gap: 20rpx;
}

.state-text {
	font-size: 26rpx;
	color: $color-text-muted;
	text-align: center;
}

.bottom-space {
	height: 48rpx;
}
</style>