ruoyi-miniapp/uni_modules/s-components/s-tabber/index.vue

<template>
  <view :class="setClass">
    <view class="tabber" v-if="isTab">
      <view
        :class="{ tab: true, isActive: tab.code == selected }"
        v-for="(tab, index) in tabbers"
        :key="index"
        @click="changeTab(tab)"
      >
        <u--image
          :src="selected == tab.code ? tab.selectIcon : tab.icon"
          width="42"
          height="42"
          v-if="tab.type == 'middle'"
        ></u--image>
        <u--image
          :src="selected == tab.code ? tab.selectIcon : tab.icon"
          width="24"
          height="24"
          v-else
        ></u--image>
        <view :class="[tab.code == selected ? 'isActive' : 'name']">
          {{ tab.name }}
        </view>
      </view>
    </view>
    <view :style="{ height: isFit ? '68rpx' : '24rpx' }"></view>
  </view>
</template>

<script>
export default {
  props: {
    selected: Number,
    isTab: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tabbers: [
        {
          name: '首页',
          path: '/pages/index',
          icon: '/static/images/tabbers/home.png',
          selectIcon: '/static/images/tabbers/home-select.png',
          code: 0
        },
        {
          name: '执法',
          path: '/pages/task',
          icon: '/static/images/tabbers/task.png',
          selectIcon: '/static/images/tabbers/task-select.png',
          code: 1
        },
        {
          name: '',
          path: '/pages/chat',
          icon: '/static/images/tabbers/chat.png',
          selectIcon: '/static/images/tabbers/chat-select.png',
          type: 'middle',
          code: 2
        },
        {
          name: '企业',
          path: '/pages/enterprise',
          icon: '/static/images/tabbers/position.png',
          selectIcon: '/static/images/tabbers/position-select.png',
          code: 3
        },
        {
          name: '我的',
          path: '/pages/owner',
          icon: '/static/images/tabbers/user.png',
          selectIcon: '/static/images/tabbers/user-select.png',
          code: 4
        }
      ]
    }
  },
  computed: {
    setClass() {
      return this.$props.isTab ? 'cs-tabber-container' : 'noTab'
    },
    isFit() {
      return uni.getStorageSync('SYSTEM').includes('iOS')
    }
  },
  methods: {
    changeTab(tab) {
      uni.switchTab({
        url: tab.path,
        success: () => {
          this.isActive = tab.code
        }
      })
    }
  }
}
</script>

<style lang="scss">
.cs-tabber-container {
  background-color: #fff;
}
.noTab {
}
.tabber {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  border-top: 2rpx solid #f1f1f4;
  padding: 24rpx 48rpx 0px 48rpx;
  .tab {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    transition: 0.2s all;
    gap: 4rpx;
  }
  .isActive {
    color: #22c55e;
    font-weight: 500;
  }
  .name {
    color: #99a1b7;
    font-weight: 400;
  }
}
</style>