qingyuyiliao/components/footer-bar/footer-bar.vue

<template>

	<view class="footer">
		<view class="footer-bar">
			<view class="footer-item" @click="tabarClick(0)">
				<image src="../../static/image/home-fill.png" mode="" v-if="page==0"></image>
				<image src="../../static/image/home.png" mode="" v-else ></image>
				<view class="footer-text" >首页</view>
			</view>
			<view class="footer-item"  @click="tabarClick(1)">
				<image src="../../static/image/mine-fill.png" mode="" class="mine"  v-if="page==1"></image>
			<image src="../../static/image/mine.png" mode="" class="mine"  v-else></image>
				<view class="footer-text" >我的</view>
			</view>
			<view class="scan" @click="scanCode()">
				<view class="scan-icon">
					<image src="../../static/image/scan.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app=getApp()
	export default {
		name: 'footer-bar',
		data() {
			return{}
		},
		props: {
			page: {
				type: [Number],
				default: 0
			},
		
		},
		
		methods: {
			tabarClick: function(e) {
				
				if (e == 0) {
					uni.reLaunch({
							url:'../../pages/index/index'
					})
				
				} else if (e == 1) {
					uni.reLaunch({
						url:'../../pages/mine/mine'
					})
					
				}
			},
			//扫描二维码
			scanCode:function(){
				if(app.globalData.is_auth==true){
					uni.scanCode({
					    success: function (res) {
					        console.log('条码类型：' + res.scanType);
					        console.log('条码内容：' + res.result);
							let scan=res.result
							let n1 = scan.length;//地址的总长度
							let n2 = scan.indexOf("=");//取得=号的位置
							let id = scan.substr(n2 + 1, n1 - n2);//从=号后面的内容
							console.log(id,'_)_)_)_)_')
							uni.navigateTo({
								url:'../../pages/index/service?device_no='+ id
							})
					    }
					});
				}
				else{
					this.$emit("getFrame",true);
				}
				
			}
		}

	}
</script>

<style lang="scss" scoped>
	.footer {
		height: 120rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fffdfd;

		.footer-bar {
			padding-top: 17upx;
			display: flex;
			position: relative;

			.footer-item {
				flex: 1;
				text-align: center;

				image {
					height:50upx;
					width: 50upx;
				}

				.mine {}

				.footer-text {
					font-size: 26upx;
				}
			}

			.scan {
				height: 142upx;
				width: 142upx;
				border-radius: 50%;
				position: absolute;
				background-color: #FFFFFF;
				bottom: 37upx;
				left: 41%;

				.scan-icon {
					height: 122upx;
					width: 122upx;
					margin: 0 auto;
					margin-top: 10upx;
					border-radius: 50%;
					background-color: $mine-background-color;

					image {
						height: 77upx;
						width: 82upx;
						margin-top: 25upx;
						margin-left: 21upx;
					}
				}
			}

		}
	}
</style>