vue 2.0 picker 省市区三级联动

<template>
<div class="content">
<form @submit.prevent="submitForm">
<mt-header title="" class="wordTitle">
<router-link to="/addresslist" slot="left">
<mt-button><img src="../assets/img/return.png">新建地址</mt-button>
</router-link>
<button class="rightButton" slot="right">保存</button>
</mt-header>
<ul class="addressCont color_333 font_15">
<li class="border_bottom">
<span>姓名：</span><input v-model="name" />
<input v-model="address_id" type="hidden" />
</li>
<li class="border_bottom">
<span>手机号：</span><input v-model="phone" />
</li>
<li class="border_bottom city">
<span v-show="cityshow">{{arr[0]}}-{{arr[1]}}-{{arr[2]}}</span>
<!-- <input type="text" id='city-picker' placeholder="请选择 " /> -->
<span class="cityCont" @click="popupVisible=true">请选择</span>
<img src="../assets/img/go@3x.png">
</li>
<li class="border_bottom moreAddress">
<span>详细地址：</span>
<textarea placeholder="街道，楼牌号等" v-model="address"></textarea>
</li>
</ul>
<div class="item-inner default border_bottom">
<div class="item-title label color_333 font_15">设为默认地址</div>
<div class="item-input">
<mt-switch v-model="is_default"></mt-switch>
</div>
</div>
</form>

<!-- 三级联动 -->
<!-- <mt-picker :slots="slots" @change="onValuesChange"></mt-picker> -->

<!-- About Popup -->
<mt-popup class="popup popup-about cityContent" v-model="popupVisible" popup-transition="popup-fade" @click="popupVisible=false">
<div class="content-block ">

<p @click="popupVisible=false" class="make_sure">确定</p>

<!-- 三级联动 -->
<mt-picker :slots="slots" value-key="region_name" @change="onValuesChange"></mt-picker>
</div>
</mt-popup>

</div>
</template>
<style>
.picker-slot.picker-slot-divider,.picker-slot-wrapper{
height: 20.6rem;
}
.picker-center-highlight{
margin-top: -136px;
}
</style>

<style scoped>
@import "../assets/css/addresslist.css";
</style>

