新增通知公告弹框

sgzb-ui/src/App.vue

@@ -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,63 +34,42 @@ 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
-    methods: {
+        ) {
-        async getHomeNoticeFun() {
+            this.getHomeNoticeFun()
-            const urlHref = window.location.href
-            const isWhite = this.whiteList.some((e) => urlHref.indexOf(e) > 1)
-
-            if (isWhite) {
-                return
         }
+    },
+    methods: {
+        // 获取通知公告的信息
+        async getHomeNoticeFun() {
+            console.log('获取公告！！！')
             const res = await getHomeNoticeApi()
             if (res.code == 200) {
-                res.data.forEach((item) => {
+                if (res.data.length > 0) {
-                    this.notifyPromise = this.notifyPromise.then(() => {
+                    this.noticeList = res.data
-                        this.$notify({
+                    this.noticeDialog.outerVisible = true
-                            title: `通知公告`,
+                } else {
-                            dangerouslyUseHTMLString: true,
+                    localStorage.removeItem('notice')
-                            message: `${item.noticeContent}`,
+                }
-                            duration: 0,
-                            onClose: async () => {
-                                const params = {
-                                    noticeId: item.noticeId,
-                                    userId: sessionStorage.getItem('userId'),
             }
-                                const res = await setQueryNoticeApi(params)
         },
-                        })
+        // 关闭弹框
-                    })
+        closeDialog(val) {
-                })
+            this.noticeDialog.outerVisible = val
-            }
+            localStorage.removeItem('notice')
         },
     },
 }

sgzb-ui/src/components/Notice/index.vue

@@ -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>
+            <el-button class="notice-known" type="primary" @click="handleKnow()"
-            <slot />
+                >我知道了</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>

sgzb-ui/src/views/newLogin.vue

@@ -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