 
<template>
		<view class="tabbar" :style="{'padding-bottom':BottomSafeHeight+'px'}">
			<view class="navigator">
				<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
					@click="switchTab(index,item)">
						<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
						<img :src="item.selectedIconPath" class="icon" v-else>
						<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>

</template>
<script>
	export default {
    props:['select'],
    mounted(){
		this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')||10
		uni.setStorageSync("taBarHeight",(this.BottomSafeHeight+546))
		uni.setStorageSync("shopCar",this.BottomSafeHeight==10?120:(this.BottomSafeHeight+288)/2)
		uni.setStorageSync("orderBottom",(this.BottomSafeHeight+180))
    	this.selectedIndex = Number(this.select)
    },
		data() {
			return {
				selectedIndex: 0,
				showselected: false,
				BottomSafeHeight:0,
				tabBar: {
					list: [
            {
               "iconPath": "/static/imgs/caidanweixuanzhong.png",
               "selectedIconPath": "/static/imgs/caidanxuanzhong.png",
               "pagePath": "pages/menu/menu",
               "text": "菜单"
             },
             {
               "iconPath": "/static/imgs/dingdanweixuanzhong.png",
               "selectedIconPath": "/static/imgs/dingdanxuanzhong.png",
               "pagePath": "pages/order/order",
               "text": "订单"
             },
             {
               "iconPath": "/static/imgs/wodeweixuanzhong.png",
               "selectedIconPath": "/static/imgs/wodexuanzhong.png",
               "pagePath": "pages/mine/mine", 
               "text": "我的"
             }
					]
				},
			}
		},
		// beforeCreate() {
		// 	this.__path__ = this.$route.path
		// },
		methods: {
			switchTab(index, item) {
				let url = '/' + item.pagePath
        	uni.switchTab({
				    url
				  })
        return
			}
		},
	}
</script>
 
<style>
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		z-index: 10072;
		background: #FFFFFF;
		border-top: 2rpx solid #FFFFFF;
	}
 
	.navigator {
		display: flex;
		justify-content: space-around;
		width: 89%;
		margin: 0 auto;
		padding: 18rpx;
	}
 
	.navigator-item {
		padding-top: 1rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}
 
	.item-text {
		margin-top: 14rpx;
		color: #999999;
		font-size: 20rpx;
	}
 
	.text-active {
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
 
	.icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>