ufutx_love_mp/src/components/selectCity.wpy

<template>
  <picker mode="multiSelector" style="width:{{width}};height:{{height}};" @change="MultiPickerChange" @columnchange="MultiPickerColumnChange" value="{{multiIndex}}" range="{{objectArray}}">
    <slot></slot>
  </picker>
</template>

<script>
import wepy from '@wepy/core'
import base from '../mixins/base.js'
import https from '../mixins/https'
import {service} from '../config.js'

wepy.component({
  mixins: [base, https],
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  data: {
    region: [],
    objectArray: [[], [], []],
    provinces: [],
    nationId: 0,
    provinceId: 0,
    cityId: 0
  },
  props: {
    itemIndex: {
      type: Number,
      default: 0,
      twoWay: true
    },
    selfTextareaShow: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: ''
    },
    AddressValue: {
      type: Array,
      default: []
    },
    multiIndex: {
      type: Array,
      default: []
    }
  },

  created() {
    let vm = this
    vm.$nextTick(() => {
      vm.GetAddress()
    })
  },
  onShow() {
  },

  watch: {},
  methods: {
    GetAddress() {
      let vm = this
      vm.$get({url: `${service.host}/address/country/list`}).then(({code, data}) => {
        vm.provinces = data
        console.log(vm.provinces, 'vm.provinces')
        if (vm.AddressValue.length > 0) {
          vm.provinces.forEach((item, index) => {
            vm.objectArray[0].push(item.Name)
            if (item.Name == vm.AddressValue[0]) {
              vm.multiIndex[0] = index
            }
          })
          vm.provinces[vm.multiIndex[0]].Children.forEach((item, index) => {
            vm.objectArray[1].push(item.Name)
            if (item.Name == vm.AddressValue[1]) {
              vm.multiIndex[1] = index
            }
          })
          vm.provinces[vm.multiIndex[0]].Children[vm.multiIndex[1]].Children.forEach((item, index) => {
            vm.objectArray[2].push(item.Name)
            if (item.Name == vm.AddressValue[2]) {
              vm.multiIndex[2] = index
            }
          })
        } else {
          for (let item of vm.provinces) {
            vm.objectArray[0].push(item.Name)
          }
          for (let item of vm.provinces[vm.provinceId].Children) {
            vm.objectArray[1].push(item.Name)
          }
          for (let item of vm.provinces[vm.cityId].Children[18].Children) {
            vm.objectArray[2].push(item.Name)
          }
        }
        console.log(vm.provinces, 'provinces')
        this.$emit('provinces', vm.provinces)
      })
    },

    MultiPickerChange(e) { // 地址确定
      console.log(this.itemIndex)
      console.log(e, 'e-----')
      this.multiIndex = e.$wx.detail.value
      console.log(this.provinces, this.multiIndex, 'gggg')
      console.log(this.provinces[this.multiIndex[0]], '=1')
      console.log(this.provinces[this.multiIndex[0]].Children[this.multiIndex[1]], '=2')
      console.log(this.provinces[this.multiIndex[0]].Children[this.multiIndex[1]].Children[this.multiIndex[2]], '=3')
      this.region = [this.provinces[this.multiIndex[0]].Name, this.provinces[this.multiIndex[0]].Children[this.multiIndex[1]].Name, this.provinces[this.multiIndex[0]].Children[this.multiIndex[1]].Children[this.multiIndex[2]].Name]
      this.$emit('multiCity', this.multiIndex)
      this.$emit('selectCity', this.region, this.itemIndex)
    },
    MultiPickerColumnChange(e) { // 省
      console.log(e, '---')
      let that = this,
        province = [],
        city = []
      switch (e.$wx.detail.column) {
        case 0:
          that.nationId = e.$wx.detail.value
          for (let item of that.provinces[that.nationId].Children) {
            province.push(item.Name)
          }
          for (let item of that.provinces[that.nationId].Children[0].Children) {
            city.push(item.Name)
          }
          that.objectArray = [that.objectArray[0], province, city]

          that.multiIndex = [e.$wx.detail.value, 0, 0]
          break
        case 1:
          that.provinceId = e.$wx.detail.value
          for (let item of that.provinces[that.nationId].Children[that.provinceId].Children) {
            city.push(item.Name)
          }
          that.objectArray = [that.objectArray[0], that.objectArray[1], city]
          that.multiIndex = [that.multiIndex[0], e.$wx.detail.value, 0]

          break
        case 2:
          that.multiIndex = [that.multiIndex[0], that.multiIndex[1], e.$wx.detail.value]
          break
      }
    }
  }
})
</script>

<style lang="less" scoped>
  .loading-box{
     width: 100vw;height: 100vh;
     background-image: url("http://images.ufutx.com/201901/14/ed1b2da08b3581efdc7372b26f1ba40b.png");
     background-size: cover;
     background-repeat: no-repeat;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1000;
     .loading-image{
       width: 500rpx;height: 500rpx;
       margin: auto;
       margin-top: 30vh;
       z-index: -1;
     }
     .loading-item{
       width: 100%;height: 400rpx;
       position: relative;
       position: absolute;
       overflow: inherit;
       left: 0 ;
       top: 30vh;
       .image{
         width: 220rpx;
         position: absolute;
         left: 0;
         top: 0;
         animation: opacity 1200ms ease-in;
         animation-fill-mode: forwards;
       }
     }
   }
  cover-image,cover-view {
    overflow: visible !important;
  }

  .animate{
    -webkit-animation:  move2 2s linear infinite;
  }
  .loading-icon {
    width: 240rpx;
  }
  @-webkit-keyframes move2{
    0%{-webkit-transform:rotate(0deg);}

    50%{-webkit-transform:rotate(-180deg);}

    100%{-webkit-transform:rotate(-360deg);}
  }
  .hide{
    animation: opacity2 800ms ease-in;
    animation-fill-mode: forwards;
  }
  @keyframes opacity{
    0%{opacity: 0}
    50%{opacity:.5;}
    100%{opacity:1;}
  }
  @keyframes opacity2{
    0%{opacity:1}
    50%{opacity:.8;}
    100%{opacity:0;}
  }
  @-webkit-keyframes move2{
    0%{-webkit-transform:rotate(0deg);}

    50%{-webkit-transform:rotate(-180deg);}

    100%{-webkit-transform:rotate(-360deg);}
  }
</style>