web-base-h5/components/cl-tabbar.vue

<template>
  <view>
    <u-tabbar
      :value="current ? current : 0"
      :fixed="true"
      :placeholder="false"
      :border="false"
      :safeAreaInsetBottom="true"
      inactiveColor="#666666"
      activeColor="#333333"
    >
      <u-tabbar-item name="index" @click="handleClick" :text="'首页'">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/images/one1.png"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/images/one2.png"
        ></image>
      </u-tabbar-item>

      <u-tabbar-item
        @click="handleClick"
        v-if="!newShareMember"
        :text="'个人推广'"
        name="share"
      >
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/images/share-act.svg"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/images/share.svg"
        ></image>
      </u-tabbar-item>

      <u-tabbar-item
        @click="handleClick"
        :text="'购物车'"
        :badge="shopCarLength"
        name="shoppingCar"
      >
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/images/three1.png"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/images/three2.png"
        ></image>
      </u-tabbar-item>

      <u-tabbar-item @click="handleClick" :text="'我的'" name="mine">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/images/fore1.png"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/images/fore2.png"
        ></image>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    current: String,
  },
  data() {
    return {
      newShareMember: false,
      currentTab: 0,
      list: [
        {
          text: '首页',
          path: 'pages/index/index',
          name: 'index',
        },
        {
          text: '个人推广',
          path: 'pages/mine/share/index',
          name: 'share',
        },

        {
          text: '购物车',
          path: 'pages/shoppingCar/index',
          name: 'shoppingCar',
        },

        {
          text: '我的',
          path: 'pages/mine/index',
          name: 'mine',
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['shopCarLength', 'user']),
    systemSkin() {
      return this.user?.skin || 0
    },
  },
  mounted() {
    this.newShareMember = uni.getStorageSync('User')?.loginType !== 0
    if (this.newShareMember) {
      this.list.splice(1, 1)
    }
  },
  methods: {
    tabbarChange(e) {
      uni.switchTab({
        url: '/' + this.list[e].path,
      })
    },
    handleClick(tab) {
      const index = this.list.findIndex(item => item.name === tab)
      if (index === -1) {
        return
      }
      uni.switchTab({
        url: '/' + this.list[index].path,
      })
    },
  },
}
</script>

<style lang="scss">
.u-page__item__slot-icon {
  width: 20px;
  height: 20px;
}

.u-page__item__slot-icon1 {
  width: 35px;
  height: 35px;
  // margin-bottom: 20px
}

.u-page__item__slot-icon2 {
  width: 35px;
  height: 35px;
  // margin-bottom: 20px
}

.greenEd {
  ::v-deep .u-tabbar__content {
    background: linear-gradient(to bottom, #fff, #b6fdda);
  }

  ::v-deep .u-tabbar__content__item-wrapper {
    height: 80px;
  }

  ::v-deep .u-tabbar-item {
    // margin-bottom: 30px;
  }
}

/* iPhone安全区域适配 */

/* 绿色主题的安全区域适配 */
.greenEd {
  ::v-deep .u-tabbar__content {
    background: linear-gradient(to bottom, #fff, #b6fdda);

    /* 绿色主题的安全区域背景 */
    &::after {
      background: #b6fdda;
    }
  }
}

/* 针对不同屏幕尺寸的优化 */
@media screen and (max-height: 667px) {
  /* iPhone SE等小屏设备 */
  ::v-deep .u-tabbar__content__item-wrapper {
    height: 70px;
  }
}

@media screen and (min-height: 812px) {
  /* iPhone X及以上机型 */
  ::v-deep .u-tabbar__content__item-wrapper {
    height: 80px;
  }
}
</style>