地址选择

components/mobile/enterpriseCertification/addressChoose.vue

@@ -6,9 +6,12 @@
       <a href="">完成</a>
     </div>
     <template>
-      <mt-picker :slots="addressSlots" class="picker" :visible-item-count="5" ></mt-picker >
-      <mt-picker :slots="streetSlots" ref="picker" class="picker" :visible-item-count="5" ></mt-picker >
-      上门服务地址:{{ addressProvince }} {{ addressCity }}{{allCityData}}
+      <mt-picker :slots1="slots1" @change="onProvinceChange"></mt-picker>
+      <mt-picker :slots2="slots2" @change="onCityChange"></mt-picker>
+      <mt-picker :slots3="slots3" @change="onCountyChange"></mt-picker>
+      <!--<mt-picker :slots="addressSlots" class="picker" :visible-item-count="5" ></mt-picker >-->
+      <!--<mt-picker :slots="streetSlots" ref="picker" class="picker" :visible-item-count="5" ></mt-picker >-->
+      <!--上门服务地址:{{ addressProvince }} {{ addressCity }}{{allCityData}}-->
     </template>
   </div>
 </template>
@@ -18,60 +21,105 @@
     name: 'choose-address',
     data () {
       return {
-        addressSlots: [
+        county: '请选择',
+        slots1: [
           {
             flex: 1,
-            defaultIndex: 1,
-            // values: Object.keys(this.allCityData),
-            className: 'slot1',
+            values: ['请选择', '北京', '广东', '上海'],
+            className: 'slot',
             textAlign: 'center'
-          }, {
-            divider: true,
-            content: '-',
-            className: 'slot2'
-          }, {
-            flex: 1,
-            values: [],
-            className: 'slot3',
-            textAlign: 'center'
-          }, {
-            divider: true,
-            content: '-',
-            className: 'slot4'
-          }, {
+          }
+        ],
+        slots2: [
+          {
             flex: 1,
-            values: [],
-            className: 'slot5',
+            values: ['请选择'],
+            className: 'slot',
             textAlign: 'center'
           }
         ],
-        streetSlots: [
+        slots3: [
           {
             flex: 1,
-            values: [],
-            className: 'slot1',
+            values: ['请选择'],
+            className: 'slot',
             textAlign: 'center'
           }
         ],
-        allCityData: {},
-        addressProvince: '省',
-        addressCity: '市',
-        addressXian: '区',
-        addressStreet: '街道'
+        provinceCity: ''
+        // addressSlots: [
+        //   {
+        //     flex: 1,
+        //     defaultIndex: 1,
+        //     // values: Object.keys(this.allCityData),
+        //     className: 'slot1',
+        //     textAlign: 'center'
+        //   }, {
+        //     divider: true,
+        //     content: '-',
+        //     className: 'slot2'
+        //   }, {
+        //     flex: 1,
+        //     values: [],
+        //     className: 'slot3',
+        //     textAlign: 'center'
+        //   }, {
+        //     divider: true,
+        //     content: '-',
+        //     className: 'slot4'
+        //   }, {
+        //     flex: 1,
+        //     values: [],
+        //     className: 'slot5',
+        //     textAlign: 'center'
+        //   }
+        // ],
+        // streetSlots: [
+        //   {
+        //     flex: 1,
+        //     values: [],
+        //     className: 'slot1',
+        //     textAlign: 'center'
+        //   }
+        // ],
+        // allCityData: {},
+        // addressProvince: '省',
+        // addressCity: '市',
+        // addressXian: '区',
+        // addressStreet: '街道'
       }
     },
     mounted () {
       // 获取城市地址
-      this.$http.get('/data/city.json').then(response => {
-        this.allCityData = response.data
-      })
-      this.$nextTick(() => {
-        setTimeout(() => {
-          this.addressSlots[0].defaultIndex = 0
-        }, 100)
-      })
+      // this.$http.get('/data/city.json').then(response => {
+      //   this.allCityData = response.data
+      // })
+      // this.$nextTick(() => {
+      //   setTimeout(() => {
+      //     this.addressSlots[0].defaultIndex = 0
+      //   }, 100)
+      // })
     },
     methods: {
+      onProvinceChange (picker, values) {
+        this.province = picker.getValues()[0]
+        var cityArr = []
+        for (var key in this.provinceCity[this.province]) {
+          cityArr.push(key)
+        }
+        this.slots2[0].values = cityArr
+      },
+      onCityChange (picker, values) {
+        this.city = picker.getValues()[0]
+        var countyArr = []
+        for (var key in this.provinceCity[this.province][this.city]) {
+          countyArr.push(key)
+        }
+        this.slots3[0].values = countyArr
+      },
+      onCountyChange (picker, values) {
+        this.county = picker.getValues()[0]
+      }
       // onAddressChange (picker, values) {
       //   // let sheng = Object.keys(s)
       //   let shi = Object.keys(this.allCityData[values[0]])