<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>{{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>
<!-- 三级联动 -->
<!-- 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 scoped>
.picker-slot.picker-slot-divider,.picker-slot-wrapper{
height: 132px;
}
.picker-center-highlight{
margin-top: -136px!important;
}
</style>
<script scoped>
import axios from "axios";
import { Toast } from "mint-ui";
import { Popup } from "mint-ui";
import {rootPath} from '../config/hostapi'
export default {
name: "addressadd",
data() {
return {
popupVisible: false,
address_id: 0, //收货地址编号
name: "", //收货人姓名
phone: "",// 收货人手机
province_id: 0,// 省编号
city_id: 0, //市编号
area_id: 0,// 区县编号
address: "",// 地址详情
is_default: false, //是否默认
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(rootPath+"/app/address/info", { 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.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 = Boolean(data.data.is_default);
that.arr[0]=data.data.priovince_name;
that.arr[1]=data.data.city_name;
that.arr[2]=data.data.area_name;
});
} 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(rootPath+"/app/address/region_grading", {
params: { region_id: 100000 }
})
.then(response => {
if (response.data.errcode == 0) {
that.$nextTick(function() {
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);
});
},
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("address", this.address);
params.append("is_default", this.is_default);
axios
.post(rootPath+"/app/address/modity", params)
.then(function(response) {
let data = response.data;
if (data.errcode == 0) {
Toast(data.errmsg);
that.$router.push({path:'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;
}
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.area_id = values[2].region_id;
this.arr[2]=values[2].region_name;
return;
}
var that = this;
axios
.get(rootPath+"/app/address/region_grading", {
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>
下面是效果图
