mrr.sj.front/components/tabbar/tabbar.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>