Jinan_app/components/tabbar.vue

<template>
	<view class="tab-bar">
		<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
			<image class="tab_img" :src="selected === index ? item.selectedIconPath : item.iconPath"></image>
			<view class="tab_text" :style="{color: selected === index ? selectedColor : color}">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		props: {
			//从父级继承过来的属性 需要在父级中使用:pagePath='pagePath',
			pagePath: String,
			selected: { // 当前选中的tab index
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				isSupervisor: false,
				shenfen: '',
				color: "#333333",
				selectedColor: "#317aff",
				list: []
			}
		},
		created() {
			let roles = uni.getStorageSync("user").roles
			let isSupervisor = roles.find(item => {
				return item.name.indexOf('检查') != -1
			})
			isSupervisor ? this.isSupervisor = true : this.isSupervisor = false
			this.shenfen = uni.getStorageSync("user").organizationLevel
		},

		mounted() {
			//救援站或者检查员
			if (this.shenfen == 'squadron' || (this.shenfen == 'battalion' && this.isSupervisor)) {
				this.list = [{
						"pagePath": "/pages/index/index",
						"iconPath": "/static/tab/43251.png",
						"selectedIconPath": "/static/tab/4325.png",
						"text": "工作任务"
					},
					{
						"pagePath": "/pages/task/taskapply",
						"iconPath": "/static/tab/43281.png",
						"selectedIconPath": "/static/tab/4328.png",
						"text": "申请"
					},
					{
						"pagePath": "/pages/task/taskreceive",
						"iconPath": "/static/tab/43281.png",
						"selectedIconPath": "/static/tab/4328.png",
						"text": "领取"
					},
					{
						"pagePath": "/pages/user/user",
						"iconPath": "/static/tab/user.png",
						"selectedIconPath": "/static/tab/user1.png",
						"text": "我的"
					}
				]
			}
		},
		methods: {
			switchTab(item, index) {
				console.log("item", item)
				console.log("index", index)
				let url = item.pagePath;
				uni.switchTab({
					url
				})

			}
		}
	}
</script>

<style lang="scss">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		height: 100rpx;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部

		.tab-bar-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.tab_img {
				width: 37rpx;
				height: 41rpx;
			}

			.tab_text {
				font-size: 20rpx;
				margin-top: 9rpx;
			}
		}
	}
</style>