fe / yohobuywap-node · Commits

Go to a project

Authored by 陈峰
Commit 174994091c0dbec8c3d88b8c1dffb041f6e2b3b6 2 parents a26f6e7f fa2282c1

Merge branch 'feature/address4' into 'release/5.4.1' 

地址库产品验收问题整改



See merge request !271
Inline Side-by-side
Showing 4 changed files with 129 additions and 67 deletions
... ... @@ -105,13 +105,21 @@ const address = (params) => {
/* 如果有 ID 是地址编辑页面 */
if (params.id) {
return {
let returnResult = {
address: camelCase(_.find(selfAddress.data, o => {
return decodeURIComponent(o.address_id) === params.id;
})),
addressList: camelCase(result[1] ? result[1].data : []),
navTitle: '编辑地址'
};
let area = _.get(returnResult, 'address.area', '');
if (area.length > 11) {
returnResult.address.area = area.substr(0, 5) + '...' + area.substr(-5);
}
return returnResult;
} else {
return {
address: camelCase(selfAddress.data),
... ...
... ... @@ -3,21 +3,21 @@
<form class="edit-address">
<input type="hidden" name="id" value="{{address.addressId}}">
<label class="username">
收件人姓名
收 货 人 :
<input type="text" name="consignee" maxlength="20" value="{{address.consignee}}">
</label>
<label class="mobile">
手机号码
联系电话:
<input type="text" name="mobile" value="{{address.mobile}}">
</label>
<label class="area">
省市区
所在地区:
<input type="hidden" name="area_code" value="{{address.areaCode}}">
<input type="text" name="area" value="{{address.area}}" readonly>
<span class="iconfont">&#xe604;</span>
</label>
<label class="address">
详细地址
详细地址:
<textarea name="address" maxlength="255">{{address.address}}</textarea>
</label>
... ...
... ... @@ -122,7 +122,7 @@
.my-edit-address-page {
width: 100%;
color: #d0d0d0;
color: #444;
background: #f0f0f0;
.edit-address {
... ...
... ... @@ -3,10 +3,10 @@
<div class="address-select-box">
<div class="component-title"><span class="title">所在地区</span><span class="iconfont close" @click="closeAddBox">&#xe623;</span></div>
<ul class="head-address-ul">
<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>
<li v-if="province.title" :class="{ 'head-address-li': common.titleActive }" @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">
... ... @@ -27,7 +27,7 @@
</ul>
<ul v-if="street.showList" class="address-ul">
<li v-for="pstreet in streets"
@click="switchAddress(pstreet.id, pstreet.caption)">{{pstreet.caption}}
@click="switchAddress(pstreet.id, pstreet.caption, true)">{{pstreet.caption}}
<span v-if="pstreet.id === street.id" class="iconfont icon-V"></span></li>
</ul>
</div>
... ... @@ -37,6 +37,7 @@
</template>
<style>
.icon-V:before { content: "\e6ea"; }
.address-select-component {
position: fixed;
top: 0;
... ... @@ -75,7 +76,7 @@
height: 40px;
line-height: 40px;
position: relative;
margin-right: 75px;
margin-right: 70px;
}
li:last-child {
... ... @@ -93,18 +94,18 @@
position: absolute;
bottom: 0;
left: 0;
content: '';
content: "";
}
}
.head-address-ul:after {
content: '';
content: "";
width: 100%;
height: 1px;
position: absolute;
border-bottom: 1px solid #e3e5e9;
left: 0px;
bottom: 0px;
left: 0;
bottom: 0;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
... ... @@ -117,7 +118,7 @@
border-top: solid 1px #ccc;
.address-content {
transform: translate(0px, 0px) translateZ(0px);
transform: translate(0, 0) translateZ(0);
height: 620px;
.address-ul {
... ... @@ -143,12 +144,12 @@
}
li:after {
content: '';
content: "";
width: 100%;
height: 1px;
position: absolute;
left: 0px;
bottom: 0px;
left: 0;
bottom: 0;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
... ... @@ -170,121 +171,172 @@
module.exports = {
data() {
return {
provinces:[],
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 = this.province.allTitle +
this.city.allTitle +
this.area.allTitle +
this.street.allTitle;
let returnTitle = '';
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.title = caption;
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.city.titleActive = this.area.titleActive = this.street.titleActive = false;
break;
this.common.titleActive = this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
break;
case 4:
this.city.id = id;
this.city.title = caption;
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;
break;
case 6:
this.area.id = id;
this.area.title = caption;
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;
if (caption !== '全部') {
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;
if (caption.length > 5) {
this.street.title = caption.substring(0, 2) + '...' + caption.substring(caption.length - 2);
} else {
this.street.title = caption;
}
this.street.showList =this.street.titleActive = true;
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;
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;
break;
}
},
/* 获取地址数据 */
switchAddress(id, caption) {
/* 获取地址数据绑定 */
switchAddress(id, caption, isStreet) {
if (!id) {
id = 0;
}
this.changeShow(id, caption);
/* 选择全部的控制 */
if (isStreet && (id + '').length === 6) {
this.street.allTitle = this.street.title = '全部';
this.street.id = id;
areaCode.val(id);
let returnTitle = this.returnTitle();
area.val(returnTitle);
this.show = false;
}
$.get('/home/getaddress.json', {
id: id
}, resultData => {
/* 结果返回 */
/* 结果返回 */
if (resultData.length < 1) {
areaCode.val(id);
area.val(this.province.title + ' '
+ this.city.title + ' '
+ this.area.title + ' '
+ this.street.title);
let returnTitle = this.returnTitle();
area.val(returnTitle);
this.show = false;
}
/* 数据绑定 */
switch((id + '').length) {
switch ((id + '').length) {
case 2:
this.citys = resultData;
break;
break;
case 4:
this.areas = resultData;
break;
break;
case 6:
this.streets = resultData;
break;
case 9: // 该返回结果了
console.log(id);
break;
this.streets = [];
this.streets.push({
caption: '全部',
id: this.area.id
});
$.merge(this.streets, resultData);
break;
default:
this.provinces = resultData;
break;
break;
}
this.changeShow(id, caption);
});
},
... ... @@ -295,34 +347,36 @@
return;
}
areaCode.val(this.street.id || this.area.id || this.city.id || this.province.id);
area.val(this.province.title + ' '
+ this.city.title + ' '
+ this.area.title + ' '
+ this.street.title);
let returnTitle = this.returnTitle();
area.val(returnTitle);
},
/* 点击地址标题时的处理 */
clickTitle(type) {
switch(type) {
switch (type) {
case 'province':
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;
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;
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;
break;
default:
break
break
}
},
},
... ...