You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
305 lines
7.4 KiB
305 lines
7.4 KiB
<template>
|
|
<view class="notice-detail-page">
|
|
<view class="content" v-if="!loading">
|
|
<view class="detail-card" v-if="notice && (notice.noticeTitle || notice.noticeId)">
|
|
<view class="title-section">
|
|
<text class="detail-title">{{ notice.noticeTitle || '未命名通知' }}</text>
|
|
|
|
<view class="tag-row">
|
|
<text class="tag kind" :class="typeClassMap[notice.type] || ''">{{ typeText(notice.type) }}</text>
|
|
<text class="tag status" :class="statusClassMap[notice.status] || statusClassMap['__default__']">{{ statusText(notice.status) }}</text>
|
|
<text class="tag sms" :class="smsClassMap[notice.smsStatus] || ''">{{ smsText(notice.smsStatus) }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="info-list">
|
|
<view class="row" v-if="notice.noticeType">
|
|
<text class="label">通知类型：</text>
|
|
<text class="value">{{ notice.noticeType }}</text>
|
|
</view>
|
|
<view class="row" v-if="notice.noticeSource">
|
|
<text class="label">通知来源：</text>
|
|
<text class="value">{{ notice.noticeSource }}</text>
|
|
</view>
|
|
<view class="row" v-if="notice.draftDept">
|
|
<text class="label">拟稿单位：</text>
|
|
<text class="value">{{ notice.draftDept }}</text>
|
|
</view>
|
|
<view class="row" v-if="notice.noticeScope">
|
|
<text class="label">通知范围：</text>
|
|
<text class="value">{{ notice.noticeScope }}</text>
|
|
</view>
|
|
<view class="row" v-if="notice.bizType || notice.bizId">
|
|
<text class="label">业务信息：</text>
|
|
<text class="value">{{ bizText(notice.bizType, notice.bizId) }}</text>
|
|
</view>
|
|
<view class="row" v-if="notice.noticeTime">
|
|
<text class="label">通知时间：</text>
|
|
<text class="value">{{ formatDate(notice.noticeTime) }}</text>
|
|
</view>
|
|
<view class="row" v-if="notice.remark">
|
|
<text class="label">备注：</text>
|
|
<text class="value remark-value">{{ notice.remark }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content-box">
|
|
<jyf-parser
|
|
v-if="notice.noticeContent"
|
|
:html="notice.noticeContent"
|
|
ref="article"
|
|
:tag-style="tagStyle"
|
|
></jyf-parser>
|
|
<view class="empty" v-else>暂无通知内容</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="empty-page" v-else>
|
|
<text class="iconfont icon-wushuju"></text>
|
|
<text class="text">暂无详情数据</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="loading" v-else>
|
|
<text>加载中...</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import jyfParser from '@/components/jyf-parser/jyf-parser';
|
|
import { pubnoticeDetailApi } from '@/api/pubnotice.js';
|
|
|
|
export default {
|
|
components: {
|
|
'jyf-parser': jyfParser,
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
noticeId: '',
|
|
notice: {},
|
|
tagStyle: {
|
|
img: 'max-width:100%;height:auto;display:block;',
|
|
table: 'width:100%;border-collapse:collapse;',
|
|
video: 'max-width:100%;',
|
|
},
|
|
typeClassMap: {
|
|
'1': 'tag-internal',
|
|
1: 'tag-internal',
|
|
'2': 'tag-external',
|
|
2: 'tag-external',
|
|
'__default__': ''
|
|
},
|
|
statusClassMap: {
|
|
'0': 'status-draft',
|
|
0: 'status-draft',
|
|
'1': 'status-submit',
|
|
1: 'status-submit',
|
|
'__default__': ''
|
|
},
|
|
smsClassMap: {
|
|
'0': 'sms-unsent',
|
|
0: 'sms-unsent',
|
|
'1': 'sms-sent',
|
|
1: 'sms-sent',
|
|
'__default__': ''
|
|
}
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.noticeId = options.noticeId || options.id || '';
|
|
if (this.noticeId) this.fetchDetail();
|
|
},
|
|
methods: {
|
|
async fetchDetail() {
|
|
this.loading = true;
|
|
try {
|
|
const res = await pubnoticeDetailApi(this.noticeId);
|
|
this.notice = res?.data || {};
|
|
} catch (e) {
|
|
uni.showToast({
|
|
title: typeof e === 'string' ? e : '获取通知详情失败',
|
|
icon: 'none',
|
|
});
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
bizText(bizType, bizId) {
|
|
const t = bizType ? String(bizType) : '';
|
|
const id = bizId ? String(bizId) : '';
|
|
if (!t && !id) return '—';
|
|
if (t && id) return `${t} #${id}`;
|
|
return t || id;
|
|
},
|
|
formatDate(val) {
|
|
if (!val) return '';
|
|
if (typeof val === 'string') {
|
|
return val.replace('T', ' ').slice(0, 19);
|
|
}
|
|
if (val instanceof Date) {
|
|
const pad = (n) => (n < 10 ? '0' + n : '' + n);
|
|
return `${val.getFullYear()}-${pad(val.getMonth() + 1)}-${pad(val.getDate())} ${pad(
|
|
val.getHours()
|
|
)}:${pad(val.getMinutes())}`;
|
|
}
|
|
return String(val);
|
|
},
|
|
typeText(type) {
|
|
if (type === 1 || type === '1') return '内部';
|
|
if (type === 2 || type === '2') return '外部';
|
|
return type || '—';
|
|
},
|
|
statusText(status) {
|
|
if (status === 0 || status === '0') return '草稿';
|
|
if (status === 1 || status === '1') return '提交';
|
|
return status ?? '—';
|
|
},
|
|
smsText(smsStatus) {
|
|
if (smsStatus === 0 || smsStatus === '0') return '未发';
|
|
if (smsStatus === 1 || smsStatus === '1') return '已发';
|
|
return smsStatus ?? '—';
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.notice-detail-page {
|
|
.content {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.detail-card {
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
|
|
padding: 24rpx 26rpx;
|
|
}
|
|
|
|
.title-section {
|
|
margin-bottom: 20rpx;
|
|
|
|
.detail-title {
|
|
font-size: 30rpx;
|
|
font-weight: 800;
|
|
color: #333;
|
|
display: block;
|
|
line-height: 1.4;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.tag-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10rpx;
|
|
margin-top: 14rpx;
|
|
}
|
|
}
|
|
|
|
.tag {
|
|
padding: 6rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 20rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tag-internal {
|
|
background-color: #e6f7ff;
|
|
color: #409eff;
|
|
}
|
|
|
|
.tag-external {
|
|
background-color: #fff7e6;
|
|
color: #fa8c16;
|
|
}
|
|
|
|
.status-draft {
|
|
background-color: #f5f5f5;
|
|
color: #666;
|
|
}
|
|
|
|
.status-submit {
|
|
background-color: #f6ffed;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.sms-unsent {
|
|
background-color: #f5f5f5;
|
|
color: #999;
|
|
}
|
|
|
|
.sms-sent {
|
|
background-color: #e6fffb;
|
|
color: #13c2c2;
|
|
}
|
|
|
|
.info-list {
|
|
.row {
|
|
display: flex;
|
|
margin-bottom: 14rpx;
|
|
|
|
.label {
|
|
width: 170rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.value {
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
min-width: 0;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
|
|
.remark-value {
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
.content-box {
|
|
margin-top: 10rpx;
|
|
padding-top: 20rpx;
|
|
border-top: 1rpx solid #f5f5f5;
|
|
}
|
|
|
|
.empty-page {
|
|
margin-top: 120rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #999;
|
|
|
|
.iconfont {
|
|
font-size: 80rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.empty {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
line-height: 2;
|
|
padding: 30rpx 0;
|
|
}
|
|
|
|
.loading {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
</style>
|
|
|