hitap-chat/components/tabbar.vue

<template>
	<view>
		<u-tabbar activeColor="#2294E6" :value="name" :fixed="true" :placeholder="false" :safeAreaInsetBottom="false">
			<u-tabbar-item :text="item.text" :name='item.text' @click="to(item)" v-for="(item,index) in list" style="width: 16.66%;">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		props: {
			name: {
				default: '首页',
				// type:'String'
			}
		},
		watch: {
			// path: {
			// 	handler(newVal, oldVal) {
			// 		// this.initVal()
			// 	},
			// 	// immediate 设为true，进入页面会立即执行handler函数。
			// 	immediate: true
			// }
		},
		data() {
			return {
				$: this.$,
				home: {
					// 最少2个、最多5个 tab
					"pagePath": "/pages/index/index",
					// 页面路径，必须在 pages 中先定义
					"iconPath": "/static/nav/index.png",
					// 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
					"selectedIconPath": "/static/nav/index_active.png",
					// 选中时的图片路径
					"text": "首页",
					// tab 上按钮文字
					role: ['领导', '排查人员', '治理人员']
				},
				approve: {
					"pagePath": "/pages/approve/index",
					"iconPath": "/static/nav/jobfind.png",
					"selectedIconPath": "/static/nav/jobfind_active.png",
					"text": "审批",
					role: ['领导']
				},
				investigation: {
					"pagePath": "/pages/investigation/index",
					"iconPath": "/static/nav/job.png",
					"selectedIconPath": "/static/nav/job_active.png",
					"text": "排查",
					role: ['领导', '排查人员']
				},

				governance: {
					"pagePath": "/pages/governance/index",
					"iconPath": "/static/nav/lean.png",
					"selectedIconPath": "/static/nav/lean_active.png",
					"text": "治理",
					role: ['领导', '治理人员']
				},
				//农三轮
				agricultural3W: {
					"pagePath": "/pages/agricultural3W/index",
					"iconPath": "/static/nav/agricultural3W.png",
					"selectedIconPath": "/static/nav/agricultural3W_active.png",
					"text": "农三轮",
					role: ['村干部农三轮', '中队民警农三轮']
				},
				mine: {
					"pagePath": "/pages/mine/index",
					"iconPath": "/static/nav/mine.png",
					"selectedIconPath": "/static/nav/mine_active.png",
					"text": "我的",
					role: ['领导', '排查人员', '治理人员', '村干部农三轮', '中队民警农三轮']
				},
				value: 0
			}
		},
		computed: {
			list() {
				let routerArr = [this.home, this.approve, this.investigation, this.governance, this.agricultural3W, this
					.mine
				]
				const myRoles = this.$.getData('userInfo').role || []
				routerArr = routerArr.filter(item => item.role.some(role => myRoles.includes(role)))
				// if (routerArr.length > 5) {
				// 	setTimeout(function() {
				// 		let domList = document.getElementsByClassName('u-tabbar-item')
				// 		for (let i = 0; i < domList.length; i++) {
				// 			domList[i].style.width = '16.66%'
				// 		}
				// 	}, 0);
				// }
				return routerArr
			}
		},
		created() {
			// this.initTab()
		},
		methods: {
			to(item, index) {
				this.value = index
				this.$.setData('pageType', 1)
				// if (item.pagePath != '/pages/governance/index') {
				// 	uni.switchTab({
				// 		url: item.pagePath
				// 	})
				// }
				uni.switchTab({
					url: item.pagePath
				})
			},
			initVal() {
				for (let i in this.list) {
					if ('/pages/' + this.path + '/index' == this.list[i].pagePath) {

						this.value = i
					}
				}
			},
			initTab() {
				let role = this.$.getData('userInfo').role || []

				if (role.includes('领导')) {
					this.list.push(this.home)
					this.list.push(this.approve)
					this.list.push(this.investigation)
					this.list.push(this.governance)
					this.list.push(this.mine)
				}
				if (role.includes('排查人员') && !role.includes('领导')) {
					this.list.push(this.home)
					this.list.push(this.approve)
					this.list.push(this.investigation)
					this.list.push(this.governance)
					this.list.push(this.mine)
				}
				if (!role.includes('排查人员') && !role.includes('领导')) {
					this.list.push(this.home)
					this.list.push(this.approve)
					this.list.push(this.investigation)
					this.list.push(this.governance)
					this.list.push(this.mine)
				}
				for (let i in this.list) {
					if ('/pages/' + this.path + '/index' == this.list[i].pagePath) {
						// console.log('/pages/' + this.path + '/index' == this.list[i].pagePath,this.list.length,i)
						// 		this.value = Number(i)
					}
				}
				// 	console.log('/pages/'+this.path+'/index')
				// console.log('/pages/' + this.path + '/index')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-page__item__slot-icon {
		width: 46rpx;
		height: 46rpx;
	}
</style>