选择地址移动端弹窗 address-picker

<template>
  <view>
    <view class="flex-row align-center" @click="set_picker()">
      <view class="flex-grow">{{ value }}</view>
      <view class="align-center">
        <u-icon color="#999797" size="14" name="arrow-right"></u-icon>
      </view>
    </view>
    <u-picker
      :closeOnClickOverlay="true"
      :show="picker_show"
      :immediateChange="true"
      :defaultIndex="picker_index"
      ref="uPicker"
      title="所在地区"
      :columns="columns"
      keyName="regionName"
      @confirm="confirm"
      @change="changeHandler"
      @close="picker_show = false"
      @cancel="picker_show = false"
    >
    </u-picker>
  </view>
</template>

<script>
import Area from "../../common/area.js";
export default {
  data() {
    return {
      picker_show: false,
      columns: [[], [], []],
      picker_value: "",
      picker_index: [],
      pramas: {
        province: "",
        city: "",
        area: "",
        province_dictText: "",
        city_dictText: "",
        area_dictText: "",
        picker_value: "",
        picker_idx: [],
      },

      province: [],
      city: [],
      county:[],
      //   value: ""
    };
  },
  props: {
    apiData: {
      type: [String, Object],
      default: "",
    },
    block: {
      type: Boolean,
      default: true,
    },
    info: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: "",
    },
    address_data: {
      type: [String, Object],
      default: () => {},
    },
    edit_btn: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    async set_picker() {
      var idx = this.picker_index;
      this.picker_show = true;
      console.log(idx);
      const picker = this.$refs.uPicker;
      console.log("picker", picker);
      if (idx.length == 0) {
        picker.setColumnValues(0, this.province);
         await this.get_city_list(this.province[0]);
        picker.setColumnValues(1, this.city);
        await this.get_county_list(this.city[0])
        picker.setColumnValues(2, this.county);
      } 
      // else {
        // picker.setColumnValues(0, this.province);
        // picker.setColumnValues(1, this.columns[0][idx[0]].children);
        // picker.setColumnValues(
        //   2,
        //   this.columns[0][idx[0]].children[idx[1]].children
        // );

        // picker.setIndexs(idx);
      // }
      this.$emit("on-show", this.picker_show);
    },
    confirm(e) {
      //选择城市
      //console.log('confirm', e)
      //保存选择的值
      this.pramas.province = e.value[0].regionCode;
      this.pramas.city = e.value[1].regionCode;
      this.pramas.area = e.value[2].regionCode;
      this.pramas.province_dictText = e.value[0].regionName;
      this.pramas.city_dictText = e.value[1].regionName;
      this.pramas.area_dictText = e.value[2].regionName;
      this.pramas.picker_idx = e.indexs;
      this.picker_index = e.indexs;
      this.pramas.picker_value =
        this.pramas.province_dictText +
        this.pramas.city_dictText +
        this.pramas.area_dictText;
      this.picker_show = false;
      this.$emit("on-confirm", this.pramas);
    },
    async changeHandler(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        indexs, //多级引索
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker,
      } = e;
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        console.log("第1联级", e);
        await this.get_city_list(this.province[e.indexs[0]]);
        picker.setColumnValues(1, this.city);
        
        //设置第3列值为引索0的默认值
        // console.log(this.city[0])
        this.get_county_list(this.city[0])
        picker.setColumnValues(2, this.county);
        //console.log(e)
      }
      if (columnIndex === 1) {
        //console.log(e)
        console.log("第2联级", e);
        // console.log("this.city",this.city)
        await this.get_county_list(this.city[e.indexs[1]])
        picker.setColumnValues(2,this.county);
      }
      this.$emit("on-change");
    },
    // 获取省
    get_province_list() {
      // 处理列表 省市县三级 数据
      let province_list = []; // 省市县
      for (let x in Area.province_list) {
        let item = {
          regionCode: x,
          regionName: Area.province_list[x],
          level: 1,
          children: [],
        };
        province_list.push(item);
      }
      this.province = province_list;
    },
    // 获取市
    get_city_list(pramas) {
      console.log("get_city_list----pramas->", pramas);
      let city_list = [];
      for (let y in Area.city_list) {
        if (y.substr(0, 2) == pramas.regionCode.substr(0, 2)) {
          let item = {
            regionCode: y,
            regionName: Area.city_list[y],
            level: 2,
            children: [],
          };
          city_list.push(item);
        }
      }
      this.city = city_list;
    },
    // 获取县/区
    get_county_list(pramas) {
      console.log("get_county_list----pramas->", pramas);
      let county_list = [];
      for (let z in Area.county_list) {
        if (z.substr(0, 4) == pramas.regionCode.substr(0, 4)) {
          let item = {
            regionCode: z,
            regionName: Area.county_list[z],
            level: 3,
            children: [],
          };
          county_list.push(item);
        }
      }
      this.county = county_list;
    },

    // map_indexs(data) {
    //   //遍历获取indexs
    //   if (this.edit_btn) {
    //     var search;
    //     if (this.picker_index.length == 0) {
    //       search = this.pramas.province;
    //     }
    //     if (this.picker_index.length == 1) {
    //       search = this.pramas.city;
    //     }
    //     if (this.picker_index.length == 2) {
    //       search = this.pramas.area;
    //     }
    //     if (this.picker_index.length < 3) {
    //       console.log("准备遍历", new Date().getTime());
    //       for (let i = 0; i < data.length; i++) {
    //         if (Number(search) == Number(data[i].regionCode)) {
    //           console.log("已找出", i);
    //           console.log("结束遍历", new Date().getTime());
    //           this.picker_index.push(i);
    //           console.log("picker_index", this.picker_index);
    //           //   this.map_indexs(data[i].children);
    //           break;
    //         } else {
    //           console.log("未找出", i);
    //         }
    //       }
    //     }
    //   }
    // },
  },
  mounted() {
    this.get_province_list();
  },
};
</script>

<style scoped>
.info {
  color: #c4c4d6;
}
</style>