You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.1 KiB
86 lines
2.1 KiB
3 months ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<!-- 政务端消息通知数量 -->
|
||
|
|
<!-- 大于0的时候显示的图标 -->
|
||
|
|
<el-badge :is-dot="counts > 0" class="item" v-if="checkRole(['common'])">
|
||
|
|
<el-dropdown trigger="click" @command="handleCommand">
|
||
|
|
<span class="el-dropdown-link">
|
||
|
|
<i class="el-icon-bell"></i>
|
||
|
|
</span>
|
||
|
|
</el-dropdown>
|
||
|
|
</el-badge>
|
||
|
|
<!-- 企业端消息通知数量 -->
|
||
|
|
<el-badge :is-dot="counts > 0" class="item" v-if="showCompanySection">
|
||
|
|
<el-dropdown trigger="click" @command="handleCommand">
|
||
|
|
<span class="el-dropdown-link">
|
||
|
|
<i class="el-icon-bell"></i>
|
||
|
|
</span>
|
||
|
|
<el-dropdown-menu slot="dropdown">
|
||
|
|
<el-dropdown-item>
|
||
|
|
消息数量: {{ counts }}
|
||
|
|
</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</el-dropdown>
|
||
|
|
</el-badge>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { checkRole } from "@/utils/permission";
|
||
|
|
import { getMessageCount } from '@/api/ManageApi/index'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
counts: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
showCompanySection() {
|
||
|
|
const isCompany = this.checkRole(['company']);
|
||
|
|
const isCommon = this.checkRole(['common']);
|
||
|
|
// 如果两个角色都存在，则隐藏企业端
|
||
|
|
return isCompany && !isCommon;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getCounts();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
checkRole,
|
||
|
|
// 获取数据
|
||
|
|
async getCounts() {
|
||
|
|
try {
|
||
|
|
const response = await getMessageCount();
|
||
|
|
if (response && response.code === 200) {
|
||
|
|
this.counts = response.data; // 将消息数量赋值给 counts
|
||
|
|
} else {
|
||
|
|
console.error('获取数据失败:', response);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取数据失败:', error);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleCommand(command) {
|
||
|
|
this.$message('点击了: ' + command)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.item {
|
||
|
|
margin-right: 10px;
|
||
|
|
margin-top: .5rem;
|
||
|
|
|
||
|
|
.el-dropdown-link {
|
||
|
|
cursor: pointer;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-dropdown-link i {
|
||
|
|
font-size: 2rem;
|
||
|
|
/* 增大图标的大小 */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|