zk-driver-wechat-applet/components/tab-bar/tab-bar.vue

<template>
	<view class="footer">
		<view class="index" @click="swithTab(1)">
			<view><image src="../../static/tabbar/menu-1.png"></image></view>
			<view :class="[currentPage === 1?'current':'']">首页</view>
		</view>
		<view class="scan" @click="swithTab(2)">
			<view><image src="../../static/tabbar/menu-2.png"></image></view>
			<view class="hover">扫码换电</view>
		</view>
		<view class="index" @click="swithTab(3)">
			<view><image src="../../static/tabbar/menu-3.png"></image></view>
			<view :class="[currentPage === 3?'current':'']">我的</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tab-bar",
		data() {
			return {
				currentPage:0,
			};
		},
		mounted() {
			this.getRoute()
		},
		onLoad() {
			
		},
		methods:{
			swithTab(num){
				if(num === 1){
					uni.switchTab({
						url: '/pages/index/index',
					});
				}else if(num === 2){
					if(this.$store.state.users){
						uni.scanCode({
							success: function (res) {
								console.log('条码内容：' + res.result.split("=")[1]);
							}
						});
					}else{
						uni.navigateTo({
							url: '/pages/public/login?item=sancode',
						});
					}
				}else{
					if(this.$store.state.users){
						uni.switchTab({
							url: '/pages/ucenter/index',
						});
					}else{
						uni.navigateTo({
							url: '/pages/public/login?item=ucenter',
						});
					}
				}
			},
			getRoute(){
				let curPage = getCurrentPages();
				let route = curPage[curPage.length - 1].route
				if(route === 'pages/index/index'){
					this.currentPage=1
				}else if(route === 'pages/ucenter/index'){
					this.currentPage=3
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer{
		width: 100%;
		height: 106rpx;
		background-image: url('https://xcx.xnymzx.com/zkstation/bbg.png');
		background-size: 100% 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		padding-top: 15rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		image{
			width: 39rpx;
			height: 39rpx;
		}
		.index{
			width: 300rpx;
			text-align: center;
		}
		.scan{
			position: relative;
			display: flex;
			flex: 1;
			text-align: center;
			view:first-child{
				position: absolute;
				bottom: 30rpx;
				width: 100%;
			}
			view:last-child{
				position: absolute;
				bottom: 6rpx;
				width: 100%;
			}
			image{
				width: 106rpx;
				height: 106rpx;
			}
		}
		.hover{
			color: #58be6b;
		}
		.current{
			color: #959ea8;
		}
	}
</style>