<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-13 18:10:18
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-11-16 15:58:08
|
* @Description:
|
-->
|
<template>
|
<div class="box home-tabbar ">
|
<router-view></router-view>
|
<van-tabbar route :active-color='$store.state.backColor' inactive-color='#CCCCCC'>
|
<van-tabbar-item :to="item.path" v-for="(item, index) in footerNav" :key="index" :info="item.powerId ===100003 ? count : ''" @click="resetCount(item.powerId)">
|
<span class="msgInfo" v-if="item.powerId ===300000 && msgCount.sum "></span>
|
<template :active="index" class="van-tabbar-item__icon flex-center-g" v-slot:icon>
|
<svg class="icon" aria-hidden="true" style="width:24px;height:24px;" :style="{fill:$store.state.backColor}">
|
<use v-if="active === item.powerId" :xlink:href="'#' + item.icon"></use>
|
<!--<use v-else xlink:href="#iconchanpin"></use>-->
|
<use v-else :xlink:href="'#' + item.Aicon"></use>
|
</svg>
|
</template>
|
{{item.label}}
|
</van-tabbar-item>
|
</van-tabbar>
|
</div>
|
</template>
|
|
<script>
|
import {
|
mapState, mapGetters, mapActions
|
} from 'vuex';
|
export default {
|
data() {
|
return {
|
count: '',
|
active:this.$route.meta.powerId || ''
|
}
|
},
|
computed: {
|
...mapState(['footerNav','msgCount']),
|
...mapGetters(['orgType']),
|
|
},
|
created() {
|
this.init()
|
this.getCount()
|
},
|
methods: {
|
...mapActions(['getCount']),
|
resetCount(id){
|
this.active = id;
|
// if(id===100003){
|
// this.count = '';
|
// }
|
},
|
|
init() {
|
// 代理和渠道角色才会调用
|
if(this.orgType===1 || this.orgType ===2){
|
this.$api.getUnAuditNb().then((res) => {
|
this.count = res.body.unAuditNb || '';
|
}).catch((err) => {
|
|
});
|
}
|
},
|
},
|
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.box {
|
background-color: @c-f5;
|
min-height: 100vh;
|
//padding-bottom: 44px;
|
}
|
.msgInfo{
|
width:7px;
|
height:7px;
|
background:rgba(255,102,102,1);
|
color: #fff;
|
border-radius:50%;
|
position: absolute;
|
right: 34%;
|
top: 3px;
|
}
|
|
|
|
</style>
|
