最终效果
点击小铃铛无数据时，展示 暂无待办
有数据时展示具体的待办事项
<template>
<!-- 消息 message -->
<div class="message-center geip-header-right">
<el-dropdown ref="msgInfoDropdown" @visible-change="handleVisibleChangeMsgInfo">
<span class="el-dropdown-link" :style="getThemeStyleTextColor()">
<i class="p-icon p-icon-bell"></i>
<span v-if="msgUnreadCount" class="message-center-count">{{ msgUnreadCount > 99 ? '99+' : msgUnreadCount }}</span>
</span>
<el-dropdown-menu class="message-center--popper geip-portal-public-area" slot="dropdown">
<div class="msg-header">
<!-- {{ $t('msgNav.msgTitle') }}<i class="el-icon el-icon-close" @click="handleCloseMsgInfo"></i>-->
待办事项
</div>
<template v-if="msgUnreadCount">
<div class="msg-content">
<template v-for="(item, index) in msgUnreadData">
<el-dropdown-item class="message-center-dropdown__item" @click.native="handleClickMsgItem(item.id)" :key="index">
<div :style="{display:'flex'}">
<p>【{{ item.title }}】</p>
<span>您有<i class="count">{{ item.createTime }}</i>条材料待审核</span>
<i class="sign-red"></i>
</div>
<span @click="handlClickViewMore" :style="{color: '#4499FF'}">去审核</span>
</el-dropdown-item>
</template>
</div>
</template>
<template v-else>
<div class="msg-content msg-nodata-wrap">
<div class="msg-nodata">
<img src="./img/Nothing.png" alt="">
<!-- <p class="msg-nodata-info">{{ $t('msgNav.noMsg') }}</p>-->
<span class="Nothing-desc">暂无待办</span>
</div>
</div>
</template>
<!-- <div class="msg-footer">
<el-button type="text" class="msg-footer-btn" @click="handleClickSetReadedAllMsg" :disabled="!msgUnreadCount">{{ $t('msgNav.setRead') }}</el-button>
<el-button type="text" class="msg-footer-btn" @click="handlClickViewMore">{{ $t('msgNav.moreInfo') }}</el-button>
</div>-->
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<i18n src="./locales/message-center.json"></i18n>
<script>
import getThemeStyleTextColor from './mixins/getThemeStyleTextColor'
export default {
name: 'MessageCenter',
props: {
/* msgUnreadData: Array, */
/* msgUnreadCount: Number */
},
mixins: [getThemeStyleTextColor],
data () {
return {
msgUnreadCount: 0,
msgUnreadData: [
{ title: '材料', createTime: '18' },
{ title: '项目', createTime: '3' },
{ title: '文件', createTime: '2' }
]
}
},
methods: {
handleVisibleChangeMsgInfo (value) {
if (value) {
this.$emit('visible-msg-info-dropdown')
}
},
handleCloseMsgInfo () {
this.$refs.msgInfoDropdown.visible = false
},
handleClickMsgItem (id) {
this.$emit('click-msg-detail', id)
},
handlClickViewMore () {
this.$emit('click-msg-center')
this.$refs.msgInfoDropdown.visible = false
},
handleClickSetReadedAllMsg () {
this.$emit('click-allmsg-read')
}
}
}
</script>
<style lang="scss" scoped>
@import "../../styles/variables.scss";
@import "./styles/geip-header-right.css";
.message-center {
font-size: 14px;
color: $--color-text-regular;
}
.message-center .p-icon-bell{
font-size: 16px;
cursor: pointer;
}
.message-center .el-dropdown-link{
color: #fff;
position: relative;
}
.message-center .message-center-count {
position: absolute;
right: -8px;
top: -5px;
display: inline-block;
padding: 0 3px;
min-width: 10px;
height: 16px;
line-height: 14px;
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
background-color: #ff5151;
border-radius: 8px;
}
.msg-header {
color: $--color-text-primary;
font-size: 16px;
font-weight: 400;
height: 46px;
line-height: 46px;
box-sizing: border-box;
padding-left: 20px;
}
.msg-header .el-icon-close{
float: right;
cursor: pointer;
}
.msg-header .el-icon-close:hover {
color: $--color-primary;
}
.el-dropdown-menu.message-center--popper {
width: 372px;
height: 209px;
padding: 0;
}
.msg-content {
/* padding-right: 25px;*/
border-top: 1px solid $--border-color-light;
/* border-bottom: 1px solid $--border-color-light;
height: 296px;*/
}
.msg-nodata-wrap{
display: flex;
justify-content: center;
align-items: center;
height: 164px;
padding: 20px 0 26px 0;
line-height: 64px;
box-sizing: border-box;
}
.msg-content .message-center-dropdown__item {
padding-left: 12px;
padding-right: 20px;
line-height: 44px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
height: 44px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1F1F1F;
}
.msg-content .message-center-dropdown__item:not(.is-disabled):hover, .msg-content .message-center-dropdown__item:focus {
background-color: #fff;
}
.msg-content .message-center-dropdown__item:last-child {
border: none;
}
.msg-content .message-center-dropdown__item p {
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.msg-footer {
display: flex;
}
.msg-footer .msg-footer-btn {
flex: 1;
text-align: center;
padding: 0;
font-size: 14px;
height: 56px;
line-height: 56px;
margin: 0;
}
.msg-footer .msg-footer-btn:not(.is-disabled) {
color: $--color-text-regular;
}
.msg-footer .msg-footer-btn:not(.is-disabled):hover {
color: $--color-primary;
}
.msg-footer .msg-footer-btn:first-child {
border-right: 1px solid $--border-color-light;
}
.msg-nodata {
text-align: center;
display: flex;
flex-direction: column;
}
.msg-nodata .p-icon{
font-size: 28px;
color: $--color-text-placeholder;
}
.msg-nodata .msg-nodata-info {
margin: 5px 0 0;
font-size: 14px;
font-weight: 400;
color: $--color-text-secondary;
}
.el-menu-item.reddot::before{
position: absolute;
right: -10px;
top: 6px;
display: block;
content: " ";
width: 6px;
height: 6px;
border-radius: 50%;
background-color: $--color-danger;
border: 1px solid #FFFFFF;
}
.Nothing-desc{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(31, 31, 31, 0.55);
line-height: 22px;
padding-top: 11px;
}
.sign-red{
width: 6px;
height: 6px;
background: #F96753;
border-radius: 50%;
margin-top: 13px;
margin-left: 5px
}
.count{
color: rgb(68, 153, 255);
font-style: normal;
margin: 0 3px;
}
</style>
