Authored by ccbikai

地址管理优化

@@ -16,10 +16,34 @@ var $action = $('.action'), @@ -16,10 +16,34 @@ var $action = $('.action'),
16 $area = $('.area'), 16 $area = $('.area'),
17 $footer = $('#yoho-footer'), 17 $footer = $('#yoho-footer'),
18 $confim = $('.confim-mask'), 18 $confim = $('.confim-mask'),
  19 + $pageWrap = $('.page-wrap'),
  20 + $backBtn = $('.nav-back'),
19 isSubmiting, 21 isSubmiting,
20 deleteId, 22 deleteId,
  23 + currentPage = 'address',
21 newArea = []; 24 newArea = [];
22 25
  26 +// 清除原有链接
  27 +$backBtn.attr('href', 'javascript:void(0);');
  28 +
  29 +// 自定义事件
  30 +$backBtn.on('touchend', function(e) {
  31 + console.log(currentPage);
  32 + if (currentPage === 'edit') {
  33 + $pageWrap.hide();
  34 + $pageWrap.first().show();
  35 + e.preventDefault();
  36 + currentPage = 'address';
  37 + } else if (currentPage === 'list') {
  38 + $pageWrap.hide();
  39 + $editAddressPage.show();
  40 + e.preventDefault();
  41 + currentPage = 'edit';
  42 + } else {
  43 + window.history.go(-1);
  44 + }
  45 +});
  46 +