<script>
import axios from "axios";
import { Toast } from "mint-ui";
import { Popup } from "mint-ui";
export default {
name: "addressadd",
data() {
return {
popupVisible: false,
address_id: "",
name: "",
phone: "",
province_id: 0,
city_id: 0,
area_id: 0,
address: "",
is_default: false,
cityshow: true,
slots: [
{
flex: 1,
values: [],
className: "slot1",
defaultIndex: 0,
textAlign: "left"
},
{
divider: true,
content: "-",
className: "slot2"
},
{
flex: 1,
values: [],
className: "slot3",
defaultIndex: 0,
textAlign: "left"
},
{
divider: true,
content: "-",
className: "slot4"
},
{
flex: 1,
values: [],
className: "slot",
defaultIndex: 0,
textAlign: "left"
}
],
arr: ["省份", "城市", "区县"],
provincemodel: [{ region_id: 0, region_name: "请选择" }],
citymodel: [{ region_id: 0, region_name: "请选择" }],
countymodel: [{ region_id: 0, region_name: "请选择" }]
};
},
created: function() {
const that = this;
var params = { address_id: this.$route.query.addressid };

if (this.$route.query.addressid) {
axios
.get("api/app/address/info.do", { params })
.then(function(response) {
let data = response.data;
if (data.errcode == 0) {
that.$nextTick(function() {
that.address_id = data.data.address_id;
that.name = data.data.name;
that.phone = data.phone;
that.province_id = data.data.province_id;
that.city_id = data.data.city_id;
that.area_id = data.data.area_id;
that.address = data.data.address;
that.is_default = data.data.is_default;
});
} else {
Toast(data.errmsg);
}
})
.catch(function(error) {
console.log(error);
//Toast(error);
});
}
that.slots[0].values = that.provincemodel;
that.slots[2].values = that.citymodel;
that.slots[4].values = that.countymodel;
axios
.get("api/app/address/region_grading.do", {
params: { region_id: 100000 }
})
.then(response => {
if (response.data.errcode == 0) {
that.$nextTick(function() {
// that.provincemodel.push({ region_id: 0, region_name: "请选择" });
that.provincemodel = response.data.data;
that.provincemodel.unshift({ region_id: 0, region_name: "请选择" });
that.slots[0].values = that.provincemodel;
});
} else {
Toast(response.data.errmsg);
}
})
.catch(function(error) {
console.log(error);
//Toast(error);
});
},
mounted: function() {},
methods: {
submitForm: function() {
const that = this;
var params = new URLSearchParams();
params.append("address_id", this.address_id);
params.append("name", this.name);
params.append("phone", this.phone);
// params.append("province_id", this.province_id);
// params.append("city_id", this.city_id);
// params.append("area_id", this.area_id);
params.append("province_id", 11);
params.append("city_id", 1101);
params.append("area_id", 110102);
params.append("address", this.address);
params.append("is_default", this.is_default);
axios
.post("api/app/address/modity.do", params, {})
.then(function(response) {
let data = response.data;
if (data.errcode == 0) {
Toast(data.errmsg);
axios.put("addresslist");
} else {
Toast(data.errmsg);
}
})
.catch(function(error) {
Toast(error);
});
},
onValuesChange(picker, values) {
if (typeof values[0] == "undefined") {
return;
}
if (
values[0].region_id == 0 &&
values[1].region_id == 0 &&
values[2].region_id == 0 && (this.province_id!=0 ||this.city_id!=0|| this.area_id!=0)
) {

return;
}
if (
values[0].region_id == 0 &&
values[1].region_id == 0 &&
values[2].region_id == 0 && this.city_id==0 && this.area_id==0
) {
this.province_id = 0;
this.arr[0]='省份';
this.city_id = 0;
this.arr[1]='城市';
this.area_id = 0;
this.arr[2]='区县';
this.slots[2].values = [{ region_id: 0, region_name: "请选择" }];
this.slots[4].values = [{ region_id: 0, region_name: "请选择" }];
return;
}
console.log(
values[0].region_id +
"==" +
values[1].region_id +
"==" +
values[2].region_id
);

let regiontype = 0; //0不查询1 查询市 2查询区县
let region_id = 0;
if ((values[0].region_id != 0  && this.province_id==0)||(values[0].region_id !=  this.province_id && values[0].region_id != 0 )) {
//查询市
regiontype = 1;
region_id = values[0].region_id;
this.arr[0]=values[0].region_name;

} else if ((values[1].region_id != 0 && this.city_id==0)||(values[1].region_id !=  this.city_id && values[1].region_id !=0 )) {
//查询市
regiontype = 2;
region_id = values[1].region_id;
this.arr[1]=values[1].region_name;
}
if ((values[2].region_id != 0 && this.area_id==0)||(values[2].region_id !=  this.area_id)) {
// this.province_id = values[0].region_id;
// this.city_id = values[1].region_id;
this.area_id = values[2].region_id;
this.arr[2]=values[2].region_name;
return;
}
var that = this;
axios
.get("api/app/address/region_grading.do", {
params: { region_id: region_id }
})
.then(response => {
if (response.data.errcode == 0) {
if (regiontype == 1) {
that.citymodel = response.data.data;
that.citymodel.unshift({ region_id: 0, region_name: "请选择" });
that.slots[2].values = that.citymodel;
this.province_id = region_id;
this.city_id =0;
this.arr[1]='城市';
this.slots[4].values = [{ region_id: 0, region_name: "请选择" }];
} else {
that.countymodel = response.data.data;
that.countymodel.unshift({ region_id: 0, region_name: "请选择" });
that.slots[4].values = that.countymodel;
this.city_id = region_id;
this.area_id=0;
this.arr[2]='区县';
}
} else {
Toast(data.errmsg);
}
})
.catch(function(error) {
console.log(error);
//Toast(error);
});
}
}
};
</script>