address.page.js 10.9 KB
/**
 * [个人中心]收货地址
 * @author: jiangmin
 * @date: 2016/07/05
 */
// todo 编辑时设置默认;手机号码逆向显示

var cascadingAddress = require('../plugins/cascading-address');
var dialog = require('../plugins/dialog');
var _alert = dialog.Alert;
var _confirm = dialog.Confirm;
var $addressId = $('#address_id');
var $consignee = $('#consignee');
var $address = $('#addressDetail');
var $mobile = $('#mobile');
var $phone = $('#phone');
var addressForm = $('.form-group-address');
var currentLength = $('.a-table').find('tr').length - 1;// 当前地址条数
var leftLength = 7 - currentLength;// 还剩地址条数
var reg = new RegExp(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);// 手机号码校验

require('./me');
require('../plugins/check');
require('yoho-jquery-placeholder');

$('[placeholder]').placeholder();

$(function() {
    var address = cascadingAddress({el: '#address'});

    /**
     * 公共方法
     */
    var Bll = {
        // 获取输入框输入的值
        getInfo: function() {

            return {
                id: $addressId.val(),
                consignee: $consignee.val(),
                address: $address.val(),
                mobile: $mobile.val(),
                phone: $phone.val()
            };
        },

        // 清空输入框
        clearInput: function() {
            $consignee.val('');
            $address.val('');
            $mobile.val('');
            $phone.val('');
            address.reset();
        },

        // 校验
        check: function(info) {
            var flag = true;

            info.consignee === '' ? $consignee.next().show() : $consignee.next().hide();
            info.address === '' ? $address.next().show() : $address.next().hide();
            typeof (info.area_code) === 'undefined' ?
                addressForm.css('margin-bottom', '20px').find('.error-tips').show() :
                addressForm.css('margin-bottom', '70px').find('.error-tips').hide();
            if (info.id) {
                info.mobile === '' ? $mobile.next().show() : $mobile.next().hide();

                if (info.consignee === '' || info.address === '' || info.mobile === '' ||
                    typeof (info.area_code) === 'undefined') {
                    flag = false;
                }
                return flag;
            } else {
                info.mobile === '' ? $mobile.next().show() :
                    (!reg.test(info.mobile) ? $mobile.next().html('手机号码格式不对').show() : $mobile.next().hide());

                if (info.consignee === '' || info.address === '' || info.mobile === '' || !reg.test(info.mobile) ||
                    typeof (info.area_code) === 'undefined') {
                    flag = false;
                }
                return flag;
            }

        },

        // 拼接一条数据的html
        getHtml: function(info) {
            var html = '<tr class="table-body">';

            html += '<input type="hidden" id="tr_' + info.address_id + '" value="' + info.address_id + '">' +
                '<input type="hidden" id="tr_' + info.area_code + '" value="' + info.area_code + '">' +
                '<td class=\'width-name\'>' + info.consignee + '</td>' +
                '<td class=\'width-address\'>' + info.area + '</td>' +
                '<td class=\'width-fulladdress\'>' + info.address + '</td>' +
                '<td class=\'width-mobile\'><p>' + info.mobile + '</p><p>' + info.phone + '</p></td>' +
                '<td class=\'width-opearte\'><div><span class=\'blue opreation update-address\' data-id=\'' +
                info.address_id + '\'>修改</span>\n<em class="op-sep">|</em>\n' +
                '<span class=\'blue opreation del-address\' data-id=\'' + info.address_id + '\'>删除</span>\n' +
                '<span class=\'btn set-default opreation set\' data-id=\'' + info.address_id + '\'>设为默认</span>' +
                '</div></td>';
            html += '</tr>';
            return html;
        },

        // 获取一条数据
        setInfo: function(id, td) {
            $addressId.val(id);
            $consignee.val(td.eq(0).text());
            $address.val(td.eq(2).text());
            $mobile.val(td.eq(3).children().eq(0).text());
            $phone.val(td.eq(3).children().eq(1).text());
        },

        // 设置表格头部
        setTableTile: function() {
            $('.table-title').text('已保存了' + currentLength +
                '条地址,还能保存' + leftLength + '条地址');
        }
    };


    // 保存收货地址
    $(document).on('click', '#save-address', function() {
        var info,
            area,
            areaInfo;

        info = Bll.getInfo();
        area = address.getAreaIds();
        areaInfo = address.getAreaLabels();

        info.area_code = area.split(',')[2];
        info.area = areaInfo.split(',').join(' ');

        if (Bll.check(info) === true) {

            // 新增
            if (info.id === '') {
                if (currentLength >= 7) {
                    new _alert('您最多添加7个收货地址,可删除不需要的地址后再添加新地址!').show();
                    Bll.clearInput();
                } else {
                    $.ajax({
                        type: 'POST',
                        url: '/me/address/add',
                        dataType: 'json',
                        data: info,
                        success: function(data) {
                            var html;

                            if (data.code === 200) {
                                html = Bll.getHtml(data.data);

                                currentLength++;
                                leftLength--;
                                $('tbody').append(html);
                                Bll.setTableTile();
                                Bll.clearInput();
                            } else {
                                new _alert(data.message).show();
                            }
                        }
                    });
                }
            } else { // 修改
                if (new RegExp(/^\d{3}[*]{4}\d{4}/).test(info.mobile)) {
                    $.ajax({
                        type: 'POST',
                        url: '/me/address/update',
                        dataType: 'json',
                        data: info,
                        success: function(data) {
                            if (data.code === 200) {
                                info.mobile = info.mobile.substring(0, 3) + '****' + info.mobile.substring(7, 11);
                                info.address_id = info.id;
                                $('#tr_' + info.id).parents('tr').before(Bll.getHtml(info)).remove();
                                Bll.clearInput();
                                $('.tip em').html('新增地址');
                            } else {
                                new _alert(data.message).show();
                            }
                        }
                    });
                } else if (reg.test(info.mobile)) {
                    $mobile.next().hide();
                    $.ajax({
                        type: 'POST',
                        url: '/me/address/update',
                        dataType: 'json',
                        data: info,
                        success: function(data) {
                            if (data.code === 200) {
                                info.mobile = info.mobile.substring(0, 3) + '****' + info.mobile.substring(7, 11);
                                info.address_id = info.id;
                                $('#tr_' + info.id).parents('tr').before(Bll.getHtml(info)).remove();
                                Bll.clearInput();
                                $('.tip em').html('新增地址');
                            } else {
                                new _alert(data.message).show();
                            }
                        }
                    });
                } else {
                    $mobile.next().html('手机号码格式不对').show();
                }
            }
        }

        $('#address_id').val('');

    });

    // 修改收货地址
    $(document).on('click', '.update-address', function() {
        var id = $(this).data('id');
        var tr = $(this).parents('.table-body');
        var td = tr.find('td');
        var areaCode = tr.find('input').eq(1).val();

        address.setAddress(areaCode);
        addressForm.css('margin-bottom', '70px');
        $('.error-tips').hide();
        $('.tip em').html('修改地址');
        Bll.setInfo(id, td);
    });

    // 删除收货地址
    $(document).on('click', '.del-address', function() {
        var id = $(this).data('id');
        var tr = $(this).parents('.table-body');

        var a = new _confirm({
            content: '您确定要删除收货地址吗?',
            cb: function() {
                $.ajax({
                    type: 'POST',
                    url: '/me/address/del',
                    dataType: 'json',
                    data: {
                        id: id
                    },
                    success: function() {
                        currentLength--;
                        leftLength++;
                        tr.remove();
                        Bll.setTableTile();
                        a.close();
                        Bll.clearInput();
                    }
                });
            }
        }).show();

    });

    // 设置默认收货地址
    $(document).on('click', '.set-default', function() {
        var tr = $(this).parents('.table-body');
        var tbody = tr.parent();
        var id = $(this).data('id');
        var self = this;

        $.ajax({
            type: 'POST',
            url: '/me/address/default',
            dataType: 'json',
            data: {
                id: id
            },
            success: function(data) {
                if (data.code === 200) {
                    $('.set-default').addClass('set');
                    $('.del-address').removeClass('hide');
                    $('.op-sep').removeClass('hide');
                    $('.current-default').removeClass('current-default').text('设为默认');
                    $(self).addClass('current-default').text('默认地址');
                    $(self).siblings('.del-address').addClass('hide');
                    $(self).siblings('.op-sep').addClass('hide');
                    $(self).removeClass('set');
                    tbody.find('.table-body').eq(0).before('<tr class=\'table-body select-row\'>' + tr.html() +
                        '</tr>');
                    tr.remove();
                } else {
                    new _alert(data.message).show();
                }

            }
        });

    });

    // 选中某一行
    $(document).on('mousemove', '.table-body', function() {
        $('.table-body').removeClass('select-row');
        $(this).addClass('select-row');

        $('.set').hide();
        $(this).find('.set').css('display', 'inline-block');

    });
});