Address.vue

<template>
  <div class="address">
    <!--地址选择组件-->
    <mt-popup v-model="show" position="bottom" :closeOnClickModal="closeOnClickModal">
      <section style="width:100%; height: 100%;">
        <div class="padding">
          <span @click="hidePicker">取消</span>
          <span @click="saveAddress" class="float-right">完成</span>
        </div>
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
      </section>
    </mt-popup>
  </div>
</template>

<script>
  import Address from './addr.js'
  let type = 1
  let provinceValue = 2
  let cityValue = 52
  //根据apid查找对象
  function findcity(item) {
    return item.type == type;
  }
  //根据aname获取名字
  function getAddressName(item) {
    return item.label
  }
  //根据aname获取children
  function getAddressChildren(item) {
    return item.children
  }
  // 根据label获取对象
  function findObj (list, label) {
    let filtered = list.filter((item) => {
      return item.label === label
    })
    return filtered[0]
  }
  // 根据value获取list中的children
  function findChildren(list, value) {
    let filtered = list.filter((item) => {
      return item.value === value
    })
    return filtered[0].children
  }
  //筛选出各省级对象
  let pObj = Address.filter(findcity)
  //获取各省级对象名字
  let provinces = pObj.map(getAddressName)
  //  根据省级value获取各市对象
  let citiesObj = findChildren(pObj, provinceValue)
  let cities = citiesObj.map(getAddressName)
  let countriesObj = findChildren(citiesObj, cityValue)
  let countries = countriesObj.map(getAddressName)
  export default {
    name: 'address',
    props: {
      showAddressPicker: Boolean,
      init: String
    },
    created() {
      if (this.init) {
        this.initVal = this.init
      }
      this.initAddress()
    },
    mounted() {
      let vm = this
      vm.show = vm.showAddressPicker
    },
    data() {
      return {
        slots: [{
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'center',
          defaultIndex: 3
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot4',
          defaultIndex: 0
        }, {
          flex: 1,
          values: [],
          className: 'slot5',
          textAlign: 'center',
          defaultIndex: 0
        }],
        addressValue: '',
        addressValueCode: '',
        disableClear: true,
        show: true,
        initVal: '北京-北京-东城区',
        closeOnClickModal: false
      }
    },
    watch: {
      showAddressPicker(old, val) {
        this.show = !val
      },
      init(val) {
        this.initVal = val
        this.initAddress()
      }
    },
    methods: {
      saveAddress() { //保存所选地区
        let vm = this
        vm.show = false
        vm.$emit('save-address', vm.addressValue, vm.addressValueCode);
      },
      hidePicker() { // 取消选择
        this.$emit('hide-picker', false);
      },
      initAddress() { //初始化地址组件
        let vm = this
        let initAddress = vm.initVal.split("-")
        let defaultIndex0 = pObj.findIndex((obj)=>{
          return obj.label === initAddress[0]
        });
        vm.slots[0].values = provinces
        vm.slots[0].defaultIndex = defaultIndex0

        let tempCitiesObj = pObj[defaultIndex0].children
        let defaultIndex1 = tempCitiesObj.findIndex((obj)=>{
          return obj.label === initAddress[1]
        });
        vm.slots[2].values = tempCitiesObj.map(getAddressName)
        vm.slots[2].defaultIndex = defaultIndex1

        let tempCountriesObj = tempCitiesObj[defaultIndex1].children
        let defaultIndex2 = tempCountriesObj.findIndex((obj)=>{
          return obj.label === initAddress[2]
        });
        vm.slots[4].values = tempCountriesObj.map(getAddressName)
        vm.slots[4].defaultIndex = defaultIndex2

        vm.addressValue = vm.slots[0].values[vm.slots[0].defaultIndex] +
          "-" + vm.slots[2].values[vm.slots[2].defaultIndex] +
          "-" + vm.slots[4].values[vm.slots[4].defaultIndex]
      },
      onValuesChange(picker, values) {
        let vm = this
        let valueCodes = []
        let defaultIndex0 = pObj.findIndex((obj)=>{
          return obj.label === values[0]
        });
        if(defaultIndex0 > -1){
          vm.slots[0].defaultIndex = defaultIndex0
          valueCodes[0] = pObj[defaultIndex0].value
          let tempCitiesObj = pObj[defaultIndex0].children
          vm.slots[2].values = tempCitiesObj.map(getAddressName)
          let defaultIndex1 = tempCitiesObj.findIndex((obj)=>{
            return obj.label === values[1]
          })
          if(defaultIndex1 > -1) {
            vm.slots[2].defaultIndex = defaultIndex1
            valueCodes[1] = tempCitiesObj[defaultIndex1].value
            let tempCountriesObj = tempCitiesObj[defaultIndex1].children
            vm.slots[4].values = tempCountriesObj.map(getAddressName)
            let defaultIndex2 = tempCountriesObj.findIndex((obj)=>{
              return obj.label === values[2]
            })
            valueCodes[2] = defaultIndex2 > -1 ? tempCountriesObj[defaultIndex2].value : tempCountriesObj[0].value
            vm.slots[4].defaultIndex = defaultIndex2 > -1 ? defaultIndex2 : 0
            vm.addressValue = values.join("-")
            vm.addressValueCode = valueCodes.join("-")
          }
        }
      }
    }
  }

</script>

<style scoped>
  .mint-popup {
    width: 100%;
  }

  .footer-btn {
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    z-index: 2;
    left: 0;
    bottom: 3rem;
  }

  .input {
    border: none;
  }

  .padding {
    padding: 1.5rem;
    font-size: 1.4rem;
  }

  .float-right {
    float: right;
  }

</style>