...
|
...
|
@@ -3,11 +3,11 @@ |
|
|
<div class="address-select-box">
|
|
|
<div class="component-title"><span class="title">所在地区</span><span class="iconfont close" @click="closeAddBox">X</span></div>
|
|
|
<ul class="head-address-ul">
|
|
|
<li v-if="province" :class="{ 'head-address-li': provinceActive }" @click="getAddress()">{{province}}</li>
|
|
|
<li v-if="province.name" :class="{ 'head-address-li': province.active }" @click="getAddress()">{{province.name}}</li>
|
|
|
<li v-else class="head-address-li">请选择</li>
|
|
|
<li v-if="city" :class="{ 'head-address-li': cityActive }">{{city}}</li>
|
|
|
<li v-if="area" :class="{ 'head-address-li': areaActive }">{{area}}</li>
|
|
|
<li v-if="street" :class="{ 'head-address-li': streetActive }">{{street}}</li>
|
|
|
<li v-if="city.name" :class="{ 'head-address-li': city.active }">{{city.name}}</li>
|
|
|
<li v-if="area.name" :class="{ 'head-address-li': area.active }">{{area.name}}</li>
|
|
|
<li v-if="street.name" :class="{ 'head-address-li': street.active }">{{street.name}}</li>
|
|
|
</ul>
|
|
|
<div class="address-container">
|
|
|
<div class="address-content">
|
...
|
...
|
@@ -144,49 +144,52 @@ |
|
|
return {
|
|
|
addresses:[],
|
|
|
show: false,
|
|
|
province: '',
|
|
|
provinceActive: false,
|
|
|
city: '',
|
|
|
cityActive: false,
|
|
|
area: '',
|
|
|
areaActive: false,
|
|
|
street: '',
|
|
|
streetActive: false
|
|
|
};
|
|
|
province: {
|
|
|
name: '',
|
|
|
active: false
|
|
|
},
|
|
|
watch: {
|
|
|
province: function() {
|
|
|
|
|
|
city: {
|
|
|
name: '',
|
|
|
active: false
|
|
|
},
|
|
|
area: {
|
|
|
name: '',
|
|
|
active: false
|
|
|
},
|
|
|
street: {
|
|
|
name: '',
|
|
|
active: false
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
/* 获取地址数据 */
|
|
|
getAddress(id, caption) {
|
|
|
if (!id) {
|
|
|
this.province = this.city = this.area = this.street = '';
|
|
|
this.provinceActive = true;
|
|
|
this.cityActive = this.areaActive = this.streetActive = false;
|
|
|
}
|
|
|
if (!this.province) {
|
|
|
this.province = caption;
|
|
|
this.provinceActive = true;
|
|
|
} else if (!this.city) {
|
|
|
this.city = caption;
|
|
|
this.cityActive = true;
|
|
|
this.provinceActive = false;
|
|
|
} else if (!this.area) {
|
|
|
this.area = caption;
|
|
|
this.areaActive = true;
|
|
|
this.cityActive = false;
|
|
|
} else if (!this.street) {
|
|
|
this.province.name = this.city.name = this.area.name = this.street.name = '';
|
|
|
this.province.active = true;
|
|
|
this.city.active = this.area.active = this.street.active = false;
|
|
|
}
|
|
|
if (!this.province.name) {
|
|
|
this.province.name = caption;
|
|
|
this.province.active = true;
|
|
|
} else if (!this.city.name) {
|
|
|
this.city.name = caption;
|
|
|
this.city.active = true;
|
|
|
this.province.active = false;
|
|
|
} else if (!this.area.name) {
|
|
|
this.area.name = caption;
|
|
|
this.area.active = true;
|
|
|
this.city.active = false;
|
|
|
} else if (!this.street.name) {
|
|
|
if (caption.length > 5) {
|
|
|
this.street = caption.substring(0,2) + '...' + caption.substring(caption.length - 2);
|
|
|
this.street.name = caption.substring(0,2) + '...' + caption.substring(caption.length - 2);
|
|
|
} else {
|
|
|
this.street = caption;
|
|
|
this.street.name = caption;
|
|
|
}
|
|
|
this.streetActive = true;
|
|
|
this.areaActive = false;
|
|
|
this.street.active = true;
|
|
|
this.area.active = false;
|
|
|
}
|
|
|
|
|
|
$.get('/home/getaddress.json', {
|
...
|
...
|
|