discounts-minapp/components/zs-choose-tab-union/index.vue

<template>
  <view class="">
    <view class="choose-tab" :style="{ position }">
      <view class="tab-list">
        <view
          class="tab"
          v-for="(item, index) in tabList"
          :class="[chooseList[index] ? 'active-tab' : '']"
          :key="index"
          @click="handleTab(item, index)"
        >
          <view>
            {{ chooseList[index].cateName || item.cateName }}
          </view>
          <view>
            <!-- {{ active }} -->
            <u-icon
              name="arrow-down"
              size="12px"
              v-if="active !== index || !show"
            ></u-icon>
            <u-icon
              v-if="active === index && show"
              name="arrow-up"
              size="12px"
            ></u-icon>
          </view>
        </view>
      </view>
      <view class="box" v-show="show">
        <view v-show="show" class="first">
          <view
            :class="[levelActive[0] == item.id ? 'active' : '', 'item']"
            v-for="(item, index) in tabList[active].child"
            :key="index"
            @click="choose(item, 1)"
          >
            {{ item.cateName }}
          </view>
        </view>
        <view v-show="show" v-if="level > 1" class="second">
          <view
            :class="[levelActive[1] == item.id ? 'activeL2' : '', 'item']"
            v-for="(item, index) in clickObj.child"
            :key="index"
            @click="choose(item, 2)"
          >
            {{ item.cateName }}
          </view>
        </view>
        <view v-show="show" v-if="level > 2" class="third"> </view>
      </view>
    </view>
    <view
      class="choose-modal"
      :style="{ background: showModal ? 'rgba(0, 0, 0, .4)' : 'none' }"
      v-show="show"
      @click="show = false"
    >
    </view>
  </view>
</template>

<script>
export default {
  props: {
    position: {
      type: String,
      default: "fixed",
    },
    showModal: {
      type: Boolean,
      default: true,
    },
    tabList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    level: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      show: false,
      chooseList: ["", "", "", ""],
      list: [],
      clickObj: {},
      levelActive: [null, null, null],
      active: null,
      secondList: [],
      thirdList: [],
    };
  },
  methods: {
    handleTab(item, index) {
      this.active = index;
      this.clickObj = {};
      // 如果存在已经选择过的数据
      if (this.chooseList[index]) {
        for (const e of this.tabList[index].child) {
          // 根据ID定位到当前选择的对象
          if (e.child && e.child.length) {
            for (const i of e.child) {
              if (i.id == this.chooseList[index].id) {
                this.clickObj = e;
                this.levelActive[1] = i.id;
              }
            }
          } else {
            if (e.id == this.chooseList[index].id) {
              this.levelActive[0] = e.id;
            }
          }
        }
      }

      this.$nextTick(() => {
        this.show = !this.show;
      });
    },
    choose(item, level) {
      // console.log("item", item);

      this.levelActive[level - 1] = item.id;
      this.clickObj = item;

      // 没有子级直接提交当前
      if (level == this.level || !item.child || !item.child.length) {
        this.show = false;
        // 重复选择则取消
        // console.log(
        //   "this.chooseList",
        //   this.chooseList,
        //   "this.active",
        //   this.active
        // );
        let id = this.chooseList[this.active]?.id || "";
        if (item.id == id) {
          this.chooseList[this.active] = "";
          this.levelActive = [null, null, null];
        } else {
          this.chooseList[this.active] = item;
        }
        this.$emit("choose", this.chooseList);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.choose-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
}

.choose-tab {
  // position: fixed;
  top: 0;
  left: 0;
  background-color: #fafafa;
  overflow: hidden;
  border-radius: 0rpx 0rpx 16rpx 16rpx;
  width: 100%;
  z-index: 100;
  .tab-list {
    display: flex;
    align-items: center;
    padding: 20rpx;
    width: 100vw;
    overflow-x: scroll;
    background: #fff;
    .tab {
      display: flex;
      justify-content: center;
      word-break: keep-all;
      align-items: center;
      background: #f0f0f0;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      height: 40rpx;
      line-height: 40rpx;
      color: #222222;
      font-size: 24rpx;
      padding: 0 10rpx;
      margin-right: 16rpx;
    }
  }

  .box {
    background: #fff;
    display: flex;
    justify-content: start;
    .item {
      max-height: 600rpx;
      font-size: 30rpx;
      overflow: auto;
      color: #222222;
      padding: 14rpx 24rpx;
      width: 100%/3;
    }
    .first {
      flex: 1;
      background-color: #ffffff;
    }
    .second {
      flex: 1;
      background-color: #f7f7f7;
    }
    .third {
      flex: 1;
      background-color: #f2f2f2;
    }
  }
  .active-tab {
    color: $uni-color-primary !important;
    background-color: rgba(246,229,229,.9) !important;
  }
  .active {
    color: $uni-color-primary !important;
    background-color: #f7f7f7;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 18rpx;
      left: 10rpx;
      width: 8rpx;
      height: 35rpx;
      transform: translateX(-50%);
      border-radius: 2rpx;
      background: $uni-color-primary;
    }
  }
  .activeL2 {
    color: $uni-color-primary !important;
    background-color: #f2f2f2;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 18rpx;
      left: 10rpx;
      width: 8rpx;
      height: 35rpx;
      transform: translateX(-50%);
      border-radius: 2rpx;
      background: $uni-color-primary;
    }
  }
  .activeL3 {
    color: $uni-color-primary !important;
  }
}
</style>