car-wash-front/src/components/tab-bar/index.vue

<template>
  <view class="tabbar-container">
    <block>
      <view class="tabbar-item"
            v-for="(item, index) in state.tabbarList" :key="index"
            :class="[item.centerItem ? ' center-item' : '']"
            @click="handleTabbarClick(item)">
        <view class="item-top"><image :src="state.currentItem == item.id ? item.selectIcon : item.icon"  mode="widthFit"></image></view>
        <view class="item-bottom" :class="[state.currentItem == item.id ? 'item-active' : '',state.isIOS?'ios11':'']">
          <text>{{ item.text }}</text>
        </view>
      </view>
    </block>
  </view>
</template>

<script setup lang="ts" name="TabBar">
  import {onMounted, reactive, ref} from 'vue'
  import {onLoad, onShow} from "@dcloudio/uni-app";

  const props = defineProps({
    index: {
      type: Number,
      default: 0
    }
  })

  const state = reactive({
    currentItem:0,
    isIOS:false,

    tabbarList:[
      {
        id: 0,
        path: '/pages/index/index',
        icon: '/static/iconfont/default/Create-wash.svg',
        selectIcon: '/static/iconfont/Create-wash.svg',
        text: '网点',
        centerItem: false
      },
      {
        id: 1,
        path: '/pages-wash/scan/index',
        icon: '/static/tabbar/2.png',
        selectIcon: '/static/tabbar/2-1.png',
        text: '扫码',
        centerItem: true
      },
      {
        id: 2,
        path: '/pages/user/index',
        icon: '/static/iconfont/default/me.svg',
        selectIcon: '/static/iconfont/me.svg',
        text: '我的',
        centerItem: false
      }
    ]
  })

  onLoad(() => {
    state.currentItem = props.index;

  })

  onShow(() => {
    state.currentItem = props.index;
    const device = uni.getSystemInfoSync();
    state.isIOS = device.osName === "ios";
  })

  onMounted(()=>{
    state.currentItem = props.index;
  })


  const handleTabbarClick = (item: string) => {
    if(item.path.includes("scan")){
      uni.navigateTo({url:item.path})
      return;
    }

    uni.switchTab({
      url: item?.path,
      success: (e: any) => {
        console.log("tabbar switch>>>>", item,e)
      },
      fail: (e: any) => {
        console.error("swtich error >>>>>", JSON.stringify(e))
      }
    })
  }

</script>
<style lang="scss" scoped>
view {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 140rpx;
  //box-shadow: 0 0 3px #999;
  display: flex;
  align-items: center;
  padding: 25rpx 0;
  color: #999999;
}
.tabbar-container .tabbar-item {
  width: 33.3%;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.tabbar-container .item-active {
  color: $uni-color-primary;
}
.tabbar-container .center-item {
  display: block;
  position: relative;
}
.tabbar-container .tabbar-item .item-top {
  width: 70rpx;
  height: 70rpx;
  padding: 10rpx;
}
.tabbar-container .center-item .item-top {
  //flex-shrink: 0;
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  top: -60rpx;
  left: calc(50% - 65rpx);
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.tabbar-container .center-item .item-top image{
  //width: 110rpx !important;
  //height: 110rpx !important;
}
.tabbar-container .tabbar-item .item-top image {
  width: 100%;
  height: 100%;
}
.tabbar-container .tabbar-item .item-bottom {
  font-size: 22rpx;
  width: 100%;
}
.tabbar-container .center-item .item-bottom {
  position: absolute;
  bottom: 0;
}

.ios{
  bottom: 30rpx !important;
}
</style>