新增通知公告弹框
This commit is contained in:
BianLzhaoMin
parent
ee67ff5f5d
commit
1240d87af3
|
|
@ -3,14 +3,19 @@
|
|||
<router-view />
|
||||
<theme-picker />
|
||||
|
||||
<!-- <Notice :noticeDialog="noticeDialog"></Notice> -->
|
||||
<Notice
|
||||
:noticeDialog="noticeDialog"
|
||||
:noticeList="noticeList"
|
||||
@closeDialog="closeDialog"
|
||||
></Notice>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ThemePicker from '@/components/ThemePicker'
|
||||
import { getHomeNoticeApi, setQueryNoticeApi } from '@/api/system/notice.js'
|
||||
import { getHomeNoticeApi } from '@/api/system/notice.js'
|
||||
import Notice from '@/components/Notice'
|
||||
import { getToken } from '@/utils/auth'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
|
@ -29,64 +34,43 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
notifyPromise: Promise.resolve(),
|
||||
whiteList: [
|
||||
'/login',
|
||||
'/register',
|
||||
'/auth/sendCode',
|
||||
'/qrCode/qrCodePage',
|
||||
],
|
||||
isWindowRefresh: false,
|
||||
noticeDialog: {
|
||||
outerTitle: '重要通知',
|
||||
outerWidth: '70%',
|
||||
outerVisible: false,
|
||||
},
|
||||
noticeList: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// window.addEventListener('beforeunload', this.handleBeforeUnload)
|
||||
// if (this.isWindowRefresh) {
|
||||
// this.getHomeNoticeFun()
|
||||
// }
|
||||
// this.noticeDialog.outerVisible = true
|
||||
},
|
||||
|
||||
updated() {
|
||||
// if (!this.isWindowRefresh) {
|
||||
// this.getHomeNoticeFun()
|
||||
// }
|
||||
// 判断是否需要获取通知信息
|
||||
if (
|
||||
localStorage.getItem('notice') &&
|
||||
getToken() &&
|
||||
!this.noticeDialog.outerVisible
|
||||
) {
|
||||
this.getHomeNoticeFun()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取通知公告的信息
|
||||
async getHomeNoticeFun() {
|
||||
const urlHref = window.location.href
|
||||
const isWhite = this.whiteList.some((e) => urlHref.indexOf(e) > 1)
|
||||
|
||||
if (isWhite) {
|
||||
return
|
||||
}
|
||||
console.log('获取公告！！！')
|
||||
const res = await getHomeNoticeApi()
|
||||
if (res.code == 200) {
|
||||
res.data.forEach((item) => {
|
||||
this.notifyPromise = this.notifyPromise.then(() => {
|
||||
this.$notify({
|
||||
title: `通知公告`,
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: `${item.noticeContent}`,
|
||||
duration: 0,
|
||||
onClose: async () => {
|
||||
const params = {
|
||||
noticeId: item.noticeId,
|
||||
userId: sessionStorage.getItem('userId'),
|
||||
}
|
||||
const res = await setQueryNoticeApi(params)
|
||||
},
|
||||
})
|
||||
})
|
||||
})
|
||||
if (res.data.length > 0) {
|
||||
this.noticeList = res.data
|
||||
this.noticeDialog.outerVisible = true
|
||||
} else {
|
||||
localStorage.removeItem('notice')
|
||||
}
|
||||
}
|
||||
},
|
||||
// 关闭弹框
|
||||
closeDialog(val) {
|
||||
this.noticeDialog.outerVisible = val
|
||||
localStorage.removeItem('notice')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,24 +2,34 @@
|
|||
<div>
|
||||
<!-- 消息通知弹框 -->
|
||||
<el-dialog
|
||||
:title="noticeDialog.outerTitle"
|
||||
:title="noticeTitle"
|
||||
:width="noticeDialog.outerWidth"
|
||||
:visible.sync="noticeDialog.outerVisible"
|
||||
v-if="noticeDialog.outerVisible"
|
||||
:center="true"
|
||||
:height="`300px`"
|
||||
:before-close="handleCloseDialog"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
append-to-body
|
||||
>
|
||||
<el-button class="notice-num" type="primary"
|
||||
>重要通知(1/1)</el-button
|
||||
>重要通知({{ unreadNUm }}/{{ noticeNum }})</el-button
|
||||
>
|
||||
<el-button class="notice-known" type="primary">我知道了</el-button>
|
||||
<slot />
|
||||
<el-button class="notice-known" type="primary" @click="handleKnow()"
|
||||
>我知道了</el-button
|
||||
>
|
||||
<h2 class="release-time">发布时间：{{ releaseTime }}</h2>
|
||||
<div class="notice-content">
|
||||
{{ noticeContent }}
|
||||
</div>
|
||||
<div class="notice-create">{{ releaseCreateName }}</div>
|
||||
<div class="notice-footer">{{ releaseTime }}</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setQueryNoticeApi } from '@/api/system/notice.js'
|
||||
export default {
|
||||
props: {
|
||||
noticeDialog: {
|
||||
|
|
@ -28,6 +38,86 @@ export default {
|
|||
return {}
|
||||
},
|
||||
},
|
||||
noticeList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
unreadNUm: 1,
|
||||
noticeListDoc: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
noticeNum() {
|
||||
return this.noticeList.length
|
||||
},
|
||||
|
||||
noticeTitle() {
|
||||
return this.noticeList[this.unreadNUm - 1].noticeTitle
|
||||
},
|
||||
noticeContent() {
|
||||
return this.removeHTMLTags(
|
||||
this.noticeList[this.unreadNUm - 1].noticeContent,
|
||||
)
|
||||
},
|
||||
releaseTime() {
|
||||
return this.noticeList[this.unreadNUm - 1].createTime.slice(0, 10)
|
||||
},
|
||||
releaseCreateName() {
|
||||
return this.noticeList[this.unreadNUm - 1].createBy
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
if (this.noticeList.length > 0) {
|
||||
this.noticeListDoc = this.noticeList
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 清楚内容中的html标签
|
||||
removeHTMLTags(text) {
|
||||
return text.replace(/<[^>]+>/g, '')
|
||||
},
|
||||
// 点击我知道了
|
||||
async handleKnow() {
|
||||
const params = {
|
||||
noticeId: [],
|
||||
userId: sessionStorage.getItem('userId'),
|
||||
}
|
||||
params.noticeId.push(this.noticeList[this.unreadNUm - 1].noticeId)
|
||||
const res = await setQueryNoticeApi(params)
|
||||
if (res.code == 200) {
|
||||
if (this.noticeNum === 1) {
|
||||
this.$emit('closeDialog', false)
|
||||
return
|
||||
}
|
||||
this.unreadNUm += 1
|
||||
// 如果全部点完，则关闭弹框
|
||||
if (this.unreadNUm > this.noticeNum) {
|
||||
this.$emit('closeDialog', false)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 右上角关闭按钮
|
||||
async handleCloseDialog() {
|
||||
// 7.8确认需求为，点击关闭，则全部标记为已读
|
||||
const params = {
|
||||
noticeId: [],
|
||||
userId: sessionStorage.getItem('userId'),
|
||||
}
|
||||
this.noticeList.map((e) => {
|
||||
params.noticeId.push(e.noticeId)
|
||||
})
|
||||
const res = await setQueryNoticeApi(params)
|
||||
if (res.code == 200) {
|
||||
this.$emit('closeDialog', false)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -43,7 +133,7 @@ export default {
|
|||
border-bottom: 2px solid #999;
|
||||
}
|
||||
::v-deep .el-dialog__title {
|
||||
font-size: 20px;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 3px;
|
||||
color: #409eff;
|
||||
|
|
@ -80,4 +170,27 @@ export default {
|
|||
height: 38px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
height: 250px;
|
||||
text-indent: 4em;
|
||||
font-size: 16px;
|
||||
letter-spacing: 3px;
|
||||
word-wrap: break-word;
|
||||
line-height: 3;
|
||||
}
|
||||
|
||||
.release-time {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
.notice-footer,
|
||||
.notice-create {
|
||||
text-align: right;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.notice-create {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -515,6 +515,8 @@ export default {
|
|||
// }
|
||||
|
||||
this.$router.push({ path: '/' }).catch(() => {})
|
||||
|
||||
localStorage.setItem('notice', true)
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false
|
||||
|
|
@ -550,6 +552,7 @@ export default {
|
|||
.dispatch('textLogin', this.phoneLoginParams)
|
||||
.then(() => {
|
||||
this.$router.push({ path: '/' }).catch(() => {})
|
||||
localStorage.setItem('notice', true)
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false
|
||||
|
|
|
|||
Loading…
Reference in New Issue