...
|
...
|
@@ -4,9 +4,9 @@ |
|
|
* @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');
|
...
|
...
|
@@ -15,84 +15,7 @@ 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 + '条地址');
|
|
|
}
|
|
|
};
|
|
|
var reg = new RegExp(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);// 手机号码校验
|
|
|
|
|
|
require('./me');
|
|
|
|
...
|
...
|
@@ -108,7 +31,7 @@ $('.default-address').click(function() { |
|
|
});
|
|
|
|
|
|
// 校验
|
|
|
$consignee.keydown(function() {
|
|
|
$consignee.focus(function() {
|
|
|
$(this).next().hide();
|
|
|
});
|
|
|
$consignee.blur(function() {
|
...
|
...
|
@@ -116,7 +39,7 @@ $consignee.blur(function() { |
|
|
$(this).next().show();
|
|
|
}
|
|
|
});
|
|
|
$address.keydown(function() {
|
|
|
$address.focus(function() {
|
|
|
$(this).next().hide();
|
|
|
});
|
|
|
$address.blur(function() {
|
...
|
...
|
@@ -124,15 +47,13 @@ $address.blur(function() { |
|
|
$(this).next().show();
|
|
|
}
|
|
|
});
|
|
|
$mobile.keydown(function() {
|
|
|
$mobile.focus(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('手机号码格式不正确');
|
...
|
...
|
@@ -140,124 +61,227 @@ $mobile.blur(function() { |
|
|
}
|
|
|
});
|
|
|
|
|
|
// 保存收货地址
|
|
|
$(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('修改出错!');
|
|
|
}
|
|
|
}
|
|
|
$(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 + '条地址');
|
|
|
}
|
|
|
} 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);
|
|
|
});
|
|
|
// 保存收货地址
|
|
|
$(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);
|
|
|
|
|
|
// 删除收货地址
|
|
|
$('.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();
|
|
|
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();
|
|
|
}
|
|
|
}
|
|
|
}).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();
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 修改收货地址
|
|
|
$(document).on('click', '.update-address', function() {
|
|
|
let id = $(this).data('id');
|
|
|
let tr = $(this).parents('.table-body');
|
|
|
let td = tr.find('td');
|
|
|
|
|
|
$(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'
|
|
|
$('.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();
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
}); |
...
|
...
|
|