fe / yoho-blk · Commits

Go to a project

Authored by xuqi
Commit 80084f4f27a7ec06bf5b7c97f9186749388f9b24 1 parent 295a2e6b

address operation

Inline Side-by-side
Showing 6 changed files with 424 additions and 238 deletions
... ... @@ -8,6 +8,8 @@
const mcHandler = require('../models/menu-crumb-handler');
const addressModel = require('../models/address');
const _ = require('lodash');
/**
* 收货地址页面加载
*/
... ... @@ -33,6 +35,17 @@ const index = (req, res) => {
});
};
const getAddressList = (req, res) => {
addressModel.getAddressDataAsync('23123', 20).then(result => {
if (result.data) {
let defaultAd = _.find(result.data, o => o.is_default === 'Y');
defaultAd && (defaultAd.focus = true);
}
res.send(result);
});
};
/**
* 添加地址
*/
... ... @@ -92,6 +105,7 @@ const setDefaultAddress = (req, res) => {
module.exports = {
index,
getAddressList,
addAddressData,
updateAddressData,
delAddressData,
... ...
... ... @@ -24,5 +24,6 @@ router.post('/address/add', address.addAddressData);
router.post('/address/update', address.updateAddressData);
router.post('/address/del', address.delAddressData);
router.post('/address/default', address.setDefaultAddress);
router.get('/address/list', address.getAddressList); // 获取地址列表
module.exports = router;
... ...
... ... @@ -10,36 +10,7 @@
</span>
</p>
<div class="content">
<ul class="clearfix address-list shrink">
{{#each address}}
<li class="address{{#if focus}} focus{{/if}}" data-id="{{id}}">
<div class="address-header"></div>
<div class="address-content">
<p class="default-or-not{{#unless default}} not-default{{/unless}}">
{{#if default}}
<span class="default-tag">默认地址</span>
{{^}}
<span class="set-default">设为默认</span>
{{/if}}
</p>
<p class="name-and-phone bold">
{{name}}
<span class="phone">{{phone}}</span>
</p>
<p class="address-area bold">{{area}}</p>
<p class="address-detail">{{detail}}</p>
<p class="address-opration">
<span class="modify">修改</span>
<span class="delete">删除</span>
</p>
</div>
<span class="address-chosed iconfont">&#xe63b;</span>
</li>
{{/each}}
</ul>
<ul id="address-list" class="clearfix address-list shrink"></ul>
<p class="address-all">
显示全部地址
<span class="iconfont">&#xe616;</span>
... ... @@ -194,6 +165,36 @@
</ul>
</div>
<script id="address-list-tpl" type="text/html">
\{{#each address}}
<li class="address\{{#isY is_default}} default\{{/isY}}\{{#if focus}} focus\{{/if}}"
data-id="\{{address_id}}" data-name="\{{consignee}}" data-mobile="\{{mobile}}"
data-phone="\{{phone}}" data-areacode="\{{area_code}}" data-address="\{{address}}">
<div class="address-header"></div>
<div class="address-content">
<p class="default-or-not">
<span class="default-tag">默认地址</span>
<span class="set-default">设为默认</span>
</p>
<p class="name-and-phone bold">
\{{consignee}}
<span class="phone">\{{mobile}}</span>
</p>
<p class="address-area bold">\{{area}}</p>
<p class="address-detail">\{{address}}</p>
<p class="address-opration">
<span class="modify">修改</span>
<span class="delete">删除</span>
</p>
</div>
<span class="address-chosed iconfont">&#xe63b;</span>
</li>
\{{/each}}
</script>
<script id="invoice-dialog-tpl" type="text/html">
<p class="dialog-title">发票信息</p>
<ul class="invoice-tab">
... ...
/**
* 订单确认页地址相关
* @author：xuqi<qi.xu@yoho.cn>
* @date: 2016/7/12
*/
var $ = require('yoho-jquery'),
Hbs = require('yoho-handlebars'),
cascadingAddress = require('../plugins/cascading-address'),
popup = require('../plugins/dialog');
var Dialog = popup.Dialog,
Confirm = popup.Confirm;
var addressDialogTpl;
var addressTpl;
// 判断是否是Y
Hbs.registerHelper('isY', function(value, options) {
if (value === 'Y') {
return options.fn(this);
} else {
return options.inverse(this);
}
});
addressDialogTpl = Hbs.compile($('#address-dialog-tpl').html());
addressTpl = Hbs.compile($('#address-list-tpl').html());
// address dialog 数据验证
function validateAddress($el) {
var field = {
name: [
{
noEmpty: true,
err: '收货人不能为空'
},
{
regx: /[\u4e00-\u9fa5a-zA-Z\d]{2,12}/,
err: '请输入2-12个汉字、英文或数字'
}
],
detail: [
{
noEmpty: true,
err: '详细地址不能为空'
},
{
regx: /[\u4e00-\u9fa5a-zA-Z\d#-()]+/,
err: '只能包含数字、字母、汉字、#、-、（）及其组合'
}
],
mobile: [
{
noEmpty: true,
err: '手机号码不能为空'
},
{
regx: /\d+/,
err: '手机号码格式不正确'
}
],
phone: [
{
regx: /[\d-]+/,
err: '只能包含数字、-组合',
skipWhenEmpty: true
}
]
};
var key,
$cur,
cur,
vaKey,
vaRegx;
var pass = true;
for (key in field) {
if (field.hasOwnProperty(key)) {
$cur = $el.find('.address-' + key);
cur = $cur.val();
// 按顺序去验证对应filed的值
for (vaKey = 0; vaKey < field[key].length; vaKey++) {
vaRegx = field[key][vaKey];
// 非空验证、非空下正则验证、其他正则验证
if ((vaRegx.noEmpty && cur === '') || (vaRegx.regx &&
(vaRegx.skipWhenEmpty ? !(cur === '' || vaRegx.regx.test(cur)) : !vaRegx.regx.test(cur))
)) {
pass = false;
$cur.siblings('.error-tips').find('em').text(vaRegx.err).end().removeClass('hide');
break;
}
}
}
}
return pass;
}
// 地址弹窗Factory
function addressDialogFactory(opt, $the) {
var tplData = $.extend({
dialogAddress: true,
checked: true
}, opt);
var address = new Dialog({
closeIcon: false,
className: 'address',
content: addressDialogTpl(tplData),
btns: [
{
id: 'save-address',
btnClass: ['save-address'],
name: '保存',
cb: function() {
var $el = address.$el,
consignee,
detail,
mobile,
phone;
// 验证输入
if (validateAddress(address.$el)) {
// form value
consignee = $el.find('.address-name').val();
detail = $el.find('.address-detail').val();
mobile = $el.find('.address-mobile').val();
phone = $el.find('.address-phone').val();
if (opt && opt.id) {
// update
$.ajax({
type: 'POST',
url: '/me/address/update',
data: {
id: opt.id,
uid: '23123', // todo
consignee: consignee,
address: detail,
mobile: mobile,
phone: phone,
'area_code': '320107'// eslint-disable-line
}
}).then(function(data) {
if (data.code === 200) {
$the.before(addressTpl({
address: [
{
consignee: consignee,
address: detail,
mobile: mobile,
phone: phone,
area_code: data.data.area_code, // eslint-disable-line
id: opt.id,
focus: $the.hasClass('focus')
}
]
}));
$the.remove();
address.close();
}
});
} else {
// add
$.ajax({
type: 'POST',
url: '/me/address/add',
data: {
uid: '23123', // todo
consignee: consignee,
address: detail,
mobile: mobile,
phone: phone,
'area_code': '320107'// eslint-disable-line
}
}).then(function(data) {
var the;
if (data.code === 200) {
the = $.extend(data.data, {
focus: true
});
$('.address.focus').removeClass('focus');
$('#address-list').prepend(addressTpl({
address: [the]
}));
address.close();
}
});
}
}
}
},
{
id: 'cancel-address',
btnClass: ['cancel-address', 'white'],
name: '取消',
cb: function() {
address.close();
}
}
]
});
return address;
}
// 初始化弹窗内容
function initAddressContent($el) {
// 初始化地址组件
cascadingAddress({
el: '#address',
url: 'http://localhost:3000/areas/0',
resource: 'areas'
});
$el.find('.default-address-radio').check({
type: 'radio',
onChange: function(el, checked) {
console.log(checked);
}
});
}
function newAddress() {
var address = addressDialogFactory();
initAddressContent(address.$el);
address.show();
}
// 显示全部地址
$('.address-all').click(function() {
$(this).siblings('.address-list').removeClass('shrink').end().remove();
});
// 新增地址
$('.new-address').click(newAddress);
$('.address-list').on('click', '.address', function() {
// 地址切换
var $this = $(this);
if ($this.hasClass('focus')) {
return;
}
$this.addClass('focus');
$this.siblings('.focus').removeClass('focus');
}).on('click', '.modify', function(e) {
// 修改地址
var $this = $(this).closest('.address');
var address = addressDialogFactory({
updateAddress: true,
id: $this.data('id'),
checked: $this.hasClass('default'),
name: $this.data('name'),
mobile: $this.data('mobile'),
phone: $this.data('phone'),
areacode: $this.data('areacode'),
detail: $this.data('address')
}, $this);
initAddressContent(address.$el);
address.show();
e.stopPropagation();
}).on('click', '.delete', function(e) {
// 删除地址
var $this = $(this).closest('.address');
var delConfirm = new Confirm({
className: 'address-confirm-dialog',
content: '<p class="main">删除地址</p><p class="sub">您确定要删除该收货地址吗？</p>',
cb: function() {
// 确认删除，do something
$.ajax({
type: 'POST',
url: '/me/address/del',
data: {
uid: '23123',
id: $this.data('id')
}
}).then(function(data) {
if (data.code === 200) {
// 若当前选中，则移除后选中默认地址
if ($this.hasClass('focus')) {
$this.siblings('.default').addClass('focus');
}
$this.remove();
delConfirm.close();
}
});
}
}).show();
e.stopPropagation();
}).on('click', '.set-default', function(e) {
// 设置为默认地址
var $this = $(this).closest('.address');
$.ajax({
type: 'POST',
url: '/me/address/default',
data: {
uid: '23123',
id: $this.data('id')
}
}).then(function(data) {
if (data.code === 200) {
// 切换default和focus状态
$this.addClass('default focus');
$this.siblings('.default, .focus').removeClass('default focus');
}
});
e.stopPropagation();
});
// 页面加载时请求地址列表，若有则展示列表；若无则直接显示新建弹窗并不可被关闭
$.ajax({
url: '/me/address/list'
}).then(function(data) {
var list;
if (data && data.code === 200) {
list = data.data;
if (list.length === 0) {
//new address
newAddress();
} else {
$('#address-list').append(addressTpl({
address: data.data
}));
}
}
});
... ...
... ... @@ -6,12 +6,7 @@
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload'),
Hbs = require('yoho-handlebars'),
cascadingAddress = require('../plugins/cascading-address'),
popup = require('../plugins/dialog');
var Dialog = popup.Dialog,
Confirm = popup.Confirm;
Dialog = require('../plugins/dialog').Dialog;
var minusPlus = {
minus: '&#xe630;',
... ... @@ -38,208 +33,11 @@ var $invoiceTitleInput,
$invoiceEntity,
invoiceDialog;
var addressTpl = Hbs.compile($('#address-dialog-tpl').html());
require('../plugins/check');
lazyLoad($('img.lazy'));
// 显示全部地址
$('.address-all').click(function() {
$(this).siblings('.address-list').removeClass('shrink').end().remove();
});
// address dialog 数据验证
function validateAddress($el) {
var field = {
name: [
{
noEmpty: true,
err: '收货人不能为空'
},
{
regx: /[\u4e00-\u9fa5a-zA-Z\d]{2,12}/,
err: '请输入2-12个汉字、英文或数字'
}
],
detail: [
{
noEmpty: true,
err: '详细地址不能为空'
},
{
regx: /[\u4e00-\u9fa5a-zA-Z\d#-()]+/,
err: '只能包含数字、字母、汉字、#、-、（）及其组合'
}
],
mobile: [
{
noEmpty: true,
err: '手机号码不能为空'
},
{
regx: /\d+/,
err: '手机号码格式不正确'
}
],
phone: [
{
regx: /[\d-]+/,
err: '只能包含数字、-组合',
skipWhenEmpty: true
}
]
};
var key,
$cur,
cur,
vaKey,
vaRegx;
var pass = true;
for (key in field) {
if (field.hasOwnProperty(key)) {
$cur = $el.find('.address-' + key);
cur = $cur.val();
// 按顺序去验证对应filed的值
for (vaKey = 0; vaKey < field[key].length; vaKey++) {
vaRegx = field[key][vaKey];
// 非空验证、非空下正则验证、其他正则验证
if ((vaRegx.noEmpty && cur === '') || (vaRegx.regx &&
(vaRegx.skipWhenEmpty ? !(cur === '' || vaRegx.regx.test(cur)) : !vaRegx.regx.test(cur))
)) {
pass = false;
$cur.siblings('.error-tips').find('em').text(vaRegx.err).end().removeClass('hide');
break;
}
}
}
}
return pass;
}
// 地址弹窗Factory
function addressDialogFactory(opt) {
var tplData = $.extend({
dialogAddress: true,
checked: true
}, opt);
var address = new Dialog({
closeIcon: false,
className: 'address',
content: addressTpl(tplData),
btns: [
{
id: 'save-address',
btnClass: ['save-address'],
name: '保存',
cb: function() {
require('./address');
// 验证输入
if (validateAddress(address.$el)) {
address.close();
}
}
},
{
id: 'cancel-address',
btnClass: ['cancel-address', 'white'],
name: '取消',
cb: function() {
address.close();
}
}
]
});
return address;
}
// 初始化弹窗内容
function initAddressContent($el) {
// 初始化地址组件
cascadingAddress({
el: '#address',
url: 'http://localhost:3000/areas/0',
resource: 'areas'
});
$el.find('.default-address-radio').check({
type: 'radio',
onChange: function(el, checked) {
console.log(checked);
}
});
}
// 新增地址
$('.new-address').click(function() {
var address = addressDialogFactory();
initAddressContent(address.$el);
address.show();
});
$('.address-list').on('click', '.address', function() {
// 地址切换
var $this = $(this);
if ($this.hasClass('focus')) {
return;
}
$this.addClass('focus');
$this.siblings('.focus').removeClass('focus');
}).on('click', '.modify', function(e) {
// 修改地址
var $this = $(this).closest('.address');
var address = addressDialogFactory({
updateAddress: true,
name: '徐祁',
detail: '嘉陵江东街18号',
mobile: '15895869035',
id: $this.data('id')
});
initAddressContent(address.$el);
address.show();
e.stopPropagation();
}).on('click', '.delete', function(e) {
// 删除地址
// var $this = $(this).closest('.address');
// var id = $this.data('id');
new Confirm({
className: 'address-confirm-dialog',
content: '<p class="main">删除地址</p><p class="sub">您确定要删除该收货地址吗？</p>',
cb: function() {
// 确认删除，do something
}
}).show();
e.stopPropagation();
}).on('click', '.set-default', function(e) {
// 设置为默认地址
e.stopPropagation();
});
lazyLoad($('img.lazy'));
// 发票弹窗Factory
function invoiceDialogFactory() {
... ...
... ... @@ -68,12 +68,25 @@
text-align: right;
font-size: 12px;
height: 40px;
line-height: 40px;
}
&.default .default-or-not {
line-height: normal;
&.not-default {
line-height: 40px;
.set-default {
display: none;
}
.default-tag {
display: inline-block;
}
}
&.default .delete {
display: none;
}
.set-default {
display: inline-block;
color: #ccc;
... ... @@ -81,10 +94,10 @@
}
.default-tag {
display: none;
border: 1px solid #ccc;
color: #000;
padding: 5px;
display: inline-block;
margin-top: 8px;
}
}
... ...