修改bug

src/page/index/top/top-notice.vue

@@ -1,20 +1,19 @@
 <template>
-  <el-popover placement="bottom"
-              width="350"
-              trigger="click">
-
-    <el-tabs v-model="activeName" style="align-items: center" @tab-click="tabsHandle">
-      <el-tab-pane label="未读"
-                   name="unread">
-      </el-tab-pane>
-      <el-tab-pane label="已读"
-                   name="read">
-      </el-tab-pane>
-    </el-tabs>
-    <el-scrollbar style="height:300px">
+  <el-popover placement="bottom" width="350" trigger="click">
+      <el-tabs
+        v-model="activeName"
+        style="align-items: center"
+        @tab-click="tabsHandle"
+      >
+        <el-tab-pane label="未读" name="unread"> </el-tab-pane>
+        <el-tab-pane label="已读" name="read"> </el-tab-pane>
+      </el-tabs>
       <div class="allRead" v-show="activeName == 'unread'">
-        <el-button type="text" @click="allRead" :disabled="data.length==0">一键已读</el-button>
+        <el-button type="text" @click="allRead" :disabled="data.length == 0"
+          >一键已读</el-button
+        >
       </div>
+    <el-scrollbar style="height:300px">
       <avue-notice
         :data="data"
         :option="option"
@@ -25,7 +24,7 @@
       </avue-notice>
     </el-scrollbar>
     <div slot="reference" @click="init">
-      <el-badge  :value="badge>99?'99+':badge">
+      <el-badge :value="badge > 99 ? '99+' : badge">
         <i class="el-icon-bell"></i>
       </el-badge>
     </div>
@@ -33,145 +32,147 @@
 </template>
 
 <script>
-  import { getMsgLogs , getMsgDetail,getMessage } from "@/api/logs";
-  import { getToken } from "@/util/auth";
+import { getMsgLogs, getMsgDetail, getMessage } from "@/api/logs";
+import { getToken } from "@/util/auth";
 export default {
   name: "top-notice",
-  data () {
+  data() {
     return {
-      activeName: 'unread',
-      intercept: 'unread',
+      activeName: "unread",
+      intercept: "unread",
       option: {
         props: {
-          img: 'img',
-          title: 'messageBody',
-          subtitle: 'createTime',
-          tag: 'tag',
-          status: 'messageType'
-        },
+          img: "img",
+          title: "messageBody",
+          subtitle: "createTime",
+          tag: "tag",
+          status: "messageType"
+        }
       },
       data: [],
       unreadData: [], // 未读的
       readData: [], // 已读的
-      path:"",
-      socket:"",
-      badge:'',
+      path: "",
+      socket: "",
+      badge: "",
       loading: false
-    }
+    };
   },
