zx_flk_app/component/customTabbar/index.vue

<template>
	<view class="tabbar-wrap">
		<view class="tabbar">
			<view v-for="(item, index) in tabs" :key="index" class="tab-item" @tap="routerPush(item.url)">
				<image :src="curtTab === item.name ? item.activeIcon : item.icon" class="tab-icon"></image>
				<text :class="['base-text', curtTab === item.name && 'checked']">{{ item.label }}</text>
			</view>
			<view v-if="!isScanCondeRentalCar" class="center-entrance" @tap="navToInputPage">

				<image src="https://qiniu.bms16.com/Fm_kDVr1TIeIbbBW6-5bz0r-cECO"
					style="width: 122rpx; height: 122rpx;"></image>
				<!-- <img src="https://qiniu.bms16.com/FhCHLz8rQJ5mpJ6nUA4RbKiVkUOo" style="width: 120rpx; height: 24rpx;"/> -->
			</view>
			<view v-else class="center-entrance" @tap="navToInputPage">
				<!-- <img src="https://qiniu.bms16.com/FqcCjRjhzHFUkZj76SMHNXCZHwb3" style="width: 122rpx; height: 122rpx;margin-bottom: 14rpx;"/> -->
				<image src="https://qiniu.bms16.com/FqcCjRjhzHFUkZj76SMHNXCZHwb3"
					style="width: 122rpx; height: 122rpx;margin-bottom: 14rpx;"></image>
				<view class="scan-text">扫一扫</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	const storage = require('@/common/storage.js');
	const http = require('@/common/http.js');
	const config = require('@/common/config.js');
	const common = require('@/common/common.js');
	const appWhiteListFilter = require('@/common/appWhiteListFilter.js');
	export default {
		props: {
			curtTab: {
				type: String,
				default: 'home'
			}
		},
		data() {
			return {
				selectedTab: uni.getStorageSync('selectedIndex') || 0,
				tabs: [{
						label: '设备',
						name: 'home',
						url: '/pages/index/index',
						icon: '/static/resource/images/home_i.png',
						activeIcon: '/static/resource/images/home_s.png',
					},
					{
						label: '服务',
						name: 'service',
						url: '/pages/service/service',
						icon: '/static/resource/images/service_i.png',
						activeIcon: '/static/resource/images/service_s.png',
					},
					{
						label: '活动',
						name: 'active',
						url: '/pages/activity/activity',
						icon: '/static/resource/images/active_i.png',
						activeIcon: '/static/resource/images/active_s.png',
					},
					{
						label: '我的',
						name: 'my',
						url: '/pages/my/my',
						icon: '/static/resource/images/my_i.png',
						activeIcon: '/static/resource/images/my_s.png',
					},
				],
				userInfo: {
					is_auth: 0,
					status: 0
				},
				// accountInfo: uni.getAccountInfoSync(),
				plate_number: '',
				isScanCondeRentalCar: false,
			};
		},
		// created: function () {
		//   if (appWhiteListFilter.isScanCondeRentalCar()) {
		//   	this.setData({
		//   		isScanCondeRentalCar: true
		//   	})
		//   }
		// },

		mounted() {
			console.log(uni.getSystemInfoSync().safeArea)
		},
		methods: {
			routerPush(url) {
				// uni.setStorageSync('selectedIndex', data.index);
				uni.switchTab({
					url
				});
				// uni.navigateTo({ url })
			},

			async navToInputPage() {
				const me = this
				if (!this.loadIsLogin()) false

			},
			loadGeneralQRData(options) {
				if (('q' in options) || ('result' in options) && (options.result.indexOf(
							"https://zx.uwenya.cc/xcx/s") != -
						1)) {
					var url = ''
					if ('q' in options) {
						url = decodeURIComponent(options.q);
					}
					if ('result' in options) {
						url = options.result
					}
					var obj = this.getUrlParams(url)
					if (('t' in obj) && ('d' in obj)) {
						if (obj.t == 1 || obj.t == 2 || obj.t == 5 || obj.t == 4) {
							uni.navigateTo({
								url: '/pages/cabinetDetail/cabinetDetail?dev_id=' + obj.d + '&type=' +
									obj.t,
							})
							return 101
						}
						if (obj.t == 10) {
							this.navToInputPage(obj.d)
							return 106
						}
					}

				}
			},
			async navToInputPage(car_sn) {
				const me = this
				const {
					userInfo = ''
				} = storage.getUserInfoData()
				if (userInfo.status - 0 == 2) {
					const params = await this._getParams()
					// var plate_number = params.carList.length != 0 && params.carList[0].license_plate_number ? params
					// 	.carList[0].license_plate_number : me.plate_number
					
					if (params.carList.length == 0) {
						var location = uni.getStorageSync('user_current_location')
						me.loadScanCode(location, car_sn)
					} else {
						if (params.order_status) {
							uni.showModal({
								title: '提示',
								content: '已有正在进行的订单，是否跳转至订单页?',
								cancelText: '取消',
								confirmText: '确定',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/orderStatus/orderStatus'
										});
									}
								}
							})
							
						}
					}
				}
			},

			loadScanCode(location, battery_sn) {
				const pData = {
					longitude: location.longitude,
					latitude: location.latitude,
					battery_sn: battery_sn
				}
				const me = this
				http.postApi(config.API_FLK_CAR_DETAIL, pData, (resp) => {
					uni.hideLoading()
					if (resp.data.code === 200) {
						if (resp.data.data.online === 0 || isOffline) {
							common.simpleToast('此车辆已离线，请选择其他车辆')
						} else {
							if (resp.data.data.is_mine) {
								//直接切换当前扫码的车辆
								uni.setStorageSync('car_info', resp.data.data);
								me.$emit('changCar',resp.data.data)
								return
							} else {
								common.simpleToast('此车辆正在被使用！')
								return
							}
						}
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			},
			_getParams() {
				return new Promise((reslove, reject) => {
					http.postApi(config.API_FLK_CAR_DEVICE_LIST, {}, res => {
						const {
							data = []
						} = res.data.data
						const obj = {
							carList: data,
							order_status: data.length ? data[0].hire_order_status : 0,
						}
						reslove(obj)
					})
				})
			},
			getUrlParams(url) {
				// 通过 ? 分割获取后面的参数字符串
				let urlStr = url.split('?')[1]
				// 创建空对象存储参数
				let obj = {};
				// 再通过 & 将每一个参数单独分割出来
				let paramsArr = urlStr.split('&')
				for (let i = 0, len = paramsArr.length; i < len; i++) {
					// 再通过 = 将每一个参数分割为 key:value 的形式
					let arr = paramsArr[i].split('=')
					obj[arr[0]] = arr[1];
				}
				return obj
			},
			async loadIsLogin() {
				const user_token = storage.getUserToken()
				if (!user_token) {
					let res = await uni.showModal({
						title: '提示',
						content: '您还未登录，请先登录',
						showCancel: true,
						cancelText: '取消',
						confirmText: '确定',
					})
					if (res[1].confirm) {
						uni.navigateTo({
							url: '/pages/loginRegister/login',
						})
					}
					return false
				} else {
					return true
				}
			},


		}
	};
</script>

<style scoped>
	.tabbar-wrap {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		/* border-bottom: env(safe-area-inset-bottom) solid #fff; */
		z-index: 9999;
		/* #ifdef APP */
		/* 兼容 iOS < 11.2 */
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* #endif */


	}

	.tabbar {
		height: 140rpx;
		width: 100%;
		/* background: url('https://qiniu.bms16.com/FiYy2ZOV_hGSJx32YAQSLZSbAOFq') no-repeat; */
		/* background: url('https://qiniu.bms16.com/Fk8jEU5-RbARagKDYZy0tKWErKNF') no-repeat; */
		background-size: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		bottom: 0;
		background-color: #fff;
		padding: 0 50rpx;
	}

	.tab-item {}

	.tab-item:nth-child(2) {
		margin-right: 20%;
	}

	.tab-icon {
		width: 48rpx;
		height: 48rpx;
		display: block;
		margin: auto;
	}

	.center-entrance {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 34rpx;
		display: flex;
		flex-direction: column;
		border-radius: 50%;
		border: 10rpx solid #fff;

	}

	.scan-text {
		font-size: 10px;
		text-align: center;
		color: #828DA2;
		font-weight: 600;
	}

	.base-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 22rpx;
		color: #9EA9BB;
		line-height: 20rpx;
		text-align: center;
		font-style: normal;
	}

	.checked {
		color: #060809;
	}
</style>