FarmingWx_V2_message/components/gjs-selectCity.vue

<template>
  <view class="">
    <view class="flex">
      <scroll-view scroll-y="true" class="box1" :style="{ height: scrollHeight + 'rpx' }">
        <view
          class="itemClass text-overflow"
          v-for="(item, index) in provinceList"
          :key="item.cityId"
          :class="{ selectedProvice: provinceIndex == index }"
          :style="{ color: provinceIndex == index ? selectedColor : '' }"
          @click="getClassificationList2(item.cityId, index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>
      <scroll-view scroll-y="true" class="box2" :style="{ height: scrollHeight + 'rpx' }">
        <view
          class="itemClass text-overflow"
          v-for="(item, index) in cityList"
          :key="item.cityId"
          :style="{ color: cityIndex == index ? selectedColor : '' }"
          @click="getClassificationList3(item.cityId, index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>
      <scroll-view
        scroll-y="true"
        class="box3"
        v-if="selectType == 'country' && !multiple"
        :style="{ height: scrollHeight + 'rpx' }"
        :class="{ bl: countyList.length > 0 }"
      >
        <view
          class="itemClass text-overflow"
          v-for="(item, index) in countyList"
          :key="item.cityId"
          :style="{ color: countyIndex == index ? selectedColor : '' }"
          @click="selectCounty({ name: item.name, cityId: item.cityId }, index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>
      <scroll-view
        scroll-y="true"
        class="box3"
        v-else
        :style="{ height: scrollHeight + 'rpx' }"
        :class="{ bl: countyList.length > 0 }"
      >
        <!-- <view
					class="itemClass text-overflow"
					v-for="(item, index) in countyList"
					:key="item.cityId"
					:style="{ color: countyIndex == index ? selectedColor : '' }"
					@click="selectCounty({ name: item.name, cityId: item.cityId }, index)"
				>
					{{ item.name }}
				</view> -->
        <u-checkbox-group
          v-model="selectValue"
          iconPlacement="right"
          placement="column"
          @change="checkboxChange"
        >
          <view class="check-box-item" v-for="(item, index) in countyList" :key="index">
            <u-checkbox
              activeColor="#00d36d"
              labelSize="28rpx"
              labelColor="#333333"
              shape="circle"
              :label="item.name"
              :name="item.cityId"
            ></u-checkbox>
          </view>
        </u-checkbox-group>
      </scroll-view>
    </view>
    <view class="pop-bottom" v-if="multiple">
      <!-- <u-button shape="circle" text="取消" :customStyle="{ width: '300rpx' }"></u-button> -->
      <u-button
        color="linear-gradient( 275deg, #01CF6C 0%, #07E278 100%);"
        shape="circle"
        text="确定"
        @click="submit"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  name: "gjs-selectCity",
  props: {
    selectType: {
      type: String,
      default: "country", //province选择省份city选择城市country选择区县
      validator: function (value) {
        // 这个数组包含所有允许的值
        const validValues = ["province", "city", "country"];
        // 如果value存在于validValues数组中，则返回true
        return validValues.indexOf(value) !== -1;
      },
    },
    scrollHeight: {
      type: Number,
      default: 572,
    },
    selectedColor: {
      type: String,
      default: "#00D36D",
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      provinceIndex: null,
      cityIndex: 0,
      countyIndex: 0,

      provinceList: [],
      cityList: [],
      countyList: [],
      selectCode: [],
      provenceName: "",
      cityName: "",
      // 新增多选
      selectValue: [],
    };
  },
  mounted() {
    this.getClassificationList1();
  },
  methods: {
    // 获取一级
    getClassificationList1() {
      let param = {
        levelType: "",
        parentCityId: "",
      };
      this.api.getCity(param).then((res) => {
        if (res.code == 200) {
          this.provinceList = res.data;
        }
      });
    },
    // 获取二级
    getClassificationList2(id, index) {
      this.provinceIndex = index;
      this.cityIndex = 0;
      this.countyIndex = 0;
      // 选择省份后  清除区信息
      this.countyList = [];
      let param = {
        levelType: 2,
        parentCityId: id,
      };
      this.selectCode[0] = id;
      this.provenceName = this.provinceList[index].name;
      if (this.selectType == "province") {
        this.$emit("select", {
          name: this.provinceList[index].name,
          cityId: id,
        });
        return;
      }
      this.api.getCity(param).then((res) => {
        if (res.code == 200) {
          this.cityList = res.data;
        }
      });
    },
    // 获取三级
    getClassificationList3(id, index) {
      // 选择城市 情况 多选
      this.selectValue = [];
      this.cityIndex = index;
      this.countyIndex = 0;
      let param = {
        levelType: 3,
        parentCityId: id,
      };
      this.selectCode[1] = id;
      this.cityName = this.cityList[index].name;
      if (this.selectType == "city") {
        this.$emit("select", {
          name: this.cityList[index].name,
          cityId: id,
          selectCode: this.selectCode,
          wholeName: this.provenceName + this.cityName,
        });
        return;
      }
      this.api.getCity(param).then((res) => {
        if (res.code == 200) {
          this.countyList = res.data;
        }
      });
    },
    selectCounty(item, index) {
      this.countyIndex = index;
      this.$emit("select", {
        name: item.name,
        cityId: item.cityId,
      });
    },
    // 新增多选提交按钮
    submit() {
      // console.log(this.selectValue);
      let _arr = this.findObjectsByIds(this.countyList, this.selectValue);
      this.$emit("select", _arr);
      // console.log(_arr)
    },
    // 多选事件
    checkboxChange(e) {
      // console.log(e)
    },
    // 筛选事件
    findObjectsByIds(objArray, numArray) {
      return numArray
        .map((id) => {
          const obj = objArray.filter((item) => item.cityId === id);
          return obj.length > 0 ? obj[0] : null;
        })
        .filter((item) => item !== null);
    },
  },
};
</script>

<style>
.flex {
  display: flex;
}

.box1 {
  /* width: 220rpx; */
  display: flex;
  flex: 1;
  background-color: #f5f7f7;
}

.box2 {
  display: flex;
  flex: 1;
  /* width: 220rpx; */
}

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

.box3 {
  display: flex;
  flex: 1;
  /* width: calc(100% - 440rpx); */
}

.itemClass {
  height: 90rpx;
  line-height: 90rpx;
  padding-left: 20rpx;
  padding-right: 15rpx;
  font-size: 28rpx;
  color: #333333;
}
.text-overflow {
  display: -webkit-box; /* 使用-webkit-box布局模型 */
  -webkit-box-orient: vertical; /* 指定盒子内容的排列方向为垂直 */
  -webkit-line-clamp: 1; /* 控制显示的行数，这里设置为1 */
  overflow: hidden; /* 当内容超出容器时隐藏多余的内容 */
  text-overflow: ellipsis; /* 使用省略号显示多余的文本内容 */
}
.selectedProvice {
  background-color: #ffffff;
}

/deep/::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.pop-bottom {
  margin: 24rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.check-box-item {
  box-sizing: border-box;
  /* padding: 10rpx 15rpx; */
  height: 90rpx;
  line-height: 90rpx;
  padding-left: 20rpx;
  padding-right: 36rpx;
  /* display: flex;
	flex-direction:row;
	align-items: center;
	justify-content: space-between; */
}
</style>