aiot-app/pages/warehouse/components/tabs.vue

<template>
  <view class="tab-title">
    <view
      v-for="(item, index) in tabList"
      :key="index"
      class="tab-item"
      v-text="item.label"
      :class="index === pickTabIndex ? 'active' : ''"
      @click="changeChartsTab(index)"
    ></view>
    <view class="search-icon" @click="$emit('handleSearch')">
      筛选
      <image src="~@/static/filter.svg" mode=""></image>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      pickTabIndex: 0,
      tabList: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 2,
          label: '已完成'
        },
        {
          value: 1,
          label: '待审核'
        },
        {
          value: 0,
          label: '已驳回'
        }
      ]
    }
  },
  methods: {
    //切换tab
    changeChartsTab (index) {
      this.pickTabIndex = index
      this.$emit('change', this.tabList[index])
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: $tab-height;
  line-height: $tab-height;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  box-sizing: border-box;
  .search-icon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 28rpx;
    white-space: nowrap;
    margin-left: 10rpx;
    image {
      width: 30rpx;
      height: 30rpx;
    }
  }

  .tab-item {
    width: 25%;
    text-align: center;
    font-size: 32rpx;
    color: $uni-text-color-grey;
  }

  .tab-item.active {
    color: $j-primary-border-green;
    border-bottom: 1px solid $j-primary-border-green;
    font-weight: bold;
  }

  .tab-item.filter {
    flex: 1;
    padding: 0px 30rpx;

    .uni-icons {
      display: flex;
      padding-top: 5px;
    }
  }
}
</style>