fe / YOHOBUYPC · Commits

Go to a project

Authored by 毕凯
Commit 7ff67c313377132fcb3f3677b06dd18e65c3e83d 1 parent 9be53d3d

地址修改 省市区列表异步加载

Inline Side-by-side
Showing 3 changed files with 77 additions and 70 deletions
... ... @@ -13,11 +13,11 @@ var $addressForm = $('.edit-address'),
$submit = $('.submit'),
$editAddressPage = $('.my-edit-address-page'),
$addressListPage = $('.my-address-list-page'),
$area = $('.area'),
$footer = $('#yoho-footer'),
$backBtn = $('.nav-back'),
$navTitle = $('.nav-title'),
navTitle = $navTitle.html(),
$area = $('.area'),
isSubmiting,
currentPage = 'edit',
newArea = [];
... ... @@ -109,6 +109,12 @@ $submit.on('touchend', function() {
$(this).removeClass('highlight');
});
$('input, textarea').on('focus', function() {
$footer.hide();
}).on('blur', function() {
$footer.show();
});
// 省市区
$area.on('touchend', function() {
$editAddressPage.hide();
... ... @@ -119,58 +125,59 @@ $area.on('touchend', function() {
$navTitle.html('地区选择');
});
// touchend 在下滑的时候会触发
// 省市区联动
$addressListPage.find('.address').each(function(i, elem) {
var addressHammer = new Hammer(elem);
// 省市区列表异步加载
$.get('/home/locationList').then(function(html) {
$addressListPage.html(html);
// touchend 在下滑的时候会触发
// 省市区联动
$addressListPage.find('.address').each(function(i, elem) {
var addressHammer = new Hammer(elem);
addressHammer.on('tap', function(e) {
var $this = $(e.target);
addressHammer.on('tap', function(e) {
var $this = $(e.target);
newArea.push($this.children('.caption').text());
$this.siblings().hide();
$this.children('ul').show().children('li').show();
newArea.push($this.children('.caption').text());
$this.siblings().hide();
$this.children('ul').show().children('li').show();
e.srcEvent.preventDefault();
e.srcEvent.stopPropagation();
e.srcEvent.preventDefault();
e.srcEvent.stopPropagation();
});
});
});
$addressListPage.find('.address-last').each(function(i, elem) {
var addressLastHammer = new Hammer(elem);
$addressListPage.find('.address-last').each(function(i, elem) {
var addressLastHammer = new Hammer(elem);
addressLastHammer.on('tap', function(e) {
var $this = $(e.target);
addressLastHammer.on('tap', function(e) {
var $this = $(e.target);
// 填结果到 html
newArea.push($this.children('.caption').text());
$('[name="area"]').val(newArea.join(' '));
$('[name="area_code"]').val($this.data('id'));
// 填结果到 html
newArea.push($this.children('.caption').text());
$('[name="area"]').val(newArea.join(' '));
$('[name="area_code"]').val($this.data('id'));
$editAddressPage.show();
currentPage = 'edit';
$navTitle.html(navTitle);
$footer.show();
$editAddressPage.show();
currentPage = 'edit';
$navTitle.html(navTitle);
$footer.show();
// 恢复默认的三级选择
$addressListPage.hide();
$addressListPage.find('ul').hide().find('li').removeClass('highlight');
$addressListPage.children('ul').show().children('li').show();
newArea = [];
// 恢复默认的三级选择
$addressListPage.hide();
$addressListPage.find('ul').hide().find('li').removeClass('highlight');
$addressListPage.children('ul').show().children('li').show();
newArea = [];
e.srcEvent.preventDefault();
e.srcEvent.stopPropagation();
e.srcEvent.preventDefault();
e.srcEvent.stopPropagation();
});
});
});
$addressListPage.on('touchstart', 'li', function() {
$(this).addClass('highlight');
}).on('touchend touchcancel', 'li', function() {
$(this).removeClass('highlight');
});
$('input, textarea').on('focus', function() {
$footer.hide();
}).on('blur', function() {
$footer.show();
$addressListPage.on('touchstart', 'li', function() {
$(this).addClass('highlight');
}).on('touchend touchcancel', 'li', function() {
$(this).removeClass('highlight');
});
}).fail(function() {
tip.show('获取省市区列表失败');
});
... ...
... ... @@ -18,7 +18,7 @@
<span class="iconfont">&#xe604;</span>
</label>
<label class="address">
详细地址
详细地址
<textarea name="address" maxlength="255">{{address.address}}</textarea>
</label>
... ... @@ -28,5 +28,7 @@
确认
</div>
</div>
<div class="my-address-list-page page-wrap hide">
</div>
</div>
{{> layout/footer}}
\ No newline at end of file
{{> layout/footer}}
... ...
<div class="my-address-list-page page-wrap hide">
<ul class="address-list">
{{# addressList}}
<li class="address">
<span class="caption">{{caption}}</span>
<span class="iconfont">&#xe604;</span>
<ul>
{{# sub}}
<li class="address">
<span class="caption">{{caption}}</span>
<span class="iconfont">&#xe604;</span>
<ul class="address-list">
{{# sub}}
<li class="address-last" data-id="{{code}}">
<span class="caption">{{caption}}</span>
</li>
{{/ sub}}
</ul>
</li>
{{/ sub}}
</ul>
</li>
{{/ addressList}}
</ul>
</div>
\ No newline at end of file
<ul class="address-list">
{{# addressList}}
<li class="address">
<span class="caption">{{caption}}</span>
<span class="iconfont">&#xe604;</span>
<ul>
{{# sub}}
<li class="address">
<span class="caption">{{caption}}</span>
<span class="iconfont">&#xe604;</span>
<ul class="address-list">
{{# sub}}
<li class="address-last" data-id="{{code}}">
<span class="caption">{{caption}}</span>
</li>
{{/ sub}}
</ul>
</li>
{{/ sub}}
</ul>
</li>
{{/ addressList}}
</ul>
... ...