个人中心-收货地址大部分完结

@@ -3,7 +3,7 @@
         <span class="blue tip">新增地址 电话为选填项，其他均为必填项</span>
         <div class="add-address-detail">
             <div class="form-group">
-                <label class="label-name">收货人:</label>
+                <label class="label-name">&nbsp;&nbsp;收货人:</label>
                 <input id="address_id"  type="hidden" value="">
                 <input id="consignee" class="input width-190" type="text" placeholder="请输入您的姓名" maxlength="10">
                 <span class="blue error-tips">{{> icon/error-round}}收件人不能为空</span>
@@ -12,7 +12,6 @@
                 <label class="label-name">所在区域:</label>
                 <div id="address"></div>
                 <span class="blue error-tips">{{> icon/error-round}}所在区域不能为空</span>
-
             </div>
             <div class="form-group">
                 <label class="label-name">详细地址:</label>

@@ -11,19 +11,20 @@
         </tr>
         {{#each data}}
             <tr class="table-body">
+                <input type="hidden" id="tr_{{address_id}}" value="{{address_id}}">
                 <td class="width-80">{{consignee}}</td>
-                <td class="width-195">{{address}}</td>
-                <td class="width-280">{{address}}</td>
-                <td class="width-120">{{mobile}}</td>
+                <td class="width-195">{{area}}</td>
+                <td class="width-255">{{address}}</td>
+                <td class="width-120"><p>{{mobile}}</p><p>{{phone}}</p></td>
                 <td class="width-260">
                     <div>
                         <span class="blue opreation update-address" data-id="{{address_id}}">修改</span>
                         |
                         <span class="blue opreation del-address" data-id="{{address_id}}">删除</span>
                         {{#if default}}
-                            <span class="btn set-default opreation current-default">默认地址</span>
+                            <span class="btn set-default opreation current-default ">默认地址</span>
                         {{else}}
-                            <span class="btn set-default opreation" data-id="{{address_id}}">设为默认</span>
+                            <span class="btn set-default opreation " data-id="{{address_id}}">设为默认</span>
                         {{/if}}
                     </div>
                 </td>

@@ -10,14 +10,15 @@ var dialog = require('../plugins/dialog');
 var _confirm = dialog.Confirm;
 var $addressId = $('#address_id');
 var $consignee = $('#consignee');
-
-// todo 地址码
-var $areaCode = $('#address');
 var $address = $('#addressDetail');
 var $mobile = $('#mobile');
 var $phone = $('#phone');
+var currentLength = $('.a-table').find('tr').length - 1;// 当前地址条数
+var leftLength = 20 - currentLength;// 还剩地址条数
+
 var Bll = {
-    getInfo: function() {
+    // 获取输入框输入的值
+    getInfo() {
         // todo uid
         var uid = '123456';
 
@@ -27,7 +28,6 @@ var Bll = {
             consignee: $consignee.val(),
 
             // todo 地址码
-            area_code: '123456',
             address: $address.val(),
             mobile: $mobile.val(),
             phone: $phone.val()
@@ -35,41 +35,62 @@ var Bll = {
             // todo 设置默认值
         };
     },
-    clearInput: function() {
+
+    // 清空输入框
+    clearInput() {
         $consignee.val('');
-        $areaCode.val('');
+
+        // todo 省市区清空
         $address.val('');
         $mobile.val('');
         $phone.val('');
     },
+
+    // 校验
     check(info) {
-        if (info.consignee === '') {
-            // alert('收件人不能为空');
-            return false;
-        }
-        if (info.address === '') {
-            // alert('地址不能为空');
-            return false;
-        }
+        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}$/);
 
-        /* else (info.mobile === '') {
-         // alert('手机号码不能为空');
-         return false;
-         }*/
-        return true;
+        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 += '<td class=\'width-80\'>' + info.consignee + '</td>' +
-            '<td class=\'width-195\'>' + info.address + '</td>' +
+        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\'>' + info.mobile + '</td>' +
-            '<td class=\'width-260\'><div><span class=\'blue opreation update-address\'>修改</span>|' +
-            '<span class=\'blue opreation del-address\' data-id=\'' + info.address_id + '\'>删除</span>' +
+            '<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 + '条地址');
     }
 };
 
@@ -120,36 +141,49 @@ $mobile.blur(function() {
 });
 
 // 保存收货地址
-$('#save-address').click(function() {
+$(document).on('click', '#save-address', function() {
     var info = Bll.getInfo();
+    var area = $('#address-form').serialize();
 
-    if (Bll.check(info)) {
-        if (info.id !== '') {
+    info.area_code = area.substring(area.length - 6);
+    if (Bll.check(info) === true) {
+        // 新增
+        if (info.id === '') {
             $.ajax({
                 type: 'POST',
-                url: '/me/address/update',
+                url: '/me/address/add',
                 dataType: 'json',
                 data: info,
-                success: function() { // 刷新下面列表数据
-                    /*   var html = Bll.getHtml(data.data);
-                     $('tbody').append(html);
-                     Bll.clearInput();*/
+                success: function(data) {
+                    let html = Bll.getHtml(data.data);
+
+                    currentLength++;
+                    leftLength--;
+                    $('tbody').append(html);
+                    Bll.setTableTile();
+                    Bll.clearInput();
                 }
             });
-        } else {
+        } else { // 修改
+            console.log('上传info', info);
             $.ajax({
                 type: 'POST',
-                url: '/me/address/add',
+                url: '/me/address/update',
                 dataType: 'json',
                 data: info,
-                success: function(data) { // 刷新下面列表数据
-                    var html = Bll.getHtml(data.data);
+                success: function(data) {
+                    if (data.code === 200) {
+                        $('#tr_' + info.id).parent().before(Bll.getHtml(info)).remove();
+                        Bll.clearInput();
+                    } else {
 
-                    $('tbody').append(html);
-                    Bll.clearInput();
+                        // alert('修改出错！');
+                    }
                 }
             });
         }
+    } else {
+        alert(Bll.check(info));
     }
 });
 
@@ -157,13 +191,9 @@ $('#save-address').click(function() {
 $('.update-address').click(function() {
     let id = $(this).data('id');
     let tr = $(this).parents('.table-body');
-    let td = tr.children();
+    let td = tr.find('td');
 
-    $addressId.val(id);
-    $consignee.val(td.eq(0).html());
-    $areaCode.val(td.eq(1).html());
-    $address.val(td.eq(2).html());
-    $mobile.val(td.eq(3).html());
+    Bll.setInfo(id, td);
 });
 
 // 删除收货地址
@@ -171,7 +201,7 @@ $('.del-address').click(function() {
     let id = $(this).data('id');
     var tr = $(this).parents('.table-body');
 
-    new _confirm({
+    var a = new _confirm({
         content: '您确定要删除收货地址吗？',
         cb: function() {
             $.ajax({
@@ -183,11 +213,12 @@ $('.del-address').click(function() {
                     uid: '123456',
                     id: id
                 },
-                success: function() { // 刷新下面列表数据
+                success: function() {
+                    currentLength--;
+                    leftLength++;
                     tr.remove();
-
-                    // todo 关闭弹框
-                    this.close();
+                    Bll.setTableTile();
+                    a.close();
                 }
             });
         }

@@ -6,41 +6,29 @@
         line-height: 100px;
         text-align: left;
     }
-
-    #address {
-        .dist-item {
-            padding: 0 8px;
-            height: 25px;
-            line-height: 25px;
-        }
-
-        .indicator-name {
-            font-size: 12px;
-            color: #999;
-        }
-    }
-
     .tip {
         font-size: 14px;
     }
 
     .add-address-detail {
-        padding: 10px 0;
+        padding: 15px 0 0;
 
         .form-group {
-            height: 50px;
-            line-height: 50px;
-            .default-address {
-                margin-left: 100px;
-            }
-            #address {
-                margin-left: 100px;
+            clear: both;
+            margin-bottom: 20px;
+
+            .default-address,
+            #address,
+            .btn {
+
+                margin-left: 83px;
             }
+
             .label-name {
                 font-size: 14px;
-                width: 80px;
-                text-align: right;
+                text-align: left;
                 float: left;
+                line-height: 26px;
             }
 
             .width-190 {
@@ -57,16 +45,12 @@
             .radio-lable {
                 font-size: 14px;
             }
-
-            .btn {
-                margin-left: 100px;
-            }
-
             .error-tips {
                 font-size: 12px;
                 height: 26px;
                 line-height: 26px;
                 margin-left: 20px;
+
                 .iconfont {
                     font-size: 12px;
                     margin-right: 5px;
@@ -81,46 +65,68 @@
 }
 
 .address-table {
-    margin-top: 50px;
-
     .table-title {
         font-size: 10px;
         height: 40px;
         line-height: 40px;
     }
+
     .a-table {
-        tr th td {
+
+        tr,
+        th,
+        td {
+
             font-size: 15px;
             border: 1px solid #eee;
+            padding: 0 5px;
+            text-align: left;
         }
+
         .opreation {
             cursor: pointer;
         }
+
         .table-head {
             background: #f5f5f5;
             height: 30px;
         }
-        .table-body {
-            height: 70px;
+
+        .table-body td {
+            padding: 8px 5px;
         }
+
         .width-80 {
             width: 80px;
         }
+
         .width-195 {
             width: 195px;
         }
-        .width-280 {
-            width: 280px;
+
+        .width-255 {
+            width: 255px;
+            word-break: break-all;
         }
+
         .width-120 {
             width: 120px;
+
+            p:first-child {
+                margin-bottom: 5px;
+            }
         }
+
         .width-260 {
             width: 260px;
         }
+
+        .current-default,
         .set-default {
+
             display: inline-block;
-            margin-left: 45px;
+            margin-left: 20px;
         }
+
     }
 }