23 function editAddress(data) { 47 function editAddress(data) {
24 data = data || {}; 48 data = data || {};
25 $addressForm.find('[name="id"]').val(data.id || ''); 49 $addressForm.find('[name="id"]').val(data.id || '');
@@ -28,7 +52,10 @@ function editAddress(data) { @@ -28,7 +52,10 @@ function editAddress(data) {
28 $addressForm.find('[name="area_code"]').val(data.areaCode || ''); 52 $addressForm.find('[name="area_code"]').val(data.areaCode || '');
29 $addressForm.find('[name="area"]').val(data.area || ''); 53 $addressForm.find('[name="area"]').val(data.area || '');
30 $addressForm.find('[name="address"]').val(data.address || ''); 54 $addressForm.find('[name="address"]').val(data.address || '');
  55 +
  56 + currentPage = 'edit';
31 $footer.hide(); 57 $footer.hide();
  58 + $pageWrap.hide();
32 $editAddressPage.show(); 59 $editAddressPage.show();
33 } 60 }
34 61
@@ -128,11 +155,15 @@ $addressForm.on('submit', function() { @@ -128,11 +155,15 @@ $addressForm.on('submit', function() {
128 // 省市区 155 // 省市区
129 $area.on('touchend', function() { 156 $area.on('touchend', function() {
130 $footer.hide(); 157 $footer.hide();
  158 + $pageWrap.hide();
131 $addressListPage.show(); 159 $addressListPage.show();
  160 + currentPage = 'list';
132 }); 161 });
133 162
134 $addressListPage.on('touchend', '.address', function() { 163 $addressListPage.on('touchend', '.address', function() {
135 - newArea.push($(this).children('.caption').text()); 164 + var caption = $(this).children('.caption').text();
  165 +
  166 + newArea.push(caption);
136 $(this).siblings().hide(); 167 $(this).siblings().hide();
137 $(this).children('ul').show(); 168 $(this).children('ul').show();
138 return false; 169 return false;
@@ -143,11 +174,13 @@ $addressListPage.on('touchend', '.address', function() { @@ -143,11 +174,13 @@ $addressListPage.on('touchend', '.address', function() {
143 $('[name="area"]').val(newArea.join(' ')); 174 $('[name="area"]').val(newArea.join(' '));
144 $('[name="area_code"]').val($(this).data('id')); 175 $('[name="area_code"]').val($(this).data('id'));
145 176
  177 + $editAddressPage.show();
  178 + currentPage = 'edit';
  179 +
146 // 恢复默认的三级选择 180 // 恢复默认的三级选择
147 $addressListPage.hide(); 181 $addressListPage.hide();
148 $addressListPage.find('ul').hide(); 182 $addressListPage.find('ul').hide();
149 $addressListPage.children('ul').show().children('li').show(); 183 $addressListPage.children('ul').show().children('li').show();
150 - $footer.show();  
151 newArea = []; 184 newArea = [];
152 return false; 185 return false;
153 }); 186 });
@@ -99,9 +99,6 @@ @@ -99,9 +99,6 @@
99 } 99 }
100 100
101 .my-edit-address-page { 101 .my-edit-address-page {
102 - position: absolute;  
103 - bottom: 0;  
104 - top: 0;  
105 width: 100%; 102 width: 100%;
106 color: #d0d0d0; 103 color: #d0d0d0;
107 background: #f0f0f0; 104 background: #f0f0f0;
@@ -175,9 +172,6 @@ @@ -175,9 +172,6 @@
175 } 172 }
176 173
177 .my-address-list-page { 174 .my-address-list-page {
178 - position: absolute;  
179 - bottom: 0;  
180 - top: 0;  
181 width: 100%; 175 width: 100%;
182 color: #444; 176 color: #444;
183 background: #fff; 177 background: #fff;
1 {{> layout/header}} 1 {{> layout/header}}
2 <div class="my-address-page yoho-page"> 2 <div class="my-address-page yoho-page">
3 - {{# address}}  
4 - <div class="address-item">  
5 - <span class="name">{{consignee}}</span>  
6 - <span class="tel">{{mobile}}</span>  
7 - <p class="address-info">{{area}} {{address}}</p>  
8 - <div class="action iconfont">  
9 - <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>  
10 - <span class="del" data-id="{{address_id}}">&#xe621;</span> 3 + <div class="page-wrap">
  4 + {{# address}}
  5 + <div class="address-item">
  6 + <span class="name">{{consignee}}</span>
  7 + <span class="tel">{{mobile}}</span>
  8 + <p class="address-info">{{area}} {{address}}</p>
  9 + <div class="action iconfont">
  10 + <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>
  11 + <span class="del" data-id="{{address_id}}">&#xe621;</span>
  12 + </div>
11 </div> 13 </div>
12 - </div>  
13 - {{/ address}}  
14 - <a class="add-address">  
15 - 添加新地址  
16 - </a> 14 + {{/ address}}
  15 + <a class="add-address">
  16 + 添加新地址
  17 + </a>
17 18
18 - <div class="confim-mask hide">  
19 - <div class="confim-box">  
20 - <div class="content">  
21 - 你确定要删除地址吗?  
22 - </div>  
23 - <div class="action">  
24 - <span class="cancel">  
25 - 取消  
26 - </span>  
27 - <span class="confim">  
28 - 确认  
29 - </span> 19 + <div class="confim-mask hide">
  20 + <div class="confim-box">
  21 + <div class="content">
  22 + 你确定要删除地址吗?
  23 + </div>
  24 + <div class="action">
  25 + <span class="cancel">
  26 + 取消
  27 + </span>
  28 + <span class="confim">
  29 + 确认
  30 + </span>
  31 + </div>
30 </div> 32 </div>
31 </div> 33 </div>
32 </div> 34 </div>
1 -<div class="my-address-list-page hide"> 1 +<div class="my-address-list-page page-wrap hide">
2 <ul class="address-list"> 2 <ul class="address-list">
3 {{# addressList}} 3 {{# addressList}}
4 <li class="address"> 4 <li class="address">
1 -<div class="my-edit-address-page hide"> 1 +<div class="my-edit-address-page page-wrap hide">
2 <form class="edit-address"> 2 <form class="edit-address">
3 <input type="hidden" name="id" value=""> 3 <input type="hidden" name="id" value="">
4 <label class="username"> 4 <label class="username">