fe / yoho-blk · Commits

Go to a project

Authored by jinhu.tung
Commit 37891d9fdd702c12b816f5d86c5ea97f6a9d6e8a 1 parent 98c481b2

shopping car modify good number

Inline Side-by-side
Showing 15 changed files with 616 additions and 335 deletions
... ... @@ -19,24 +19,23 @@ exports.index = (req, res) => {
if (result[0].preSalePros) {
_.merge(mock, {
preSalePros: result[0].preSalePros
preSalePros: _.groupBy(result[0].preSalePros, 'brandName')
});
}
if (result[1].commonPros) {
_.merge(mock, {
commonPros: result[1].commonPros
commonPros: _.groupBy(result[1].commonPros, 'brandName')
});
}
if (result[2].invalidPros) {
console.log(result[2].invalidPros);
_.merge(mock, {
invalidPros: result[2].invalidPros
});
}
console.log(mock);
res.display('cart', _.merge({
module: 'shopping',
page: 'cart'
... ... @@ -46,3 +45,65 @@ exports.index = (req, res) => {
res.send(err);
});
};
// 检查库存
exports.checkInventory = (req, res) => {
let chkResult,
invalidProIds = [],
productId = req.query.productId,
result = {};
if (productId === 'ALL') {
chkResult = false;
invalidProIds.push('286143');
} else {
if (req.query.productId === '286143') {
chkResult = false;
} else {
chkResult = true;
}
}
if (invalidProIds.length) {
_.merge(result, {
invalidProIds: invalidProIds
});
}
_.merge(result, {
valid: chkResult
});
res.json(result);
};
// 修改数量
exports.changeProductNum = (req, res) => {
const changeType = req.body.changeType;
const changeTo = req.body.changeTo;
if (changeType === 'INCREASE') {
// TODO
if (changeTo === '4') {
res.json({
code: '1000',
num: parseInt(changeTo, 10) - 1,
changed: false
});
} else {
res.json({
code: '0',
num: changeTo,
changed: true
});
}
} else if (changeType === 'DECREASE') {
// TODO
res.json({
code: '0',
num: changeTo,
changed: true
});
}
};
... ...
/**
* 订单 controller
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/07/06
* @author: TODO
* @date: 2016/07/04
*/
'use strict';
const index = (req, res) => {
res.render('order', {
content: {
address: [
{
focus: true,
default: true,
name: '张三',
phone: '158****0865',
area: '江苏省 南京市 建邺区',
detail: '新城科技园嘉陵江东街18号国家广告产业园5栋16楼产品部'
},
{
name: '李三',
phone: '158****0865',
area: '江苏省 南京市 建邺区',
detail: '新城科技园嘉陵江东街18号国家广告产业园5栋16楼产品部'
},
{
name: '李三',
phone: '158****0865',
area: '江苏省 南京市 建邺区',
detail: '新城科技园嘉陵江东街18号国家广告产业园5栋16楼产品部'
},
{
name: '李三',
phone: '158****0865',
area: '江苏省 南京市 建邺区',
detail: '新城科技园嘉陵江东街18号国家广告产业园5栋16楼产品部'
},
{
name: '李三',
phone: '158****0865',
area: '江苏省 南京市 建邺区',
detail: '新城科技园嘉陵江东街18号国家广告产业园5栋16楼产品部'
}
],
goods: [
{
link: '',
img: 'http://placehold.it/100x134',
brandName: 'STUSSY',
name: 'CREPE FLORAL PAENT JACKET',
color: '白',
size: 'L',
price: '1289.00',
number: '1'
}
],
coinCount: '2301',
receiver: '把明杨 131****5656 江苏省 南京市 秦淮区 三条巷141号 233室',
count: '4',
sumCost: '58999.00',
balanceCoin: '58.00',
freight: '0.00',
needPay: '58999.00'
}
});
};
module.exports = {
index
};
... ...
... ... @@ -57,7 +57,11 @@ const getPreSaleProducts = () => {
id: 51160998,
thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/10/21/05/0279bf8ab67a6c962b08e37b3a13ce3401.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
url: 'http://www.yohobuy.com/product/pro_286135_367985/ALLENOVE95S11GeBenHaGen.html',
brandUrl: '//allenove.yohobuy.com' }]
brandUrl: '//allenove.yohobuy.com',
orderNum: 1, // 购买数量
numIsValid: true, // 库存是否正常
isValid: true // 是否没有实效
}]
});
};
... ... @@ -65,7 +69,50 @@ const getPreSaleProducts = () => {
const getNormalProducts = () => {
return Promise.resolve({
commonPros: [{ gender: '1',
tags: ['Object'],
tags: '[Object]',
status: 1,
smallSortId: 115,
vip1Price: 284.05,
isGlobal: 'N',
vip3Price: 263.12,
isOutlets: 2,
isDiscount: 'Y',
brandDomain: 'allenove',
isSpecial: 'N',
goodsList: [Object],
isAdvance: 'N',
productId: 286141,
vipDiscountType: 1,
salesNum: 0,
cnAlphabet: 'ALLENOVE95S14WeiYeNa',
productSkn: 51161001,
shelveTime: 1455616165,
vip2Price: 269.1,
editTime: 1455616165,
isNew: 'N',
isLimited: 'N',
brandName: 'Alle nove',
maxSortId: 1,
productName: 'Alle nove 翼型领长袖衬衫【维也纳】',
brandId: 1007,
defaultImages: 'http://img10.static.yhbimg.com/goodsimg/2015/10/21/02/0128dc014524ccf208b4f6f7760c9b9cf2.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
stockNumber: 21,
storageNum: 21,
isSoonSoldOut: false,
middleSortId: 12,
salesPrice: 299,
isPromotion: 101,
marketPrice: 1299,
vipPrice: 0,
id: 51161001,
thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/10/21/02/0128dc014524ccf208b4f6f7760c9b9cf2.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
url: 'http://www.yohobuy.com/product/pro_286141_367991/ALLENOVE95S14WeiYeNa.html',
brandUrl: '//allenove.yohobuy.com',
orderNum: 2, // 购买数量
numIsValid: true, // 库存是否正常
isValid: true // 是否没有实效
}, { gender: '1',
tags: '[Object]',
status: 1,
smallSortId: 115,
vip1Price: 379.04999999999995,
... ... @@ -75,35 +122,83 @@ const getNormalProducts = () => {
isDiscount: 'Y',
brandDomain: 'allenove',
isSpecial: 'N',
goodsList: ['Object'],
goodsList: '[Object]',
isAdvance: 'N',
productId: 286137,
productId: 286143,
vipDiscountType: 1,
salesNum: 0,
cnAlphabet: 'ALLENOVE95S12SaiWeiLiYa',
productSkn: 51160999,
cnAlphabet: 'ALLENOVE95S20BaSaiLuoNa',
productSkn: 51161002,
shelveTime: 1455616165,
vip2Price: 359.1,
editTime: 1455616165,
isNew: 'N',
isLimited: 'N',
brandName: 'Foobar',
maxSortId: 1,
productName: 'Foobar 纽扣领绅士长袖衬衫【巴塞罗那】',
brandId: 1007,
defaultImages: 'http://img12.static.yhbimg.com/goodsimg/2015/10/21/05/024f60a070ab61981c139684f147d41f17.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
stockNumber: 25,
storageNum: 25,
isSoonSoldOut: false,
middleSortId: 12,
salesPrice: 399,
isPromotion: 101,
marketPrice: 1299,
vipPrice: 0,
id: 51161002,
thumb: 'http://img12.static.yhbimg.com/goodsimg/2015/10/21/05/024f60a070ab61981c139684f147d41f17.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
url: 'http://www.yohobuy.com/product/pro_286143_367993/ALLENOVE95S20BaSaiLuoNa.html',
brandUrl: '//allenove.yohobuy.com',
orderNum: 1, // 购买数量
numIsValid: false, // 库存是否正常
isValid: true // 是否没有实效
},
{ gender: '1',
tags: [Object],
status: 1,
smallSortId: 115,
vip1Price: 379.04999999999995,
isGlobal: 'N',
vip3Price: 351.12,
isOutlets: 2,
isDiscount: 'Y',
brandDomain: 'allenove',
isSpecial: 'N',
goodsList: [Object],
isAdvance: 'N',
productId: 286169,
vipDiscountType: 1,
salesNum: 0,
cnAlphabet: 'ALLENOVE95S09BiSa',
productSkn: 51161015,
shelveTime: 1455616145,
vip2Price: 359.1,
editTime: 1455616145,
isNew: 'N',
isLimited: 'N',
brandName: 'Alle nove',
maxSortId: 1,
productName: 'Alle nove 暗扣领长袖衬衫【塞维利亚】',
productName: 'Alle nove 高支牛津休闲长袖衬衫【比萨】',
brandId: 1007,
defaultImages: 'http://img10.static.yhbimg.com/goodsimg/2015/10/21/03/01d7c265b0fa3fe1a582a73ad9175eab69.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
stockNumber: 23,
storageNum: 23,
defaultImages: 'http://img13.static.yhbimg.com/goodsimg/2015/10/21/05/027f47db67ca5cdb9fa996c8300947b975.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
stockNumber: 27,
storageNum: 27,
isSoonSoldOut: false,
middleSortId: 12,
salesPrice: 399,
isPromotion: 101,
marketPrice: 1299,
vipPrice: 0,
id: 51160999,
thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/10/21/03/01d7c265b0fa3fe1a582a73ad9175eab69.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
url: 'http://www.yohobuy.com/product/pro_286137_367987/ALLENOVE95S12SaiWeiLiYa.html',
brandUrl: '//allenove.yohobuy.com' }]
id: 51161015,
thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/10/21/05/027f47db67ca5cdb9fa996c8300947b975.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
url: 'http://www.yohobuy.com/product/pro_286169_368019/ALLENOVE95S09BiSa.html',
brandUrl: '//allenove.yohobuy.com',
orderNum: 2, // 购买数量
numIsValid: true, // 库存是否正常
isValid: true // 是否没有实效
}]
});
};
... ... @@ -149,7 +244,11 @@ const getInvalidProducts = () => {
id: 51161000,
thumb: 'http://img12.static.yhbimg.com/goodsimg/2015/10/21/03/02705334cacca0a06edec049918290f7b3.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
url: 'http://www.yohobuy.com/product/pro_286139_367989/ALLENOVE95S13PuLuoWangSi.html',
brandUrl: '//allenove.yohobuy.com' }]
brandUrl: '//allenove.yohobuy.com',
orderNum: 1, // 购买数量
numIsValid: true, // 库存是否正常
isValid: false // 是否没有实效
}]
});
};
... ...
/**
* [购物流程]订单model
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/7/6
*/
'use strict';
... ... @@ -9,13 +9,12 @@
const router = require('express').Router(); // eslint-disable-line
const cRoot = './controllers';
const cartCtrl = require(`${cRoot}/cart`); // 购物车
const order = require(`${cRoot}/order`); // 下单
// cart related controllers
const cartCtrl = require(`${cRoot}/cart`);
// 购物车
router.get('/cart', cartCtrl.index);
router.get('/cart/product/check_inventory', cartCtrl.checkInventory);
router.post('/cart/product/:productId/change_num', cartCtrl.changeProductNum);
// 下单
router.get('/order', order.index);
module.exports = router;
... ...
<div class="shopping-order-page blk-page">
{{# content}}
<div class="center-content">
<div class="address-info order-block">
<p class="title">
收货信息
<span id="new-address" class="right new-address">
新增收货地址
<i class="iconfont">&#xe61f;</i>
</span>
</p>
<div class="content">
<ul class="clearfix 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>
{{#if focus}}
<span class="address-chosed iconfont">&#xe63b;</span>
{{/if}}
</li>
{{/each}}
</ul>
<p class="address-all">
显示全部地址
<span class="iconfont">&#xe616;</span>
</p>
</div>
</div>
<div class="payment-type order-block">
<p class="title">支付方式</p>
<ul class="content">
<li class="chose-row clearfix focus">
<span class="chose-block">在线支付</span>
<span class="tip-text">支持主流银行卡、微信、支付宝、银联等平台付款，方便快捷</span>
</li>
</ul>
</div>
<div class="dispatch-type order-block">
<p class="title">配送方式</p>
<ul class="content">
<li class="chose-row clearfix focus">
<span class="chose-block">普通快递：运费￥10.00</span>
</li>
</ul>
</div>
<div class="order-info order-block">
<div class="order-inner">
<p class="title">
订单信息
<a class="right go-cart-link" href="{{goCartLink}}">
返回购物车修改
<span class="iconfont">&#xe61e;</span>
</a>
</p>
<div class="content">
<p class="order-table-head clearfix">
<span class="info">商品信息</span>
<span class="color-size">颜色尺码</span>
<span class="price">单价</span>
<span class="number">数量</span>
</p>
<ul class="order-table-body">
{{#each goods}}
<li class="order-goods clearfix">
<a class="goods-img inline-block" href="{{link}}">
<img class="lazy" data-original="{{img}}">
</a>
<p class="brand-and-name inline-block">
<a class="brand-name" href="{{brandUrl}}">{{brandName}}</a>
<a class="name" href="{{link}}">{{name}}</a>
</p>
<p class="color-size">
<span class="color">颜色：{{color}}</span>
<span class="size">尺码：{{size}}</span>
</p>
<p class="price">
￥{{price}}
</p>
<p class="number">
<span class="iconfont">&#xe61d;</span>
{{number}}
</p>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
<div class="invoice-info order-block">
<p class="title">发票信息</p>
<div class="content">
<div class="invoice-radio">
{{> icon/radio}}
<label>发票开具</label>
</p>
</div>
</div>
<div class="coin-and-remark">
<div class="coin">
<p class="title">
<span class="iconfont coin-ctrl">&#xe639;</span>
<span class="coin-ctrl bold">使用有货币</span>
</p>
<div class="content hide">
<div class="using-coin">
本次使用有货币
<input id="input-coin" class="input coin-input" type="text" data-max="{{coinCount}}">
个
您当前共有有货币<em class="blue">{{coinCount}}</em>个
<span id="coin-tip" class="coin-tip block blue vhide">抵扣￥2.22</span>
<span id="coin-sure" class="btn disable">确定</span>
</div>
<div class="used-coin hide">
本次使用有货币<em id="coin-used" class="blue">321</em>，本次抵扣<span class="blue">￥<em id="coin-deduction">3.21</em></span>
<span class="btn white modify">修改</span>
<span class="btn white cancel">取消使用</span>
</div>
</div>
</div>
<div class="remark">
<p class="title">
<span class="iconfont remark-ctrl">&#xe639;</span>
<span class="remark-ctrl bold">添加备注信息</span>
</p>
<div class="content hide">
<textarea id="remark-content" class="remark-content" placeholder="声明：备注中有关收货人信息、支付方式、配送方式、发票信息等购买要求一律以上面的选择为准，备注无效"></textarea>
<p class="print-price">
是否打印价格：
<span class="remark-tip">（如：送朋友的商品可不打印价格哦！）</span>
</p>
</div>
</div>
</div>
<div class="balance clearfix">
<div class="balance-info left">
<p>
收货信息：{{receiver}}
<span class="right">{{count}}件商品</span>
</p>
<p>
支付方式：<em id="balance-pay-type">在线支付</em>
</p>
</div>
<ul class="balance-list right">
<li>
<span class="balance-title">商品金额：</span>
<span class="balance-cost">￥{{sumCost}}</span>
</li>
<li>
<span class="balance-title">有货币：</span>
<span class="balance-cost">-￥<em id="balance-coin">{{balanceCoin}}</em></span>
</li>
<li>
<span class="balance-title">运费：</span>
<span class="balance-cost">￥<em id="balance-freight">{{freight}}</em></span>
</li>
<li class="need-pay">
<span class="balance-title">应付金额（不含运费）：</span>
<span id="balance-cost" class="balance-cost" data-cost="2">￥{{needPay}}</span>
</li>
<li>
<span class="btn submit-order">提交订单</span>
</li>
</ul>
</div>
</div>
{{/ content}}
</div>
\ No newline at end of file
{{# if preSalePros}}
<div class="cart-pro-list">
<div class="cart-pro-list pre-pros">
<div class="title">
<span class="main">预售商品</span>
<span class="note">不同上市期的商品我们将为您先到先发</span>
</div>
<div class="pro-list">
{{#each preSalePros}}
<div class="pros-group">
{{# each this}}
<ul>
<li class="chk" data-productId={{productId}}>
<label class="toggle-chk-item {{#if numIsValid}}chk-group{{/if}}">
<span class="iconfont checkbox not-checked">&#xe601;</span>
<span class="iconfont checkbox checked">&#xe602;</span>
</label>
<input type="hidden" name="productIds[]"/>
</li>
<li>
<img src="{{image defaultImages 100 134}}" alt="{{productName}}">
</li>
<li class="pro-info">
<div class="brand-name">{{brandName}}</div>
<div class="pro-name">{{productName}}</div>
<div class="size">尺寸: USB</div>
<div class="published-at">上市期: 2016年8月1日</div>
</li>
<li class="price-num">
<span class="price sale-price">¥{{salesPrice}}</span>
{{> common/stepper }}
</li>
<li class="total-price-action">
<span class="price item-total-price">¥1289.00</span>
<div class="actions">
<div class="remove-item action"><span class="iconfont">&#xe614;</span> &nbsp;删&nbsp;&nbsp;&nbsp;&nbsp;除</div>
<div class="send-to-favorite action">移入收藏夹</div>
</div>
</li>
</ul>
{{/each}}
</div>
{{/each}}
</div>
</div>
{{/ if}}
{{# if commonPros }}
<div class="cart-pro-list common-pros">
<div class="title">
<span class="main">普通商品</span>
</div>
<div class="pro-list">
{{#each commonPros}}
<div class="pros-group">
{{# each this}}
<ul>
<li class="chk" data-productId={{productId}}>
<label class="toggle-chk-item {{#if numIsValid}}chk-group{{/if}}">
<span class="iconfont checkbox not-checked">&#xe601;</span>
<span class="iconfont checkbox checked">&#xe602;</span>
</label>
<input type="hidden" name="productIds[]"/>
</li>
<li>
<img src="{{image defaultImages 100 134}}" alt="{{productName}}">
</li>
<li class="pro-info">
<div class="brand-name">{{brandName}}</div>
<div class="pro-name">{{productName}}</div>
<div class="size">尺寸: USB</div>
<div class="published-at">上市期: 2016年8月</div>
</li>
<li class="price-num">
<span class="price sale-price">¥{{salesPrice}}</span>
{{> common/stepper }}
</li>
<li class="total-price-action">
<span class="price item-total-price">¥1289.00</span>
<div class="actions">
<div class="remove-item action"><span class="iconfont">&#xe614;</span> &nbsp;删&nbsp;&nbsp;&nbsp;&nbsp;除</div>
<div class="send-to-favorite action">移入收藏夹</div>
</div>
</li>
</ul>
{{/each}}
</div>
{{/each}}
</div>
</div>
{{/ if}}
{{# if invalidPros}}
<div class="cart-pro-list invalid-pros">
<div class="pro-list">
{{#each invalidPros}}
<ul>
<li class="chk">
<label class="toggle-chk-item">
<span class="iconfont checkbox not-checked">&#xe601;</span>
<span class="iconfont checkbox checked">&#xe602;</span>
</label>
</li>
<li>
<img src="{{image defaultImages 100 134}}" alt="{{productName}}">
</li>
<li class="pro-info">
<div class="brand-name">{{brandName}}</div>
<div class="pro-name">{{productName}}</div>
<div class="size">尺寸: USB</div>
<div class="published-at">上市期: 2016年8月</div>
</li>
<li class="price-num">
<span class="price sale-price">¥{{salesPrice}}</span>
{{> common/stepper }}
</li>
<li class="total-price-action">
<span class="price item-total-price">¥1289.00</span>
<div class="actions">
<div class="remove-item action"><span class="iconfont">&#xe614;</span> &nbsp;删&nbsp;&nbsp;&nbsp;&nbsp;除</div>
<div class="send-to-favorite action">移入收藏夹</div>
</div>
<span class="iconfont warning">&#xe625;</span>
</li>
<li>
<img src="{{image defaultImages 100 134}}" alt="{{productName}}">
</li>
<li class="pro-info">
<div class="brand-name">{{brandName}}</div>
<div class="pro-name">{{productName}}</div>
<div class="size">尺寸: USB</div>
<div class="published-at">上市期: 2016年8月</div>
</li>
<li class="price-num">
<span class="price sale-price">¥{{salesPrice}}</span>
{{> common/stepper }}
</li>
<li class="total-price-action">
<span class="price item-total-price">¥1289.00</span>
<div class="actions">
<div class="remove-item action"><span class="iconfont">&#xe614;</span> &nbsp;删&nbsp;&nbsp;&nbsp;&nbsp;除</div>
<div class="send-to-favorite action">移入收藏夹</div>
</div>
</li>
</ul>
{{/each}}
</div>
</div>
</div>
{{/ if}}
{{# commonPros }}
{{/ commonPros}}
{{# invalidPros}}
{{/ invalidPros}}
... ...
<div class="cart-header">
<div class="titles">
<div class="item">
<label id="toggle_check" class="toggle-chk">
<label id="toggle_check" class="toggle-chk chk-all chk-group">
<span class="iconfont checkbox not-checked">&#xe601;</span>
<span class="iconfont checkbox checked">&#xe602;</span>
全选
... ...
<div class="cart-statement">
<div class="actions">
<div class="action">
<label id="toggle_check" class="toggle-chk">
<label id="toggle_check" class="toggle-chk chk-all chk-group">
<span class="iconfont checkbox not-checked">&#xe601;</span>
<span class="iconfont checkbox checked">&#xe602;</span>
<span>全选</span>
... ...
<div class="stepper">
<div class="stepper" data-productId={{productId}}>
<div class="minus action">
<span class="iconfont">&#xe621;</span>
</div>
<div class="num">
<input type="text" class="input" />
<input type="text" class="input" value={{orderNum}} />
</div>
<div class="plus action">
<span class="iconfont">&#xe61f;</span>
... ...
/**
* [购物车] 购物袋
* @author: jinhu.dong<jinhu.dong@yoho.cn>
* @date: 2016/07/08
* @module shopping/cart
*/
var Cart = {
/*
* 显示商品库存不足提示
* @function [toggleNotEnough]
* @params { Object } target 提示显示在目标DOM对象
* @params { String } type 显示全选提示还是单个商品提示
*/
toggleNotEnough: function(target, type) {
var msg = '您勾选的商品库存不足',
allKlass = '',
tooltip;
if (type === 'ALL') {
msg = '您全选的商品中存在库存不足商品，已帮您自动取消勾选';
allKlass = 'all';
}
tooltip = $('<div class="tooltip">' +
'<div class="content ' + allKlass + '">' + msg + '</div>' +
'<div class="indicator"></div>' +
'</div>');
tooltip.appendTo(target);
setTimeout(function() {
tooltip.remove();
}, 2000);
},
/*
* 全选
* @function [checkAllPros]
* @params {Array} invalidIds 失效商品ID
*/
checkAllPros: function(invalidIds) {
var proId,
target;
$('.toggle-chk-item').each(function() {
target = $(this);
proId = target.parent().attr('data-productId');
if (invalidIds.indexOf(proId) === -1) {
target.addClass('chk-group').next().val(proId);
}
});
},
/*
* 取消全选
* @function [unCheckAllPros]
*/
unCheckAllPros: function() {
var target;
$('.toggle-chk-item').each(function() {
target = $(this);
target.next().val('');
});
},
/*
* 取消全选样式,选择商品数量没有达到
* @function [resetCheckAllStyle]
*/
resetCheckAllStyle: function() {
$('.chk-all').removeClass('chk-group');
},
/*
* 单选每一个商品判断是否需要全选
* @function [toggleCheckAll]
*/
toggleCheckAll: function() {
}
};
module.exports = Cart;
... ...
var $ = require('yoho-jquery');
var Cart = require('./cart');
var Stepper = require('./stepper');
$(function() {
// 关闭info-bar
$('.info-bar .close').on('click', function() {
$('.info-bar').hide();
});
$('.toggle-chk').on('click', function() {
// 全选和单选
$('.toggle-chk, .toggle-chk-item').on('click', function() {
var $this = $(this),
$checkoutBtn = $('#checkout_btn');
$checkoutBtn = $('#checkout_btn'),
checkAll = $this.hasClass('chk-all'),
checkProId = [];
var data;
if ($this.hasClass('chk-all')) {
$this.removeClass('chk-all');
if ($this.hasClass('chk-group')) {
// 取消选择
$this.removeClass('chk-group');
$checkoutBtn.addClass('disable');
if (checkAll) {
Cart.unCheckAllPros();
} else {
Cart.resetCheckAllStyle();
$this.next().val('');
}
} else {
$this.addClass('chk-all');
$checkoutBtn.removeClass('disable');
if (checkAll) {
data = { productId: 'ALL' };
} else {
checkProId = $this.parent().attr('data-productId');
data = { productId: checkProId};
}
// 检查库存
$.ajax({
type: 'GET',
url: '/shopping/cart/product/check_inventory',
data: data,
dataType: 'json'
}).done(function(res) {
if (res.valid) {
$this.addClass('chk-group');
$checkoutBtn.removeClass('disable');
if (checkAll) {
Cart.checkAllPros(res.invalidProIds);
} else {
$this.next().val(checkProId);
// 判断是否需要全选
Cart.toggleCheckAll();
}
} else {
if (checkAll) {
// 全选商品中存在库存不足
// 如果有有效商品
if ($('.toggle-chk-item').length) {
$this.addClass('chk-group');
Cart.checkAllPros(res.invalidProIds);
}
Cart.toggleNotEnough($this, 'ALL');
} else {
// 单选商品库存不足
Cart.toggleNotEnough($this);
}
}
}).fail(function() {
// 通用处理错误
// TODO
});
}
});
// 变动商品数量
Stepper.init();
});
... ...
/**
* [购物车] 修改商品数量
* @author: jinhu.dong<jinhu.dong@yoho.cn>
* @date: 2016/07/11
* @module shopping/stepper
*/
var Util = require('./util');
var Stepper = {
// 减少商品数量
decrease: function(productId, currNum, callback) {
if (parseInt(currNum, 10) <= 1) {
return callback(1);
} else {
Util.ajax({
url: '/shopping/cart/product/' + productId + '/change_num',
type: 'POST',
data: {
changeType: 'DECREASE',
changeTo: parseInt(currNum, 10) - 1
},
success: function(res) {
if (res.code === '0') {
return callback(res.num, res.changed);
}
}
});
}
},
// 增加商品数量
increase: function(productId, currNum, callback) {
Util.ajax({
url: '/shopping/cart/product/' + productId + '/change_num',
type: 'POST',
data: {
changeType: 'INCREASE',
changeTo: parseInt(currNum, 10) + 1
},
success: function(res) {
if (res.code === '0') {
return callback(res.num, res.changed);
} else {
return callback(res.num, res.changed, res.code === '1000');
}
}
});
},
init: function() {
var _this = this,
$target,
productId;
var steppers = $('.stepper'),
$input,
currNum,
minus,
plus;
// 数量为1的不能再减少
steppers.find('input').each(function() {
$input = $(this);
if ($(this).val() === '1') {
$input.parent().prev().addClass('disable');
}
});
// 减少
steppers.on('click', '.minus', function() {
$target = $(this);
$input = $target.next().find('input');
currNum = $input.val();
plus = $input.parent().next();
if (!$target.hasClass('disable')) {
productId = $target.parent().attr('data-productId');
_this.decrease(productId, currNum, function(num, changed) {
if (num === 1) {
$input.val(1);
$target.addClass('disable');
} else {
$input.val(num);
}
// 如果plus被灰化了
if (changed && plus.hasClass('disable')) {
plus.removeClass('disable');
}
});
}
});
// 增加
steppers.on('click', '.plus', function() {
$target = $(this);
$input = $target.prev().find('input');
currNum = $input.val();
minus = $input.parent().prev();
if (!$target.hasClass('disable')) {
productId = $target.parent().attr('data-productId');
_this.increase(productId, currNum, function(num, changed, overflow) {
if (overflow) {
$target.addClass('disable');
}
$input.val(num);
// 如果minus被灰化了
if (changed && minus.hasClass('disable')) {
minus.removeClass('disable');
}
});
}
});
}
};
module.exports = Stepper;
... ...
/**
* [购物车] 工具库
* @author: jinhu.dong<jinhu.dong@yoho.cn>
* @date: 2016/07/11
* @module shopping/util
*/
var dialog = require('../plugins/dialog');
var _alert = dialog.Alert;
var Util = {
ajax: function(options) {
$.ajax({
type: options.type || 'GET',
url: options.url,
data: options.data || {},
dataType: 'json'
}).done(function(res) {
if (options.success) {
options.success(res);
}
}).fail(function() {
if (options.fail) {
options.fail();
} else {
new _alert('网络异常，稍后请重试').show();
}
});
}
};
module.exports = Util;
... ...
... ... @@ -28,6 +28,11 @@
}
.disable {
background: #999;
color: #fff;
}
.input {
margin: 0 5px;
width: 38px;
... ...