fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit ff872ea3c461977f3f969a1aed1b01f156627790 2 parents 54872343 95c36a85

pull-code

Inline Side-by-side
Showing 19 changed files with 1827 additions and 816 deletions
@@ -18,10 +18,10 @@ @@ -18,10 +18,10 @@
18 <section class="s-feild"> 18 <section class="s-feild">
19 <label>身份证号</label><input type="text" id="tb_cert_no" name="tb_cert_no" placeholder="请输入您身份证号码" maxlength="18"> 19 <label>身份证号</label><input type="text" id="tb_cert_no" name="tb_cert_no" placeholder="请输入您身份证号码" maxlength="18">
20 </section> 20 </section>
21 - <section class="s-feild" data-aslider-in="province|fade"> 21 + <section class="s-feild province-select" data-aslider-in="province|fade">
22 <label>学校省份</label><input type="text" id="s-province-tb" name="s-province-tb" readonly="readonly" placeholder="请选择省份"><span class="s-select iconfont" >&#xe604;</span> 22 <label>学校省份</label><input type="text" id="s-province-tb" name="s-province-tb" readonly="readonly" placeholder="请选择省份"><span class="s-select iconfont" >&#xe604;</span>
23 </section> 23 </section>
24 - <section class="s-feild" data-aslider-in="school|fade" aslider-isShow="false"> 24 + <section class="s-feild school-select" data-aslider-in="school|fade" aslider-isShow="false">
25 <label>学校名称</label><input type="text" id="s-school-tb" name="s-school-tb" readonly="readonly" placeholder="请选择您的所在学校"><span id='s-toast-school' class="s-select iconfont">&#xe604;</span> 25 <label>学校名称</label><input type="text" id="s-school-tb" name="s-school-tb" readonly="readonly" placeholder="请选择您的所在学校"><span id='s-toast-school' class="s-select iconfont">&#xe604;</span>
26 </section> 26 </section>
27 27
@@ -4,22 +4,48 @@ @@ -4,22 +4,48 @@
4 * @date: 2016/12/21 4 * @date: 2016/12/21
5 */ 5 */
6 6
7 -  
8 'use strict'; 7 'use strict';
  8 +const helpers = global.yoho.helpers;
  9 +const headerModel = require('../../../doraemon/models/header'); // 头部model
  10 +const footerModel = require('../../../doraemon/models/footer_tab'); // 底部tab
9 11
10 const indexModel = require('../models/index'); 12 const indexModel = require('../models/index');
11 13
12 let index = (req, res, next) => { 14 let index = (req, res, next) => {
13 - let data = {};  
14 - res.render('index', Object.assign(data, { 15 + let isLogin = req.user && req.user.uid,
  16 + pageData = {
  17 + isLogin,
  18 + signurl: helpers.urlFormat('/signin.html', {
  19 + refer: '/cart/index/index'
  20 + })
  21 + };
  22 +
  23 + res.render('index', Object.assign(pageData, {
15 title: '购物车', 24 title: '购物车',
16 module: 'cart', 25 module: 'cart',
17 page: 'index', 26 page: 'index',
18 localCss: true, 27 localCss: true,
19 - width750: true  
20 - }))  
21 -}; 28 + width750: true,
  29 + pageHeader: headerModel.setNav({
  30 + navTitle: '购物车',
  31 + backUrl: '/product/show_.html'
  32 + }),
  33 + pageFooter: true,
  34 + }));
  35 +};
  36 +
  37 +let indexData = (req, res, next) => {
  38 + if (!req.xhr) {
  39 + return next();
  40 + }
  41 + let shoppingKey = req.cookies._SPK || '',
  42 + channel = req.cookies._Channel;
  43 + return indexModel.indexData(8040155, 'dc9d09e2ffd8607f2cfd8b9c95962923', channel).then(data => {
  44 + res.json(data);
  45 + }).catch(next);
  46 +}
22 47
23 module.exports = { 48 module.exports = {
24 - index 49 + index,
  50 + indexData
25 }; 51 };
@@ -5,4 +5,196 @@ @@ -5,4 +5,196 @@
5 */ 5 */
6 6
7 'use strict'; 7 'use strict';
  8 +const helpers = global.yoho.helpers;
  9 +const api = global.yoho.API;
  10 +const _ = require('lodash');
8 11
  12 +const indexData = (uid, shoppingKey, saleChannel, cartType) => {
  13 + return api.get('', {
  14 + method: 'app.Shopping.queryCart',
  15 + uid: uid,
  16 + shopping_key: shoppingKey,
  17 + sale_channel: saleChannel
  18 + }).then((data) => {
  19 + let cart = data.data;
  20 + let result = {};
  21 + let ordinaryCount = _.get(cart, 'ordinary_cart_data.shopping_cart_data.goods_count', 0);
  22 + let advanceCount = _.get(cart, 'advance_cart_data.shopping_cart_data.goods_count', 0);
  23 + let ordinarySoldOut = _.get(cart, 'ordinary_cart_data.sold_out_goods_list', []);
  24 + let advanceSoldOut = _.get(cart, 'advance_cart_data.sold_out_goods_list', []);
  25 +
  26 + // 普通购物车和预售购物车都为空
  27 + if (ordinaryCount === 0 && advanceCount === 0 && !ordinarySoldOut.length && !advanceSoldOut.length) {
  28 + result.isEmptyCart = true;
  29 + return result;
  30 + }
  31 +
  32 + // 普通购物车空，则显示预售购物车
  33 + if (ordinaryCount === 0 && !ordinarySoldOut.length) {
  34 + result.cartNav = false;
  35 + result.cartType = 'advance';
  36 + } // 预售购物车空，则显示普通购物车
  37 + else if (advanceCount === 0 && !advanceSoldOut.length) {
  38 + result.cartNav = false;
  39 + result.cartType = 'ordinary';
  40 + } // 以上两个购物车中都有数据, 默认显示普通购物车
  41 + else {
  42 + result.cartNav = true;
  43 + result.cartType = cartType || 'ordinary';
  44 + }
  45 +
  46 + /* 普通购物车 */
  47 + result.commonGoodsCount = ordinaryCount;
  48 + result.commonCart = processData(cart.ordinary_cart_data, false);
  49 + /* 预售购物车 */
  50 + result.presellGoodsCount = advanceCount;
  51 + result.preSellCart = processData(cart.advance_cart_data);
  52 + console.log(result)
  53 + return result;
  54 + });
  55 +};
  56 +
  57 +const processData = (data, isAdvanceCart) => {
  58 + let result = {};
  59 +
  60 + // 购买的可用商品列表
  61 + result.goods = _.get(data, 'goods_list', []).map(good => { return formatCartGoods(good, isAdvanceCart); });
  62 + result.promotionPoolList = _.get(data, 'promotion_pool_list', []).map(promotion => {
  63 + return {
  64 + goods: _.get(promotion, 'goods_list', []).map(good => { return formatCartGoods(good, isAdvanceCart); }),
  65 + promotions: _.get(promotion, 'promotion_list', []).map(promo => {
  66 + return {
  67 + status: promo.status,
  68 + conditionUnit: promo.condition_unit,
  69 + conditionValue: promo.condition_value,
  70 + giftGoodsList: _.get(promo, 'gift_goods_List', []).map(gift => { return formatAdvanceGoods(gift); }),
  71 + giftPrice: promo.gift_price,
  72 + promotionId: promo.promotion_id,
  73 + promotionTitle: promo.promotion_title,
  74 + promotionType: promo.promotion_type,
  75 + alreadyMatch: promo.alreadyMatch
  76 + };
  77 + })
  78 + };
  79 + });
  80 +
  81 + // 失效商品列表
  82 + result.notValidGoods = _.get(data, 'sold_out_goods_list', []).map(good => { return formatCartGoods(good, isAdvanceCart, false); });
  83 +
  84 + // 下架的商品列表
  85 + result.offShelveGoods = _.get(data, 'off_shelves_goods_list', []).map(good => { return formatCartGoods(good, isAdvanceCart, false); });
  86 +
  87 + // 赠品和加价购商品
  88 + if (data.gift_list.length || data.price_gift.length) {
  89 + result.freebieOrAdvanceBuy = true;
  90 +
  91 + // 赠品
  92 + result.freebie = data.gift_list.map(good => { return formatAdvanceGoods(good); });
  93 + result.giftCount = result.freebie.length;
  94 +
  95 + // 加价购
  96 + result.advanceBuy = data.price_gift.map(good => { return formatAdvanceGoods(good); });
  97 + result.advanceBuyCount = result.advanceBuy.length;
  98 + }
  99 +
  100 + // 已参加的活动
  101 + if (data.promotion_info && data.promotion_info.length > 0) {
  102 + result.promotionInfo = data.promotion_info.map(promotion => {
  103 + return {id: promotion.promotion_id, name: promotion.promotion_title};
  104 + });
  105 + }
  106 +
  107 + // 结算数据
  108 + result.formulaPrice = data.shopping_cart_data.promotion_formula;
  109 + result.count = data.shopping_cart_data.selected_goods_count;
  110 + result.isAllSelected = (data.shopping_cart_data.goods_count === data.shopping_cart_data.selected_goods_count) && (data.shopping_cart_data.selected_goods_count > 0);
  111 + result.sumPrice = transPrice(data.shopping_cart_data.last_order_amount);
  112 +
  113 +
  114 + return result;
  115 +};
  116 +
  117 +/**
  118 + * 格式化加价购和赠品商品
  119 + *
  120 + * @param array $advanceGoods 加价购商品列表
  121 + * @param int $count 计商品件数
  122 + * @return array $arr 处理之后的加价购商品数据
  123 + */
  124 +const formatAdvanceGoods = (advanceGood, isGift) => {
  125 + let result = {};
  126 +
  127 + result.id = advanceGood.product_skn;
  128 + result.name = advanceGood.product_name;
  129 + result.thumb = advanceGood.goods_images ? helpers.image(advanceGood.goods_images, 120, 160) : '';
  130 + result.price = transPrice(advanceGood.last_price);
  131 + result.marketPrice = isGift ? '0.00' : transPrice(advanceGood.market_price);
  132 + result.count = advanceGood.storage_number;
  133 +
  134 + return result;
  135 +};
  136 +
  137 +/**
  138 + * 格式化购物车商品
  139 + *
  140 + * @param array $cartGoods 购物车商品列表
  141 + * @param boolean $isValid 是否是可用商品（非失效商品），默认是
  142 + * @param bool $isAdvanceCart 是否是预售购物车（和上市期有关）
  143 + * @return array 处理之后的购物车商品数据
  144 + */
  145 +const formatCartGoods = (goodData, isAdvanceCart, isValid) => {
  146 + let result = {};
  147 + result.id = goodData.product_sku;
  148 + result.skn = goodData.product_skn;
  149 + result.name = goodData.product_name;
  150 + result.thumb = goodData.goods_images ? helpers.image(goodData.goods_images, 120, 160) : '';
  151 + result.color = goodData.color_name;
  152 + result.size = goodData.size_name;
  153 + result.checked = goodData.selected === 'Y';
  154 + result.price = transPrice(goodData.last_vip_price);
  155 + result.isVipPrice = goodData.sales_price !== goodData.last_vip_price && goodData.discount_tag === 'V';
  156 + result.isStudents = goodData.sales_price !== goodData.last_vip_price && goodData.discount_tag === 'S';
  157 + result.count = goodData.buy_number;
  158 + result.promotion_id = goodData.promotion_id;
  159 + if (isValid) {
  160 + // 库存不足
  161 + result.lowStocks = (goodData.buy_number > goodData.storage_number);
  162 + } else { // 失效商品
  163 + result.inValid = true;
  164 + }
  165 +
  166 + // gift=>是否赠品,advanceBuy=>是否加价购,soldOut=>失效商品;
  167 + if (!goodData.goods_type) {
  168 + result.inValid = true;
  169 + }
  170 + else if (goodData.goods_type === 'gift' && !goodData.isAdvanceBuy) {
  171 + result.isGift = true;
  172 + result.salesPrice = transPrice(goodData.sales_price);
  173 + result.price = transPrice(goodData.last_price);
  174 + }
  175 + else if (goodData.goods_type === 'price_gift') {
  176 + result.showCheckbox = true;
  177 + result.isAdvanceBuy = true;
  178 + result.salesPrice = transPrice(goodData.sales_price);
  179 + result.price = transPrice(goodData.last_price);
  180 + }
  181 + else {
  182 + result.showCheckbox = true;
  183 + }
  184 +
  185 + // 上市期
  186 + if (isAdvanceCart && goodData.expect_arrival_time) {
  187 + result.appearDate = goodData.expect_arrival_time;
  188 + }
  189 +
  190 + // 商品链接
  191 + result.link = helpers.urlFormat(`/product/show_${goodData.product_skn}.html`);
  192 +};
  193 +
  194 +const transPrice = (price, isSepcialZero) => {
  195 + return (price || isSepcialZero) ? price.toFixed(2) : 0;
  196 +};
  197 +
  198 +module.exports = {
  199 + indexData
  200 +}
