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

<template>
  <view class="tabbar">
    <uv-tabbar :value="value" :fixed="true" @change="index=>value = index">
      <uv-tabbar-item text="网点" icon="home" @tap.stop="handleTabbarClick('index')"></uv-tabbar-item>
<!--      <uv-tabbar-item text="优惠" icon="photo" @tap.stop="handleTabbarClick('coupon')"></uv-tabbar-item>-->
      <uv-tabbar-item text="" icon="scan" :iconSize="40" @tap.stop="handleTabbarClick('map')" style="margin-top: -125px">
      </uv-tabbar-item>
<!--      <uv-tabbar-item text="订单" icon="play-right" @tap.stop="handleTabbarClick('order')"></uv-tabbar-item>-->
      <uv-tabbar-item text="我的" icon="account" @tap.stop="handleTabbarClick('user')"></uv-tabbar-item>
    </uv-tabbar>
  </view>

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

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


onLoad(() => {
  console.log("tabbar onLoad", props.index, value.value)
  value.value = props.index;
})

onShow(() => {
  console.log("tabbar onshow", props.index, value.value)
  value.value = props.index;
})

onMounted(()=>{
  console.log("tabbar onMounted", props.index, value.value)
  value.value = props.index;
})

const handleTabbarClick = (tab: string) => {
  uni.switchTab({
    url: `/pages/${tab}/index`,
    success: (e: any) => {
      console.log("tabbar switch>>>>", tab,e)
    },
    fail: (e: any) => {
      console.error("swtich error >>>>>", JSON.stringify(e))
    }
  })
}
</script>

<style lang="scss" scoped>
.tabbar {
  background-image: url("../../static/tabbar/bg.png");
}
</style>