address.page.js 10.1 KB
/**
 * 个人中心页-地址管理
 * @author: wsl<shuiling.wang@yoho.cn>
 * @date: 2016/02/24
 */
var $ = require('yoho-jquery');

var regionCode = require('./common-address');

var dialog = require('../common/dialog');

var Alert = dialog.Alert;

var active;

var $del = $('.address-del'),
    $edit = $('.address-modify'),
    $input = $('.input-1'),
    saveFlag = true;

var address = {

    evil: function(fn) {
        var Fn = Function;

        return new Fn('return ' + fn)();
    },

    clearAddrForm: function() {
        $('#addressName').val('');
        $('#address').val('');
        $('#zipCode').val('');
        $('#phone').val('');
        $('#mobile').val('');
        $('#email').val('');
        $('#addrId').val(0);
        $('#province').val(0);
        $('#city').val(0);
        $('#areaCode').val(0).hide();
        $('#streets').val(0).hide();
        $('#btn-reset').hide();
        $('#form-status').html('添加新地址');
    },

    editAddr: function(id) {
        $.getJSON('/home/address/editAddress?id=' + id, function(jsonData) {
            if (jsonData.code === 200) {
                $('#form-status').html('修改地址');
                $('#addressName').val(jsonData.data.consignee);

                regionCode.loadAllData(jsonData.data.area_code, {}, true);
                $('#address').val(jsonData.data.address);
                $('#email').val(jsonData.data.email);
                $('#phone').val(jsonData.data.phone);
                $('#mobile').val(jsonData.data.mobile);
                $('#zipCode').val(jsonData.data.zip_code);
                $('#addrId').val(jsonData.data.address_id);
                $('#btn-reset').show();
            }
        });
    },

    saveAddr: function() {
        if(!saveFlag) {
            return;
        }
        saveFlag = false;
        $.post('/home/address/saveAddress', $('#address-form').serialize(), function(data) {
            if (data.code === 200) {
                location.reload();
            } else {
                active = new Alert(data.message);
                active.show();
            }
            saveFlag = true;
        }, 'json');
    },

    // 删除地址
    delAddr: function(addrId) {
        $.getJSON('/home/address/delAddress?id=' + addrId, function(jsonData) {
            if (jsonData.code === 200) {
                $('.address-list').find('li[addressId=' + addrId + ']').remove();
                if (addrId === $('#addrId').val()) {
                    address.clearAddrForm();
                }
            } else {
                active = new Alert('删除失败');
                active.show();
            }
        });
    },

    setDefaultAddr: function(addrId) {
        var oldBtn = $('.address-list').find('.default-btn'),
            oldLi = $('.address-list').find('.default-btn').parents('li'),
            curLi = $('.address-list').find('li[addressId=' + addrId + ']'),
            curBtn = curLi.find('.set-default-btn');

        $.getJSON('/home/address/defaultAddress?id=' + addrId, function(jsonData) {
            if (jsonData.code === 200) {
                oldBtn.attr('class', 'btn-c3 set-default-btn');
                oldLi.removeClass('preferred');
                oldBtn.html('<span>设为常用地址</span>');
                curBtn.attr('class', 'btn-c2 default-btn');
                curBtn.html('<span>已设为常用地址</span>');
                curLi.addClass('preferred');
            } else {
                active = new Alert('设置失败');
                active.show();
            }
        });
    }
};

require('../common');

if (!Array.prototype.indexOf) {// eslint-disable-line
    Array.prototype.indexOf = function(obj, start) {// eslint-disable-line
        var i,
            j;

        for (i = (start || 0), j = this.length; i < j; i++) {
            if (this[i] === obj) {
                return i;
            }
        }

        return -1;
    };
}

// 获取地址id
function getAddressId(dom) {
    var li = dom.parents('.address-content'),
        id = li.attr('addressId');

    return id;
}

// 表单焦点显示
function focusAction(opt) {
    var msg = '';

    if (opt.inputName === 'addressName') {
        msg = '真实姓名在2到5个汉字之间';
    }

    if (opt.inputName === 'address') {
        msg = '请填写详细地址';
    }

    if (opt.inputName === 'zipCode') {
        msg = '请输入收货人所在地邮编号';
    }

    if (opt.inputName === 'phone') {
        msg = '格式例如:0577-88888888';
    }

    if (opt.inputName === 'mobile') {
        msg = '请输入手机号,如1360000000';
    }

    if (opt.inputName === 'email') {
        msg = '用来接收订单提醒邮件,便于您及时了解订单状态';
    }

    opt.$checkInfo.removeClass('form-prompt').addClass('form-focus').html(msg);
}

