123 lines
3.1 KiB
Vue
123 lines
3.1 KiB
Vue
<template>
|
|
<uv-tabbar fixed :value="selected" @change="change1" activeColor="#ee0a24" :placeholder="false"
|
|
:safeAreaInsetBottom="false" :customStyle="{height:`110rpx`}">
|
|
<uv-tabbar-item v-for="(item,index) in $store.state.tabbarList" :key="index" :badge="getNum(index)"
|
|
:customStyle="{height:`110rpx`}">
|
|
<template v-slot:active-icon>
|
|
<image class="icon" :src="item.selectedIconPath"></image>
|
|
</template>
|
|
<template v-slot:inactive-icon>
|
|
<image class="icon" :src="item.iconPath"></image>
|
|
</template>
|
|
</uv-tabbar-item>
|
|
</uv-tabbar>
|
|
</template>
|
|
|
|
<script>
|
|
import request from "@/utils/request";
|
|
export default {
|
|
name: "tab-bar",
|
|
props: {
|
|
selected: {
|
|
type: [Number, String]
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tabbarList: [{
|
|
"iconPath": "/static/images/tabbar/new_home_gray.png",
|
|
"text": "首页",
|
|
"selectedIconPath": "/static/images/tabbar/new_home.png",
|
|
"pagePath": "/pages/home/home"
|
|
},
|
|
{
|
|
"iconPath": "/static/images/tabbar/new_message_gray.png",
|
|
"text": "消息",
|
|
"selectedIconPath": "/static/images/tabbar/new_message.png",
|
|
"pagePath": "/pages/message/message"
|
|
},
|
|
{
|
|
"iconPath": "/static/images/tabbar/new_my_gray.png",
|
|
"text": "我的",
|
|
"selectedIconPath": "/static/images/tabbar/new_my.png",
|
|
"pagePath": "/pages/my/my"
|
|
}
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
messageNum() {
|
|
return this.$store.state.messageNum || 0
|
|
}
|
|
},
|
|
async created() {
|
|
if (!this.$store.state.tabbarList.length) {
|
|
let isnNetwork = uni.getStorageSync("isnNetwork");
|
|
if (isnNetwork) {
|
|
await this.getButtonImg()
|
|
} else {
|
|
uni.getNetworkType({
|
|
success: (res) => {
|
|
console.log(res.networkType);
|
|
if (res.networkType == "none") {
|
|
|
|
this.$store.commit("setTabbarList", this.tabbarList)
|
|
} else {
|
|
// 页面加载逻辑
|
|
uni.setStorageSync("isnNetwork", 1);
|
|
this.getButtonImg()
|
|
}
|
|
},
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
getNum(index) {
|
|
if (index == 1) {
|
|
return this.messageNum
|
|
} else {
|
|
return 0
|
|
}
|
|
},
|
|
//获取头部背景图片
|
|
async getButtonImg() {
|
|
let res = await request.post("/sj/poster/getButtonImg", {});
|
|
if (res.code == 200) {
|
|
// if (res.data?.photo) {
|
|
// this.topBgImage = res.data?.photo + '?time=666'
|
|
// }
|
|
this.tabbarList.forEach((item, index) => {
|
|
if (res.data[index].iconPath) {
|
|
item.iconPath = res.data[index].iconPath
|
|
}
|
|
if (res.data[index].selectedIconPath) {
|
|
item.selectedIconPath = res.data[index].selectedIconPath
|
|
}
|
|
})
|
|
}
|
|
this.$store.commit("setTabbarList", this.tabbarList)
|
|
},
|
|
change1(val) {
|
|
// 因为在pages中配置了需要跳转的页面为 tabbar页面
|
|
// 所以不能使用navigateTo 只能使用下面这个方法跳转。
|
|
uni.switchTab({
|
|
url: this.tabbarList[val].pagePath
|
|
})
|
|
this.messageUpudateNum()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.icon {
|
|
height: 98rpx;
|
|
width: 98rpx;
|
|
}
|
|
::v-deep .uv-tabbar__content{
|
|
z-index: 999!important;
|
|
}
|
|
</style> |