@@ -38,6 +38,7 @@ router.get('/index/new/selectAddress', authMW, order.selectAddress); // é€‰æ‹©åœ @@ -38,6 +38,7 @@ router.get('/index/new/selectAddress', authMW, order.selectAddress); // 选择åœ
38 router.get('/index/new/invoiceInfo', authMW, order.invoiceInfo); // 发票信息 38 router.get('/index/new/invoiceInfo', authMW, order.invoiceInfo); // 发票信息
39 39
40 router.get('/index/new', indexController.index); // 购物车 40 router.get('/index/new', indexController.index); // 购物车
  41 +router.post('/index/new/data', indexController.indexData); // 购物车
41 42
42 43
43 module.exports = router; 44 module.exports = router;
  1 +<div class="shopping-cart-page yoho-page ">
  2 + {{#unless isLogin}}
  3 + <p class="login-info">
  4 + <span class="iconfont">&#xe628;</span>
  5 + 请您先
  6 + <a class="btn btn-login" href="{{signurl}}">登录</a>
  7 + 可以同步电脑和手机中的商品
  8 + </p>
  9 + {{/unless}}
  10 + <div class="cart-box">
  11 +
  12 + </div>
  13 +</div>
@@ -31,6 +31,14 @@ module.exports = { @@ -31,6 +31,14 @@ module.exports = {
31 // imSocket: 'ws://imsocket.yohobuy.com:10000', 31 // imSocket: 'ws://imsocket.yohobuy.com:10000',
32 // imCs: 'http://imhttp.yohobuy.com/api', 32 // imCs: 'http://imhttp.yohobuy.com/api',
33 // imServer: 'http://imhttp.yohobuy.com/server' 33 // imServer: 'http://imhttp.yohobuy.com/server'
  34 +
  35 + // api: 'http://dev-api.yohops.com:9999/',
  36 + // service: 'http://service.yoho.cn/',
  37 + // liveApi: 'http://api.live.yoho.cn/',
  38 + // singleApi: 'http://single.yoho.cn/',
  39 + // imSocket: 'ws://imsocket.yohobuy.com:10000',
  40 + // imCs: 'http://imhttp.yohobuy.com/api',
  41 + // imServer: 'http://imhttp.yohobuy.com/server'
34 }, 42 },
35 subDomains: { 43 subDomains: {
36 host: '.m.yohobuy.com', 44 host: '.m.yohobuy.com',
1 -<div class="cart-good ">  
2 - <div class="promos "> 1 +<div class="cart-good edit">
  2 + <div class="promos more-box ">
3 <div class="promo-item"> 3 <div class="promo-item">
4 <div class="info"> 4 <div class="info">
5 <span class="flag">加价购</span>差1件立享【满￥399减100】 5 <span class="flag">加价购</span>差1件立享【满￥399减100】
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 <div class="good-new-info"> 36 <div class="good-new-info">
37 <a href="//m.yohobuy.com/product/show_{{product_skn}}.html" class="img-a"> 37 <a href="//m.yohobuy.com/product/show_{{product_skn}}.html" class="img-a">
38 <div class="img"> 38 <div class="img">
39 - <img class="thumb lazy" src="//img12.static.yhbimg.com/goodsimg/2016/12/21/17/02a2809c6b69141c032b9978a2f61d9958.jpg?imageMogr2/thumbnail/120x160/extent/120x160/background/d2hpdGU=/position/center/quality/80" data-original="{{image2 goods_images w=120 h=160 q=80}}" alt=""> 39 + <img class="thumb lazy" src="//img12.static.yhbimg.com/goodsimg/2016/12/21/17/02a2809c6b69141c032b9978a2f61d9958.jpg?imageMogr2/thumbnail/120x160/extent/120x160/background/d2hpdGU=/position/center/quality/80" alt="">
40 <div class="flag price-gift"><div class="text">加价购</div></div> 40 <div class="flag price-gift"><div class="text">加价购</div></div>
41 </div> 41 </div>
42 </a> 42 </a>
@@ -45,7 +45,7 @@ @@ -45,7 +45,7 @@
45 <div class="intro intro-name"> 45 <div class="intro intro-name">
46 <div class="name-row"> 46 <div class="name-row">
47 <div class="name"> 47 <div class="name">
48 - <a href="//m.yohobuy.com/product/show_{{product_skn}}.html">EBLIS时拼色EBLIS时拼色时尚拼色EBLI色</a> 48 + <a href="//m.yohobuy.com/product/show_{{product_skn}}.html">EBLIS时拼色EBLIS时拼色EBLIS时拼色时尚拼色EBLI色EBLIS时拼色EBLIS时拼色时尚拼色EBLI色EBLIS时拼色EBLIS时拼色时尚拼色EBLI色EBLIS时拼色时尚拼色EBLI色</a>
49 </div> 49 </div>
50 </div> 50 </div>
51 <p class="color-size-row"><span class="color">颜色:黑色</span><span class="size">尺码:S</span></p> 51 <p class="color-size-row"><span class="color">颜色:黑色</span><span class="size">尺码:S</span></p>
@@ -53,9 +53,9 @@ @@ -53,9 +53,9 @@
53 <div class="intro intro-edit"> 53 <div class="intro intro-edit">
54 <div class="edit-box"> 54 <div class="edit-box">
55 <div class="num-opt"> 55 <div class="num-opt">
56 - <a href="#" class="btn btn-minus disabled"><span class="iconfont"></span></a> 56 + <a href="javascript:;" class="btn btn-minus "><span class="iconfont"></span></a>
57 <input type="text" class="good-num" disabled="true" value="1"> 57 <input type="text" class="good-num" disabled="true" value="1">
58 - <a href="#" class="btn btn-plus"><span class="iconfont"></span></a> 58 + <a href="javascript:;" class="btn btn-plus"><span class="iconfont"></span></a>
59 </div> 59 </div>
60 <div class="size-info"> 60 <div class="size-info">
61 <div class="txt">颜色:黑色 尺码:S</div> 61 <div class="txt">颜色:黑色 尺码:S</div>
1 -<div class="shopping-cart-page yoho-page">  
2 - <p class="login-info">  
3 - <span class="iconfont">&#xe628;</span>  
4 - 请您先  
5 - <a class="btn btn-login" href="{{signurl}}">登录</a>  
6 - 可以同步电脑和手机中的商品  
7 - </p>  
8 - <ul class="cart-nav clearfix">  
9 - <li class="active" id="common-cart-nav">  
10 - <span>普通商品(13)</span>  
11 - </li>  
12 - <li id="presell-cart-nav">  
13 - <span >预售商品(1)</span>  
14 - <div id="presell-tip" class="presell-tip hide">  
15 - <div class="triangle"></div>  
16 - <p class="pt-content">预售商品点这里结算哦~</p>  
17 - </div>  
18 - </li>  
19 - </ul>  
20 - <div class="cart-content normal-good">  
21 - <div class="normal-box">  
22 - <div class="cart-brand box">  
23 - <div class="promotion-header ">  
24 - <div class="promo-item">  
25 - <div class="info"><i class="iconfont cuxiao"></i>差￥200立享【满￥699减100】</div>  
26 - <div class="opt to-gift">  
27 - <a href="#">去凑单</a><i class="iconfont to-arrow"></i>  
28 - </div>  
29 - </div>  
30 - <div class="promo-item">  
31 - <div class="info"><i class="iconfont cuxiao"></i>差￥200立享【满￥699减100】</div>  
32 - <div class="opt to-gift">  
33 - <a href="#">去凑单</a><i class="iconfont to-arrow"></i>  
34 - </div>  
35 - </div>  
36 - <div class="down-arrow">  
37 - <i class="iconfont arrow"></i>  
38 - </div>  
39 - </div>  
40 - <div class="good-list">  
41 - {{> cart-good}}  
42 - </div>  
43 - </div> 1 +{{#if cartNav}}
  2 +<ul class="cart-nav clearfix">
  3 + <li class="active" id="common-cart-nav">
  4 + <span>普通商品({{commonGoodsCount}})</span>
  5 + </li>
  6 + <li id="presell-cart-nav">
  7 + <span >预售商品({{presellGoodsCount}})</span>
  8 + <div id="presell-tip" class="presell-tip hide">
  9 + <div class="triangle"></div>
  10 + <p class="pt-content">预售商品点这里结算哦~</p>
44 </div> 11 </div>
45 - <div class="all-gift-box box">  
46 - <div class="gift-item">  
47 - <div class="flag">  
48 - <i class="iconfont gift"></i>  
49 - </div>  
50 - <div class="content">  
51 - <div class="info">已满足全场加价购</div> 12 + </li>
  13 +</ul>
  14 +{{/if}}
  15 +<div class="cart-content normal-good">
  16 + <div class="normal-box">
  17 + <div class="cart-brand box">
  18 + <div class="promotion-header more-box ">
  19 + <div class="promo-item">
  20 + <div class="info"><i class="iconfont cuxiao"></i>差￥200立享【满￥699减100】</div>
52 <div class="opt to-gift"> 21 <div class="opt to-gift">
53 <a href="#">去凑单</a><i class="iconfont to-arrow"></i> 22 <a href="#">去凑单</a><i class="iconfont to-arrow"></i>
54 </div> 23 </div>
55 </div> 24 </div>
56 - </div>  
57 - <div class="gift-item">  
58 - <div class="flag">  
59 - <i class="iconfont price-gift"></i>  
60 - </div>  
61 - <div class="content">  
62 - <div class="info">已满足全场加价购</div> 25 + <div class="promo-item">
  26 + <div class="info"><i class="iconfont cuxiao"></i>差￥200立享【满￥699减100】</div>
63 <div class="opt to-gift"> 27 <div class="opt to-gift">
64 <a href="#">去凑单</a><i class="iconfont to-arrow"></i> 28 <a href="#">去凑单</a><i class="iconfont to-arrow"></i>
65 </div> 29 </div>
66 </div> 30 </div>
  31 + <div class="down-arrow">
  32 + <i class="iconfont arrow"></i>
  33 + </div>
67 </div> 34 </div>
68 - </div>  
69 - <div class="disable-box box">  
70 - {{> cart-good}}  
71 - <div class="remove-all">  
72 - <button class="btn btn-remove">清空失效商品</button> 35 + <div class="good-list">
  36 + {{> cart-good}}
73 </div> 37 </div>
74 </div> 38 </div>
75 - <div class="total box">  
76 - <div class="activity-title">  
77 - <h1>已参与活动</h1> 39 + </div>
  40 + <div class="all-gift-box box">
  41 + <div class="gift-item">
  42 + <div class="flag">
  43 + <i class="iconfont gift"></i>
78 </div> 44 </div>
79 - <div class="activity">  
80 - <ul>  
81 - <li>【大牌盛宴】下单7折</li>  
82 - <li>满¥399免运费</li>  
83 - </ul> 45 + <div class="content">
  46 + <div class="info">已满足全场加价购</div>
  47 + <div class="opt to-gift">
  48 + <a href="#">去凑单</a><i class="iconfont to-arrow"></i>
  49 + </div>
  50 + </div>
  51 + </div>
  52 + <div class="gift-item">
  53 + <div class="flag">
  54 + <i class="iconfont price-gift"></i>
84 </div> 55 </div>
85 - <div class="price-compute">  
86 - <p>总计¥1896.60=商品金额¥1986.00-活动金额¥89.40</p> 56 + <div class="content">
  57 + <div class="info">已满足全场加价购</div>
  58 + <div class="opt to-gift">
  59 + <a href="#">去凑单</a><i class="iconfont to-arrow"></i>
  60 + </div>
87 </div> 61 </div>
88 </div> 62 </div>
89 </div> 63 </div>
90 - <div class="cart-content advance-good hide"></div>  
91 - <div class="recommend-for-you box hide">  
92 - </div>  
93 - <div class="cart-footer">  
94 - <div class="check-all">  
95 - <i class="iconfont chk"></i>  
96 - <p>全选</p> 64 + <div class="disable-box box">
  65 + {{> cart-good}}
  66 + <div class="remove-all">
  67 + <button class="btn btn-remove">清空失效商品</button>
97 </div> 68 </div>
98 - <div class="opts edit hide">  
99 - <button class="btn btn-gray">移入<br>收藏夹</button>  
100 - <button class="btn btn-red">删除</button> 69 + </div>
  70 + <div class="total box">
  71 + <div class="activity-title">
  72 + <h1>已参与活动</h1>
101 </div> 73 </div>
102 - <div class="opts bill ">  
103 - <div class="total">  
104 - <p class="price">总计:￥0.00&nbsp;&nbsp;(0件)</p>  
105 - <p class="intro">不含运费</p>  
106 - </div>  
107 - <button class="btn btn-red">结算</button> 74 + <div class="activity">
  75 + <ul>
  76 + <li>【大牌盛宴】下单7折</li>
  77 + <li>满¥399免运费</li>
  78 + </ul>
  79 + </div>
  80 + <div class="price-compute">
  81 + <p>总计¥1896.60=商品金额¥1986.00-活动金额¥89.40</p>
  82 + </div>
  83 + </div>
  84 +</div>
  85 +<div class="cart-content advance-good hide"></div>
  86 +<div class="recommend-for-you box hide">
  87 +</div>
  88 +<div class="cart-footer">
  89 + <div class="check-all">
  90 + <i class="iconfont chk"></i>
  91 + <p>全选</p>
  92 + </div>
  93 + <div class="opts edit hide">
  94 + <button class="btn btn-gray">移入<br>收藏夹</button>
  95 + <button class="btn btn-red">删除</button>
  96 + </div>
  97 + <div class="opts bill ">
  98 + <div class="total">
  99 + <p class="price">总计:￥0.00&nbsp;&nbsp;(0件)</p>
  100 + <p class="intro">不含运费</p>
108 </div> 101 </div>
  102 + <button class="btn btn-red">结算</button>
109 </div> 103 </div>
110 </div> 104 </div>
@@ -575,6 +575,7 @@ AsideSlider.prototype.asideSlideIn = AsideSlider.prototype.slideIn = function($e @@ -575,6 +575,7 @@ AsideSlider.prototype.asideSlideIn = AsideSlider.prototype.slideIn = function($e
575 $('body').bind('touchmove', function(e) { 575 $('body').bind('touchmove', function(e) {
576 e.preventDefault(); 576 e.preventDefault();
577 }); 577 });
  578 + console.log('JI_bilibili')
578 window.JI_bilibili && window.JI_bilibili($el); 579 window.JI_bilibili && window.JI_bilibili($el);
579 }; 580 };
580 // $(function () { 581 // $(function () {
  1 +
1 /** 2 /**
2 * 购物车选择尺寸、颜色和数量面板 3 * 购物车选择尺寸、颜色和数量面板
3 * 显示时构造当前商品信息的HTML插入yoho-page；消失则是直接清除HTML 4 * 显示时构造当前商品信息的HTML插入yoho-page；消失则是直接清除HTML
  1 +module.exports = {
  2 + "alg": "SALT_MD5",
  3 + "code": 200,
  4 + "data": {
  5 + "advance_cart_data": {
  6 + "gift_list": [],
  7 + "goods_list": [],
  8 + "off_shelves_goods_list": [],
  9 + "price_gift": [],
  10 + "promotion_info": [],
  11 + "promotion_pool_list": [],
  12 + "shopping_cart_data": {
  13 + "discount_amount": 0,
  14 + "fast_shopping_cost": 15,
  15 + "gain_yoho_coin": 0,
  16 + "goods_count": 0,
  17 + "has_invalid_goods": 0,
  18 + "is_multi_package": "N",
  19 + "last_order_amount": 0,
  20 + "offline_goods_count": 0,
  21 + "online_goods_count": 0,
  22 + "order_amount": 0,
  23 + "package_list": [],
  24 + "promotion_formula": "总计¥0.00=商品金额¥0.00",
  25 + "promotion_formula_list": [
  26 + {
  27 + "promotion": "商品金额",
  28 + "promotion_amount": "¥0.00"
  29 + }
  30 + ],
  31 + "remain_time": 0,
  32 + "selected_goods_count": 0,
  33 + "shipping_cost": 10,
  34 + "str_discount_amount": "¥0.00",
  35 + "str_order_amount": "¥0.00"
  36 + },
  37 + "sold_out_goods_list": []
  38 + },
  39 + "ordinary_cart_data": {
  40 + "gift_list": [],
  41 + "goods_list": [],
  42 + "off_shelves_goods_list": [],
  43 + "price_gift": [],
  44 + "promotion_info": [],
  45 + "promotion_pool_list": [
  46 + {
  47 + "goods_list": [
  48 + {
  49 + "attribute": "1",
  50 + "brand_domain": "5CM",
  51 + "brand_id": "4",
  52 + "brand_name": "5cm",
  53 + "buy_limit": 0,
  54 + "buy_number": "1",
  55 + "buy_type": 2,
  56 + "can_cod_pay": "Y",
  57 + "cn_alphabet": "5CM5CXSTB8117F55ChenShan",
  58 + "color_id": "2",
  59 + "color_name": "黑色",
  60 + "delay_notice": "",
  61 + "discount_tag": "",
  62 + "expect_arrival_time": "",
  63 + "factory_goods_name": "黑色",
  64 + "fit_promotions": [],
  65 + "get_yoho_coin": "0",
  66 + "goods_id": "352263",
  67 + "goods_images": "http://img12.static.yhbimg.com/goodsimg/2015/11/02/10/0239295214e59200bcad3af41522646fb1.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80",
  68 + "goods_type": "ordinary",
  69 + "is_advance": "N",
  70 + "is_deposit_advance": "N",
  71 + "is_jit": "N",
  72 + "is_limited": "N",
  73 + "is_outlets": "N",
  74 + "is_special": "N",
  75 + "last_price": "259.0",
  76 + "last_vip_price": 259,
  77 + "local_buy_number": 0,
  78 + "market_price": 839,
  79 + "max_sort_id": "1",
  80 + "middle_sort_id": "12",
  81 + "min_buy_number": 1,
  82 + "off_shelves": 0,
  83 + "offline_goods_status": 1,
  84 + "offline_storage_number": 0,
  85 + "offline_storage_status": 1,
  86 + "online_storage_number": 0,
  87 + "product_id": 272565,
  88 + "product_name": "5CM 3D立体印花衬衫",
  89 + "product_skc": "278071",
  90 + "product_skn": "51151583",
  91 + "product_sku": "888728",
  92 + "promotion_flag": "0",
  93 + "promotion_id": "0",
  94 + "real_price": 259,
  95 + "real_vip_price": 0,
  96 + "sale_price": 0,
  97 + "sales_price": 259,
  98 + "selected": "N",
  99 + "shop_id": 0,
  100 + "shopping_cart_goods_id": "60244",
  101 + "shopping_cart_id": "118792348",
  102 + "shopping_key": "2a7729e3e974cfe476e4472a89c13743",
  103 + "size_id": "207",
  104 + "size_name": "S",
  105 + "small_sort_id": "115",
  106 + "storage_number": "7",
  107 + "store_id": 0,
  108 + "str_subtotal": "¥259.00",
  109 + "subtotal": 259,
  110 + "supplier_id": 0,
  111 + "tags": [],
  112 + "uid": "8040155",
  113 + "vip1_price": "0.00",
  114 + "vip2_price": "0.00",
  115 + "vip3_price": "0.00",
  116 + "vip_discount": 1,
  117 + "vip_discount_money": 0,
  118 + "vip_discount_type": "3",
  119 + "vip_price": 0,
  120 + "wareHouseId": 0,
  121 + "yoho_coin_num": "0"
  122 + }
  123 + ],
  124 + "promotion_list": [
  125 + {
  126 + "alreadyMatch": false,
  127 + "condition_unit": 1,
  128 + "condition_value": -2,
  129 + "gift_goods_List": [],
  130 + "gift_price": 0,
  131 + "promotion_id": 9042,
  132 + "promotion_title": "james 5cm两件5折",
  133 + "promotion_type": "Discount",
  134 + "status": 0
  135 + },
  136 + {
  137 + "alreadyMatch": false,
  138 + "condition_unit": 1,
  139 + "condition_value": -1,
  140 + "gift_goods_List": [],
  141 + "gift_price": 0,
  142 + "promotion_id": 9004,
  143 + "promotion_title": "5cm 赠品",
  144 + "promotion_type": "Gift",
  145 + "status": 0
  146 + },
  147 + {
  148 + "alreadyMatch": false,
  149 + "condition_unit": 2,
  150 + "condition_value": -899,
  151 + "gift_goods_List": [],
  152 + "gift_price": 0,
  153 + "promotion_id": 6193,
  154 + "promotion_title": "【5CM 新品】 满￥899赠潮袜",
  155 + "promotion_type": "Gift",
  156 + "status": 0
  157 + },
  158 + {
  159 + "alreadyMatch": false,
  160 + "condition_unit": 2,
  161 + "condition_value": -300,
  162 + "gift_goods_List": [],
  163 + "gift_price": 0,
  164 + "promotion_id": 9080,
  165 + "promotion_title": "线下店满300减30勿动",
  166 + "promotion_type": "Cashreduce",
  167 + "status": 0
  168 + },
  169 + {
  170 + "alreadyMatch": false,
  171 + "condition_unit": 1,
  172 + "condition_value": -1,
  173 + "gift_goods_List": [],
  174 + "gift_price": 0,
  175 + "promotion_id": 9156,
  176 + "promotion_title": "5CM 促销",
  177 + "promotion_type": "Discount",
  178 + "status": 0
  179 + }
  180 + ],
  181 + "sub_promotion_list": []
  182 + },
  183 + {
  184 + "goods_list": [
  185 + {
  186 + "attribute": "1",
  187 + "brand_domain": "Android Homme",
  188 + "brand_id": "813",
  189 + "brand_name": "androidhomme",
  190 + "buy_limit": 0,
  191 + "buy_number": "1",
  192 + "buy_type": 2,
  193 + "can_cod_pay": "Y",
  194 + "cn_alphabet": "ANDROIDHOMMEAHP1510024PROPULSIONHI",
  195 + "color_id": "11",
  196 + "color_name": "红色",
  197 + "delay_notice": "",
  198 + "discount_tag": "",
  199 + "expect_arrival_time": "12月",
  200 + "factory_goods_name": "红色",
  201 + "fit_promotions": [],
  202 + "get_yoho_coin": "0",
  203 + "goods_id": "423037",
  204 + "goods_images": "http://img10.static.yhbimg.com/goodsimg/2015/12/14/08/01911a55ae0a88128358f2029683cdf908.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80",
  205 + "goods_type": "ordinary",
  206 + "is_advance": "N",
  207 + "is_deposit_advance": "N",
  208 + "is_jit": "N",
  209 + "is_limited": "N",
  210 + "is_outlets": "N",
  211 + "is_special": "N",
  212 + "last_price": "11.0",
  213 + "last_vip_price": 11,
  214 + "local_buy_number": 0,
  215 + "market_price": 2950,
  216 + "max_sort_id": "6",
  217 + "middle_sort_id": "44",
  218 + "min_buy_number": 1,
  219 + "off_shelves": 0,
  220 + "offline_goods_status": 1,
  221 + "offline_storage_number": 0,
  222 + "offline_storage_status": 1,
  223 + "online_storage_number": 0,
  224 + "product_id": 328777,
  225 + "product_name": "葡萄牙原产 Android Homme PROPULSION HI 中性高帮休闲鞋 红色",
  226 + "product_skc": "319742",
  227 + "product_skn": "51184089",
  228 + "product_sku": "1002521",
  229 + "promotion_flag": "109",
  230 + "promotion_id": "0",
  231 + "real_price": 11,
  232 + "real_vip_price": 0,
  233 + "sale_price": 0,
  234 + "sales_price": 11,
  235 + "selected": "N",
  236 + "shop_id": 0,
  237 + "shopping_cart_goods_id": "60240",
  238 + "shopping_cart_id": "118792348",
  239 + "shopping_key": "2a7729e3e974cfe476e4472a89c13743",
  240 + "size_id": "129",
  241 + "size_name": "43码",
  242 + "small_sort_id": "147",
  243 + "storage_number": "5",
  244 + "store_id": 0,
  245 + "str_subtotal": "¥11.00",
  246 + "subtotal": 11,
  247 + "supplier_id": 0,
  248 + "tags": [],
  249 + "uid": "8040155",
  250 + "vip1_price": "10.45",
  251 + "vip2_price": "9.90",
  252 + "vip3_price": "9.68",
  253 + "vip_discount": 1,
  254 + "vip_discount_money": 0,
  255 + "vip_discount_type": "1",
  256 + "vip_price": 11,
  257 + "wareHouseId": 0,
  258 + "yoho_coin_num": "0"
  259 + },
  260 + {
  261 + "attribute": "1",
  262 + "brand_domain": "5CM",
  263 + "brand_id": "4",
  264 + "brand_name": "5cm",
  265 + "buy_limit": 0,
  266 + "buy_number": "1",
  267 + "buy_type": 2,
  268 + "can_cod_pay": "Y",
  269 + "cn_alphabet": "5CM5CXSTT8109F55ChenShan",
  270 + "color_id": "7",
  271 + "color_name": "蓝色",
  272 + "delay_notice": "",
  273 + "discount_tag": "",
  274 + "expect_arrival_time": "",
  275 + "factory_goods_name": "蓝色",
  276 + "fit_promotions": [],
  277 + "get_yoho_coin": "0",
  278 + "goods_id": "352259",
  279 + "goods_images": "http://img12.static.yhbimg.com/goodsimg/2015/11/03/03/0246270e89981ca3d5835193cf328cd28b.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80",
  280 + "goods_type": "ordinary",
  281 + "is_advance": "N",
  282 + "is_deposit_advance": "N",
  283 + "is_jit": "N",
  284 + "is_limited": "N",
  285 + "is_outlets": "N",
  286 + "is_special": "N",
  287 + "last_price": "11.0",
  288 + "last_vip_price": 11,
  289 + "local_buy_number": 0,
  290 + "market_price": 739,
  291 + "max_sort_id": "1",
  292 + "middle_sort_id": "12",
  293 + "min_buy_number": 1,
  294 + "off_shelves": 0,
  295 + "offline_goods_status": 1,
  296 + "offline_storage_number": 0,
  297 + "offline_storage_status": 1,
  298 + "online_storage_number": 0,
  299 + "product_id": 272563,
  300 + "product_name": "5CM 字母刺绣纯色衬衫",
  301 + "product_skc": "278069",
  302 + "product_skn": "51151582",
  303 + "product_sku": "888719",
  304 + "promotion_flag": "0",
  305 + "promotion_id": "0",
  306 + "real_price": 11,
  307 + "real_vip_price": 0,
  308 + "sale_price": 0,
  309 + "sales_price": 11,
  310 + "selected": "N",
  311 + "shop_id": 0,
  312 + "shopping_cart_goods_id": "60242",
  313 + "shopping_cart_id": "118792348",
  314 + "shopping_key": "2a7729e3e974cfe476e4472a89c13743",
  315 + "size_id": "203",
  316 + "size_name": "M",
  317 + "small_sort_id": "115",
  318 + "storage_number": "6",
  319 + "store_id": 0,
  320 + "str_subtotal": "¥11.00",
  321 + "subtotal": 11,
  322 + "supplier_id": 0,
  323 + "tags": [],
  324 + "uid": "8040155",
  325 + "vip1_price": "10.45",
  326 + "vip2_price": "9.90",
  327 + "vip3_price": "9.68",
  328 + "vip_discount": 1,
  329 + "vip_discount_money": 0,
  330 + "vip_discount_type": "1",
  331 + "vip_price": 11,
  332 + "wareHouseId": 0,
  333 + "yoho_coin_num": "0"
  334 + }
  335 + ],
  336 + "promotion_list": [
  337 + {
  338 + "alreadyMatch": false,
  339 + "condition_unit": 1,
  340 + "condition_value": -2,
  341 + "gift_goods_List": [],
  342 + "gift_price": 0,
  343 + "promotion_id": 9102,
  344 + "promotion_title": "买一送一(dev)",
  345 + "promotion_type": "Cheapestfree",
  346 + "status": 0
  347 + }
  348 + ],
  349 + "sub_promotion_list": []
  350 + }
  351 + ],
  352 + "shopping_cart_data": {
  353 + "discount_amount": 0,
  354 + "fast_shopping_cost": 15,
  355 + "gain_yoho_coin": 0,
  356 + "goods_count": 3,
  357 + "has_invalid_goods": 0,
  358 + "is_multi_package": "N",
  359 + "last_order_amount": 0,
  360 + "offline_goods_count": 0,
  361 + "online_goods_count": 0,
  362 + "order_amount": 0,
  363 + "package_list": [],
  364 + "promotion_formula": "总计¥0.00=商品金额¥0.00",
  365 + "promotion_formula_list": [
  366 + {
  367 + "promotion": "商品金额",
  368 + "promotion_amount": "¥0.00"
  369 + }
  370 + ],
  371 + "remain_time": 0,
  372 + "selected_goods_count": 0,
  373 + "shipping_cost": 10,
  374 + "str_discount_amount": "¥0.00",
  375 + "str_order_amount": "¥0.00"
  376 + },
  377 + "sold_out_goods_list": []
  378 + }
  379 + },
  380 + "md5": "ee0be93e30274f6e49c22dcfe2d1012c",
  381 + "message": "cart goods list."
  382 +}
@@ -5,13 +5,76 @@ @@ -5,13 +5,76 @@
5 */ 5 */
6 6
7 require('cart/index.page.css') 7 require('cart/index.page.css')
  8 +
  9 +let testData = require('./data.json');
8 let $ = require('yoho-jquery'); 10 let $ = require('yoho-jquery');
9 let hbsTemplate = require('cart/index/index.hbs'); 11 let hbsTemplate = require('cart/index/index.hbs');
10 12
11 let indexObj = { 13 let indexObj = {
  14 + minStock: 1,
12 init() { 15 init() {
13 - let html = hbsTemplate({});  
14 - $('#main-wrap').html(html); 16 + let self = this;
  17 + $.ajax({
  18 + url: '/cart/index/new/data',
  19 + type: 'POST',
  20 + success: (data) => {
  21 + $('.cart-box').html(hbsTemplate(data));
  22 + }
  23 + })
  24 +
  25 + self.registerEvent();
  26 + self.loadRecommendForYou();
  27 + },
  28 + registerEvent() {
  29 + let self = this;
  30 +
  31 + $('.cart-nav').on('click', 'li', function() {
  32 + $('.cart-content').eq($(this).index()).removeClass('hide').siblings('.cart-content').addClass('hide');
  33 + $(this).addClass('active').siblings().removeClass('active')
  34 + });
  35 + $('.more-box>.down-arrow').on('click', function() {
  36 + $(this).parent().toggleClass('down')
  37 + });
  38 + $('.opt>.chk').on('click', function() {
  39 + $(this).toggleClass('checked')
  40 + });
  41 + $('.check-all').on('click', function() {
  42 + $(this).find('.chk').hasClass('checked') ? $('.opt>.chk').removeClass('checked') : $('.opt>.chk').addClass('checked');
  43 + $(this).find('.chk').toggleClass('checked');
  44 + });
  45 + $('.cart-good').on('click', '.num-opt .btn', function(e) {
  46 + let maxStock = 5;
  47 + let minusEl = $(e.delegateTarget).find('.btn-minus');
  48 + let plusEl = $(e.delegateTarget).find('.btn-plus');
  49 + let goodNum = $(e.delegateTarget).find('.good-num').val();
  50 +
  51 + $(this).hasClass('btn-plus') ? goodNum++ : goodNum--;
  52 +
  53 + if (goodNum < self.minStock) {
  54 + console.log('不能小于0')
  55 + return;
  56 + }
  57 + if (goodNum > maxStock) {
  58 + console.log('不能大于5')
  59 + return;
  60 + }
  61 + if (goodNum === self.minStock) {
  62 + $(minusEl).addClass('disabled');
  63 + } else if($(minusEl).hasClass('disabled')) {
  64 + $(minusEl).removeClass('disabled');
  65 + }
  66 + if (goodNum === maxStock) {
  67 + $(plusEl).addClass('disabled');
  68 + } else if($(plusEl).hasClass('disabled')) {
  69 + $(plusEl).removeClass('disabled');
  70 + }
  71 + $(e.delegateTarget).find('.good-num').val(goodNum);
  72 + })
  73 + },
  74 + loadRecommendForYou() {
  75 + if ($('.recommend-for-you').length) {
  76 + require('./recommend-for-you-cart');
  77 + }
15 } 78 }
16 } 79 }
17 80
  1 +/**
  2 + * 为您优选
  3 + * @author: bikai<kai.bi@yoho.cn>
  4 + * @date: 2015/11/16
  5 + */
  6 +
  7 +
  8 +var $ = require('yoho-jquery'),
  9 + lazyLoad = require('yoho-jquery-lazyload');
  10 +
  11 +var $recommendForYou = $('.recommend-for-you');
  12 +
  13 +$.get('/product/recommend-for-you/cart').then(function(html) {
  14 + var PRDID =[];
  15 +
  16 + $recommendForYou.html(html).show();
  17 + lazyLoad($('img.lazy'));
  18 +
  19 + //为您优选埋点 http://redmine.yoho.cn/issues/10116
  20 + $recommendForYou.find('.good-info').each(function() {
  21 + PRDID.push($(this).data('id'));
  22 + });
  23 +
  24 + window.givePoint({
  25 + 'REC_POSE': 110003,
  26 + 'PRD_ID': PRDID.join(','),
  27 + 'PRD_NUM': $('.recommend-for-you .good-info').length,
  28 + 'ACTION_ID': 0,
  29 + 'page_num': 1
  30 + });
  31 +
  32 + $recommendForYou.find('.good-info').on('click', 'a', function() {
  33 + var index = $(this).closest('.good-info').index() + 1;
  34 +
  35 + window.givePoint({
  36 + 'REC_POSE': 110003,
  37 + 'PRD_ID': $(this).closest('.good-info').data('id'),
  38 + 'PRD_NUM': index,
  39 + 'ACTION_ID': 1,
  40 + 'page_num': 1
  41 + });
  42 +
  43 + return true;
  44 + });
  45 +
  46 +}).fail(function() {
  47 + $recommendForYou.hide();
  48 +});
1 .good-item { 1 .good-item {
2 - display: flex;  
3 - width: 100%;  
4 - &:last-child {  
5 - .good-new-info {  
6 - border: none;  
7 - }  
8 - } 2 + display: flex;
  3 + width: 100%;
  4 +
  5 + &:last-child {
9 .good-new-info { 6 .good-new-info {
10 - padding-left: 0px; 7 + border: none;
11 } 8 }
12 - .opt {  
13 - width: 100px;  
14 - display: flex;  
15 - align-items: center;  
16 - justify-content: center;  
17 - .disable {  
18 - background-color: #7f7f7f;  
19 - } 9 + }
  10 +
  11 + .good-new-info {
  12 + padding-left: 0px;
  13 + }
  14 +
  15 + .opt {
  16 + width: 100px;
  17 + display: flex;
  18 + align-items: center;
  19 + justify-content: center;
  20 +
  21 + .disable {
  22 + background-color: #7f7f7f;
20 } 23 }
  24 + }
21 } 25 }
  26 +
22 .promos { 27 .promos {
23 - padding: 10px 30px 10px 100px;  
24 - height: 57px;  
25 - overflow: hidden;  
26 - width: 100%;  
27 - &.more {  
28 - height: 77px;  
29 - .promo-item {  
30 - display: none;  
31 - &:first-child {  
32 - display: flex;  
33 - }  
34 - }  
35 - .down-arrow {  
36 - display: block;  
37 - }  
38 - &.down {  
39 - height: auto;  
40 - .promo-item {  
41 - display: flex;  
42 - }  
43 - .down-arrow {  
44 - .iconfont:before {  
45 - content: "\e608";  
46 - }  
47 - }  
48 - } 28 + padding: 11px 30px 11px 100px;
  29 + height: 57px;
  30 + overflow: hidden;
  31 + width: 100%;
  32 +
  33 + &.more-box {
  34 + height: 77px;
  35 +
  36 + .promo-item {
  37 + display: none;
  38 +
  39 + &:first-child {
  40 + display: flex;
  41 + }
49 } 42 }
  43 +
50 .down-arrow { 44 .down-arrow {
51 - display: none;  
52 - width: 100%;  
53 - height: 25px;  
54 - margin-top: -7px;  
55 - text-align: center;  
56 - .iconfont {  
57 - color: #e0e0e0;  
58 - font-size: 30px;  
59 - &:before {  
60 - content: "\e609";  
61 - }  
62 - } 45 + display: block;
63 } 46 }
64 - .promo-item { 47 +
  48 + &.down {
  49 + height: auto;
  50 +
  51 + .promo-item {
65 display: flex; 52 display: flex;
66 - width: 100%;  
67 - height: 45px;  
68 - line-height: 45px;  
69 - .info {  
70 - flex: 1;  
71 - font-size: 24px;  
72 - .flag {  
73 - margin-right: 10px;  
74 - color: #ff575c;  
75 - border: solid 1PX #ff575c;  
76 - padding: 0px 16px 0px 16px;  
77 - border-radius: 3px;  
78 - } 53 + }
  54 +
  55 + .down-arrow {
  56 + .iconfont:before {
  57 + content: "\e608";
79 } 58 }
  59 + }
  60 + }
  61 + }
  62 +
  63 + .down-arrow {
  64 + display: none;
  65 + width: 100%;
  66 + height: 25px;
  67 + margin-top: -7px;
  68 + text-align: center;
  69 +
  70 + .iconfont {
  71 + color: #e0e0e0;
  72 + font-size: 30px;
  73 +
  74 + &:before {
  75 + content: "\e609";
  76 + }
80 } 77 }
81 - +.good-item {  
82 - margin-top: -10px; 78 + }
  79 +
  80 + .promo-item {
  81 + display: flex;
  82 + width: 100%;
  83 + height: 45px;
  84 + line-height: 45px;
  85 +
  86 + .info {
  87 + flex: 1;
  88 + font-size: 23px;
  89 + overflow: hidden;
  90 + text-overflow: ellipsis;
  91 + white-space: nowrap;
  92 +
  93 + .flag {
  94 + margin-right: 11px;
  95 + color: #ff575c;
  96 + border: solid 1PX #ff575c;
  97 + padding: 0px 16px 0px 16px;
  98 + border-radius: 4px;
  99 + }
83 } 100 }
  101 + }
  102 +
  103 + + .good-item {
  104 + margin-top: -11px;
  105 + }
84 } 106 }
  107 +
85 .fill-text { 108 .fill-text {
86 - padding: 2px 12px 2px 12px;  
87 - color: #fff;  
88 - font-size: 25px;  
89 - line-height: 30px;  
90 - border-radius: 30px 30px; 109 + padding: 2px 12px 2px 12px;
  110 + color: #fff;
  111 + font-size: 25px;
  112 + line-height: 30px;
  113 + border-radius: 30px 30px;
91 } 114 }
  115 +
92 .iconfont.chk { 116 .iconfont.chk {
93 - font-size: 40px;  
94 - &:before {  
95 - content: "\e647";  
96 - }  
97 - &.checked:before {  
98 - content: "\e60a";  
99 - } 117 + font-size: 40px;
  118 +
  119 + &:before {
  120 + content: "\e647";
  121 + }
  122 +
  123 + &.checked:before {
  124 + content: "\e60a";
  125 + }
100 } 126 }
  127 +
101 .good-new-info { 128 .good-new-info {
102 - width: 100%;  
103 - padding: 20px 30px 20px 30px; 129 + width: 100%;
  130 + padding: 20px 30px 20px 30px;
  131 + display: flex;
  132 + flex: 1;
  133 + border-bottom: solid 1PX #f0f0f0;
  134 +
  135 + .img-a {
104 display: flex; 136 display: flex;
105 - flex: 1;  
106 - border-bottom: solid 1PX #f0f0f0;  
107 - .img-a {  
108 - display: flex;  
109 - align-items: center; 137 + align-items: center;
  138 + }
  139 +
  140 + .img {
  141 + position: relative;
  142 +
  143 + .thumb {
  144 + width: 154px;
110 } 145 }
111 - .img {  
112 - position: relative;  
113 -  
114 - .thumb {  
115 - width: 154px;  
116 - }  
117 - .flag {  
118 - position: absolute;  
119 - left: 0px;  
120 - bottom: 0px;  
121 - width: 100%;  
122 - height: 24px;  
123 - text-align: center;  
124 - line-height: 24px;  
125 - color: #fff;  
126 - font-size: 24px;  
127 - &.price-gift {  
128 - background-color: #ff0062;  
129 - }  
130 - &.gift {  
131 - background-color: #85c45b;  
132 - }  
133 - .text {  
134 - transform: scale(0.7, 0.7)  
135 - }  
136 - } 146 +
  147 + .flag {
  148 + position: absolute;
  149 + left: 0px;
  150 + bottom: 0px;
  151 + width: 100%;
  152 + height: 23px;
  153 + text-align: center;
  154 + line-height: 23px;
  155 + color: #fff;
  156 + font-size: 23px;
  157 +
  158 + &.price-gift {
  159 + background-color: #ff0062;
  160 + }
  161 +
  162 + &.gift {
  163 + background-color: #85c45b;
  164 + }
  165 +
  166 + .text {
  167 + transform: scale(0.7, 0.7);
  168 + }
137 } 169 }
138 -  
139 - .info { 170 + }
  171 +
  172 + .info {
  173 + flex: 1;
  174 + margin-left: 32px;
  175 + padding-top: 20px;
  176 + position: relative;
  177 +
  178 + .fixed-height {
  179 + width: 100%;
  180 + min-height: 100px;
  181 + display: flex;
  182 +
  183 + .intro {
  184 + width: 100%;
140 flex: 1; 185 flex: 1;
141 - margin-left: 32px;  
142 - padding-top: 20px;  
143 - position: relative;  
144 -  
145 - .fixed-height {  
146 - width: 100%;  
147 - min-height: 100px;  
148 - display: flex;  
149 - .intro {  
150 - width: 100%;  
151 - flex: 1;  
152 - }  
153 - }  
154 - .name-row {  
155 - display: flex;  
156 - .name {  
157 - flex: 1;  
158 - font-size: 28px;  
159 - color: #5a5a5a;  
160 - }  
161 - }  
162 - .color-size-row {  
163 - color: #b6b6b6;  
164 - font-size: 28px;  
165 - margin-top: 4px;  
166 - span {  
167 - margin-right: 18px;  
168 - } 186 + }
  187 + }
  188 +
  189 + .name-row {
  190 + display: flex;
  191 +
  192 + .name {
  193 + flex: 1;
  194 + font-size: 28px;
  195 + color: #5a5a5a;
  196 + }
  197 + }
  198 +
  199 + .color-size-row {
  200 + color: #b6b6b6;
  201 + font-size: 28px;
  202 + margin-top: 4px;
  203 +
  204 + span {
  205 + margin-right: 18px;
  206 + }
  207 + }
  208 +
  209 + .price {
  210 + font-size: 28px;
  211 + color: #d0253b;
  212 +
  213 + .vip {
  214 + margin-left: 11px;
  215 + background-color: #d0021b;
  216 + }
  217 + }
  218 +
  219 + .tags {
  220 + width: 100%;
  221 + line-height: 30px;
  222 + text-align: right;
  223 +
  224 + .low-stocks {
  225 + background-color: #7f7f7f;
  226 + }
  227 +
  228 + .appear-date {
  229 + padding: 4px 0px;
  230 + float: left;
  231 + font-size: 23px;
  232 + color: #d0253b;
  233 + }
  234 + }
  235 +
  236 + .count {
  237 + width: 45px;
  238 + text-align: right;
  239 + color: #999;
  240 + font-size: 28px;
  241 + }
  242 + }
  243 +
  244 + .intro-edit {
  245 + display: none;
  246 + }
  247 +
  248 + .edit-box {
  249 + width: 240px;
  250 + margin-bottom: 11px;
  251 +
  252 + .num-opt {
  253 + height: 64px;
  254 + border: solid 1PX #dfdfdf;
  255 + border-radius: 5px 5px 0px 0px;
  256 + display: flex;
  257 +
  258 + .btn {
  259 + width: 70px;
  260 + display: block;
  261 + height: 100%;
  262 + text-align: center;
  263 + line-height: 64px;
  264 +
  265 + .iconfont {
  266 + color: #444444;
169 } 267 }
170 - .price {  
171 - font-size: 28px;  
172 - color: #d0253b;  
173 - .vip {  
174 - margin-left: 10px;  
175 - background-color: #d0021b;  
176 -  
177 - } 268 +
  269 + &.disabled {
  270 + .iconfont {
  271 + color: #b0b0b0;
  272 + }
178 } 273 }
179 - .tags {  
180 - width: 100%;  
181 - line-height: 30px;  
182 - text-align: right;  
183 - .low-stocks {  
184 - background-color: #7f7f7f;  
185 - }  
186 - .appear-date {  
187 - padding: 3px 0px;  
188 - float: left;  
189 - font-size: 24px;  
190 - color: #d0253b;  
191 - } 274 +
  275 + &.btn-minus {
  276 + border-right: 1PX solid #dfdfdf;
  277 +
  278 + .iconfont:before {
  279 + content: "\e625";
  280 + }
192 } 281 }
193 - .count {  
194 - width: 45px;  
195 - text-align: right;  
196 - color: #999;  
197 - font-size: 28px; 282 +
  283 + &.btn-plus {
  284 + border-left: 1px solid #dfdfdf;
  285 +
  286 + .iconfont:before {
  287 + content: "\e624";
  288 + }
198 } 289 }
  290 + }
  291 +
  292 + .good-num {
  293 + width: 100px;
  294 + text-align: center;
  295 + color: #444444;
  296 + font-size: 32px;
  297 + background-color: #fff;
  298 + border: none;
  299 + line-height: 50px;
  300 + }
199 } 301 }
200 - .intro-edit {  
201 - display: none;  
202 - }  
203 - .edit-box {  
204 - width: 240px;  
205 - margin-bottom: 10px;  
206 - .num-opt {  
207 - height: 65px;  
208 - border: solid 1px #dfdfdf;  
209 - border-radius: 5px 5px 0px 0px;  
210 - display: flex;  
211 - .btn {  
212 - width: 70px;  
213 - display: block;  
214 - height: 100%;  
215 - text-align: center;  
216 - line-height: 65px;  
217 - .iconfont {  
218 - color: #444444;  
219 - }  
220 - &.disabled {  
221 - .iconfont {  
222 - color: #b0b0b0;  
223 - }  
224 - }  
225 - &.btn-minus {  
226 - border-right: 1px solid #dfdfdf;  
227 - .iconfont:before {  
228 - content: "\e625";  
229 - }  
230 - }  
231 - &.btn-plus {  
232 - border-left: 1px solid #dfdfdf;  
233 - .iconfont:before {  
234 - content: "\e624";  
235 - }  
236 - }  
237 - }  
238 - .good-num {  
239 - width: 100px;  
240 - text-align: center;  
241 - color: #444444;  
242 - font-size: 32px;  
243 - } 302 +
  303 + .size-info {
  304 + width: 100%;
  305 + height: 64px;
  306 + line-height: 64px;
  307 + padding-left: 14px;
  308 + border: solid 1PX #dfdfdf;
  309 + border-top: none;
  310 + border-radius: 0px 0px 5px 5px;
  311 + display: flex;
  312 + color: #444;
  313 +
  314 + .txt {
  315 + flex: 1;
  316 + font-size: 23px;
  317 + overflow: hidden;
  318 + text-overflow: ellipsis;
  319 + white-space: nowrap;
  320 + }
  321 +
  322 + .down {
  323 + text-align: center;
  324 + width: 45px;
  325 +
  326 + .iconfont {
  327 + font-size: 30px;
244 } 328 }
245 - .size-info {  
246 - width: 100%;  
247 - height: 65px;  
248 - line-height: 65px;  
249 - padding-left: 14px;  
250 - border: solid 1px #dfdfdf;  
251 - border-top: none;  
252 - border-radius: 0px 0px 5px 5px;  
253 - display: flex;  
254 - color: #444;  
255 - .txt {  
256 - flex: 1;  
257 - font-size: 24px;  
258 - overflow:hidden;  
259 - text-overflow:ellipsis;  
260 - white-space: nowrap;  
261 - }  
262 - .down {  
263 - text-align: center;  
264 - width: 45px;  
265 - .iconfont {  
266 - font-size: 30px;  
267 - }  
268 - & .iconfont:before {  
269 - content: "\e609";  
270 - }  
271 - } 329 +
  330 + & .iconfont:before {
  331 + content: "\e609";
272 } 332 }
  333 + }
273 } 334 }
274 -} 335 + }
  336 +}
  337 +
275 .cart-good { 338 .cart-good {
276 - &.edit {  
277 - .info {  
278 - padding-top: 0px;  
279 - }  
280 - .intro-name {  
281 - display: none;  
282 - }  
283 - .intro-edit {  
284 - display: block;  
285 - } 339 + &.edit {
  340 + .info {
  341 + padding-top: 0px;
  342 + }
  343 +
  344 + .intro-name {
  345 + display: none;
  346 + }
  347 +
  348 + .intro-edit {
  349 + display: block;
286 } 350 }
  351 + }
287 } 352 }
1 .chose-panel { 1 .chose-panel {
2 - position: fixed;  
3 - top: 0; 2 + position: fixed;
  3 + top: 0;
  4 + right: 0;
  5 + bottom: 0;
  6 + left: 0;
  7 + z-index: 3;
  8 + display: none;
  9 + height: 100%;
  10 + background: rgba(0, 0, 0, 0.3);
  11 +
  12 + .main {
  13 + position: absolute;
4 right: 0; 14 right: 0;
5 bottom: 0; 15 bottom: 0;
6 left: 0; 16 left: 0;
7 - z-index: 3;  
8 - display: none;  
9 - height: 100%;  
10 - background: rgba(0, 0, 0, 0.3);  
11 -  
12 - .main {  
13 - position: absolute;  
14 - right: 0;  
15 - bottom: 0;  
16 - left: 0;  
17 - height: 610px;  
18 - background: #fff; 17 + height: 610px;
  18 + background: #fff;
  19 + }
  20 +
  21 + .infos {
  22 + padding: 0 22px;
  23 + height: 460px;
  24 + }
  25 +
  26 + .chose-items {
  27 + overflow: auto;
  28 + height: 325px;
  29 + }
  30 +
  31 + .basic-info {
  32 + position: relative;
  33 + overflow: hidden;
  34 + margin-top: 30px;
  35 + margin-bottom: 30px;
  36 + }
  37 +
  38 + .thumb {
  39 + float: left;
  40 + margin-right: 20px;
  41 + width: 100px;
  42 + }
  43 +
  44 + .text-info {
  45 + height: auto;
  46 +
  47 + .seckill-time {
  48 + position: absolute;
  49 + bottom: 0px;
  50 + right: 0px;
  51 + float: none;
19 } 52 }
20 53
21 - .infos {  
22 - padding: 0 22px;  
23 - height: 460px; 54 + .name {
  55 + display: -webkit-box;
  56 + overflow: hidden;
  57 + height: 74px;
  58 + font-size: 28px;
  59 + -webkit-line-clamp: 2;
  60 + -webkit-box-orient: vertical;
24 } 61 }
25 62
26 - .chose-items {  
27 - overflow: auto;  
28 - height: 325px; 63 + .price {
  64 + display: inline;
  65 + font-size: 24px;
29 } 66 }
30 67
31 - .basic-info {  
32 - position: relative;  
33 - overflow: hidden;  
34 - margin-top: 30px;  
35 - margin-bottom: 30px;  
36 - } 68 + .sale-price {
  69 + margin-right: 15px;
  70 + color: #e10;
37 71
38 - .thumb {  
39 - float: left;  
40 - margin-right: 20px;  
41 - width: 100px; 72 + &.no-price {
  73 + color: #000;
  74 + }
42 } 75 }
43 76
44 - .text-info {  
45 - height: auto;  
46 -  
47 - .seckill-time {  
48 - position: absolute;  
49 - bottom: 0px;  
50 - right: 0px;  
51 - float: none;  
52 - }  
53 -  
54 - .name {  
55 - display: -webkit-box;  
56 - overflow: hidden;  
57 - height: 74px;  
58 - font-size: 28px;  
59 - -webkit-line-clamp: 2;  
60 - -webkit-box-orient: vertical;  
61 - }  
62 -  
63 - .price {  
64 - display: inline;  
65 - font-size: 24px;  
66 - }  
67 -  
68 - .sale-price {  
69 - margin-right: 15px;  
70 - color: #e10;  
71 -  
72 - &.no-price {  
73 - color: #000;  
74 - }  
75 - }  
76 -  
77 - .market-price {  
78 - color: #b0b0b0;  
79 - text-decoration: line-through;  
80 - } 77 + .market-price {
  78 + color: #b0b0b0;
  79 + text-decoration: line-through;
81 } 80 }
82 -  
83 - .color-list,  
84 - .size-list,  
85 - .num {  
86 - position: relative;  
87 - padding-left: 80px;  
88 - font-size: 28px;  
89 -  
90 - input.disabled {  
91 - border-radius: 0;  
92 - background-color: #fff;  
93 - color: #000;  
94 - opacity: 1;  
95 - -webkit-appearance: none;  
96 - }  
97 -  
98 - > span {  
99 - position: absolute;  
100 - top: 20px;  
101 - left: 0;  
102 - }  
103 -  
104 - > span.left-num {  
105 - position: absolute;  
106 - top: 20px;  
107 - left: 380px;  
108 - }  
109 -  
110 - span.disabled {  
111 - color: #e6e6e6;  
112 - } 81 + }
  82 +
  83 + .color-list,
  84 + .size-list,
  85 + .num {
  86 + position: relative;
  87 + padding-left: 80px;
  88 + font-size: 28px;
  89 +
  90 + input.disabled {
  91 + border-radius: 0;
  92 + background-color: #fff;
  93 + color: #000;
  94 + opacity: 1;
  95 + -webkit-appearance: none;
113 } 96 }
114 97
115 - .size-list li.hide {  
116 - display: none; 98 + > span {
  99 + position: absolute;
  100 + top: 20px;
  101 + left: 0;
117 } 102 }
118 103
119 - .block {  
120 - display: block;  
121 - float: left;  
122 - box-sizing: border-box;  
123 - margin-right: 30px;  
124 - margin-bottom: 30px;  
125 - padding: 0 20px;  
126 - min-width: 80px;  
127 - max-width: 480px;  
128 - height: 80px;  
129 - border: 1px solid #000;  
130 - text-align: center;  
131 - line-height: 80px;  
132 - white-space: nowrap;  
133 - text-overflow: ellipsis;  
134 - overflow: hidden;  
135 -  
136 - &.chosed {  
137 - border-color: #e10;  
138 - background: resolve("shopping-cart/right.png") no-repeat;  
139 - background-position: bottom right;  
140 - background-size: 38px;  
141 - color: #e10;  
142 - }  
143 -  
144 - &.zero-stock {  
145 - border-color: #e0e0e0;  
146 - color: #e0e0e0;  
147 - }  
148 -  
149 - &.zero-stock.chosed {  
150 - border-color: #e0e0e0;  
151 - background: none;  
152 - background-color: #c0c0c0;  
153 - color: #e0e0e0;  
154 - } 104 + > span.left-num {
  105 + position: absolute;
  106 + top: 20px;
  107 + left: 380px;
155 } 108 }
156 109
157 - .num {  
158 - margin-bottom: 20px; 110 + span.disabled {
  111 + color: #e6e6e6;
159 } 112 }
  113 + }
160 114
161 - .num .btn {  
162 - display: block;  
163 - float: left;  
164 - width: 80px;  
165 - height: 80px;  
166 - border: 1px solid #e6e6e6;  
167 - text-align: center;  
168 - line-height: 80px;  
169 -  
170 - &.disable {  
171 - color: #e6e6e6;  
172 - } 115 + .size-list li.hide {
  116 + display: none;
  117 + }
  118 +
  119 + .block {
  120 + display: block;
  121 + float: left;
  122 + box-sizing: border-box;
  123 + margin-right: 30px;
  124 + margin-bottom: 30px;
  125 + padding: 0 20px;
  126 + min-width: 80px;
  127 + max-width: 480px;
  128 + height: 80px;
  129 + border: 1px solid #000;
  130 + text-align: center;
  131 + line-height: 80px;
  132 + white-space: nowrap;
  133 + text-overflow: ellipsis;
  134 + overflow: hidden;
  135 +
  136 + &.chosed {
  137 + border-color: #e10;
  138 + background: resolve("shopping-cart/right.png") no-repeat;
  139 + background-position: bottom right;
  140 + background-size: 38px;
  141 + color: #e10;
173 } 142 }
174 143
175 - .good-num {  
176 - float: left;  
177 - margin-left: -1px;  
178 - padding: 0;  
179 - width: 106px;  
180 - height: 80px;  
181 - border: 1px solid #e6e6e6;  
182 - text-align: center;  
183 - line-height: 80px; 144 + &.zero-stock {
  145 + border-color: #e0e0e0;
  146 + color: #e0e0e0;
184 } 147 }
185 148
186 - .btn-plus {  
187 - margin-left: -1px; 149 + &.zero-stock.chosed {
  150 + border-color: #e0e0e0;
  151 + background: none;
  152 + background-color: #c0c0c0;
  153 + color: #e0e0e0;
188 } 154 }
189 -  
190 - .btn-wrap {  
191 - position: relative;  
192 - box-sizing: border-box;  
193 - padding: 20px;  
194 - height: 120px;  
195 - border-top: 1px solid #e6e6e6;  
196 - background: #fff;  
197 - text-align: center;  
198 -  
199 - .btn-sure {  
200 - width: 260px;  
201 - height: 80px;  
202 - border: none;  
203 - background: #e10;  
204 - color: #fff;  
205 - font-size: 32px;  
206 - } 155 + }
  156 +
  157 + .num {
  158 + margin-bottom: 20px;
  159 + }
  160 +
  161 + .num .btn {
  162 + display: block;
  163 + float: left;
  164 + width: 80px;
  165 + height: 80px;
  166 + border: 1px solid #e6e6e6;
  167 + text-align: center;
  168 + line-height: 80px;
  169 +
  170 + &.disable {
  171 + color: #e6e6e6;
  172 + }
  173 + }
  174 +
  175 + .good-num {
  176 + float: left;
  177 + margin-left: -1px;
  178 + padding: 0;
  179 + width: 106px;
  180 + height: 80px;
  181 + border: 1px solid #e6e6e6;
  182 + text-align: center;
  183 + line-height: 80px;
  184 + }
  185 +
  186 + .btn-plus {
  187 + margin-left: -1px;
  188 + }
  189 +
  190 + .btn-wrap {
  191 + position: relative;
  192 + box-sizing: border-box;
  193 + padding: 20px;
  194 + height: 120px;
  195 + border-top: 1px solid #e6e6e6;
  196 + background: #fff;
  197 + text-align: center;
  198 +
  199 + .btn-sure {
  200 + width: 260px;
  201 + height: 80px;
  202 + border: none;
  203 + background: #e10;
  204 + color: #fff;
  205 + font-size: 32px;
207 } 206 }
  207 + }
208 } 208 }
1 body { 1 body {
2 - background: #f0f0f0; 2 + background: #f0f0f0;
3 } 3 }
  4 +
4 .shopping-cart-page { 5 .shopping-cart-page {
5 - margin-bottom: 120px;  
6 - overflow-x: hidden;  
7 - .box {  
8 - margin-top: 20px;  
9 - background-color: #FFF; 6 + margin-bottom: 120px;
  7 + overflow-x: hidden;
  8 +
  9 + .box {
  10 + background-color: #fff;
  11 + }
  12 +
  13 + .cart-nav {
  14 + color: #c6c6c6;
  15 + margin-bottom: 20px;
  16 + border-bottom: 1PX solid #e0e0e0;
  17 + background: #fff;
  18 +
  19 + li {
  20 + float: left;
  21 + width: 50%;
  22 + padding: 35px 0;
  23 + height: 35px;
  24 + box-sizing: content-box;
10 } 25 }
11 - .cart-nav {  
12 - color: #c6c6c6;  
13 - border-bottom: 1PX solid #e0e0e0;  
14 - background: #fff;  
15 -  
16 - li {  
17 - float: left;  
18 - width: 50%;  
19 - padding: 35px 0;  
20 - height: 35px;  
21 - box-sizing: content-box;  
22 - }  
23 26
24 - li.active {  
25 - color: #000;  
26 - } 27 + li.active {
  28 + color: #000;
  29 + }
27 30
28 - span {  
29 - display: block;  
30 - box-sizing: border-box;  
31 - width: 100%;  
32 - height: 35px;  
33 - line-height: 35px;  
34 - font-size: 35px;  
35 - text-align: center;  
36 - } 31 + span {
  32 + display: block;
  33 + box-sizing: border-box;
  34 + width: 100%;
  35 + height: 35px;
  36 + line-height: 35px;
  37 + font-size: 35px;
  38 + text-align: center;
  39 + }
37 40
38 - li:first-child span {  
39 - border-right: 1PX solid #e0e0e0;  
40 - } 41 + li:first-child span {
  42 + border-right: 1PX solid #e0e0e0;
  43 + }
41 44
42 - li:last-child {  
43 - position: relative;  
44 - } 45 + li:last-child {
  46 + position: relative;
  47 + }
45 48
46 - .presell-tip {  
47 - position: absolute;  
48 - z-index: 1;  
49 - left: -2rem;  
50 - top: 1.75rem;  
51 - } 49 + .presell-tip {
  50 + position: absolute;
  51 + z-index: 1;
  52 + left: -2rem;
  53 + top: 1.75rem;
  54 + }
52 55
53 - .triangle {  
54 - width: 0;  
55 - height: 0;  
56 - border-left: 8PX solid transparent;  
57 - border-right: 8PX solid transparent;  
58 - border-bottom: 12PX solid #000;  
59 - margin-left: 6rem;  
60 - } 56 + .triangle {
  57 + width: 0;
  58 + height: 0;
  59 + border-left: 8PX solid transparent;
  60 + border-right: 8PX solid transparent;
  61 + border-bottom: 12PX solid #000;
  62 + margin-left: 6rem;
  63 + }
61 64
62 - .pt-content {  
63 - position: relative;  
64 - padding: 12px;  
65 - background: #000;  
66 - color: #fff;  
67 - font-size: 14px;  
68 - border-radius: 5PX;  
69 - text-align: center;  
70 - width: 7rem;  
71 - } 65 + .pt-content {
  66 + position: relative;
  67 + padding: 12px;
  68 + background: #000;
  69 + color: #fff;
  70 + font-size: 14px;
  71 + border-radius: 5PX;
  72 + text-align: center;
  73 + width: 7rem;
72 } 74 }
73 - .login-info {  
74 - height: 54px;  
75 - padding: 20px 23px;  
76 - color: #24acaa;  
77 - text-align: center;  
78 - font-size: 33px;  
79 - box-sizing: content-box;  
80 - .iconfont {  
81 - font-size: 33px;  
82 - }  
83 - .btn {  
84 - display: inline-block;  
85 - background: #ed0010;  
86 - color: #fff;  
87 - width: 94px;  
88 - height: 54px;  
89 - line-height: 54px;  
90 - } 75 + }
  76 +
  77 + .login-info {
  78 + height: 54px;
  79 + padding: 20px 23px;
  80 + color: #24acaa;
  81 + text-align: center;
  82 + font-size: 33px;
  83 + box-sizing: content-box;
  84 +
  85 + .iconfont {
  86 + font-size: 33px;
91 } 87 }
  88 +
  89 + .btn {
  90 + display: inline-block;
  91 + background: #ed0010;
  92 + color: #fff;
  93 + width: 94px;
  94 + height: 54px;
  95 + line-height: 54px;
  96 + }
  97 + }
  98 +}
  99 +
  100 +.more-box {
  101 + transition: all 200s;
92 } 102 }
  103 +
93 .promotion-header { 104 .promotion-header {
  105 + width: 100%;
  106 + height: 88px;
  107 + overflow: hidden;
  108 + padding: 11px 30px 11px 30px;
  109 + border-bottom: solid 1PX #f0f0f0;
  110 +
  111 + .promo-item {
  112 + height: 66px;
  113 + line-height: 66px;
  114 + font-size: 26px;
  115 + color: #444;
  116 + display: flex;
94 width: 100%; 117 width: 100%;
95 - height: 88px;  
96 - overflow: hidden;  
97 - padding: 11px 30px 11px 30px;  
98 - border-bottom: solid 1PX #f0f0f0; 118 + }
  119 +
  120 + &.more-box {
  121 + height: 108px;
  122 +
99 .promo-item { 123 .promo-item {
100 - height: 66px;  
101 - line-height: 66px;  
102 - font-size: 26px;  
103 - color: #444; 124 + display: none;
  125 +
  126 + &:first-child {
104 display: flex; 127 display: flex;
105 - width: 100%;  
106 - }  
107 - &.more {  
108 - height: 108px;  
109 - .promo-item {  
110 - display: none;  
111 - &:first-child {  
112 - display: flex;  
113 - }  
114 - }  
115 - .down-arrow {  
116 - display: block;  
117 - }  
118 - &.down {  
119 - height: auto;  
120 - .promo-item {  
121 - display: flex;  
122 - }  
123 - .down-arrow {  
124 - .iconfont:before {  
125 - content: "\e608";  
126 - }  
127 - }  
128 - } 128 + }
129 } 129 }
  130 +
130 .down-arrow { 131 .down-arrow {
131 - display: none;  
132 - width: 100%;  
133 - height: 34px;  
134 - margin-top: -14px;  
135 - text-align: center;  
136 - .iconfont {  
137 - color: #e0e0e0;  
138 - font-size: 30px;  
139 - &:before {  
140 - content: "\e609";  
141 - }  
142 - } 132 + display: block;
143 } 133 }
144 - .info {  
145 - flex: 1;  
146 - .cuxiao {  
147 - margin-right: 10px;  
148 - color: #ff575c;  
149 - font-size: 30px;  
150 - }  
151 - .cuxiao:before {  
152 - content: "\e6b5"; 134 +
  135 + &.down {
  136 + height: auto;
  137 +
  138 + .promo-item {
  139 + display: flex;
  140 + }
  141 +
  142 + .down-arrow {
  143 + .iconfont:before {
  144 + content: "\e608";
153 } 145 }
  146 + }
  147 + }
  148 + }
  149 +
  150 + .down-arrow {
  151 + display: none;
  152 + width: 100%;
  153 + height: 34px;
  154 + margin-top: -14px;
  155 + text-align: center;
  156 +
  157 + .iconfont {
  158 + color: #e0e0e0;
  159 + font-size: 30px;
  160 +
  161 + &:before {
  162 + content: "\e609";
  163 + }
  164 + }
  165 + }
  166 +
  167 + .info {
  168 + flex: 1;
  169 + overflow: hidden;
  170 + text-overflow: ellipsis;
  171 + white-space: nowrap;
  172 +
  173 + .cuxiao {
  174 + margin-right: 11px;
  175 + color: #ff575c;
  176 + font-size: 30px;
  177 + }
  178 +
  179 + .cuxiao:before {
  180 + content: "\e6b5";
154 } 181 }
  182 + }
155 } 183 }
  184 +
156 .to-gift { 185 .to-gift {
157 - text-align: right;  
158 - width: 140px;  
159 - a {  
160 - color: #ff575c;  
161 - font-size: 24px;  
162 - } 186 + text-align: right;
  187 + width: 139px;
  188 +
  189 + a {
  190 + color: #ff575c;
  191 + font-size: 23px;
  192 + }
163 } 193 }
  194 +
164 .iconfont.to-arrow { 195 .iconfont.to-arrow {
165 - color: #e0e0e0;  
166 - margin-left: 10px;  
167 - &:before {  
168 - content: "\e604";  
169 - } 196 + color: #e0e0e0;
  197 + margin-left: 11px;
  198 +
  199 + &:before {
  200 + content: "\e604";
  201 + }
170 } 202 }
171 203
172 -.activity-title{  
173 - background-color: #FFF;  
174 - border-top: 1px solid #e0e0e0;  
175 - font-size: 32px;  
176 - padding: 20px 20px 0; 204 +.activity-title {
  205 + background-color: #fff;
  206 + border-top: 1PX solid #e0e0e0;
  207 + font-size: 32px;
  208 + padding: 20px 20px 0;
177 } 209 }
178 210
179 -.activity{  
180 - background-color: #FFF;  
181 - padding: 8px 20px 20px 32px;  
182 - font-size: 26px;  
183 - li:before {  
184 - content: "";  
185 - display: inline-block;  
186 - margin-right: 10px;  
187 - width: 8px;  
188 - height: 8px;  
189 - background-color: #000;  
190 - border-radius: 50%;  
191 - position: relative;  
192 - left: 0;  
193 - top: -.12rem;  
194 - } 211 +.activity {
  212 + background-color: #fff;
  213 + padding: 8px 20px 20px 32px;
  214 + font-size: 26px;
  215 +
  216 + li:before {
  217 + content: "";
  218 + display: inline-block;
  219 + margin-right: 11px;
  220 + width: 8px;
  221 + height: 8px;
  222 + background-color: #000;
  223 + border-radius: 50%;
  224 + position: relative;
  225 + left: 0;
  226 + top: -.12rem;
  227 + }
195 } 228 }
  229 +
196 .price-compute { 230 .price-compute {
197 - background-color: #FFF;  
198 - padding: 20px;  
199 - border-top: 1px solid #e0e0e0;  
200 - font-size: 28px;  
201 - margin-bottom: 37px;  
202 -  
203 - .title {  
204 - display: inline-block;  
205 - width: 175px;  
206 - } 231 + background-color: #fff;
  232 + padding: 20px;
  233 + border-top: 1px solid #e0e0e0;
  234 + font-size: 28px;
  235 + margin-bottom: 38px;
207 236
208 - .minus {  
209 - float: right;  
210 - } 237 + .title {
  238 + display: inline-block;
  239 + width: 175px;
  240 + }
  241 +
  242 + .minus {
  243 + float: right;
  244 + }
211 } 245 }
  246 +
212 .cart-footer { 247 .cart-footer {
213 - background-color: #FFF;  
214 - position: fixed;  
215 - width: 100%;  
216 - left: 0px;  
217 - bottom: 0px;  
218 - height: 120px; 248 + z-index: 99;
  249 + background-color: #fff;
  250 + position: fixed;
  251 + width: 100%;
  252 + left: 0px;
  253 + bottom: 0px;
  254 + height: 120px;
  255 + display: flex;
  256 +
  257 + .check-all {
  258 + width: 90px;
  259 + text-align: center;
  260 + padding-top: 20px;
  261 +
  262 + p {
  263 + font-size: 26px;
  264 + color: #666;
  265 + }
  266 + }
  267 +
  268 + .opts {
  269 + flex: 1;
  270 + padding: 18px;
  271 + text-align: right;
219 display: flex; 272 display: flex;
220 - .check-all {  
221 - width: 90px;  
222 - text-align: center;  
223 - padding-top: 20px;  
224 - p{  
225 - font-size: 26px;  
226 - color: #666;  
227 - } 273 + justify-content: flex-end;
  274 +
  275 + &.hide {
  276 + display: none;
228 } 277 }
229 - .opts {  
230 - flex: 1;  
231 - padding: 17px;  
232 - text-align: right;  
233 - display: flex;  
234 - justify-content: flex-end;  
235 - &.hide {  
236 - display: none;  
237 - }  
238 - .btn {  
239 - width: 170px;  
240 - height: 88px;  
241 - border-radius: 5px;  
242 - color: #fff;  
243 - margin-left: 14px;  
244 - margin-right: 14px;  
245 - &.btn-gray {  
246 - background-color: #444444;  
247 - }  
248 - &.btn-red {  
249 - background-color: #d1021c;  
250 - }  
251 - }  
252 - .total {  
253 - flex: 1;  
254 - padding-top: 10px;  
255 - .price {  
256 - color: #d0253b;  
257 - font-size: 32px;  
258 - }  
259 - .intro {  
260 - color: #b6b6b6;  
261 - font-size: 24px;  
262 - }  
263 - } 278 +
  279 + .btn {
  280 + width: 170px;
  281 + height: 88px;
  282 + border-radius: 5px;
  283 + color: #fff;
  284 + margin-left: 14px;
  285 + margin-right: 14px;
  286 +
  287 + &.btn-gray {
  288 + background-color: #444444;
  289 + }
  290 +
  291 + &.btn-red {
  292 + background-color: #d1021c;
  293 + }
264 } 294 }
265 295
  296 + .total {
  297 + flex: 1;
  298 + padding-top: 11px;
  299 +
  300 + .price {
  301 + color: #d0253b;
  302 + font-size: 32px;
  303 + }
  304 +
  305 + .intro {
  306 + color: #b6b6b6;
  307 + font-size: 23px;
  308 + }
  309 + }
  310 + }
266 } 311 }
  312 +
267 .all-gift-box { 313 .all-gift-box {
268 - .gift-item {  
269 - width: 100%;  
270 - display: flex;  
271 - &:last-child {  
272 - .content {  
273 - border: none;  
274 - }  
275 - }  
276 - .flag {  
277 - width: 80px;  
278 - line-height: 80px;  
279 - padding-right: 18px;  
280 - text-align: right;  
281 - color: #444444;  
282 - .iconfont {  
283 - vertical-align: middle;  
284 - font-size: 32px;  
285 - &.gift:before {  
286 - content: "\e620";  
287 - }  
288 - &.price-gift:before {  
289 - content: "\e645";  
290 - }  
291 - } 314 + .gift-item {
  315 + width: 100%;
  316 + display: flex;
  317 +
  318 + &:last-child {
  319 + .content {
  320 + border: none;
  321 + }
  322 + }
  323 +
  324 + .flag {
  325 + width: 80px;
  326 + line-height: 80px;
  327 + padding-right: 18px;
  328 + text-align: right;
  329 + color: #444444;
  330 +
  331 + .iconfont {
  332 + vertical-align: middle;
  333 + font-size: 32px;
  334 +
  335 + &.gift:before {
  336 + content: "\e620";
292 } 337 }
293 - .content {  
294 - width: 100%;  
295 - display: flex;  
296 - height: 88px;  
297 - line-height: 88px;  
298 - padding-right: 30px;  
299 - border-bottom: solid 1px #f1f1f1;  
300 - .info {  
301 - flex: 1;  
302 - }  
303 - .opt {  
304 - text-align: right;  
305 - width: 140px;  
306 - } 338 +
  339 + &.price-gift:before {
  340 + content: "\e645";
307 } 341 }
  342 + }
  343 + }
  344 +
  345 + .content {
  346 + flex: 1;
  347 + width: 100%;
  348 + display: flex;
  349 + height: 88px;
  350 + line-height: 88px;
  351 + padding-right: 30px;
  352 + border-bottom: solid 1PX #f1f1f1;
  353 +
  354 + .info {
  355 + flex: 1;
  356 + }
  357 +
  358 + .opt {
  359 + text-align: right;
  360 + width: 139px;
  361 + }
308 } 362 }
  363 + }
309 } 364 }
  365 +
310 .disable-box { 366 .disable-box {
311 - .remove-all {  
312 - width: 100%;  
313 - height: 122px;  
314 - border-top: solid 1px #f1f1f1;  
315 - text-align: center;  
316 - padding-top: 30px;  
317 - .btn-remove {  
318 - width: 228px;  
319 - height: 60px;  
320 - border: solid 1px #b0b0b0;  
321 - background-color: #FFF;  
322 - color: #444444;  
323 - font-size: 29px;  
324 - border-radius: 3px;  
325 - } 367 + .remove-all {
  368 + width: 100%;
  369 + height: 122px;
  370 + border-top: solid 1PX #f1f1f1;
  371 + text-align: center;
  372 + padding-top: 30px;
  373 +
  374 + .btn-remove {
  375 + width: 229px;
  376 + height: 60px;
  377 + border: solid 1PX #b0b0b0;
  378 + background-color: #fff;
  379 + color: #444444;
  380 + font-size: 29px;
  381 + border-radius: 4px;
326 } 382 }
  383 + }
327 } 384 }
1 @import "index-new"; 1 @import "index-new";
2 -@import "cart-good";  
  2 +@import "cart-good";
  3 +@import "../product/detail/recommend-for-you";
  4 +@import "../common/good";
@@ -226,3 +226,124 @@ @@ -226,3 +226,124 @@
226 padding-left: 15px; 226 padding-left: 15px;
227 min-height: 880px; 227 min-height: 880px;
228 } 228 }
  229 +.width750 {
  230 + .good-info {
  231 + margin: 12px 18px 47px;
  232 + width: 323px;
  233 + height: 593px;
  234 +
  235 + .tag-container {
  236 + height: 33px;
  237 +
  238 + .good-tag {
  239 + margin-right: 5px;
  240 + height: 33px;
  241 + font-size: 21px;
  242 + line-height: 33px;
  243 + }
  244 +
  245 + .new-tag {
  246 + width: 70px;
  247 + }
  248 +
  249 + .hot-tag {
  250 + width: 70px;
  251 + }
  252 +
  253 + .renew-tag {
  254 + width: 105px;
  255 + }
  256 +
  257 + .sale-tag {
  258 + width: 70px;
  259 + }
  260 +
  261 + .new-festival-tag {
  262 + width: 117px;
  263 + background-size: 117px 33px;
  264 + }
  265 +
  266 + .limit-tag {
  267 + width: 70px;
  268 + line-height: 30px;
  269 + }
  270 +
  271 + .is-presell {
  272 + width: 70px;
  273 + }
  274 + }
  275 + }
  276 +
  277 + .good-detail-img {
  278 + height: 431px;
  279 +
  280 + .good-islike {
  281 + width: 70px;
  282 + height: 70px;
  283 + font-size: 35px;
  284 + line-height: 70px;
  285 + }
  286 + img {
  287 + height: 431px;
  288 + }
  289 +
  290 + .few-tag {
  291 + height: 33px;
  292 + font-size: 21px;
  293 + line-height: 33px;
  294 + }
  295 +
  296 + .out-tag {
  297 + height: 38px;
  298 + font-size: 21px;
  299 + line-height: 38px;
  300 + }
  301 +
  302 + }
  303 +
  304 + .good-detail-text {
  305 + .name a {
  306 + margin: 18px 0 12px;
  307 + min-height: 59px;
  308 + font-size: 26px;
  309 + line-height: 35px;
  310 + padding: 6px 0;
  311 + height: 70px;
  312 + }
  313 +
  314 + .price {
  315 + font-size: 26px;
  316 + line-height: 26px;
  317 +
  318 + .market-price {
  319 + margin: 0 0 0 6px;
  320 + }
  321 + }
  322 +
  323 + .vip-grade {
  324 + margin-right: 9px;
  325 + width: 61px;
  326 + height: 38px;
  327 + }
  328 +
  329 +
  330 + .vip-info {
  331 + margin-top: 22px;
  332 + font-size: 21px;
  333 + line-height: 38px;
  334 +
  335 + .vip-icon {
  336 + margin-right: 9px;
  337 + width: 103px;
  338 + height: 38px;
  339 + }
  340 + }
  341 + }
  342 +
  343 + .goods-container {
  344 + padding-top: 9px;
  345 + padding-left: 18px;
  346 + min-height: 1031px;
  347 + }
  348 +
  349 +}
1 .recommend-for-you { 1 .recommend-for-you {
  2 + &.width750 {
  3 +
  4 + }
2 padding: 30px 0; 5 padding: 30px 0;
3 border-top: 1px solid #e0e0e0; 6 border-top: 1px solid #e0e0e0;
4 border-bottom: 1px solid #e0e0e0; 7 border-bottom: 1px solid #e0e0e0;
@@ -60,3 +63,37 @@ @@ -60,3 +63,37 @@
60 } 63 }
61 } 64 }
62 } 65 }
  66 +.width750 {
  67 + .recommend-for-you {
  68 + padding: 35px 0;
  69 + font-size: 14px;
  70 + .title {
  71 + font-size: 38px;
  72 + line-height: 103px;
  73 + }
  74 + .swiper-container {
  75 + padding: 35px 35px 23px;
  76 + .swiper-slide {
  77 + margin: 0 12px;
  78 + width: 183px;
  79 +
  80 + img {
  81 + height: 244px;
  82 + }
  83 + }
  84 + }
  85 + .sale-name {
  86 + margin-top: 23px;
  87 + }
  88 +
  89 + .price {
  90 + margin-top: 9px;
  91 + font-size: 28px;
  92 +
  93 + .sale-price {
  94 + /*display: block;*/
  95 + margin-right: 9px;
  96 + }
  97 + }
  98 + }
  99 +}