|
|
|
<template>
|
|
|
|
<div class="address-select-component" v-show="true">
|
|
|
|
<div class="address-select-box">
|
|
|
|
<div class="component-title">
|
|
|
|
<span class="title">所在地区</span>
|
|
|
|
<span class="iconfont close" @click="closeAddBox"></span>
|
|
|
|
</div>
|
|
|
|
<ul class="head-address-ul">
|
|
|
|
<li
|
|
|
|
v-if="province.title"
|
|
|
|
:class="{ 'head-address-li': common.titleActive, 'disable': !supportChangeProvince}"
|
|
|
|
@click="clickTitle('province')"
|
|
|
|
>{{province.title}}</li>
|
|
|
|
<li
|
|
|
|
v-if="city.title"
|
|
|
|
:class="{ 'head-address-li': province.titleActive }"
|
|
|
|
@click="clickTitle('city')"
|
|
|
|
>{{city.title}}</li>
|
|
|
|
<li
|
|
|
|
v-if="area.title"
|
|
|
|
:class="{ 'head-address-li': city.titleActive }"
|
|
|
|
@click="clickTitle('area')"
|
|
|
|
>{{area.title}}</li>
|
|
|
|
<li v-if="street.title" :class="{ 'head-address-li': area.titleActive }">{{street.title}}</li>
|
|
|
|
</ul>
|
|
|
|
<div class="address-container">
|
|
|
|
<div class="address-content">
|
|
|
|
<ul v-if="province.showList" class="address-ul">
|
|
|
|
<li
|
|
|
|
v-for="(pprovince, index) in provinces"
|
|
|
|
:key="index"
|
|
|
|
@click="switchAddress(pprovince.id, pprovince.caption)"
|
|
|
|
>
|
|
|
|
{{pprovince.caption}}
|
|
|
|
<span
|
|
|
|
v-if="pprovince.id === province.id"
|
|
|
|
class="iconfont icon-v"
|
|
|
|
></span>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<ul v-if="city.showList" class="address-ul">
|
|
|
|
<li
|
|
|
|
v-for="(pcity, index) in citys"
|
|
|
|
:key="index"
|
|
|
|
@click="switchAddress(pcity.id, pcity.caption)"
|
|
|
|
>
|
|
|
|
{{pcity.caption}}
|
|
|
|
<span v-if="pcity.id === city.id" class="iconfont icon-v"></span>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<ul v-if="area.showList" class="address-ul">
|
|
|
|
<li
|
|
|
|
v-for="(parea, index) in areas"
|
|
|
|
:key="index"
|
|
|
|
@click="switchAddress(parea.id, parea.caption)"
|
|
|
|
>
|
|
|
|
{{parea.caption}}
|
|
|
|
<span v-if="parea.id === area.id" class="iconfont icon-v"></span>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<ul v-if="street.showList" class="address-ul">
|
|
|
|
<li
|
|
|
|
v-for="(pstreet, index) in streets"
|
|
|
|
:key="index"
|
|
|
|
@click="switchAddress(pstreet.id, pstreet.caption)"
|
|
|
|
>
|
|
|
|
{{pstreet.caption}}
|
|
|
|
<span v-if="pstreet.id === street.id" class="iconfont icon-v"></span>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
supportChangeProvince: true, // 是否支持修改省
|
|
|
|
provinces: [],
|
|
|
|
citys: [],
|
|
|
|
areas: [],
|
|
|
|
streets: [],
|
|
|
|
show: false,
|
|
|
|
common: {
|
|
|
|
titleActive: true
|
|
|
|
},
|
|
|
|
province: {
|
|
|
|
id: "",
|
|
|
|
title: "",
|
|
|
|
allTitle: "",
|
|
|
|
showList: true,
|
|
|
|
titleActive: false
|
|
|
|
},
|
|
|
|
city: {
|
|
|
|
id: "",
|
|
|
|
title: "",
|
|
|
|
allTitle: "",
|
|
|
|
showList: false,
|
|
|
|
titleActive: false
|
|
|
|
},
|
|
|
|
area: {
|
|
|
|
id: "",
|
|
|
|
title: "",
|
|
|
|
allTitle: "",
|
|
|
|
showList: false,
|
|
|
|
titleActive: false
|
|
|
|
},
|
|
|
|
street: {
|
|
|
|
id: "",
|
|
|
|
title: "",
|
|
|
|
allTitle: "",
|
|
|
|
showList: false,
|
|
|
|
titleActive: false
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
// methods: {
|
|
|
|
// /* 返回标题处理 */
|
|
|
|
// returnTitle() {
|
|
|
|
// let getTitle = "";
|
|
|
|
// let returnTitle = "";
|
|
|
|
|
|
|
|
// if (this.supportChangeProvince) {
|
|
|
|
// getTitle =
|
|
|
|
// this.province.allTitle +
|
|
|
|
// this.city.allTitle +
|
|
|
|
// this.area.allTitle +
|
|
|
|
// this.street.allTitle;
|
|
|
|
// } else {
|
|
|
|
// getTitle =
|
|
|
|
// this.city.allTitle + this.area.allTitle + this.street.allTitle;
|
|
|
|
// }
|
|
|
|
|
|
|
|
// if (getTitle.length > 11) {
|
|
|
|
// returnTitle = getTitle.substr(0, 5) + "..." + getTitle.substr(-5);
|
|
|
|
// } else {
|
|
|
|
// returnTitle = getTitle;
|
|
|
|
// }
|
|
|
|
|
|
|
|
// return returnTitle;
|
|
|
|
// },
|
|
|
|
|
|
|
|
// /* 标题长度处理 */
|
|
|
|
// titleHandle(caption) {
|
|
|
|
// if (caption.length > 3) {
|
|
|
|
// return caption.substring(0, 3) + "...";
|
|
|
|
// } else {
|
|
|
|
// return caption;
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
|
|
|
|
// /* 选择地址后的显示控制 */
|
|
|
|
// changeShow(id, caption) {
|
|
|
|
// switch ((id + "").length) {
|
|
|
|
// case 2:
|
|
|
|
// this.province.id = id;
|
|
|
|
// this.province.allTitle = caption;
|
|
|
|
// this.province.title = this.titleHandle(caption);
|
|
|
|
// this.city.title = "请选择";
|
|
|
|
// this.city.showList = this.province.titleActive = true;
|
|
|
|
// this.province.showList = this.area.showList = this.street.showList = false;
|
|
|
|
// this.common.titleActive = this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
|
|
|
|
// break;
|
|
|
|
// case 4:
|
|
|
|
// this.city.id = id;
|
|
|
|
// this.city.allTitle = caption;
|
|
|
|
// this.city.title = this.titleHandle(caption);
|
|
|
|
// this.area.title = "请选择";
|
|
|
|
// this.area.showList = this.city.titleActive = true;
|
|
|
|
// this.province.showList = this.city.showList = this.street.showList = false;
|
|
|
|
// this.province.titleActive = this.area.titleActive = this.street.titleActive = false;
|
|
|
|
// break;
|
|
|
|
// case 6:
|
|
|
|
// this.area.id = id;
|
|
|
|
// this.area.allTitle = caption;
|
|
|
|
// this.area.title = this.titleHandle(caption);
|
|
|
|
// this.street.title = "请选择";
|
|
|
|
// this.street.showList = this.area.titleActive = true;
|
|
|
|
// this.province.showList = this.city.showList = this.area.showList = false;
|
|
|
|
// this.province.titleActive = this.city.titleActive = this.street.titleActive = false;
|
|
|
|
// break;
|
|
|
|
// case 9:
|
|
|
|
// this.street.id = id;
|
|
|
|
// this.street.allTitle = caption;
|
|
|
|
// this.street.title = this.titleHandle(caption);
|
|
|
|
// this.street.showList = this.street.titleActive = true;
|
|
|
|
// this.province.showList = this.city.showList = this.area.showList = false;
|
|
|
|
// this.province.titleActive = this.city.titleActive = this.area.titleActive = false;
|
|
|
|
// break;
|
|
|
|
// default:
|
|
|
|
// this.province.title = "请选择";
|
|
|
|
// this.province.showList = this.province.titleActive = true;
|
|
|
|
// this.city.showList = this.area.showList = this.street.showList = false;
|
|
|
|
// this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
|
|
|
|
// break;
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
|
|
|
|
// /* 获取地址数据绑定 */
|
|
|
|
// switchAddress(id, caption) {
|
|
|
|
// if (!id) {
|
|
|
|
// id = 0;
|
|
|
|
// }
|
|
|
|
|
|
|
|
// this.changeShow(id, caption);
|
|
|
|
|
|
|
|
// $.get(
|
|
|
|
// "/home/getaddress.json",
|
|
|
|
// {
|
|
|
|
// id: id
|
|
|
|
// },
|
|
|
|
// resultData => {
|
|
|
|
// /* 结果返回 */
|
|
|
|
// if (resultData.length < 1) {
|
|
|
|
// areaCode.val(id);
|
|
|
|
// let returnTitle = this.returnTitle();
|
|
|
|
|
|
|
|
// area.val(returnTitle);
|
|
|
|
// this.show = false;
|
|
|
|
|
|
|
|
// // this.$emit("modify.addressAct", {
|
|
|
|
// // code: id,
|
|
|
|
// // area: returnTitle
|
|
|
|
// // });
|
|
|
|
// }
|
|
|
|
|
|
|
|
// /* 数据绑定 */
|
|
|
|
// switch ((id + "").length) {
|
|
|
|
// case 2:
|
|
|
|
// this.citys = resultData;
|
|
|
|
// break;
|
|
|
|
// case 4:
|
|
|
|
// this.areas = resultData;
|
|
|
|
// break;
|
|
|
|
// case 6:
|
|
|
|
// this.streets = resultData;
|
|
|
|
// break;
|
|
|
|
// default:
|
|
|
|
// this.provinces = resultData;
|
|
|
|
// break;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// );
|
|
|
|
// },
|
|
|
|
|
|
|
|
// /* 关闭地址选择组件 */
|
|
|
|
// closeAddBox() {
|
|
|
|
// this.show = false;
|
|
|
|
// },
|
|
|
|
|
|
|
|
// /* 点击地址标题时的处理 */
|
|
|
|
// clickTitle(type) {
|
|
|
|
// switch (type) {
|
|
|
|
// case "province":
|
|
|
|
// if (!this.supportChangeProvince) {
|
|
|
|
// return false;
|
|
|
|
// }
|
|
|
|
// if (this.provinces.length < 1) {
|
|
|
|
// this.switchAddress();
|
|
|
|
// }
|
|
|
|
// this.province.titleActive = this.province.showList = true;
|
|
|
|
// this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
|
|
|
|
// this.city.title = this.area.title = this.street.title = "";
|
|
|
|
// break;
|
|
|
|
// case "city":
|
|
|
|
// this.city.titleActive = this.city.showList = true;
|
|
|
|
// this.province.titleActive = this.area.titleActive = this.street.titleActive = false;
|
|
|
|
// this.province.showList = this.area.showList = this.street.showList = false;
|
|
|
|
// this.area.title = this.street.title = "";
|
|
|
|
// break;
|
|
|
|
// case "area":
|
|
|
|
// this.area.titleActive = this.area.showList = true;
|
|
|
|
// this.province.titleActive = this.city.titleActive = this.street.titleActive = false;
|
|
|
|
// this.province.showList = this.city.showList = this.street.showList = false;
|
|
|
|
// this.street.title = "";
|
|
|
|
// break;
|
|
|
|
// default:
|
|
|
|
// break;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
// created: function() {
|
|
|
|
// this.switchAddress();
|
|
|
|
// }
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.disable {
|
|
|
|
color: #a6a6a6;
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-v:before {
|
|
|
|
content: "\e6ea";
|
|
|
|
}
|
|
|
|
|
|
|
|
.address-select-component {
|
|
|
|
position: fixed;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
width: 100%;
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
|
|
.address-select-box {
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
.component-title {
|
|
|
|
text-align: center;
|
|
|
|
line-height: 80px;
|
|
|
|
font-size: 32px;
|
|
|
|
color: #ccc;
|
|
|
|
padding: 0 30px;
|
|
|
|
|
|
|
|
.close {
|
|
|
|
float: right;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.head-address-ul {
|
|
|
|
margin: 0 0 0 30px;
|
|
|
|
padding: 0;
|
|
|
|
list-style: none;
|
|
|
|
overflow: hidden;
|
|
|
|
background-color: white;
|
|
|
|
font-size: 24px;
|
|
|
|
color: #444;
|
|
|
|
|
|
|
|
li {
|
|
|
|
display: block;
|
|
|
|
float: left;
|
|
|
|
height: 40px;
|
|
|
|
line-height: 40px;
|
|
|
|
position: relative;
|
|
|
|
margin-right: 70px;
|
|
|
|
}
|
|
|
|
|
|
|
|
li:last-child {
|
|
|
|
margin-right: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.head-address-li {
|
|
|
|
color: #f23030;
|
|
|
|
}
|
|
|
|
|
|
|
|
.head-address-li:after {
|
|
|
|
width: 100%;
|
|
|
|
height: 1px;
|
|
|
|
border-bottom: 2px solid #f23030;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
content: "";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.head-address-ul:after {
|
|
|
|
content: "";
|
|
|
|
width: 100%;
|
|
|
|
height: 1px;
|
|
|
|
position: absolute;
|
|
|
|
border-bottom: 1px solid #e3e5e9;
|
|
|
|
left: 0;
|
|
|
|
bottom: 0;
|
|
|
|
transform: scaleY(0.5);
|
|
|
|
-webkit-transform: scaleY(0.5);
|
|
|
|
}
|
|
|
|
|
|
|
|
.address-container {
|
|
|
|
margin: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
border-top: solid 1px #ccc;
|
|
|
|
|
|
|
|
.address-content {
|
|
|
|
transform: translate(0, 0) translateZ(0);
|
|
|
|
height: 620px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.address-ul {
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
list-style: none;
|
|
|
|
height: 100%;
|
|
|
|
overflow: auto;
|
|
|
|
font-size: 24px;
|
|
|
|
color: #232326;
|
|
|
|
|
|
|
|
li {
|
|
|
|
height: 80px;
|
|
|
|
line-height: 80px;
|
|
|
|
padding-left: 30px;
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
span {
|
|
|
|
color: #f23030;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
li:after {
|
|
|
|
content: "";
|
|
|
|
width: 100%;
|
|
|
|
height: 1px;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
bottom: 0;
|
|
|
|
transform: scaleY(0.5);
|
|
|
|
-webkit-transform: scaleY(0.5);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
