recycapp/components/CustomTabBar.vue

<template>
  <!-- <view class="custom-tab-bar" :style="{paddingBottom: safeAreaHeight + 'px'}"> -->
  <view>
	  <view class="custom-tab-bar">
		  <view class="tab-bar-item" @click="switchTab('pages/index/index')">
			  <image
				:src="currentPage == '0' ? path+ '/assets/img/icon/index_check.png' : path+'/assets/img/icon/index.png'"
			  />
			  <text>首页</text>
		  </view>
		  <view class="lightBox flex-center" @click="linkOrder">
			  <image :src="path+ '/assets/img/icon/ID.png'"></image>
			  <view>工作证</view>
		  </view>
		  <view class="tab-bar-item" @click="switchTab('pages/mine/mine')">
				  <image
					:src="currentPage == '1' ? path+ '/assets/img/icon/my_check.png' : path+ '/assets/img/icon/my.png'"
				  />
				  <text>我的</text>
		  </view>
		<!-- <view
		  class="tab-bar-item"
		  :class="{'active' : currentPage === index}"
		  v-for="(item, index) in tabList"
		  :key="index"
		  @click="switchTab(item)"
		>
		  <image
			:src="currentPage === index ? item.selectedIconPath : item.iconPath"
		  />
		  <text>{{ item.text }}</text>
		</view> -->
	  </view>
	  <view style="height: 120rpx;"></view>
  </view>
</template>

<script>
import {
		mapState
} from 'vuex';
export default{
	computed: {
		// ...mapState(['common'])
	},
	props:{
		currentPage: {
		    type: Number,
		},
	},
	data(){
		return {
			tabList:[],
			safeAreaHeight:0,
			is_hidden:0,
			path: this.path
		}
	},
	methods:{
		switchTab(item) {
			console.log('ddd',item)
		  uni.switchTab({
		    url: '/' + item
		  });
		},
		linkOrder(){
			// uni.navigateTo({
			//   url: '/pages/type/type'
			// });
			this.$emit('centerClick','')
		}
	},
	mounted(){
		console.log(this.common,"1234")
		// this.is_hidden = this.common.is_hidden
		this.tabList = [{
				"pagePath": "pages/index", //页面路径，必须在 pages 中先定义
				"iconPath": "../static/img/home.png", //建议尺寸为 81px * 81px
				"selectedIconPath": "../static/images/tabbar/indexHL.png", //建议尺寸为 81px * 81px
				"text": "首页" //菜单上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
			},
			{
				"pagePath": "pages/cart",
				"iconPath": "../static/images/tabbar/cart.png",
				"selectedIconPath": "../static/images/tabbar/cartHL.png",
				"text": "购物车"
			},
			{
				"pagePath": "pages/user",
				"iconPath": "../static/images/tabbar/user.png",
				"selectedIconPath": "../static/images/tabbar/userHL.png",
				"text": "我的"
			}]
		return;
		if(this.is_hidden==1){
			console.log('-----')
			this.tabList = [{
					"pagePath": "pages/index", //页面路径，必须在 pages 中先定义
					"iconPath": "../static/images/tabbar/index.png", //建议尺寸为 81px * 81px
					"selectedIconPath": "../static/images/tabbar/indexHL.png", //建议尺寸为 81px * 81px
					"text": "首页" //菜单上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
				},
				
				// {
				// 	"pagePath": "pages/vip",
				// 	"iconPath": "../static/images/tabbar/v.png",
				// 	"selectedIconPath": "../static/images/tabbar/vHL.png",
				// 	"text": "超V会员"
				// },
				{
					"pagePath": "pages/cart",
					"iconPath": "../static/images/tabbar/cart.png",
					"selectedIconPath": "../static/images/tabbar/cartHL.png",
					"text": "购物车"
				},
				{
					"pagePath": "pages/user",
					"iconPath": "../static/images/tabbar/user.png",
					"selectedIconPath": "../static/images/tabbar/userHL.png",
					"text": "我的"
				}]
		}else{
			console.log('=====')
			this.tabList = [{
					"pagePath": "pages/index", //页面路径，必须在 pages 中先定义
					"iconPath": "../static/images/tabbar/index.png", //建议尺寸为 81px * 81px
					"selectedIconPath": "../static/images/tabbar/indexHL.png", //建议尺寸为 81px * 81px
					"text": "首页" //菜单上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
				},
				{
					"pagePath": "pages/youquan",
					"iconPath": "../static/images/tabbar/find.png",
					"selectedIconPath": "../static/images/tabbar/findHL.png",
					"text": "友圈"
				},
				{
					"pagePath": "pages/vip",
					"iconPath": "../static/images/tabbar/v.png",
					"selectedIconPath": "../static/images/tabbar/vHL.png",
					"text": "超V会员"
				},
				{
					"pagePath": "pages/cart",
					"iconPath": "../static/images/tabbar/cart.png",
					"selectedIconPath": "../static/images/tabbar/cartHL.png",
					"text": "购物车"
				},
				{
					"pagePath": "pages/user",
					"iconPath": "../static/images/tabbar/user.png",
					"selectedIconPath": "../static/images/tabbar/userHL.png",
					"text": "我的"
				}]
		}
		uni.getSystemInfo({
		  success: (res) => {
		    let sHeight = res.screenHeight;
		    let sTop = res.safeArea.bottom;
		    this.safeAreaHeight = sHeight - sTop;
		  }
		});
	}
	
}
</script>

<style scoped>
.custom-tab-bar {
 position: fixed;
  z-index: 99;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: #ffffff;
  border-top: 1px solid #eeeeee;
  padding: 22rpx 0 22rpx;
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #999999;
}

.tab-bar-item.active {
  color: #E12828;
}

.tab-bar-item image {
  width: 41rpx;
  height: 41rpx;
  margin-right: 12rpx;
}

.tab-bar-item text {
  font-size: 12px;
  margin-top: 0rpx;
}
.lightBox{
	width: 222rpx;
	height: 75rpx;
	background: linear-gradient(90deg, #FF7247 0%, #FA8A0C 100%);
	border-radius: 38rpx;
	font-weight: bold;
	font-size: 24rpx;
	color: #FFFFFF;
}
.lightBox image {
  width: 41rpx;
  height: 41rpx;
  margin-right: 12rpx;
}
</style>