<template>
<div class="user-login">
<van-field
readonly
clickable
label="城市"
placeholder="選擇城市"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<!-- vant Picker 根據 綁定的columns數據，來渲染幾級聯動，這里我們使用的是三級聯動 -->
<van-picker v-if="pageShow" show-toolbar :columns="columns" @cancel="onCancel"
@confirm="onConfirm" @change="onChange" :item-height="35" />
</van-popup>
</div>
</template>
<script>
import Vue from 'vue';
import { Picker } from 'vant';
Vue.use(Picker);
import api from "../fetch/api";
export default {
name:"user-login",
data(){
return {
// columns 為三個，即渲染出來的就是三級聯動。
columns: [
{
values: '',
className: 'column1'
},
{
values: '',
className: 'column2',
defaultIndex: 0
},
{
values: '',
className: 'column3',
defaultIndex: 0
}
],
pageShow:false, //省市區三級聯動是否顯示（因為是接口返回的數據，等省市區數據渲染完畢之后，在顯示三級聯動）
cityDates:'', //安聯當前選中市的所有區所有數據
showPicker:false, //vant Popup彈出框顯示隱藏
data:'',//接口返回所有省市區數據
}
},
beforeCreate(){
//這里不要在意 是我們接口的簽名。
var args1 = this.sign({});
// 接口請求數據
api.getAnLianArea(args1).then(res => {
this.data = res.anLianAreaList;
// 默認展示一級的數據
this.columns[0].values = Object.values(res.anLianAreaList).map(function(e){
return {text:e.name,code:e.code}
})
// 默認展示二級的數據
this.columns[1].values = Object.values(res.anLianAreaList[0].anLianCityList).map(function(e){
return {text:e.name,code:e.code}
})
// 默認展示三級的數據
this.columns[2].values = Object.values(res.anLianAreaList[0].anLianCityList[0].anLianCountyList).map(function(e){
return {text:e.subcityNameZhs,code:e.subcityCode}
})
// 等待dom渲染完畢之后，在去顯示 三級聯動。
this.$nextTick(function(){
this.pageShow = true;
})
});
},
mounted(){
},
methods:{
// vant picker選擇器回調
onChange(picker, values,index) {
// 這里我有可能渲染的有問題，導致回調每次都修改了當前列，其他值沒有修改，當前列？？（當前列什么鬼呀，什么垃圾啊？？？） 解釋一下 ↓↓
// 因為vant的 van-picker 回調只會返回你修改的那一列，比如現在為 [北京，北京，東城區]，你修改了省為[天津市，天津市，和平區]，但是vant的change回調會得到[天津市,北京,東城區],后面兩個在回調中沒有修改，不知道我的渲染方法有問題還是什么問題。
// 所以我在這里判斷change事件觸發后，如果你修改了省份的話，回調里面省份會改變，但是市和區還是上一個省份的 市和區，這時我們執行回調修改省，市，區的時候，因為回調只有省改變了，市和區DOM改變了，但是回調里面沒改變的問題（不曉得什么問題）,這時我們去找省下面的 市，我們取回調的市名稱，如果在省下面沒有找到這個市，默認展示第一個市，區也默認展示第一個市下面的區，如果遍歷市能查到，就去展示對應的市。
console.log(picker, values,index);
// 回調時修改第2列數據
picker.setColumnValues(1, this.cityDate(this.data,values[0].text));
// 回調時修改第3列數據
picker.setColumnValues(2, this.county(this.data,values[1].text));
},
// 修改市 這里不再多說什么了根據自己的數據格式來
cityDate(data,province){
var that = this;
data.forEach(function(res){
if(res.name == province){
console.log(res)
that.cityDates = res;
}
});
return that.cityDates.anLianCityList.map(function(res){
return {text:res.name,code:res.code};
})
// return 返回數據格式，因為我需要省市區code，所以我return的格式是對象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],如果你不需要code直接這樣就可以 例['北京市','河南省',.....]
},
// 修改縣 這里不再多說什么了根據自己的數據格式來
county(data,county){
var that = this;
var countyDate = '';
// 因為vant的 van-picker 回調只會返回你修改的那一列，比如現在為 [北京，北京，東城區]，你修改了省為[天津市，天津市，和平區]，但是vant的change回調會得到[天津市,北京,東城區],后面兩個在回調中沒有修改，不知道我的渲染方法有問題還是什么問題。
// 所以我在這里判斷change事件觸發后，如果你修改了省份的話，回調里面省份會改變，但是市和區還是上一個省份的 市和區，這時我們執行回調修改省，市，區的時候，因為回調只有省改變了，市和區DOM改變了，但是回調里面沒改變的問題（不曉得什么問題）,這時我們去找省下面的 市，我們取回調的市名稱，如果在省下面沒有找到這個市，默認展示第一個市，區也默認展示第一個市下面的區，如果遍歷市能查到，就去展示對應的市。
that.cityDates.anLianCityList.forEach(function(res){
if(res.name == county){
countyDate = res;
}
});
// 這里如果沒有找到對應的縣
if(countyDate == ''){
countyDate = that.cityDates.anLianCityList[0];
}
// return 縣
return countyDate.anLianCountyList.map(function(res){
return {text:res.subcityNameZhs,code:res.subcityCode};
})
// return 返回數據格式，因為我需要省市區code，所以我return的格式是對象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],如果你不需要code直接這樣就可以 例['北京市','河南省',.....]
},
onConfirm(val,a){
console.log(val)
},
onCancel(){
this.showPicker = false;
},
}
}
</script>