charge_miniapp/components/app-navigation/app-navigation.vue

<template>
	<view class="app-navigation">
		<view class="__body">
			<view @click="act('home')" class="nav-item">
				<image :src="homeIcon" class="icon"></image>
				<view class="name">首页</view>
			</view>
			<view class="scan" @click="sacn()">
				<image src="@/static/img/appnav-scan.svg.svg" class="icon-scan"></image>
			</view>
			<view class="scan-placeholder"></view>
			<view @click="act('my')" class="nav-item">
				<image :src="myIcon" class="icon"></image>
				<view class="name">我的</view>
			</view>
		</view>
		<ax-ios-indicator min="10"></ax-ios-indicator>
	</view>
</template>

<script>
import { url } from '../../static/js/app';
	export default {
		name:"app-navigation",
		props:{
			// 激活对象
			active:{type:String,default:""}
		},
		computed:{
			myIcon(){
				return `../../static/img/appnav-my${this.active == 'my'?'.active':''}.svg`;
			},
			homeIcon(){
				return `../../static/img/appnav-home${this.active == 'home'?'.active':''}.svg`;
			}
		},
		methods:{
			act(name){
				if(name == this.active) return;
				var url = '';
				switch (name){
					case 'home':
						url = '/pages/index/index';
					break;
					case 'my':
						url = '/pages/my/my';
					break;
				}
				if(url) uni.reLaunch({url});
			},
			//扫一扫
			sacn(){
				this.$app.act.scan().then(res=>{
					var paramObj = this.getUrlParams(res.result);
					if(!paramObj || !paramObj.connectorCode){
						this.$app.popup.alert("二维码不正确。","温馨提示！");
						return;
					}
					this.getDeviceInfo(paramObj.connectorCode);
				})
			},
			getUrlParams(url) {
			  const paramsRegex = /[?&]+([^=&]+)=([^&]*)/gi;
			  const params = {};
			  let match;
			  while (match = paramsRegex.exec(url)) {
			    params[match[1]] = match[2];
			  }
			  return params;
			},
			//通过充电桩编码（sn）获取设备详情
			getDeviceInfo(sn){
				this.$api.base("post","/chargeApi/checkDevicesBySn",{"sn":sn},{}).then(res=>{
					console.log("设备信息：",res)
					var item = res.device;
					//设备状态 0：离网1：空闲2：占用（未充电）3：占用（充电中）4：占用（预约锁定）255：故障
					if(item.deviceStatus == 0 || item.deviceStatus == 255 ){
						return;
					}
					this.$app.url.goto('/pages/terminal/terminal?deviceId='+item.id+"&deviceStatus="+item.deviceStatus);
				})
			}
		}
	}
</script>

<style scoped>
.app-navigation{
	background-color: #fff;
	border-radius: 15px 15px 0 0;
	filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, 0.05));
}
.app-navigation .__body{
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: relative;
	padding: 10px;
	padding-bottom: 0;
}
.scan{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 100pc;
	background-image: linear-gradient(to right,#8FF8FB,#47AEFF);
	box-shadow: 0 3px 6px #00BFE1 inset;
	border: 3px solid #fff;
	position: absolute;
	transform: translateY(-10px);
}
.scan > .icon-scan{
	display: block;
	width: 22.5px;
	height: 22.5px;
}
.scan-placeholder{
	width: 60px;
}
.nav-item > .name{
	font-size: 10px;
	margin-top: 4px;
}
.nav-item > .icon{
	display: block;
	width: 22px;
	height: 22px;
}
</style>