|
@@ -1,16 +1,44 @@
|
|
|
<template>
|
|
|
- <div class="navbar" >
|
|
|
+ <div class="navbar">
|
|
|
<div class="logclass" @mouseenter="setStatus(true)" @click="setStatus(!showLevel1Status)">
|
|
|
<img style="width: 18px;" src="../../assets/level.png" alt="">
|
|
|
</div>
|
|
|
<div class="titleDiv"><img src="../../assets/images/logo.png" style="height: 50px;margin-top: 5px;"></div>
|
|
|
<div class="right-menu" background-color="rgba(42,143,227,1)">
|
|
|
+ <el-dropdown class="message-container right-menu-item" trigger="click" placement="bottom-start">
|
|
|
+
|
|
|
+ <div class="message-wrapper-nb">
|
|
|
+ <el-badge :value= messageNum>
|
|
|
+ <img src="../../assets/icon/message.png" class="message" alt="">
|
|
|
+ </el-badge>
|
|
|
+ </div>
|
|
|
+ <el-dropdown-menu slot="dropdown" style="border-radius: 20px;">
|
|
|
+ <el-dropdown-item v-if="messages.length>0">
|
|
|
+ <el-card class="message-info" shadow="hover" v-for="(item , id) in messages" :key="id" @click.native="toDetail(item)">
|
|
|
+ <el-badge is-dot class="red-point">
|
|
|
+ <div class="info-icon">
|
|
|
+ <i class="el-icon-message"></i>
|
|
|
+ </div>
|
|
|
+ <div class="message-title">
|
|
|
+ {{ item.title }}
|
|
|
+ <div class="message-time">
|
|
|
+ {{item.created}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="message-content">
|
|
|
+ {{ showMsg(item)}}
|
|
|
+ </div>
|
|
|
+ </el-badge>
|
|
|
+ </el-card>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item v-else>
|
|
|
+ <el-empty :image="require('../../assets/images/no-message.png')" :image-size=400 description="还没有消息哟~"></el-empty>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
|
|
<div class="avatar-wrapper-nb">
|
|
|
- <img
|
|
|
- :src="avatar"
|
|
|
- class="user-avatar"
|
|
|
- >
|
|
|
+ <img :src="avatar" class="user-avatar">
|
|
|
<span style="margin-left: 10px;font-size: 14px;">{{ userInfo.name }}</span>
|
|
|
<i class="el-icon-caret-bottom" />
|
|
|
</div>
|
|
@@ -23,151 +51,250 @@
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
- <img
|
|
|
- src="../../assets/icon/logout.png"
|
|
|
- alt=""
|
|
|
- style="width: 16px;position: absolute;top: 22px;right: 20px;cursor: pointer;"
|
|
|
- @click="logout"
|
|
|
- >
|
|
|
+ <img src="../../assets/icon/logout.png" alt=""
|
|
|
+ style="width: 16px;position: absolute;top: 22px;right: 20px;cursor: pointer;" @click="logout">
|
|
|
</div>
|
|
|
- <!--<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />-->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { mapGetters } from 'vuex'
|
|
|
- import avatar from '../../assets/icon/avatar.png'
|
|
|
-
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showLevel1Status: false,
|
|
|
- sysCfg: '',
|
|
|
- avatar,
|
|
|
- }
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import avatar from '../../assets/icon/avatar.png'
|
|
|
+import eventBus from '../../utils/eventBus.js'
|
|
|
+// import settlePswDig from "./SettlePswDig.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+
|
|
|
+ props:{
|
|
|
+ messages:{
|
|
|
+ type: Array,
|
|
|
+ require: false,
|
|
|
+ default : []
|
|
|
},
|
|
|
- computed: {
|
|
|
- ...mapGetters([
|
|
|
- 'userInfo',
|
|
|
- ])
|
|
|
+ messageNum:{
|
|
|
+ type: Number,
|
|
|
+ require: true,
|
|
|
+ default: null
|
|
|
},
|
|
|
- methods: {
|
|
|
- async logout() {
|
|
|
- await this.$store.dispatch('user/logout');
|
|
|
- // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
|
|
- this.$router.push(`/login`);
|
|
|
- },
|
|
|
- setStatus(data) {
|
|
|
- this.showLevel1Status = data;
|
|
|
- this.$emit('getStatus', this.showLevel1Status)
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showLevel1Status: false,
|
|
|
+ sysCfg: '',
|
|
|
+ avatar,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters([
|
|
|
+ 'userInfo',
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ async logout() {
|
|
|
+ await this.$store.dispatch('user/logout');
|
|
|
+ // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
|
|
+ this.$router.push(`/login`);
|
|
|
+ },
|
|
|
+ setStatus(data) {
|
|
|
+ this.showLevel1Status = data;
|
|
|
+ this.$emit('getStatus', this.showLevel1Status)
|
|
|
+ },
|
|
|
+ showMsg(message){
|
|
|
+ let xMessage ="";
|
|
|
+ if (message.type === 'BUSINESS'){
|
|
|
+ let m = JSON.parse(message.message);
|
|
|
+ xMessage = m.content;
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ xMessage = message.message;
|
|
|
}
|
|
|
+ if (xMessage.length>28){
|
|
|
+ xMessage = xMessage.substring(0,28) +"...";
|
|
|
+ }
|
|
|
+ return xMessage;
|
|
|
+ },
|
|
|
+ toDetail(message){
|
|
|
+ eventBus.$emit("messageId",message.id)
|
|
|
+ if (message.type === 'BUSINESS'){
|
|
|
+ let m = JSON.parse(message.message);
|
|
|
+ if (m.bizType === 'MARKET_VISIT_REPLY'){
|
|
|
+ this.$router.push({path:'/market/visit/detail',query:{id:m.bizTableId,activeName:'replyList'}});
|
|
|
+ }
|
|
|
+ if (m.bizType === 'MARKET_LOG_REPLY'){
|
|
|
+ this.$router.push({path:'/market/staff/log'});
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (message.type === 'SETTLE'){
|
|
|
+ eventBus.$emit("openDig",true)
|
|
|
+ this.$router.push({path:'/brokerage/item/settle'});
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ setRead(messageId){
|
|
|
+ this.$api.message.updateRead(messageId).then(
|
|
|
+ res =>{
|
|
|
+ if (res.code===200){
|
|
|
+ this.$parent.getMessages();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- @import url('../../styles/menu/menuIcon.css');
|
|
|
- .logclass {
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- background-color: #4B63F7;
|
|
|
- box-sizing: border-box;
|
|
|
- float: left;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
+@import url('../../styles/menu/menuIcon.css');
|
|
|
+
|
|
|
+.logclass {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background-color: #4B63F7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
|
|
|
- .titleDiv {
|
|
|
- margin-right: 50px;
|
|
|
- margin-left: 17px;
|
|
|
- width: 200px;
|
|
|
+.titleDiv {
|
|
|
+ margin-right: 50px;
|
|
|
+ margin-left: 17px;
|
|
|
+ width: 200px;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar {
|
|
|
+ height: 60px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ background-color: #fdffff;
|
|
|
+ box-shadow: 0px 2px 5px 0px rgba(153, 153, 153, 0.15);
|
|
|
+
|
|
|
+ .hamburger-container {
|
|
|
+ line-height: 46px;
|
|
|
height: 100%;
|
|
|
float: left;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background .3s;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 0, 0, .025)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .navbar {
|
|
|
- height: 60px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- background-color: #fdffff;
|
|
|
- box-shadow: 0px 2px 5px 0px rgba(153, 153, 153, 0.15);
|
|
|
+ .breadcrumb-container {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
|
|
|
- .hamburger-container {
|
|
|
- line-height: 46px;
|
|
|
- height: 100%;
|
|
|
- float: left;
|
|
|
- cursor: pointer;
|
|
|
- transition: background .3s;
|
|
|
- -webkit-tap-highlight-color: transparent;
|
|
|
+ .errLog-container {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
|
|
|
- &:hover {
|
|
|
- background: rgba(0, 0, 0, .025)
|
|
|
- }
|
|
|
- }
|
|
|
+ .right-menu {
|
|
|
+ float: right;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 50px;
|
|
|
|
|
|
- .breadcrumb-container {
|
|
|
- float: left;
|
|
|
+ &:focus {
|
|
|
+ outline: none;
|
|
|
}
|
|
|
|
|
|
- .errLog-container {
|
|
|
+ .right-menu-item {
|
|
|
display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
- }
|
|
|
-
|
|
|
- .right-menu {
|
|
|
- float: right;
|
|
|
+ padding: 0 8px;
|
|
|
height: 100%;
|
|
|
- line-height: 50px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #5a5e66;
|
|
|
+ vertical-align: text-bottom;
|
|
|
+
|
|
|
+ &.hover-effect {
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background .3s;
|
|
|
|
|
|
- &:focus {
|
|
|
- outline: none;
|
|
|
+ &:hover {
|
|
|
+ /*background: rgba(0, 0, 0, .025)*/
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .right-menu-item {
|
|
|
- display: inline-block;
|
|
|
- padding: 0 8px;
|
|
|
- height: 100%;
|
|
|
- font-size: 18px;
|
|
|
- color: #5a5e66;
|
|
|
- vertical-align: text-bottom;
|
|
|
+ .avatar-container {
|
|
|
+ margin-right: 80px;
|
|
|
|
|
|
- &.hover-effect {
|
|
|
+ .avatar-wrapper-nb {
|
|
|
+ margin-top: 5px;
|
|
|
+ position: relative;
|
|
|
+ background-color: #FFFFFF !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .user-avatar {
|
|
|
cursor: pointer;
|
|
|
- transition: background .3s;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
|
|
|
- &:hover {
|
|
|
- /*background: rgba(0, 0, 0, .025)*/
|
|
|
- }
|
|
|
+ .el-icon-caret-bottom {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: -20px;
|
|
|
+ top: 20px;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .avatar-container {
|
|
|
- margin-right: 80px;
|
|
|
-
|
|
|
- .avatar-wrapper-nb {
|
|
|
- margin-top: 5px;
|
|
|
- position: relative;
|
|
|
- background-color: #FFFFFF !important;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .user-avatar {
|
|
|
- cursor: pointer;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
+ .message-container {
|
|
|
|
|
|
- .el-icon-caret-bottom {
|
|
|
- cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- right: -20px;
|
|
|
- top: 20px;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ .message-wrapper-nb {
|
|
|
+ margin-top: 15px;
|
|
|
+ position: relative;
|
|
|
+ background-color: #FFFFFF !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .message {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.message-info {
|
|
|
+ width: 400px;
|
|
|
+
|
|
|
+ .message-title {
|
|
|
+ font-weight: bold;
|
|
|
+ .message-time {
|
|
|
+ font-size: xx-small;
|
|
|
+ color: grey;
|
|
|
+ position: relative;
|
|
|
+ float: right;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-content {
|
|
|
+ font-size: smaller;
|
|
|
+ height: 30px;
|
|
|
+ overflow: hidden;
|
|
|
+ color: grey;
|
|
|
+ width: 350px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.info-icon{
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
</style>
|