4D_uniapp_service/components/comp-select-address/CompSelectAddress.vue

<template>
  <view class="SelectAddress">
    <picker
      mode="multiSelector"
      :value="addressSelectListData"
      @columnchange="addressColumnchange"
      @change="addressChange"
      :range="addressListData"
    >
      <!-- <view class="noneAddress" v-if="!addressListStr">
        <uni-easyinput
          trim="all"
          placeholder="请选择您的地区"
          disabled
        ></uni-easyinput>
      </view> -->
      <view class="haveAddress">
        <uni-easyinput
          trim="all"
          placeholder="请选择您的地区"
          disabled
          :value="addressListStr"
        ></uni-easyinput>
      </view>
    </picker>
  </view>
</template>
<script>
import chinaAddress from "./citydata";
export default {
  name: "CompSelectAddress",
  data() {
    return {
      chinaAddress: [], // 全国省市区
      addressListData: [], // 全国省市区
      addressSelectListData: [0, 0, 0], // 当前选择的省市区 index
      addressListStr: "", // 当前选择的省市区
    };
  },
  props: {
    value: {
      type: Array,
      default: [],
    },
  },
  mounted() {
    this.chinaAddress = chinaAddress;
    // 获取全国省份
    this.getProvince();

    // 回显地址
    if (this.value) {
      const showAddressList = this.value;
      this.addressListStr = showAddressList.join("-");
    }
  },

  methods: {
    // 获取全国省份list
    getProvince() {
      const chinaAddress = this.chinaAddress;
      const provinceListData = [];
      for (const province_key in chinaAddress) {
        provinceListData.push(chinaAddress[province_key].label);
      }
      this.addressListData[0] = provinceListData;
      // 默认加载第一个省份的城市
      this.getCity(provinceListData[0]);
    },
    // 根据省份获取城市
    getCity(province) {
      // 获取省份对象
      const chinaAddress = this.chinaAddress;
      const chinaAddress_Item = chinaAddress.find((item) => {
        return item.label === province;
      });
      // 获取城市list
      const cityChildren = chinaAddress_Item.children;
      if (!cityChildren) {
        // 如果省份没有市区 清空上次的市区和区域数据
        this.addressListData[1] = "";
        this.addressListData[2] = "";
        return;
      }
      // 解析城市list
      const cityListData = [];
      for (const city_key in cityChildren) {
        cityListData.push(cityChildren[city_key].label);
      }
      this.addressListData[1] = cityListData;
      // 默认加载第一个省份的第一个城市的区域
      this.getCounty(province, cityListData[0]);
    },
    // 根据省份和城市 获取区域
    getCounty(province, city) {
      // 获取省份对象
      const chinaAddress = this.chinaAddress;
      const chinaAddress_Item = chinaAddress.find((item) => {
        return item.label === province;
      });
      // 获取城市list
      const cityChildren = chinaAddress_Item.children;

      // 根据城市获取区域
      const cityChildren_item = cityChildren.find((item) => {
        return item.label === city;
      });

      // 解析区域list
      const countyListData = [];
      if (cityChildren_item.children) {
        for (const county_key in cityChildren_item.children) {
          countyListData.push(cityChildren_item.children[county_key].label);
        }
      } else {
        countyListData.push(cityChildren_item.label);
      }
      this.addressListData[2] = countyListData;
    },
    // 区域更新
    addressColumnchange(e) {
      const { column, value } = e.detail;
      this.addressSelectListData[column] = value;
      // 当前选择的节点地址
      const selectItem = this.addressListData[column][value];
      if (column === 0) {
        // 根据省份获取城市
        this.getCity(selectItem);
      } else if (column === 1) {
        // 获取当前城市的省份
        const province = this.addressListData[0][this.addressSelectListData[0]];
        // 根据省份和城市获取区域
        if (selectItem) {
          this.getCounty(province, selectItem);
        }
      }
      this.$forceUpdate();
    },
    // 区域确定
    addressChange(e) {
      const { value } = e.detail;
      // 获取省、市、区
      let province = this.addressListData[0][value[0]] || "";
      let city = this.addressListData[1][value[1]] || "";
      let county = this.addressListData[2][value[2]] || "";

      // 拼接页面显示的地址链接
      const addressListStr = [];
      if (province) {
        addressListStr.push(province);
      }
      if (city) {
        addressListStr.push(city);
      }
      if (county) {
        addressListStr.push(county);
      }
      this.addressListStr = addressListStr.join("-");

      // 传值给父页面
      const addressList = [province, city, county];
      this.$emit("selectAddress", addressList);
    },
  },
};
</script>
<style>
.noneAddress {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #cdcdcd;
}
.haveAddress {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
</style>