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

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 currentLength = $('.a-table').find('tr').length - 1;// 当前地址条数
var leftLength = 20 - 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');

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

// 校验
$consignee.focus(function() {
    $(this).next().hide();
});
$consignee.blur(function() {
    if ($(this).val().trim() === '') {
        $(this).next().show();
    }
});
$address.focus(function() {
    $(this).next().hide();
});
$address.blur(function() {
    if ($(this).val().trim() === '') {
        $(this).next().show();
    }
});
$mobile.focus(function() {
    $(this).next().hide();
});
$mobile.blur(function() {
    if ($(this).val().trim() === '') {
        $(this).next().show();
    } else {
        if (!reg.test(($(this).val().trim()))) {
            $(this).next().show();
            $(this).next().html('手机号码格式不正确');
        }
    }
});


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

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

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

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

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

            // todo 省市区清空
            address.setAddress({
                province: '', // 省
                city: '',   // 市
                dist: ''  // 区县
            });
            $address.val('');
            $mobile.val('');
            $phone.val('');
        },

        // 校验
        check(info) {
            let flag = true;

            if (info.consignee === '' || info.address === '' || info.mobile === '') {
                flag = '有必填项为空';
            } else if (!reg.test(info.mobile)) {
                flag = '手机号码格式不对';
            } else if (typeof (info.area_code) === 'undefined') {
                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 + '">' +
                '<input type="hidden" id="tr_' + info.area_code + '" value="' + info.area_code + '">' +
                '<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\' data-id=\''+
                info.address_id + '\'>修改</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 省市区逆向展示
            $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 + '条地址');
        }
    };


    // 保存收货地址
    $(document).on('click', '#save-address', function() {
        if (currentLength === 20) {
            new _alert('您最多添加20个收货地址,可删除不需要的地址后再添加新地址!').show();
            Bll.clearInput();
        } else {
            let info = Bll.getInfo();
            let area = address.getAreaIds();
            let areaInfo = address.getAreaLabels();

            info.area_code = area.split(',')[2];
            info.area = areaInfo.split(',').join(' ');
            if (Bll.check(info) === true) {
                // 新增
                if (info.id === '') {
                    $.ajax({
                        type: 'POST',
                        url: '/me/address/add',
                        dataType: 'json',
                        data: info,
                        success: function(data) {
                            if (data.code === 200) {
                                let html = Bll.getHtml(data.data);

                                currentLength++;
                                leftLength--;
                                $('tbody').append(html);
                                Bll.setTableTile();
                                Bll.clearInput();

                                // location.href="/me/address";
                            } else {
                                new _alert('新增接口出错了').show();
                            }
                        }
                    });
                } else { // 修改
                    $.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).parent().before(Bll.getHtml(info)).remove();
                                Bll.clearInput();

                                // location.href="/me/address";
                            } else {
                                new _alert('修改接口出错了').show();
                            }
                        }
                    });
                }
            } else {
                new _alert(Bll.check(info)).show();
            }
        }

    });

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

        $('.error-tips').hide();
        Bll.setInfo(id, td);
    });

    // 删除收货地址
    $(document).on('click', '.del-address', 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();
                        Bll.clearInput();
                    }
                });
            }
        }).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();
            }
        });
    });
});