From 16f699f7a4b09a517e687b074b7dd2f851433b06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Tue, 24 Aug 2021 14:18:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0badge=E5=B0=8F=E7=BA=A2?=
 =?UTF-8?q?=E7=82=B9=E5=92=8C=E4=BF=AE=E5=A4=8D=E4=BC=81=E4=B8=9A=E7=94=BB?=
 =?UTF-8?q?=E5=83=8F=E7=9A=84=E6=A3=80=E7=B4=A2=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/home/news.js      |  7 +++++++
 src/permission.js         |  1 +
 src/store/getters.js      |  1 +
 src/store/modules/user.js | 19 +++++++++++++++++++
 src/views/home/mine.vue   | 23 +++++++++++++++++++++--
 src/views/home/news.vue   |  2 ++
 src/views/index.vue       | 33 ++++++++++++++++++++++++++++++---
 src/views/portrait.vue    | 18 ++++++++++++------
 src/views/result.vue      |  5 ++++-
 9 files changed, 97 insertions(+), 12 deletions(-)

diff --git a/src/api/home/news.js b/src/api/home/news.js
index 93a75e3..3e893ea 100644
--- a/src/api/home/news.js
+++ b/src/api/home/news.js
@@ -14,3 +14,10 @@ export function readPush(params) {
     params
   });
 }
