<template>
<view class="stuInfo">
<view class="left-title">家庭地址</view>
<picker class="pickerList" mode="multiSelector"
:range="newCategotyDataList"
:value="multiIndex"
range-key="name"
@change="cgArea"
@columnchange="pickerColumnchange">
<view class="areaSelect==='请选择地区?ysHolder:'csHolder'">{{areaSelect}}</view>
</picker>
</view>
</template>
<script>
import { getStuInfo,getAreaListAll,addStuInfo } from '@/api/index'
export default {
data() {
return {
form: {
province: '320000',
provinceName: '江苏省',
city: '',
cityName: '',
area: '',
areaName: '',
street: '',
streetName: '',
stuImage: '',
allstuImage: '',
stuName: '',
stuSex: 155,
stuCard: '',
stuSchool: '',
stuGradeName: '',
stuGrade: '',
stuAddress: '',
stuParent: '',
stuParentPhone: ''
},
multiIndex:[0,0,0],
newCategotyDataList:[[],[],[]],
areaSelect:"请选择地区",
}
},
onLoad:function(e) {
console.log(e.type,e.id)
this.types=e.type
this.getAddressList()
},
methods: {
cgArea(e){
this.multiIndex = e.detail.value;
// 数组内的下标
// console.log(this.multiIndex);
// 获取一级类目
console.log(this.newCategotyDataList[0][this.multiIndex[0]])
// 获取二级类目
// console.log(this.newCategotyDataList[1][this.multiIndex[1]])
// 获取三级类目
// console.log(this.newCategotyDataList[2][this.multiIndex[2]])
this.form.cityName=this.newCategotyDataList[0][this.multiIndex[0]].name
this.form.areaName=this.newCategotyDataList[1][this.multiIndex[1]].name
this.form.streetName=this.newCategotyDataList[2][this.multiIndex[2]].name
this.form.city=this.newCategotyDataList[0][this.multiIndex[0]].id
this.form.area=this.newCategotyDataList[1][this.multiIndex[1]].id
this.form.street=this.newCategotyDataList[2][this.multiIndex[2]].id
this.areaSelect = `${this.newCategotyDataList[0][this.multiIndex[0]].name+this.newCategotyDataList[1][this.multiIndex[1]].name+this.newCategotyDataList[2][this.multiIndex[2]].name}`;
// this.selectObj=this.newCategotyDataList[2][this.multiIndex[2]];
},
pickerColumnchange(e){
// 第几列滑动
// console.log(e.detail.column);
// 第几列滑动的下标
// console.log(e.detail.value)
// 第一列滑动
if(e.detail.column === 0){
this.multiIndex[0] = e.detail.value
// console.log('第一列滑动');
this.newCategotyDataList[1] = this.categoryArr[this.multiIndex[0]].childList.map((item,index)=>{
console.log( item.name)
return item
})
if(this.categoryArr[this.multiIndex[0]].childList.length === 1){
this.newCategotyDataList[2] = this.categoryArr[this.multiIndex[0]].childList[0].childList.map((item,index)=>{
return item
})
}else{
this.newCategotyDataList[2] = this.categoryArr[this.multiIndex[0]].childList[this.multiIndex[1]].childList.map((item,index)=>{
return item
})
}
// 第一列滑动 第二列 和第三列 都变为第一个
this.multiIndex.splice(1, 1, 0)
this.multiIndex.splice(2, 1, 0)
}
// 第二列滑动
if(e.detail.column === 1){
this.multiIndex[1] = e.detail.value
// console.log('第二列滑动');
this.newCategotyDataList[2] = this.categoryArr[this.multiIndex[0]].childList[this.multiIndex[1]].childList.map((item,index)=>{
return item
})
// 第二列 滑动 第三列 变成第一个
this.multiIndex.splice(2, 1, 0)
}
// 第三列滑动
if(e.detail.column === 2){
this.multiIndex[2] = e.detail.value
// console.log('第三列滑动')
// console.log(this.multiIndex)
}
},
getAddressList(){
this.$api.getAreaListAll({parentId:'100000'}).then((res) => {
if(res.code===200){
this.categoryArr=res.data[0].childList
for(let i=0; i<this.categoryArr.length; i++){
this.newCategotyDataList[0].push(this.categoryArr[i])
}
for(let i=0; i<this.categoryArr[0].childList.length; i++){
this.newCategotyDataList[1].push(this.categoryArr[0].childList[i])
}
for(let i=0; i<this.categoryArr[0].childList[0].childList.length; i++){
this.newCategotyDataList[2].push(this.categoryArr[0].childList[0].childList[i])
}
}
})
},
}
}
</script>