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