<template>
|
<div class="user-news-container">
|
<el-tabs stretch class="content-box">
|
<el-tab-pane label="站内信">
|
<template #label>
|
<el-icon><ele-Bell /></el-icon>
|
<span style="margin-left: 5px">站内信</span>
|
</template>
|
<div class="notice-box">
|
<template v-if="noticeList.length > 0">
|
<div class="notice-item" v-for="(v, k) in noticeList" :key="k" @click="viewNoticeDetail(v)" v-show="v.readStatus == 1 ? false : true">
|
<div class="notice-title">{{ v.type == 1 ? '【通知】' : '【公告】' }}{{ v.title }}</div>
|
<div class="notice-content">{{ removeHtmlSub(v.content) }}</div>
|
<div class="notice-time">{{ v.publicTime }}</div>
|
<el-divider border-style="dashed" style="margin: 10px 0" />
|
</div>
|
</template>
|
<el-empty description="空" v-else></el-empty>
|
</div>
|
<div class="notice-foot" @click="goToNotice" v-if="noticeList.length > 0">前往通知中心</div>
|
</el-tab-pane>
|
<el-tab-pane label="我的">
|
<template #label>
|
<el-icon><ele-Position /></el-icon>
|
<span style="margin-left: 5px">我的</span>
|
</template>
|
<div style="height: 400px; overflow-y: auto; padding-right: 10px">
|
<el-empty description="空"></el-empty>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<el-dialog v-model="state.dialogVisible" draggable width="769px">
|
<template #header>
|
<div style="color: #fff">
|
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Bell /> </el-icon>
|
<span> 消息详情 </span>
|
</div>
|
</template>
|
<div class="w-e-text-container">
|
<div v-html="state.content" data-slate-editor></div>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button type="primary" @click="state.dialogVisible = false">确认</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts" name="layoutBreadcrumbUserNews">
|
import '@wangeditor/editor/dist/css/style.css';
|
import { reactive } from 'vue';
|
import router from '/@/router';
|
import commonFunction from '/@/utils/commonFunction';
|
|
import { getAPI } from '/@/utils/axios-utils';
|
import { SysNoticeApi } from '/@/api-services/api';
|
|
defineProps({
|
noticeList: Array as any,
|
});
|
const { removeHtmlSub } = commonFunction();
|
const state = reactive({
|
dialogVisible: false,
|
content: '',
|
});
|
// 前往通知中心点击
|
const goToNotice = () => {
|
router.push('/dashboard/notice');
|
};
|
// 查看消息详情
|
const viewNoticeDetail = async (notice: any) => {
|
state.content = notice.content;
|
state.dialogVisible = true;
|
|
// 设置已读
|
notice.readStatus = 1;
|
await getAPI(SysNoticeApi).apiSysNoticeSetReadPost({ id: notice.id });
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.user-news-container {
|
.content-box {
|
font-size: 12px;
|
.notice-box {
|
height: 400px;
|
padding-right: 10px;
|
|
margin-bottom: 35px;
|
&:hover {
|
overflow-y: scroll;
|
}
|
}
|
.notice-item {
|
&:hover {
|
background-color: rgba(#b8b8b8, 0.1);
|
}
|
// .notice-title {
|
// color: var(--el-color-primary);
|
// }
|
.notice-content {
|
color: var(--el-text-color-secondary);
|
margin-top: 3px;
|
margin-bottom: 3px;
|
}
|
.notice-time {
|
color: var(--el-text-color-secondary);
|
text-align: right;
|
}
|
}
|
}
|
.notice-foot {
|
height: 35px;
|
width: 100%;
|
color: var(--el-color-primary);
|
font-size: 14px;
|
cursor: pointer;
|
position: absolute;
|
bottom: 0px;
|
background-color: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
</style>
|
