fangliaoxiaochengxv/components/ProvinceCity/index.vue

<template>
  <u-picker
    :show="value"
    ref="uPicker"
    class="common-pop"
    :columns="columnsData"
    keyName="name"
    :title="title"
    :defaultIndex="defaultIndex"
    :closeOnClickOverlay="true"
    @close="cancel"
    @confirm="confirm"
    @change="changeHandler"
    @cancel="cancel"
  ></u-picker>
</template>

<script>
import { getProvinceCity } from "@/common/api/common";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    defaultData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    level: {
      type: [String, Number],
      default: 2,
    },
    allFlag: {
      type: Boolean,
      default: false,
    },
		title: String,
		default: '选择城市'
		
  },
  data() {
    return {
      show: true,
      columnsData: [[],[],[]],
      defaultIndex: [0, 0, 0],
    };
  },
  created() {
    this.getProvinceCity().then((data) => {
      // this.columnsData.push(data);
			this.columnsData.splice(0, 1, data)
      let { province = data[0].code } = this.defaultData || {};
      this.getProvinceCity(province).then((cityData) => {
        if (this.allFlag) {
          // 添加全部选项
          cityData = [{ parentCode: "", code: "all", name: "全部" }].concat(
            cityData
          );
        }
        // this.columnsData.push(cityData);
				// this.columnsData[1] = cityData
				this.columnsData.splice(1, 1, cityData)
        let currentP = data.findIndex((item) => item.code == province);
        let { city = cityData[0].code } = this.defaultData || {};
        let currentCity = cityData.findIndex((item) => item.code == city);
        if (this.level == 3) {
          this.getProvinceCity(city).then((regionData) => {
            // this.columnsData.push(regionData);
						// this.columnsData[2] = regionData2
						this.columnsData.splice(2, 1, regionData)
            let { region = regionData[0].code } = this.defaultData || {};
            let currentRegion = regionData.findIndex(
              (item) => item.code == region
            );
            this.defaultIndex = [
              currentP !== -1 ? currentP : 0,
              currentCity !== -1 ? currentCity : 0,
              currentRegion !== -1 ? currentRegion : 0,
            ];
          });
        } else {
          this.defaultIndex = [
            currentP !== -1 ? currentP : 0,
            currentCity !== -1 ? currentCity : 0,
          ];
        }
      });
    });
  },
  methods: {
    async getProvinceCity(code) {
      let result = await getProvinceCity(code);
      return new Promise((res, rej) => {
        res(result.data);
      });
    },
    async changeHandler(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
				indexs,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker,
      } = e;
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      let code = value[0].code;
      let cityResult = await this.getProvinceCity(code);
      if (this.allFlag) {
        // 添加全部选项
        cityResult = [{ parentCode: "", code: "all", name: "全部" }].concat(
          cityResult
        );
      }
      picker.setColumnValues(1, cityResult);
      if (this.level == 3) {
        let cityCode = columnIndex === 0 ? cityResult[0].code : value[1].code;
        this.getProvinceCity(cityCode).then((city) => {
          picker.setColumnValues(2, city);
        });
      }
    },
    // 回调参数为包含columnIndex、value、values
    confirm(e) {
      let { value } = e;
      let result = {
        province: value[0].code,
        city: value[1].code,
        region: value[2] ? value[2].code : "",
      };
      this.$emit("confirm", {
        value: result,
        name:
          value[0].name + value[1].name + `${value[2] ? value[2].name : ""}`,
      });
      this.$emit("input", false);
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>
<style lang="scss" scoped>
</style>