huiguanjia-app/src/components/MTabBar/index.vue

<!--
 * @Author: wjc
 * @Date: 2024-07-08 16:31:21
 * @LastEditors: wjc
 * @LastEditTime: 2024-07-12 17:03:13
 * @Description: 
-->
<template>
  <up-tabbar
    :value="appStore.selectedTabbar"
    class="m-tabbar"
    :fixed="true"
    :z-index="99"
    :placeholder="true"
    :safe-area-inset-bottom="true"
    @change="handleChange"
  >
    <up-tabbar-item v-for="(item, index) in tabbarList" :key="index">
      <template #active-icon>
        <view class="flex items-center gap-4px bg-bg-page rounded-18px px-20px py-4px duration-300">
          <image class="tabbar-icon" :src="`/${item.selectedIconPath}`"></image>
          <view class="text-14px">{{ item.text }}</view>
        </view>
      </template>
      <template #inactive-icon>
        <view>
          <image class="tabbar-icon" :src="`/${item.iconPath}`"></image>
        </view>
      </template>
    </up-tabbar-item>
  </up-tabbar>
</template>

<script setup lang="ts">
  import { tabBar } from '@/pages.json'
  import { useAppStore } from '@/stores/modules/appStore'

  defineOptions({ name: 'MTabBar' })

  const appStore = useAppStore()
  const tabbarList = ref(tabBar.list)

  const handleChange = (val: number) => {
    appStore.setTabbar(val)
    uni.switchTab({
      url: `/${tabbarList.value[val].pagePath}`,
    })
  }
</script>

<style scoped lang="scss">
  .m-tabbar {
    @apply h-55px;
    :deep(.u-tabbar__content) {
      @apply bg-bg-card h-55px duration-300;
      border-color: var(--border-color-1) !important;
      .u-tabbar__content__item-wrapper {
        @apply h-55px;
        .u-tabbar-item__icon {
          @apply w-full;
        }
      }
    }
    .tabbar-icon {
      @apply wh-32px;
    }
  }
</style>