address-act.page.js 6.39 KB
/**
 * 修改地址
 * @author: bikai<kai.bi@yoho.cn>
 * @date: 2015/11/30
 */
var $ = require('yoho-jquery'),
    Hammer = require('yoho-hammer'),
    tip = require('../plugin/tip'),
    security = require('../plugin/security'),
    loading = require('../plugin/loading');

var $addressForm = $('.edit-address'),
    $submit = $('.submit'),
    $editAddressPage = $('.my-edit-address-page'),
    $addressListPage = $('.my-address-list-page'),
    $backBtn = $('.nav-back'),
    $navTitle = $('.nav-title'),
    $input = $('input, textarea'),
    navTitle = $navTitle.html(),
    $area = $('.area'),
    isSubmiting,
    currentPage = 'edit',
    newArea = [];

require('../common.js');

$($editAddressPage, $addressListPage).css('min-height', function() {
    return $(window).height() - $('#yoho-header').height();
});

// 清除返回按钮原有链接
$backBtn.attr('href', 'javascript:void(0);');

// 自定义返回按钮事件
$backBtn.on('touchend', function(e) {
    if (currentPage === 'list') {
        $addressListPage.hide();
        $editAddressPage.show();
        e.preventDefault();
        currentPage = 'edit';
        $navTitle.html(navTitle);

        // 恢复默认的三级选择
        $addressListPage.hide();
        $addressListPage.find('ul').hide().find('li').removeClass('highlight');
        $addressListPage.children('ul').show().children('li').show();
        newArea = [];
    } else {
        window.history.go(-1);
    }
});

// 提交表单请求
$addressForm.on('submit', function() {
    if (isSubmiting) {
        return false;
    }

    if (security.hasDangerInput(false)) {
        return false;
    }

    // 简单的表单校验
    if (!$(this).find('[name="consignee"]').val()) {
        tip.show('收件人不能为空');
        return false;
    }
    if (!$(this).find('[name="mobile"]').val()) {
        tip.show('手机号不能为空');
        return false;
    }
    if (!$(this).find('[name="area_code"]').val() || !$(this).find('[name="area"]').val()) {
        tip.show('省市区不能为空');
        return false;
    }
    if (!$(this).find('[name="address"]').val()) {
        tip.show('地址不能为空');
        return false;
    }

    isSubmiting = true;
    loading.showLoadingMask();
    $submit.css('background', '#777');
    console.log(window.queryString.refer);
    $.ajax({
        method: 'POST',
        url: '/home/saveAddress',
        data: $(this).serialize()
    }).then(function(res) {
        if ($.type(res) !== 'object') {
            res = {};
        }
        if (res.code !== 200) {
            tip.show(res.message || '网络出了点问题~');
            isSubmiting = false;
            loading.hideLoadingMask();
        } else if (window.queryString) {
            if (window.queryString.refer === 'shopping') {
                window.location.href = '/cart/index/selectAddress';
            } else if (window.queryString.refer === 'modify') {
                window.location.href = '/home/addressModify';
            } else {
                window.location.href = '/home/address';
            }
        } else {
            window.location.href = '/home/address';
        }
    }).fail(function() {
        tip.show('网络出了点问题~');
        isSubmiting = false;
        loading.hideLoadingMask();
        $submit.css('background', '#444');
    });
    return false;
});

$submit.on('touchend', function() {
    if (security.hasDangerInput(false)) {
        return false;
    }
    $input.blur();
    $addressForm.submit();
    return false;
}).on('touchstart', function() {
    $(this).addClass('highlight');
}).on('touchend touchcancel', function() {
    $(this).removeClass('highlight');
});

function bindAddressListEvent(html) {
    $addressListPage.html(html);

    // 省市区
    $area.on('touchend', function() {
        $editAddressPage.hide();
        $addressListPage.show();
        currentPage = 'list';
        $navTitle.html('地区选择');
    });

    // touchend 在下滑的时候会触发
    // 省市区联动
    $addressListPage.find('.address').each(function(i, elem) {
        var addressHammer = new Hammer(elem);

        addressHammer.on('tap', function(e) {
            var $this = $(e.target);

            if (e.target.tagName.toLowerCase() !== 'li') {
                $this = $this.parent('li');
            }
            newArea.push($this.children('.caption').text().trim());
            $this.siblings().hide();
            $this.children('ul').show().children('li').show();

            e.srcEvent.preventDefault();
            e.srcEvent.stopPropagation();
        });
    });

    $addressListPage.find('.address-last').each(function(i, elem) {
        var addressLastHammer = new Hammer(elem);

        addressLastHammer.on('tap', function(e) {
            var $this = $(e.target);

            // 填结果到 html
            newArea.push($this.text().trim());
            $('[name="area"]').val(newArea.join(' '));
            $('[name="area_code"]').val($this.data('id'));

            $editAddressPage.show();
            currentPage = 'edit';
            $navTitle.html(navTitle);

            // 恢复默认的三级选择
            $addressListPage.hide();
            $addressListPage.find('ul').hide().find('li').removeClass('highlight');
            $addressListPage.children('ul').show().children('li').show();
            newArea = [];

            e.srcEvent.preventDefault();
            e.srcEvent.stopPropagation();
        });
    });

    $addressListPage.on('touchstart', 'li', function() {
        $(this).addClass('highlight');
    }).on('touchend touchcancel', 'li', function() {
        $(this).removeClass('highlight');
    });
}

// 读取省市区列表缓存
// if (window.localStorage && window.localStorage.getItem) {
//     chinaAddressList = window.localStorage.getItem('chinaAddressList');
// }

// if (chinaAddressList) {
//     bindAddressListEvent(chinaAddressList);
// } else {

    // 省市区列表异步加载
$.ajax({
    method: 'GET',
    url: '/home/locationList',
    timeout: 60000,
    cache: true
}).then(function(html) {
    bindAddressListEvent(html);

        // if (window.localStorage && window.localStorage.setItem) {
        //     window.localStorage.setItem('chinaAddressList', html);
        // }
}).fail(function() {
    tip.show('获取省市区列表失败');
});

// }
var Vue = require('vue');

var app = require('home/address/address-act.vue');

new Vue({
    el: '#app',
    components: {
        app: app
    }
});