Address.vue

<template>
  <div class="address">
    <!--地址选择组件-->
    <van-popup v-model="show" :close-on-click-overlay='clickCancel' position="bottom"  >
      <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>
    </van-popup>
  </div>
</template>
<script>
// https://cdn.singsingenglish.com/new-sing/2306a83c3e48d84a0b6066f235a8158efa4505de.js
  import Address from './addr.js'
  import {Picker} from 'mint-ui'
  // let Address ={}
  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 {
    props: {
      showAddressPicker: Boolean,
      init: String,
      Address:Object
    },
    created() {
        if (this.init) {
          this.initVal = this.init
        } 
      this.initAddress()
    },
    mounted() {
      let vm = this
      vm.show = vm.showAddressPicker
      // console.log(vm.show,80)
      // console.log(window.addrArr)
      // console.log(82)
    },
    components: {
    [Picker.name]: Picker
  },
    data() {
      return {
        clickCancel:false,
        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]
          console.log(this.slots)
      },
      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  lang="less">
@import "../../util/public";
.address{
  .footer-btn {
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    z-index: 2;
    left: 0;
    bottom: 3rem;
  }

  .input {
    border: none;
  }

  .padding {
    padding: 1.5rem 2.8rem;
    font-size: 15* @toVw;
    color: black;
    font-weight: bold;
  }

  .float-right {
    float: right;
  }
  .van-popup{
    background: white;
    border-radius:25* @toVw 25* @toVw 0px 0px; 
    .picker-item{
    font-size: 14* @toVw;
    }
    .picker-item.picker-selected{
      color: #40A9FF;
      font-size: 15* @toVw;
    }
  }
  .picker-slot.picker-slot-divider{
    color: white;
  }
}


</style>