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("get", "/applet/v1/station/connector/detail", { "connectorCode": sn }, {}).then(res => {
				console.log("设备信息：", res)
				if (res.data.status == 0 || res.data.status == 255) {
					return;
				}
				this.$app.url.goto('/pages/terminal/terminal?deviceId=' + res.data.connectorCode + "&deviceStatus=" + res.data
					.status);
			})
		}
	}
}
</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>