Portal/components/tab-bar/tab-bar.vue

<template>
  <view
    class="tab-bar"
    v-if="
      ['Recharge', 'Withdraw', 'Index', 'User', 'Transfer'].includes(routeName)
    "
  >
    <view class="tab-bar__shell">
      <view
        class="item"
        :class="{ active: routeName == item.name }"
        v-for="(item, index) in list"
        :key="index"
        @click="goTab(item)"
      >
        <view class="item-inner">
          <view class="item-indicator"></view>
          <view class="icon-box">
            <image
              class="icon"
              :src="routeName == item.name ? item.selectedIconPath : item.iconPath"
              alt=""
            ></image>
          </view>
          <view class="text">{{ item.text }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  tabBar: true,
  data() {
    return {
      routeName: "",
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.app.userInfo,
      list: (state) => {
        const userInfo = state.app.userInfo;
        const $lang = state.app.lang[state.app.language];
        let channel = [];
        if (userInfo.pay_channel) {
		  if (userInfo.pay_channel == 'OPR') {
			  channel = [
			    {
			      text: $lang.recharge,
			      name: "Recharge",
			      pagePath: "pages/rechargeopr",
			      iconPath: "/static/tabBar/recharge.png",
			      selectedIconPath: "/static/tabBar/recharge_active.png",
			    },
			  ];
		  } else {
			  channel = [
			    {
			      text: $lang.recharge,
			      name: "Recharge",
			      pagePath: "pages/recharge",
			      iconPath: "/static/tabBar/recharge.png",
			      selectedIconPath: "/static/tabBar/recharge_active.png",
			    },
			    {
			      text: $lang.withdraw,
			      name: "Withdraw",
			      pagePath: "pages/withdraw",
			      iconPath: "/static/tabBar/withdrawal.png",
			      selectedIconPath: "/static/tabBar/withdrawal_active.png",
			    },
			  ];
		  }
          
        }

        let list = [
          {
            text: $lang.home,
            name: "Index",
            pagePath: "pages/index",
            iconPath: "/static/tabBar/index-ba.png",
            selectedIconPath: "/static/tabBar/index-ba-active.png",
          },
          ...channel,
          // {
          //   text: $lang.transfer,
          //   name: "Transfer",
          //   pagePath: "pages/transfer",
          //   iconPath: "/static/tabBar/transfer.png",
          //   selectedIconPath: "/static/tabBar/transfer_active.png",
          // },
          {
            text: $lang.user,
            name: "User",
            pagePath: "pages/user/index",
            iconPath: "/static/tabBar/user.png",
            selectedIconPath: "/static/tabBar/user_active.png",
          },
        ];
        return list;
      },
    }),
  },
  methods: {
    goTab(item) {
      uni.switchTab({
        url: item.pagePath,
      });
    },
  },
  watch: {
    $route: {
      handler(route) {
        this.routeName = route.name;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  padding: 0 8px 4px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.12) 26%,
    rgba(0, 0, 0, 0.32) 100%
  );

  .tab-bar__shell {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    min-height: 56px;
    padding: 4px 5px calc(4px + env(safe-area-inset-bottom));
    background: linear-gradient(
      180deg,
      rgba(9, 8, 7, 0.98) 0%,
      rgba(2, 2, 2, 0.99) 100%
    );
    border: 1px solid rgba(226, 193, 117, 0.22);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 243, 212, 0.04);
  }

  .item {
    flex: 1;
    min-width: 0;
    color: rgba(255, 255, 255, 0.84);

    .item-inner {
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      min-height: 46px;
      margin: 0 1px;
      padding: 5px 5px 2px;
      border-radius: 14px;
      transition: all 0.2s ease;
    }

    .item-indicator {
      position: absolute;
      top: -1px;
      left: 50%;
      width: 20px;
      height: 2px;
      border-radius: 999px;
      background: transparent;
      transform: translateX(-50%);
    }

    .icon-box {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      transition: all 0.2s ease;
    }

    .icon {
      width: 22px;
      height: 22px;
    }

    .text {
      margin-top: 2px;
      font-size: 11px;
      line-height: 1.2;
      letter-spacing: 0.2px;
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    &.active {
      color: #e8c26f;

      .item-inner {
        background: linear-gradient(
          180deg,
          rgba(63, 46, 20, 0.24) 0%,
          rgba(30, 22, 13, 0.08) 100%
        );
        box-shadow: inset 0 1px 0 rgba(255, 236, 192, 0.08);
      }

      .item-indicator {
        background: linear-gradient(90deg, #f4ddb0 0%, #d9ae55 100%);
      }

      .icon-box {
        background: rgba(225, 191, 116, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 244, 219, 0.06);
      }

      .text {
        font-weight: 600;
        text-shadow: 0 0 10px rgba(217, 174, 85, 0.1);
      }
    }
  }
}
</style>