-  created () {
+  created() {
     // this.webSocket();
   },
   mounted() {
     //60秒轮训消息
     window.setInterval(() => {
       setTimeout(() => {
-        this.assistMessage(true)
-      },0)
-    },60000)
-    this.path = "wss://trade.tubaosoft.com/api/blade-client/websocket?user=" + this.$store.getters.userInfo.user_id
+        this.assistMessage(true);
+      }, 0);
+    }, 60000);
+    this.path =
+      "wss://trade.tubaosoft.com/api/blade-client/websocket?user=" +
+      this.$store.getters.userInfo.user_id;
     this.init();
   },
   methods: {
     //初始化
-    init(){
-      this.loading = true
-      getMsgLogs().then(res=>{
-        this.afterData(res.data.data)
-        this.loading = false
-      })
-      if(typeof(WebSocket) === "undefined"){
-        alert("您的浏览器不支持socket")
-      }else{
+    init() {
+      this.loading = true;
+      getMsgLogs().then(res => {
+        this.afterData(res.data.data);
+        this.loading = false;
+      });
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持socket");
+      } else {
         // 实例化socket
-        this.socket = new WebSocket(this.path)
+        this.socket = new WebSocket(this.path);
         // 监听socket连接
-        this.socket.onopen = this.open
+        this.socket.onopen = this.open;
         // 监听socket错误信息
-        this.socket.onerror = this.error
+        this.socket.onerror = this.error;
         // 监听socket消息
-        this.socket.onmessage = this.getMessage
-        this.assistMessage()
+        this.socket.onmessage = this.getMessage;
+        this.assistMessage();
       }
     },
     open() {
       // console.log("socket连接成功")
     },
     error() {
-      console.log("连接错误")
+      console.log("连接错误");
     },
-    getMessage(msg){
+    getMessage(msg) {
       let msgData = JSON.parse(msg);
-      if(msgData.data.unRead){
-        this.badge = msgData.data.unReadNum
-      }else{
-        this.badge = ''
+      if (msgData.data.unRead) {
+        this.badge = msgData.data.unReadNum;
+      } else {
+        this.badge = "";
       }
     },
     send() {
       // this.socket.send(params)
     },
     close() {
-      console.log("socket已经关闭")
+      console.log("socket已经关闭");
     },
-    assistMessage(type){
+    assistMessage(type) {
       // 判断是否有token
       if (getToken() !== undefined) {
         //辅助消息接口
-        getMessage().then(res=>{
-          if (type && res.data.unRead){
-            this.onAudio()
+        getMessage().then(res => {
+          if (type && res.data.unRead) {
+            this.onAudio();
           }
-          this.getMessage(JSON.stringify(res))
-        })
+          this.getMessage(JSON.stringify(res));
+        });
       }
     },
     onAudio() {
-      let audio = new Audio(require('@/file/newNews.mp3'));
+      let audio = new Audio(require("@/file/newNews.mp3"));
       audio.play();
     },
-    goUrl(row){
-      if(row.url){
+    goUrl(row) {
+      if (row.url) {
         this.$router.push({
           path: row.url,
-          query: {params:row.parameter},
+          query: { params: row.parameter }
         });
         // this.$router.push({name:'委托',params:row.parameter})
       }
-      getMsgDetail(row.id).then(res=>{
-        this.$set(row,"isRead",res.data.data.isRead)
-        this.afterData(this.data)
-        this.assistMessage()
-      })
+      getMsgDetail(row.id).then(res => {
+        this.$set(row, "isRead", res.data.data.isRead);
+        this.afterData(this.data);
+        this.assistMessage();
+      });
     },
     allRead() {
-      console.log('一键全读');
       this.data.forEach(e => {
-        getMsgDetail(e.id).then(res => {
-          this.$set(e, "isRead", res.data.data.isRead);
-          this.assistMessage();
-        })
-        .finally(() => {
-           this.afterData(this.data)
+        getMsgDetail(e.id)
+          .then(res => {
+            this.$set(e, "isRead", res.data.data.isRead);
+            this.assistMessage();
+          })
+          .finally(() => {
+            this.afterData(this.data);
           });
       });
     },
-    afterData(data){
-      if(data.length === 0 ) return this.data = []
-      if (this.activeName == 'unread') {
-        this.unreadData = data.filter(item => item.isRead == 0)
+    afterData(data) {
+      if (data.length === 0) return (this.data = []);
+      if (this.activeName == "unread") {
+        this.unreadData = data.filter(item => item.isRead == 0);
         this.unreadData.forEach(item => {
-          item.tag = "未读"
-          item.messageType = 1//状态  0 灰色  1 蓝色 2 橙色 3 红色 4 绿色
-        })
-        this.data = this.unreadData
+          item.tag = "未读";
+          item.messageType = 1; //状态  0 灰色  1 蓝色 2 橙色 3 红色 4 绿色
+        });
+        this.data = this.unreadData;
       } else {
-        this.readData = data.filter(item => item.isRead != 0)
+        this.readData = data.filter(item => item.isRead != 0);
         this.readData.forEach(item => {
-          item.tag = "已读"
-          item.messageType = 0
-        })
-        this.data = this.readData
+          item.tag = "已读";
+          item.messageType = 0;
+        });
+        this.data = this.readData;
       }
       // this.data = data.map(item =>{
       //   if(item.isRead == 0){
@@ -184,36 +185,35 @@ export default {
       //   return item
       // })
     },
-    pageChange (page, done) {
-
-    },
+    pageChange(page, done) {},
     tabsHandle(data) {
-      if (this.intercept == data.name) return
-      this.intercept = data.name
+      if (this.intercept == data.name) return;
+      this.intercept = data.name;
       this.loading = true;
-      getMsgLogs().then(res=>{
-        this.afterData(res.data.data)
+      getMsgLogs().then(res => {
+        this.afterData(res.data.data);
         this.loading = false;
-      })
+      });
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-  ::v-deep .avue-notice__more {
-    display: none;
-  }
-  ::v-deep .avue-notice__title {
-    display: flex;
-    align-items: center;
-  }
-  ::v-deep .avue-notice__tag {
-    margin-left: 15px;
-  }
-.allRead {
+::v-deep .avue-notice__more {
+  display: none;
+}
+::v-deep .avue-notice__title {
   display: flex;
-  justify-content: end;
+  align-items: center;
+}
+::v-deep .avue-notice__tag {
+  margin-left: 15px;
+}
+.allRead {
+  position: relative;
+  top: -44px;
+  float:right;
   ::v-deep button {
     padding: 0px;
   }