fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit 243ec3601081eaf3384a1c313a06bb9b5bd7d3ab 1 parent 87dcea8e

title-change

Inline Side-by-side
Showing 1 changed file with 130 additions and 45 deletions
... ... @@ -3,16 +3,24 @@
<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.name" :class="{ 'head-address-li': province.active }" @click="getAddress()">{{province.name}}</li>
<li v-else class="head-address-li">请选择</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>
<li v-if="province.title" :class="{ 'head-address-li': province.titleActive }" @click="clickTitle('province')">{{province.title}}</li>
<li v-if="city.title" :class="{ 'head-address-li': city.titleActive }" @click="clickTitle('city')">{{city.title}}</li>
<li v-if="area.title" :class="{ 'head-address-li': area.titleActive }" @click="clickTitle('area')">{{area.title}}</li>
<li v-if="street.title" :class="{ 'head-address-li': street.titleActive }">{{street.title}}</li>
</ul>
<div class="address-container">
<div class="address-content">
<ul class="address-ul">
<li v-for="address in addresses" @click="getAddress(address.id, address.caption)">{{address.caption}}</li>
<ul v-if="province.showList" class="address-ul">
<li v-for="province in provinces" @click="switchAddress(province.id, province.caption)">{{province.caption}}</li>
</ul>
<ul v-if="city.showList" class="address-ul">
<li v-for="city in citys" @click="switchAddress(city.id, city.caption)">{{city.caption}}</li>
</ul>
<ul v-if="area.showList" class="address-ul">
<li v-for="area in areas" @click="switchAddress(area.id, area.caption)">{{area.caption}}</li>
</ul>
<ul v-if="street.showList" class="address-ul">
<li v-for="street in streets" @click="switchAddress(street.id, street.caption)">{{street.caption}}</li>
</ul>
</div>
</div>
... ... @@ -142,70 +150,147 @@
module.exports = {
data() {
return {
addresses:[],
provinces:[],
citys: [],
areas: [],
streets: [],
show: false,
province: {
name: '',
active: false
id: '',
title: '',
showList: true,
titleActive: false,
},
city: {
name: '',
active: false
id: '',
title: '',
showList: false,
titleActive: false,
},
area: {
name: '',
active: false
id: '',
title: '',
showList: false,
titleActive: false,
},
street: {
name: '',
active: false
id: '',
title: '',
showList: false,
titleActive: false,
}
};
},
methods: {
/* 选择地址后的显示控制 */
changeShow(id, caption) {
switch ((id + '').length) {
case 2:
this.province.title = caption;
this.city.showList = true;
this.province.showList = this.area.showList = this.street.showList = false;
this.province.titleActive = true;
this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
break;
case 4:
this.city.title = caption;
this.area.showList = true;
this.province.showList = this.city.showList = this.street.showList = false;
this.city.titleActive = true;
this.province.titleActive = this.area.titleActive = this.street.titleActive = false;
break;
case 6:
this.area.title = caption;
this.street.showList = true;
this.province.showList = this.city.showList = this.area.showList = false;
this.area.titleActive = true;
this.province.titleActive = this.city.titleActive = this.street.titleActive = false;
break;
case 9: // 一定要返回结果了
if (caption.length > 5) {
this.street.title = caption.substring(0, 2) + '...' + caption.substring(caption.length - 2);
} else {
this.street.title = caption;
}
this.street.showList = true;
this.province.showList = this.city.showList = this.area.showList = false;
this.street.titleActive = true;
this.province.titleActive = this.city.titleActive = this.area.titleActive = false;
break;
default:
this.province.title = '请选择';
this.province.showList = true;
this.city.showList = this.area.showList = this.street.showList = false;
this.province.titleActive = true;
this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
break;
}
},
/* 获取地址数据 */
getAddress(id, caption) {
switchAddress(id, caption) {
if (!id) {
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.name = caption.substring(0,2) + '...' + caption.substring(caption.length - 2);
} else {
this.street.name = caption;
}
this.street.active = true;
this.area.active = false;
id = 0;
}
$.get('/home/getaddress.json', {
id: id || '0'
id: id
}, resultData => {
this.addresses = resultData;
/* 数据绑定 */
switch((id + '').length) {
case 2:
this.citys = resultData;
break;
case 4:
this.areas = resultData;
break;
case 6:
this.streets = resultData;
break;
case 9: // 该返回结果了
console.log(id);
break;
default:
this.provinces = resultData;
break;
}
this.changeShow(id, caption);
});
},
/* 关闭地址选择组件 */
closeAddBox() {
this.show = false;
}
},
/* 点击地址标题时的处理 */
clickTitle(type) {
switch(type) {
case 'province':
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.getAddress();
this.switchAddress();
}
};
... ...