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

<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view>
    <!-- v-if="user.skin == 0" -->
    <u-tabbar v-if="systemSkin === 0" :value="current ? current : 0"  @change="tabbarChange" :fixed="true" :placeholder="false"
      :border="false" :safeAreaInsetBottom="true" inactiveColor="#666666" activeColor="#333333">
      <u-tabbar-item :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 :text="'站内信'">
        <image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/two1.png"></image>
        <image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/two2.png"></image>
      </u-tabbar-item>
      <u-tabbar-item :text="'会员专区'">
        <image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/five1.jpg"></image>
        <image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/five2.jpg"></image>
      </u-tabbar-item>
      <u-tabbar-item :text="'购物车'" :badge="shopCarLength">
        <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 :text="'我的'">
        <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>
    <u-tabbar :value="current ? current : 0" class="greenEd" v-if="systemSkin === 2" @change="tabbarChange" :fixed="true"
      :placeholder="false" :border="false" :safeAreaInsetBottom="true" inactiveColor="#666666" activeColor="#333333">
      <u-tabbar-item :text="'首页'">
        <image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/one11.jpg"></image>
        <image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/one11.jpg"></image>
      </u-tabbar-item>
      <u-tabbar-item :text="'站内信'">
        <image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/two11.jpg"></image>
        <image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/two11.jpg"></image>
      </u-tabbar-item>
      <u-tabbar-item :text="'会员专区'">
        <image class="u-page__item__slot-icon2" slot="active-icon" src="@/static/images/five11.jpg"></image>
        <image class="u-page__item__slot-icon2" slot="inactive-icon" src="@/static/images/five11.jpg"></image>
      </u-tabbar-item>
      <u-tabbar-item :text="'购物车'" :badge="shopCarLength">
        <image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/three11.jpg"></image>
        <image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/three11.jpg"></image>
      </u-tabbar-item>

      <u-tabbar-item :text="'我的'">
        <image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/fore11.jpg"></image>
        <image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/fore11.jpg"></image>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    current: Number,
  },
  data() {
    return {
      list: [
        {
          text: '首页',
          path: 'pages/index/index',
        },
        {
          text: '站内信',
          path: 'pages/email/index',
        },
        {
          text: '会员专区',
          path: 'pages/specialArea/index',
        },
        {
          text: '购物车',
          path: 'pages/shoppingCar/index',
        },

        {
          text: '我的',
          path: 'pages/mine/index',
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['shopCarLength', 'user']),
    systemSkin() {
      return this.user.skin || 0
    }
  },
  methods: {
    tabbarChange(e) {
      uni.switchTab({
        url: '/' + this.list[e].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;
  }
}
</style>