<style scoped>
/* .tabbarMain {
  height: 100upx;
  position: fixed;
  z-index: 50;
  flex: 1;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999999;
  border-top: 1upx solid #ddd;
  padding-top: 96rpx;
  background: #fff;
}
.tabbarMainIphone {
  height: 156upx;
  padding-bottom: 64upx;
}
.tabBtnMina {
  width: 750upx;
  height: 88upx;
  position: absolute;
  z-index: 2;
  bottom: 0;
  flex-direction: row;
  display: flex;
  left: 0;
  right: 0;
  z-index: 99999999;
}
.tabBtnMinaIphone {
  height: 156upx;
  padding-bottom: 64upx;
}
.imgse {
  height: 48upx;
  width: 48upx;
}
.txtBtn {
  font-size: 24upx;
  color: #666666;
}
.txtBtnSel {
  font-size: 24upx;
  color: #333333;
}
.itmMain {
  width: 150upx;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}
.imgseTs {
  width: 150upx;
  height: 140upx;
  margin-bottom: 90upx;
  position: relative;
  z-index: 1;
  bottom: 0upx;
}

.btnfixMin {
  width: 750upx;
  height: 178upx;
  position: absolute;
  z-index: 1;
  bottom: 0;
}
.btnfixMinIphone {
  bottom: 64upx;
}
.fixTpm {
  width: 150upx;
  height: 140upx;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
}
.imgseTsAnds {
  width: 150upx;
  height: 150upx;
  position: fixed;
  z-index: 1;
  bottom: 10upx;
  border-radius: 150upx;
} */
</style>
<!-- <template>
  <view
    class="tabbarMain"
    :class="[flagTypeInfo ? 'tabbarMainIphone' : '']"
    v-if="navs && navs.length > 0"
  >
    <view
      class="tabBtnMina"
      :class="[flagTypeInfo ? 'tabBtnMinaIphone' : '']"
      mode=""
    >
      <view
        class="itmMain"
        v-for="(x, i) in navs"
        :key="i"
        @click.stop="goUrl(x.url)"
      >
        <image
          class="imgse"
          :fade-show="false"
          v-if="active != i"
          mode="aspectFit"
          :src="x.icon"
        ></image>
        <image
          class="imgse"
          :fade-show="false"
          v-if="active === i"
          mode="aspectFit"
          :src="x.active_icon"
        ></image>
        <text
          class="txtBtn"
          :style="{ color: active == i ? x.active_color : x.color }"
          >{{ x.text }}</text
        >
      </view>
    </view>
  </view>
</template> -->

<!-- <script>
export default {
  data() {
    return {
      active: 0,
      platforms: "",
      leftWidth: 0,
      flagTypeInfo: false,
      navs: [],
      crtPath: "",
    };
  },
  created() {
  },
  mounted() {
    this.flagTypeInfo = this.$uiConfig.is_bang;
    let tempSystem = uni.getSystemInfoSync();
    this.platforms = tempSystem.platform;

    this.$nextTick(() => {
      // #ifdef APP-NVUE || APP-PLUS || APP-PLUS-NVUE ||APP-VUE
      if (this.platforms == "android") {
        let temp = this.$refs.leftWidth;
        this.leftWidth = tempSystem.screenWidth / 2;
      }
      // #endif
    });
    if (uni.getStorageSync("navs")) {
      this.navs = uni.getStorageSync("navs") ?? [];
    } else {
      setTimeout(() => {
        this.navs = uni.getStorageSync("navs") ?? [];
        this.activeHandler();
      }, 3000);
    }
    this.activeHandler();
  },
  methods: {
    activeHandler() {
      let t = getCurrentPages();

      // #ifdef MP-WEIXIN
      let query = t[t.length - 1].__displayReporter.query;
      let queryString = "";
      for (var k in query) {
        queryString += `&${k}=${query[k]}`;
      }
      if (queryString != "") {
        queryString = "?" + queryString.substring(1, queryString.length);
      }
      this.crtPath = "/" + t[t.length - 1].route + queryString;
      // #endif
      //  #ifdef MP-ALIPAY
      this.crtPath = t[t.length - 1].$page.fullPath;
      // #endif
      this.navs.forEach((x, i) => {
        if (x.url == this.crtPath) {
          this.active = i;
        }
      });
    },
    goUrl(url) {
      if (this.crtPath != url) {
        uni.redirectTo({
          url: url,
        });
      } else {
        uni.reLaunch({
          url: url,
        });
      }
    },
  },
};
</script>
 -->
 <template>
	 <view class="bar-box">
	 	<div class="bar-box-line">
	 		<view class="bar-item" v-for="(x,i) in menus" @click="changeMenuHandler(x)">
	 			<i class="icon iconfont" :class="[x.icon]" v-if="current != x.page"></i>
	 			<view class="acitve" v-else>
	 				{{x.name}}
	 			</view>
	 		</view>
	 	</div>
	 </view>
 </template>
 <script>
	 export default {
	   data() {
			return {
				menus:[],
				current:''
			};
		},
		mounted() {
			let pages = getCurrentPages()
			this.current="/"+pages[pages.length - 1].route??''
			this.menus=[{
							name:'首页',
							icon:'icon-home',
							page:'/pages/index/index'
						},
						{
							name:'订单',
							icon:'icon-Work',
							page:'/pages/jiuzhai/jz_MyOrder'
						},
						{
							name:'我的',
							icon:'icon-my1',
							page:'/pages/user-center/user-center'}]
		},
		methods:{
			changeMenuHandler(menu){
				this.current=menu.page
				if(menu.page.indexOf('pages')!=-1){
					uni.redirectTo({
						url:menu.page
					})
				}
			}
		}
	 }
 </script>
 <style>
 	
	/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
	@font-face {
	  font-family: "nav-font";src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/tcIItWsk6dTo.woff2") format("woff2"),
	  url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/RZzswoFvsjUs.woff") format("woff");
	  font-display: swap;
	}
 	.bar-box{
 		padding-bottom: env(safe-area-inset-bottom);
 		background-color: #FFF;
 		border-top-left-radius: 20rpx;
 		border-top-right-radius: 20rpx;
 		box-shadow: 0 0 6px rgba(0,0,0,.12);
		position: fixed;
		z-index: 50;
		flex: 1;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999999;
 	}
 	.bar-box-line{
 		display: flex;
 		flex-direction: row;
 		flex-wrap: nowrap;
 		align-items: center;
 		padding: 20upx 0 30upx;
 	}
 	.bar-box-line.uninset{
 		padding: 20upx 0 40upx;
 	}
 	.bar-box-line.inset{
 		padding: 20upx 0;
 	}
 	.bar-box-line .bar-item{
 		flex: 1;
 		width: 1px;
 		text-align: center;
 		color: #abadb9;
 		position: relative;
 	}
 	.bar-box-line .bar-item .icon{
 		font-size: 50rpx;
 	}
 	.bar-box-line .bar-item .acitve{
 		font-size: 32rpx;
 		font-weight: bold;
 		color: #1F2429;
 		text-align: center;
 		font-family: nav-font;
 	}
 	.bar-box-line .bar-item .acitve::after{
 		display: inline-block;
 		content: ' ';
 		width:4px;
 		height: 4px;
 		border-radius: 4px;
 		background-color: #1F2429;
 		position: absolute;
 		left: calc(50% - 2px);
 		top: 60rpx;
 	}
 </style>