mrr.sj.front/pages/shop/workSpace/components/class_select.vue

<template>
  <view class="class_select">
    <view class="classList">
      <view
        class="classItem"
        @click="changeClass(item.id)"
        v-for="item in classList"
      >
        <image class="classIcon" :src="item.photo" />
        <view class="text" :class="{ activeText: item.id == classId }">{{
          item.title
        }}</view>
      </view>
    </view>
    <view class="secondClass">
      <view class="secondClassTitle">筛选项</view>
      <view class="secondClassList">
        <view
          class="secondClassItem"
          :class="{ secondClassItemActive: secondClassId.includes(item.id) }"
          v-for="item in secondClassList"
          @click="changeSecondClass(item.id)"
          >{{ item.title }}</view
        >
      </view>
    </view>
    <view class="tips">
      <text class="red">注意：</text>
      <text>
        商家可按需发布工位出租的信息。若不同服务（如快洗与烫发）工位价格存在差异，需分别发布对应工位出租信息；若价格相同，则仅需发布一次工位出租信息，并同时勾选“快洗”和“烫发”两项服务。</text
      >
    </view>
    <view class="fixBottomBtn">
      <view class="btn" @click="handleClose">确定</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "class_select",

  props: {
    classId: {
      type: Number,
    },
    secondClassId: {
      type: Array,
    },
  },
  data() {
    return {
      secondClassList: [],
      classList: [],
    };
  },
  created() {
    this.getClass();
  },
  computed: {},
  watch: {
    secondClassId() {
      if (
        !this.secondClassId ||
        (this.secondClassId && this.secondClassId.length == 0)
      )
        return;
      this.getClass();
      let typeText = "";
      if (this.classId) {
        this.classList.forEach((item) => {
          if (item.id == this.classId) {
            typeText += item.title;
          }
        });
      }
      if (this.secondClassId && this.secondClassId.length > 0) {
        this.secondClassList.forEach((item) => {
          if (this.secondClassId.includes(item.id)) {
            typeText = typeText + " " + item.title;
          }
        });
      }
      this.$emit("changeTypeText", typeText);
    },
  },
  methods: {
    handleClose() {
      let typeText = "";
      if (this.classId) {
        this.classList.forEach((item) => {
          if (item.id == this.classId) {
            typeText += item.title;
          }
        });
      }
      if (this.secondClassId) {
        this.secondClassList.forEach((item) => {
          if (this.secondClassId.includes(item.id)) {
            typeText = typeText + "、" + item.title;
          }
        });
      }
      this.$emit("closeClassSelect", typeText);
    },
    changeClass(id) {
      if (id == this.classId) return;
      this.$emit("changeClass", id);
      this.$emit("changeSecondClass", []);
      this.getSecondClass(id);
    },
    changeSecondClass(id) {
      const ids = this.secondClassId;
      const isCurArray = hasMatchingId(ids, this.secondClassList);
      if (!isCurArray) {
        this.$emit("changeSecondClass", [id]);
      } else {
        if (ids.includes(id)) {
          this.$emit(
            "changeSecondClass",
            ids.filter((item) => item != id)
          );
        } else {
          this.$emit("changeSecondClass", [...ids, id]);
        }
      }
      function hasMatchingId(numberArray, objectArray) {
        // 检查输入是否为有效数组
        if (!Array.isArray(numberArray) || !Array.isArray(objectArray)) {
          return false;
        }
        // 遍历数字数组，检查是否有任何数字匹配对象数组中的id
        return numberArray.some((number) => {
          // 检查对象数组中是否有对象的id与当前数字匹配
          return objectArray.some((obj) => {
            // 确保对象有id属性，并且转换为数字进行比较（处理可能的字符串id）
            return obj && obj.id !== undefined && Number(obj.id) === number;
          });
        });
      }
    },
    getSecondClass(id) {
      console.log("获取二级分类", item);
      const item = this.classList.find((it) => it.id == id);
      this.secondClassList = item.data;
    },
    getClass() {
      this.classList = this.$store.state.workSpaceSJClassList;
      if (!this.classId) {
       
        this.changeClass(this.classList[0].id);
      } else {
        this.getSecondClass(this.classId);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.class_select {
  width: 100%;
  .classList {
    display: flex;
    align-items: center;
    padding: 28rpx 30rpx 43rpx;
    gap: 14rpx;
    overflow-x: auto;
    .classItem {
      background: #ffffff;
      border-radius: 20rpx;
      width: 140rpx;
      height: 140rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20rpx;
      flex-shrink: 0;
      .classIcon {
        width: 64rpx;
        height: 64rpx;
      }
      .text {
        font-size: 24rpx;
        color: #333333;
      }
      .activeText {
        color: #E8101E;
      }
    }
  }
  .secondClass {
    background-color: #fff;
    padding: 30rpx 0 40rpx 30rpx;
    .secondClassTitle {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
    }
    .secondClassList {
      display: flex;
      margin-top: 30rpx;
      flex-wrap: wrap;
      gap: 19rpx;
      .secondClassItem {
        width: 214rpx;
        height: 64rpx;
        background: #f5f5f5;
        border-radius: 34rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2rpx solid transparent;
      }
      .secondClassItemActive {
        border: 1rpx solid #E8101E;
        background: rgba(252, 67, 124, 0.1);
        color: #E8101E;
      }
    }
  }
  .tips {
    background-color: #fff;
    padding: 30rpx 48rpx 30rpx;
    margin-top: 30rpx;
    font-size: 26rpx;
    .red {
      color: #E8101E;
    }
  }
  .fixBottomBtn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 166rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 24rpx 0 30rpx;
    .btn {
      width: 100%;
      height: 39rpx;
      border: 2rpx solid #E8101E;
      border-radius: 39rpx;
      font-size: 30rpx;
      color: #E8101E;
    }
  }
}
</style>