Authored by 郭成尧

address-data-handle

... ... @@ -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', {
... ...