202 lines
4.6 KiB
Vue
202 lines
4.6 KiB
Vue
<template>
|
|
<view class="tabbar-container">
|
|
<u-tabbar
|
|
:value="tabbarName"
|
|
@change="changeTabbar"
|
|
:fixed="true"
|
|
:placeholder="false"
|
|
:border="true"
|
|
activeColor="#fe4119"
|
|
:safeAreaInsetBottom="true"
|
|
>
|
|
<u-tabbar-item text="工作台" name="order">
|
|
<u-icon
|
|
class="u-icon"
|
|
custom-prefix="custom-icon-gongzuotai custom-icon"
|
|
size="22"
|
|
slot="active-icon"
|
|
color="#fe4119"
|
|
></u-icon>
|
|
<u-icon
|
|
class="u-icon"
|
|
custom-prefix="custom-icon-gongzuotai custom-icon"
|
|
size="22"
|
|
slot="inactive-icon"
|
|
color="#000"
|
|
></u-icon>
|
|
</u-tabbar-item>
|
|
<u-tabbar-item text="消息" name="IM" :badge="weiduNum">
|
|
<u-icon
|
|
class="u-icon"
|
|
custom-prefix="custom-icon-xiaoxi1 custom-icon"
|
|
size="22"
|
|
slot="active-icon"
|
|
color="#fe4119"
|
|
></u-icon>
|
|
<u-icon
|
|
class="u-icon"
|
|
custom-prefix="custom-icon-xiaoxi1 custom-icon"
|
|
size="22"
|
|
slot="inactive-icon"
|
|
color="#000"
|
|
></u-icon>
|
|
</u-tabbar-item>
|
|
<u-tabbar-item text="视图中心" name="shituzhongxin">
|
|
<u-icon
|
|
class="u-icon"
|
|
custom-prefix="custom-icon-shituzhongxin custom-icon"
|
|
size="20"
|
|
slot="active-icon"
|
|
color="#fe4119"
|
|
></u-icon>
|
|
<u-icon
|
|
class="u-icon"
|
|
custom-prefix="custom-icon-shituzhongxin custom-icon"
|
|
size="20"
|
|
slot="inactive-icon"
|
|
color="#000"
|
|
></u-icon>
|
|
</u-tabbar-item>
|
|
<u-tabbar-item text="我的" name="my">
|
|
<u-icon
|
|
class="u-icon"
|
|
custom-prefix="custom-icon-wode custom-icon"
|
|
size="24"
|
|
slot="active-icon"
|
|
color="#fe4119"
|
|
></u-icon>
|
|
<u-icon
|
|
class="u-icon"
|
|
custom-prefix="custom-icon-wode custom-icon"
|
|
size="24"
|
|
slot="inactive-icon"
|
|
color="#000"
|
|
></u-icon>
|
|
</u-tabbar-item>
|
|
</u-tabbar>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { mapState } from "vuex";
|
|
import permission from "../../utils/permission.js";
|
|
export default {
|
|
props: {
|
|
tabbarName: {
|
|
type: String,
|
|
default: "order",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
weiduNum: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState("user", ["imWeidu"]),
|
|
},
|
|
created() {
|
|
this.$nextTick(() => {
|
|
setTimeout(() => {
|
|
uni.hideTabBar();
|
|
}, 1);
|
|
});
|
|
},
|
|
watch: {
|
|
imWeidu: {
|
|
handler(newValue, oldValue) {
|
|
if (newValue) {
|
|
this.weiduNum = Object.values(this.imWeidu).reduce((sum, item) => {
|
|
// 检查 item 是否是对象，并且有 weidu 属性
|
|
return typeof item === "object" && item.weidu !== undefined
|
|
? sum + item.weidu
|
|
: sum;
|
|
}, 0);
|
|
}
|
|
if (newValue) {
|
|
var keys = Object.keys(newValue);
|
|
if (keys.length === 1 && keys[0] === "userId") {
|
|
this.weiduNum = 0;
|
|
}
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
mounted() {
|
|
let imWeiDu = uni.getStorageSync("imWeiDu");
|
|
|
|
if (imWeiDu) {
|
|
this.weiduNum = Object.values(imWeiDu).reduce((sum, item) => {
|
|
// 检查 item 是否是对象，并且有 weidu 属性
|
|
return typeof item === "object" && item.weidu !== undefined
|
|
? sum + item.weidu
|
|
: sum;
|
|
}, 0);
|
|
}
|
|
},
|
|
methods: {
|
|
async changeTabbar(e) {
|
|
switch (e) {
|
|
case "order":
|
|
uni.switchTab({
|
|
url: "/pages/order/order",
|
|
});
|
|
break;
|
|
case "IM":
|
|
// #ifdef APP-PLUS
|
|
let result = await permission.premissionCheck(
|
|
"CAMERA_EXTERNAL_STORAGE_RECORD_AUDIO"
|
|
); //使用
|
|
|
|
if (result == 1) {
|
|
uni.switchTab({
|
|
url: "/pages/IM/IM",
|
|
});
|
|
}
|
|
// #endif
|
|
|
|
// #ifdef H5
|
|
uni.switchTab({
|
|
url: "/pages/IM/IM",
|
|
});
|
|
// #endif
|
|
|
|
break;
|
|
case "shituzhongxin":
|
|
uni.switchTab({
|
|
url: "/pages/viewCenter/viewCenter",
|
|
});
|
|
break;
|
|
case "my":
|
|
uni.switchTab({
|
|
url: "/pages/my/my",
|
|
});
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.tabbar-container {
|
|
.u-icon {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/deep/.u-tabbar__content__item-wrapper {
|
|
height: 116rpx;
|
|
|
|
.u-tabbar-item__icon {
|
|
margin-bottom: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/.uni-tabbar-bottom {
|
|
display: none;
|
|
}
|
|
</style>
|