+// 获取未读消息条数
+export function getMsgCount(params) {
+  return request({
+    url: '/mobile/getMsgCount',
+    params
+  });
+}
diff --git a/src/permission.js b/src/permission.js
index 75f7cd7..43d9d09 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -27,6 +27,7 @@ router.beforeEach((to, from, next) => {
             //   router.addRoutes(store.getters.addRoutes); // 动态添加可访问路由表
             //   next({ ...to, replace: true });
             // });
+            store.dispatch('GetBadge');
           })
           .catch(err => {
             store.dispatch('FedLogOut').then(() => {
diff --git a/src/store/getters.js b/src/store/getters.js
index 576b434..cd64f26 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -6,6 +6,7 @@ const getters = {
   cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
+  badge: state => state.user.badge,
   name: state => state.user.name,
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index bc82909..99fcef0 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,9 +1,11 @@
 import { login, register, logout, getInfo } from '@/api/login';
+import { getMsgCount } from '@/api/home/news';
 import { getToken, setToken, removeToken } from '@/utils/auth';
 
 const user = {
   state: {
     token: getToken(),
+    badge: null,
     name: '',
     userId: '',
     avatar: '',
@@ -15,6 +17,9 @@ const user = {
     SET_TOKEN: (state, token) => {
       state.token = token;
     },
+    SET_BADGE: (state, badge) => {
+      state.badge = badge;
+    },
     SET_NAME: (state, name) => {
       state.name = name;
     },
@@ -69,6 +74,20 @@ const user = {
       });
     },
 
+    GetBadge({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        getMsgCount()
+          .then(({ data }) => {
+            if (data === 0) data = null;
+            commit('SET_BADGE', data);
+            resolve(data);
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
+    },
+
     // 获取用户信息
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
diff --git a/src/views/home/mine.vue b/src/views/home/mine.vue
index 3277655..b020333 100644
--- a/src/views/home/mine.vue
+++ b/src/views/home/mine.vue
@@ -2,8 +2,22 @@
   <div class="mine_page p0-100">
     <div class="mine_l">
       <router-link :to="item.path" v-for="(item, i) in list" :key="i">
-        <div :class="i == index ? 'active' : ''" @click="index = i">
+        <div
+          :class="i == index ? 'active' : ''"
+          @click="index = i"
+          style="position: relative;"
+        >
           {{ item.name }}
+          <span
+            v-if="item.flag"
+            style="position: absolute;
+              width: 10px;
+              height: 10px;
+              background-color: red;
+              border-radius: 50%;
+              top: 15px;
+              margin-left: 10px;"
+          ></span>
         </div>
       </router-link>
       <div @click="logout">退出登录</div>
@@ -14,6 +28,7 @@
   </div>
 </template>
 <script>
+import { getMsgCount } from '@/api/home/news';
 export default {
   data() {
     return {
@@ -33,7 +48,8 @@ export default {
         },
         {
           path: '/mine/news',
-          name: '消息通知'
+          name: '消息通知',
+          flag: null
         }
       ]
     };
@@ -59,6 +75,9 @@ export default {
     }
   },
   created() {
+    getMsgCount().then(({ data }) => {
+      this.list[3].flag = data;
+    });
     let { path } = this.$route;
     this.index = this.list.findIndex(item => {
       return item.path == path;
diff --git a/src/views/home/news.vue b/src/views/home/news.vue
index 58a068b..257b742 100644
--- a/src/views/home/news.vue
+++ b/src/views/home/news.vue
@@ -48,6 +48,7 @@
 </template>
 <script>
 import { getUserMsgPush, readPush } from '@/api/home/news';
+import user from '@/store/modules/user';
 export default {
   data() {
     return {
@@ -67,6 +68,7 @@ export default {
       });
     },
     handleStatus(item) {
+      if (item.status == 1) return;
       readPush({ id: item.id }).then(res => {
         item.status = 1;
       });
diff --git a/src/views/index.vue b/src/views/index.vue
index 602614d..e96f873 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -47,7 +47,7 @@
           <!-- <span>
             <i>20</i>
           </span> -->
-          <el-badge :value="200" :max="10" class="item">
+          <el-badge :value="badge" :max="10" class="item">
             <img :src="avatar" class="user-avatar" />
           </el-badge>
         </div>
@@ -151,6 +151,8 @@
 
 <script>
 import { mapGetters } from 'vuex';
+// import user from '@/store/modules/user';
+// import { getMsgCount } from '@/api/home/news';
 export default {
   name: 'home',
   data() {
@@ -190,8 +192,15 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['avatar'])
+    ...mapGetters(['avatar', 'badge'])
   },
+  // watch: {
+  //   badge(newVal, oldVal) {
+  //     if (newVal == 0) {
+  //       document.querySelector('.el-badge sup').style = 'display:none';
+  //     }
+  //   }
+  // },
   methods: {
     toSearch() {
       if (!this.input.length) return this.msgError('请输入搜索关键字');
@@ -209,6 +218,19 @@ export default {
       this.path = path;
       this.$router.push({ path });
     }
+  },
+  created() {
+    // console.log(this.badge);
+    // console.log(user.state.badge);
+    // getMsgCount().then(({ data }) => {
+    //   console.log(data);
+    //   this.$store.commit('SET_BADGE', data);
+    // });
+  },
+  mounted() {
+    // if (this.badge == 0) {
+    //   document.querySelector('.el-badge sup').style = 'display:none';
+    // }
   }
 };
 </script>
@@ -267,6 +289,11 @@ export default {
       .el-badge {
         // display: block;
         // position: relative;
+        top: 10px;
+        right: 8px;
+        border: 1px solid #ffa32c;
+        border-radius: 50%;
+        box-shadow: 5px 5px 5px 0px #dadada;
         .user-avatar {
           vertical-align: middle;
           cursor: pointer;
@@ -415,7 +442,7 @@ export default {
   }
 }
 /deep/.el-badge__content.is-fixed {
-  top: 10px;
+  top: 5px;
   right: 15px;
 }
 @media (max-width: 1024px) {
diff --git a/src/views/portrait.vue b/src/views/portrait.vue
index bcee930..69a7856 100644
--- a/src/views/portrait.vue
+++ b/src/views/portrait.vue
@@ -132,13 +132,19 @@ export default {
           getLabelSetting({ companyId: data.companyId }).then(({ data }) => {
             if (data.length) {
               console.log(data);
-              this.portraitList = data.map(item =>
-                item.labelList
-                  ? item.labelList.filter(v => v.isHas)[0]
-                    ? item.labelList.filter(v => v.isHas)[0]
-                    : ''
-                  : undefined
+              // this.portraitList = data.map(item =>
+              //   item.labelList
+              //     ? item.labelList.filter(v => v.isHas)[0]
+              //       ? item.labelList.filter(v => v.isHas)[0]
+              //       : ''
+              //     : undefined
+              // );
+              const arrs = data.map(item =>
+                item.labelList ? item.labelList.filter(v => v.isHas) : undefined
               );
+              arrs.map(item => {
+                this.portraitList = [...this.portraitList, ...item];
+              });
               this.queryParams.labelId = this.portraitList[0].id;
               this.getPortraitList();
             }
diff --git a/src/views/result.vue b/src/views/result.vue
index 5bbf8c7..654fe28 100644
--- a/src/views/result.vue
+++ b/src/views/result.vue
@@ -78,7 +78,10 @@
           </span>
         </div>
         <!-- <div v-html="formData.text"></div> -->
-        <div id="text" class="ql-editor">
+        <div
+          id="text"
+          :class="type == 'policy' && formData.method == 1 ? '' : 'ql-editor'"
+        >
           <!-- <editor v-model="formData.text" :min-height="192" /> -->
           <div v-html="formData.text" />
         </div>