FarmingWx_V2_message/components/classification.vue

<template>
  <!-- 分类 -->
  <view>
    <view class="flex" style="height: 600rpx">
      <scroll-view scroll-y="true" class="box1" style="height: 600rpx">
        <view
          class="itemClass text-overflow"
          v-for="(item, index) in provinceList"
          :key="item.id"
          :class="{ selectedProvice: provinceIndex == index }"
          :style="{ color: provinceIndex == index ? '#00D36D' : '' }"
          @click="getClassificationList2(item.id, index)"
        >
          {{ item.className }}
        </view>
      </scroll-view>
      <scroll-view scroll-y="true" class="box2" style="height: 600rpx">
        <view
          class="itemClass text-overflow"
          v-for="(item, index) in cityList"
          :key="item.id"
          :style="{ color: cityIndex == index ? '#00D36D' : '' }"
          @click="getClassificationList3(item.id, index)"
        >
          {{ item.className }}
        </view>
      </scroll-view>
      <scroll-view
        scroll-y="true"
        class="box3"
        style="height: 600rpx"
        :class="{ bl: countyList.length > 0 }"
      >
        <view
          class="itemClass text-overflow"
          v-for="(item, index) in countyList"
          :key="item.id"
          :style="{ color: countyIndex == index ? '#00D36D' : '' }"
          @click="selectCounty({ className: item.className, id: item.id }, index)"
        >
          {{ item.className }}
        </view>
      </scroll-view>
    </view>
    <view class="class-btn d-flex-center" v-if="showBottomConfim">
      <view class="d-flex-center" @click="reset">重置</view>
      <view class="d-flex-center" @click="submitForm">确定</view>
    </view>
  </view>
</template>

<script>
import { getClassificationList, getClassCateSelf } from "@/api/home/index.js";
export default {
  props: {
    showBottomConfim: {
      type: Boolean,
      default: false,
    },
    isPublish: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      provinceIndex: null,
      cityIndex: 0,
      countyIndex: 0,
      provinceList: [],
      cityList: [],
      countyList: [],
      className: "分类",
      id: "",
      selectCode: [], //三级id
    };
  },
  mounted() {
    this.getClassificationList1();
  },
  methods: {
    // 获取一级分类
    getClassificationList1() {
      let param = {
        className: "",
        parentId: "",
      };
      if (this.isPublish) {
        this.api.getClassCateSelf().then((res) => {
          if (res.code == 200) {
            this.provinceList = res.data;
          }
        });
      } else {
        this.api.getClassificationList(param).then((res) => {
          if (res.code == 200) {
            this.provinceList = res.data;
          }
        });
      }
    },
    // 获取二级分类
    getClassificationList2(id, index) {
      this.provinceIndex = index;
      this.cityIndex = 0;
      this.countyIndex = 0;
      let param = {
        className: "",
        parentId: id,
      };
      this.selectCode[0] = id;
      this.api.getClassificationList(param).then((res) => {
        if (res.code == 200) {
          this.cityList = res.data;
          this.countyList = [];
        }
      });
    },
    // 获取三级分类
    getClassificationList3(id, index) {
      this.cityIndex = index;
      this.countyIndex = 0;
      let param = {
        className: "",
        parentId: id,
      };
      this.selectCode[1] = id;
      this.api.getClassificationList(param).then((res) => {
        if (res.code == 200) {
          this.countyList = res.data;
        }
      });
    },
    selectCounty(item, index) {
      this.countyIndex = index;
      this.className = item.className;
      this.id = item.id;
      this.selectCode[2] = item.id;
      this.$emit("select", {
        className: item.className,
        id: item.id,
        selectCode: this.selectCode,
      });
    },
    reset() {
      this.countyIndex = 0;
      this.$emit("search", {
        className: "分类",
        id: "",
      });
    },
    submitForm() {
      this.$emit("search", {
        className: this.className,
        id: this.id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.class-btn {
  height: 120rpx;
  background: #ffffff;
  font-size: 32rpx;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  & > view:nth-of-type(1) {
    width: 334rpx;
    height: 90rpx;
    background: #e6faf1;
    border-radius: 44rpx;
    border: 2rpx solid #00d36d;
    color: #00d36d;
  }

  & > view:nth-of-type(2) {
    width: 334rpx;
    height: 90rpx;
    color: #fff;
    background: linear-gradient(275deg, #01cf6c 0%, #07e278 100%);
    border-radius: 44rpx;
  }
}

.flex {
  display: flex;
}

.box1 {
  width: 220rpx;
  background-color: #f5f7f7;
}

.box2 {
  width: 220rpx;
}

.bl {
  border-left: 1rpx solid #eeeeee;
}

.box3 {
  width: calc(100% - 440rpx);
}

.itemClass {
  height: 90rpx;
  line-height: 90rpx;
  padding-left: 20rpx;
  padding-right: 15rpx;
  font-size: 28rpx;
  color: #333333;
}

.selectedProvice {
  background-color: #ffffff;
}

/deep/::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
</style>