fe / YOHO-ACTIVITY-PHP · Commits

Go to a project

Authored by ccbikai
Commit c5ed8d416f4b672f23e1ec4a0835f8a16a77d60a 1 parent 3a418937

地址管理优化

Inline Side-by-side
Showing 5 changed files with 64 additions and 35 deletions
... ... @@ -16,10 +16,34 @@ var $action = $('.action'),
$area = $('.area'),
$footer = $('#yoho-footer'),
$confim = $('.confim-mask'),
$pageWrap = $('.page-wrap'),
$backBtn = $('.nav-back'),
isSubmiting,
deleteId,
currentPage = 'address',
newArea = [];
// 清除原有链接
$backBtn.attr('href', 'javascript:void(0);');
// 自定义事件
$backBtn.on('touchend', function(e) {
console.log(currentPage);
if (currentPage === 'edit') {
$pageWrap.hide();
$pageWrap.first().show();
e.preventDefault();
currentPage = 'address';
} else if (currentPage === 'list') {
$pageWrap.hide();
$editAddressPage.show();
e.preventDefault();
currentPage = 'edit';
} else {
window.history.go(-1);
}
});
function editAddress(data) {
data = data || {};
$addressForm.find('[name="id"]').val(data.id || '');
... ... @@ -28,7 +52,10 @@ function editAddress(data) {
$addressForm.find('[name="area_code"]').val(data.areaCode || '');
$addressForm.find('[name="area"]').val(data.area || '');
$addressForm.find('[name="address"]').val(data.address || '');
currentPage = 'edit';
$footer.hide();
$pageWrap.hide();
$editAddressPage.show();
}
... ... @@ -128,11 +155,15 @@ $addressForm.on('submit', function() {
// 省市区
$area.on('touchend', function() {
$footer.hide();
$pageWrap.hide();
$addressListPage.show();
currentPage = 'list';
});
$addressListPage.on('touchend', '.address', function() {
newArea.push($(this).children('.caption').text());
var caption = $(this).children('.caption').text();
newArea.push(caption);
$(this).siblings().hide();
$(this).children('ul').show();
return false;
... ... @@ -143,11 +174,13 @@ $addressListPage.on('touchend', '.address', function() {
$('[name="area"]').val(newArea.join(' '));
$('[name="area_code"]').val($(this).data('id'));
$editAddressPage.show();
currentPage = 'edit';
// 恢复默认的三级选择
$addressListPage.hide();
$addressListPage.find('ul').hide();
$addressListPage.children('ul').show().children('li').show();
$footer.show();
newArea = [];
return false;
});
... ...
... ... @@ -99,9 +99,6 @@
}
.my-edit-address-page {
position: absolute;
bottom: 0;
top: 0;
width: 100%;
color: #d0d0d0;
background: #f0f0f0;
... ... @@ -175,9 +172,6 @@
}
.my-address-list-page {
position: absolute;
bottom: 0;
top: 0;
width: 100%;
color: #444;
background: #fff;
... ...
{{> layout/header}}
<div class="my-address-page yoho-page">
{{# address}}
<div class="address-item">
<span class="name">{{consignee}}</span>
<span class="tel">{{mobile}}</span>
<p class="address-info">{{area}} {{address}}</p>
<div class="action iconfont">
<span class="edit" data-id="{{address_id}}" data-consignee="{{consignee}}" data-mobile="{{mobile}}" data-area-code="{{area_code}}" data-area="{{area}}" data-address="{{address}}">&#xe61e;</span>
<span class="del" data-id="{{address_id}}">&#xe621;</span>
<div class="page-wrap">
{{# address}}
<div class="address-item">
<span class="name">{{consignee}}</span>
<span class="tel">{{mobile}}</span>
<p class="address-info">{{area}} {{address}}</p>
<div class="action iconfont">
<span class="edit" data-id="{{address_id}}" data-consignee="{{consignee}}" data-mobile="{{mobile}}" data-area-code="{{area_code}}" data-area="{{area}}" data-address="{{address}}">&#xe61e;</span>
<span class="del" data-id="{{address_id}}">&#xe621;</span>
</div>
</div>
</div>
{{/ address}}
<a class="add-address">
添加新地址
</a>
{{/ address}}
<a class="add-address">
添加新地址
</a>
<div class="confim-mask hide">
<div class="confim-box">
<div class="content">
你确定要删除地址吗？
</div>
<div class="action">
<span class="cancel">
取消
</span>
<span class="confim">
确认
</span>
<div class="confim-mask hide">
<div class="confim-box">
<div class="content">
你确定要删除地址吗？
</div>
<div class="action">
<span class="cancel">
取消
</span>
<span class="confim">
确认
</span>
</div>
</div>
</div>
</div>
... ...
<div class="my-address-list-page hide">
<div class="my-address-list-page page-wrap hide">
<ul class="address-list">
{{# addressList}}
<li class="address">
... ...
<div class="my-edit-address-page hide">
<div class="my-edit-address-page page-wrap hide">
<form class="edit-address">
<input type="hidden" name="id" value="">
<label class="username">
... ...