address.page.js 7.29 KB
/**
 * [个人中心]收货地址
 * @author: jiangmin
 * @date: 2016/07/05
 */


var cascadingAddress = require('../plugins/cascading-address');
var dialog = require('../plugins/dialog');
var _confirm = dialog.Confirm;
var $addressId = $('#address_id');
var $consignee = $('#consignee');
var $address = $('#addressDetail');
var $mobile = $('#mobile');
var $phone = $('#phone');
var currentLength = $('.a-table').find('tr').length - 1;// 当前地址条数
var leftLength = 20 - currentLength;// 还剩地址条数

var Bll = {
    // 获取输入框输入的值
    getInfo() {
        // todo uid
        var uid = '123456';

        return {
            id: $addressId.val(),
            uid: uid,
            consignee: $consignee.val(),

            // todo 地址码
            address: $address.val(),
            mobile: $mobile.val(),
            phone: $phone.val()

            // todo 设置默认值
        };
    },

    // 清空输入框
    clearInput() {
        $consignee.val('');

        // todo 省市区清空
        $address.val('');
        $mobile.val('');
        $phone.val('');
    },

    // 校验
    check(info) {
        let flag = true;
        let reg = new RegExp(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);

        if (info.consignee === '' || info.address === '' || info.mobile === '') {
            flag = '有必填项为空';
        } else if (!reg.test(info.mobile)) {
            flag = '手机号码格式不对';
        }
        return flag;
    },

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

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

    // 获取一条数据
    setInfo(id, td) {
        $addressId.val(id);
        $consignee.val(td.eq(0).text());

        // todo 省市区逆向展示
        // $areaCode.val(td.eq(1).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() {
        $('.table-title').text('已保存了' + currentLength +
            '条地址,还能保存' + leftLength + '条地址');
    }
};

require('./me');

// 设置收货地址
$('.default-address').click(function() {
    if ($(this).hasClass('checked')) {
        $(this).removeClass('checked');
        $(this).html('&#xe604;');
    } else {
        $(this).addClass('checked');
        $(this).html('&#xe603;');
    }
});

// 校验
$consignee.keydown(function() {
    $(this).next().hide();
});
$consignee.blur(function() {
    if ($(this).val().trim() === '') {
        $(this).next().show();
    }
});
$address.keydown(function() {
    $(this).next().hide();
});
$address.blur(function() {
    if ($(this).val().trim() === '') {
        $(this).next().show();
    }
});
$mobile.keydown(function() {
    $(this).next().hide();
});
$mobile.blur(function() {
    if ($(this).val().trim() === '') {
        $(this).next().show();
    } else {
        let reg = new RegExp(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);

        if (!reg.test(($(this).val().trim()))) {
            $(this).next().show();
            $(this).next().html('手机号码格式不正确');
        }
    }
});

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

    info.area_code = area.substring(area.length - 6);
    if (Bll.check(info) === true) {
        // 新增
        if (info.id === '') {
            $.ajax({
                type: 'POST',
                url: '/me/address/add',
                dataType: 'json',
                data: info,
                success: function(data) {
                    let html = Bll.getHtml(data.data);

                    currentLength++;
                    leftLength--;
                    $('tbody').append(html);
                    Bll.setTableTile();
                    Bll.clearInput();
                }
            });
        } else { // 修改
            console.log('上传info', info);
            $.ajax({
                type: 'POST',
                url: '/me/address/update',
                dataType: 'json',
                data: info,
                success: function(data) {
                    if (data.code === 200) {
                        $('#tr_' + info.id).parent().before(Bll.getHtml(info)).remove();
                        Bll.clearInput();
                    } else {

                        // alert('修改出错!');
                    }
                }
            });
        }
    } else {
        alert(Bll.check(info));
    }
});

// 修改收货地址
$('.update-address').click(function() {
    let id = $(this).data('id');
    let tr = $(this).parents('.table-body');
    let td = tr.find('td');

    Bll.setInfo(id, td);
});

// 删除收货地址
$('.del-address').click(function() {
    let 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: {
                    // todo uid
                    uid: '123456',
                    id: id
                },
                success: function() {
                    currentLength--;
                    leftLength++;
                    tr.remove();
                    Bll.setTableTile();
                    a.close();
                }
            });
        }
    }).show();
});

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

    $.ajax({
        type: 'POST',
        url: '/me/address/default',
        dataType: 'json',
        data: {
            // todo uid
            uid: '123456',
            id: id
        },
        success: function() {
            $('.current-default').removeClass('current-default').text('设为默认');
            $(self).addClass('current-default').text('默认地址');
            tbody.find('.table-body').eq(0).before('<tr class=\'table-body\'>' + tr.html() + '</tr>');
            tr.remove();
        }
    });
});


$(function() {
    // 运行此demo
    // 1. 安装 npm i -g json-server
    // 2. json-server --watch mock/address.json
    cascadingAddress({
        el: '#address',
        url: 'http://localhost:3000/areas/0',
        resource: 'areas'
    });
});