// 表单失去焦点显示
function blurAction(opt) {
    var regular = '',
        res = true,
        msg = '输入正确',
        domClass = 'form-info form-success',
        value = opt.val;

    if (opt.inputName === 'addressName') {
        regular = /^[\u4e00-\u9fa5]{2,5}$/;

        if (opt.len < 1 || opt.len > 12) {
            msg = '真实姓名在2到5个汉字之间,请确认';
            res = false;
            domClass = 'form-info form-error';
        } else if (regular.test(opt.val) === false) {
            msg = '真实姓名至少2个中文,最多5个中文';
            res = false;
            domClass = 'form-info form-error';
        }
    }

    if (opt.inputName === 'address') {
        if (opt.len < 2) {
            msg = '请填写详细地址';
            res = false;
            domClass = 'form-info form-error';
        }
    }

    if (opt.inputName === 'zipCode') {
        regular = /^[0-9]{6}$/;

        if (opt.len === 0) {
            msg = '请输入收货人所在地邮编号';
            res = false;
            domClass = 'form-info form-error';
        } else if (regular.test(opt.val) === false) {
            msg = '你输入的邮编式不正确';
            res = false;
            domClass = 'form-info form-error';
        }
    }

    if (opt.inputName === 'phone') {
        regular = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;

        if (opt.len === 0) {
            msg = '你真的不想留联系电话了吗?';
            res = true;
            domClass = 'form-info form-success';
        } else if (regular.test(opt.val) === false) {
            msg = '你输入的联系电话格式不正确';
            res = false;
            domClass = 'form-info form-error';
        }
    }

    if (opt.inputName === 'mobile') {
        regular = /^[0-9]{1,}$/;

        if (regular.test(opt.val) === false) {
            msg = '您输入的手机号格式不正确';
            res = false;
            domClass = 'form-info form-error';
        }
    }

    if (opt.inputName === 'email') {
        regular = '^[a-z0-9_\-]+(\.[_a-z0-9\-]+)*@([_a-z0-9\-]+\.)+([a-z]{2}|aero|arpa|biz|com|coop|' +
                    'edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel)$';

        if (value.match(regular) === null || opt.len === 0) {
            msg = '你输入的邮件地址格式不正确';
            res = false;
            domClass = 'form-info form-error';
        }
    }

    opt.$checkInfo.removeClass().addClass(domClass).html(msg);
    return res;
}


// 地址表单验证
function checkAddressForm(dom, action) {
    var val = dom.val(),
        $domParent = dom.parent(),
        opt = {
            val: val,
            len: val.length,
            $domParent: dom.parent(),
            $checkInfo: $domParent.find('span'),
            inputName: dom.attr('name')
        };

    if (action === 'focus') {
        focusAction(opt);
    }

    if (action === 'blur') {
        return blurAction(opt);
    }
}

function fullOneValidator() {
    var phone = $('#phone').next(),
        mobile = $('#mobile').next();

    if (mobile.hasClass('form-success') && !phone.hasClass('form-error') && $('#phone').val().length === 0) {
        phone.removeClass().addClass('form-prompt form-info').html('请输入你的联系电话,可以为空哦');
        return true;
    } else if (phone.html() === '输入正确' && !mobile.hasClass('form-error') && $('#mobile').val().length === 0) {
        mobile.removeClass().addClass('form-prompt form-info').html('填写手机号便于接收发货和收货通知');
        return true;
    } else if (!mobile.hasClass('form-success') && phone.html() !== '输入正确') {
        phone.removeClass().addClass('form-success form-info').html('你真的不想留联系电话了吗?');
        mobile.removeClass().addClass('form-prompt form-info').html('填写手机号便于接收发货和收货通知');
        $('#mobile').focus();
        return false;
    }
}

// 校验所有内容
function checkAllForm() {
    var arr = [];

    $.each($input, function(key, item) {
        arr.push(checkAddressForm($(item), 'blur'));
    });

    arr.push(fullOneValidator());

    $.each($('.form-info'), function(key, item) {
        if ($(item).hasClass('form-error')) {
            $(item).prev().focus();
            return false;
        }
    });


    if (arr.indexOf(false) === -1) {
        return true;
    } else {
        return false;
    }
}

$(document).on('click', '.set-default-btn', function() {
    var id = getAddressId($(this));

    address.setDefaultAddr(id);
});

$del.on('click', function() {
    var id = getAddressId($(this));

    address.delAddr(id);
});

$edit.on('click', function() {
    var id = getAddressId($(this));

    address.editAddr(id);
    $('#btn-reset').show();
});

$input.on('focus', function() {
    checkAddressForm($(this), 'focus');
});

$input.on('blur', function() {
    checkAddressForm($(this), 'blur');
});

$('#address-info').on('click', function() {
    if (checkAllForm()) {
        address.saveAddr();
    }
});

$(document).ready(function() {
    regionCode.loadAllData(
        0,
        {
            provinceDomId: 'province',
            cityDomId: 'city',
            areaDomId: 'areaCode',
            streetsDomId: 'streets'
        }
    );

    address.clearAddrForm();

    $('#btn-reset').click(function() {
        address.clearAddrForm();
    });
});