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
      const userInfo = storage.getUserInfoData()
      if (userInfo.user_name) {
        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.wait_active_predetermine != null) { //预约车辆为待激活状态
          if (params.wait_active_predetermine.order_status == 2) {
            uni.showModal({
              title: '提示',
              content: '您有等待激活的车辆，是否跳转至订单详情页?',
              cancelText: '取消',
              confirmText: '确定',
              success: function(res) {
                if (res.confirm) {
                  uni.navigateTo({
                    url: '/pages/orderStatus/orderStatus?order_sn=' + params
                      .wait_active_predetermine.order_sn
                  });
                }
              }
            })
          }
          return
        }
        if (params.carList.length == 0) {
			if(me.isScanCondeRentalCar) {
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						var location = uni.getStorageSync('user_current_location')
						me.loadScanCode(location,res.result)
					},
					fail: function (res) { },
					complete: function (res) { },
				})
			} else {
				uni.navigateTo({
					url: '/pages/scanCar/scanCar'
				});
			}
        } else {
          if (params.order_status == 3 || params.order_status == 4) { // 车辆状态为未激活
            uni.showModal({
              title: '提示',
              content: '已有正在使用的车辆，是否跳转至车辆详情页?',
              cancelText: '取消',
              confirmText: '确定',
              success: function(res) {
                if (res.confirm) {
                  const isReturnIndex = false
                  uni.navigateTo({
                    url: '/pages/battery/battery?plate_number=' + plate_number +'&isReturnIndex=' + isReturnIndex
                  });
                }
              }
            })
          } else if (params.order_status == 5) {
            uni.showModal({
              title: '提示',
              content: '请等待商家确认还车,是否跳转至订单详情页?',
              cancelText: '取消',
              confirmText: '确定',
              success: function(res) {
                if (res.confirm) {
                  uni.navigateTo({
                    url: '/pages/orderStatus/orderStatus?order_sn=' + params
                      .carList[0].order_sn
                  });
                }
              }
            })
          } else {
            uni.showModal({
              title: '提示',
              content: '已有正在进行的订单，是否跳转至订单详情页?',
              cancelText: '取消',
              confirmText: '确定',
              success: function(res) {
                if (res.confirm) {
                  uni.navigateTo({
                    url: '/pages/orderStatus/orderStatus?order_sn=' + params
                      .carList[0].order_sn
                  });
                }
              }
            })
          }
        }
      } else if (userInfo.is_auth == 1 && userInfo.status != 2) {
        uni.showModal({
          title: '身份认证提示',
          content: '尚未完成身份认证，是否进行身份认证?',
          cancelText: '取消',
          confirmText: '确定',
          success: function(res) {
            if (res.confirm) {
              me.loadFaceToken()
            }
          }
        })
      } else {
        uni.showModal({
          title: '提示',
          content: '您还未登录，请先登录',
          showCancel: false,
          confirmText: '确定',
          success: function(res) {
            if (res.confirm) {
              //#ifdef MP-ALIPAY
              uni.navigateTo({
                url: '/pages/phoneLogin/phoneLogin',
              })
              //#endif
              //#ifdef MP-WEIXIN
              uni.navigateTo({
                url: '/pages/login/login',
              })
              //#endif
            }
          }
        })
      }
    }
  
  
  }
};
</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>