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

<template>
	<view class="footer">
		<view class="index" @click="swithTab(1)">
			<view><image :src="currentPage === 1?'../../static/tabbar/menu-1.png':'../../static/tabbar/menu-1-active.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="currentPage === 3?'../../static/tabbar/menu-3-active.png':'../../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,
				stationCode:null,
			};
		},
		mounted() {
			this.getRoute()
		},
		methods:{
			swithTab(num){
				if(num === 1){
					uni.switchTab({
						url: '/pages/index/index',
					});
				}else if(num === 2){
					if(this.$storage.getJson("token")){
						let stationCode='st001'
						this.$http.getStationExchange({stationCode:stationCode}).then(res=>{
							if(res.code === 0 && res.data){
								uni.navigateTo({
									url:'/pages/powerchange/index?stationCode='+stationCode+'&exchangeNo='+res.data
								})
							}else{
								that.$utils.msg(res.msg)
							}
						})	
						// let that=this
						// uni.scanCode({
						// 	success: function (res) {
						// 		that.stationCode=res.result.split("=")[1]
						// 		that.$http.getStationExchange({stationCode:that.stationCode}).then(res=>{
						// 			if(res.code === 0 && res.data){
						// 				uni.navigateTo({
						// 					url:'/pages/powerchange/index?stationCode='+that.stationCode+'&exchangeNo='+res.data
						// 				})
						// 			}else{
						// 				that.$utils.msg(res.msg)
						// 			}
						// 		})	
						// 	}
						// });	
						
					}else{
						uni.navigateTo({
							url: '/pages/public/login',
						});
					}
				}else{
					if(this.$storage.getJson("token")){
						uni.switchTab({
							url: '/pages/ucenter/index',
						});
					}else{
						uni.navigateTo({
							url: '/pages/public/login',
						});
					}
				}
			},
			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(~@/static/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>