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 @@
<section class="s-feild">
<label>身份证号</label><input type="text" id="tb_cert_no" name="tb_cert_no" placeholder="请输入您身份证号码" maxlength="18">
</section>
<section class="s-feild" data-aslider-in="province|fade">
<section class="s-feild province-select" data-aslider-in="province|fade">
<label>学校省份</label><input type="text" id="s-province-tb" name="s-province-tb" readonly="readonly" placeholder="请选择省份"><span class="s-select iconfont" >&#xe604;</span>
</section>
<section class="s-feild" data-aslider-in="school|fade" aslider-isShow="false">
<section class="s-feild school-select" data-aslider-in="school|fade" aslider-isShow="false">
<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>
</section>
... ...
... ... @@ -4,22 +4,48 @@
* @date: 2016/12/21
*/
'use strict';
const helpers = global.yoho.helpers;
const headerModel = require('../../../doraemon/models/header'); // 头部model
const footerModel = require('../../../doraemon/models/footer_tab'); // 底部tab
const indexModel = require('../models/index');
let index = (req, res, next) => {
let data = {};
res.render('index', Object.assign(data, {
let isLogin = req.user && req.user.uid,
pageData = {
isLogin,
signurl: helpers.urlFormat('/signin.html', {
refer: '/cart/index/index'
})
};
res.render('index', Object.assign(pageData, {
title: '购物车',
module: 'cart',
page: 'index',
localCss: true,
width750: true
}))
};
width750: true,
pageHeader: headerModel.setNav({
navTitle: '购物车',
backUrl: '/product/show_.html'
}),
pageFooter: true,
}));
};
let indexData = (req, res, next) => {
if (!req.xhr) {
return next();
}
let shoppingKey = req.cookies._SPK || '',
channel = req.cookies._Channel;
return indexModel.indexData(8040155, 'dc9d09e2ffd8607f2cfd8b9c95962923', channel).then(data => {
res.json(data);
}).catch(next);
}
module.exports = {
index
index,
indexData
};
... ...
... ... @@ -5,4 +5,196 @@
*/
'use strict';
const helpers = global.yoho.helpers;
const api = global.yoho.API;
const _ = require('lodash');
const indexData = (uid, shoppingKey, saleChannel, cartType) => {
return api.get('', {
method: 'app.Shopping.queryCart',
uid: uid,
shopping_key: shoppingKey,
sale_channel: saleChannel
}).then((data) => {
let cart = data.data;
let result = {};
let ordinaryCount = _.get(cart, 'ordinary_cart_data.shopping_cart_data.goods_count', 0);
let advanceCount = _.get(cart, 'advance_cart_data.shopping_cart_data.goods_count', 0);
let ordinarySoldOut = _.get(cart, 'ordinary_cart_data.sold_out_goods_list', []);
let advanceSoldOut = _.get(cart, 'advance_cart_data.sold_out_goods_list', []);
// 普通购物车和预售购物车都为空
if (ordinaryCount === 0 && advanceCount === 0 && !ordinarySoldOut.length && !advanceSoldOut.length) {
result.isEmptyCart = true;
return result;
}
// 普通购物车空，则显示预售购物车
if (ordinaryCount === 0 && !ordinarySoldOut.length) {
result.cartNav = false;
result.cartType = 'advance';
} // 预售购物车空，则显示普通购物车
else if (advanceCount === 0 && !advanceSoldOut.length) {
result.cartNav = false;
result.cartType = 'ordinary';
} // 以上两个购物车中都有数据, 默认显示普通购物车
else {
result.cartNav = true;
result.cartType = cartType || 'ordinary';
}
/* 普通购物车 */
result.commonGoodsCount = ordinaryCount;
result.commonCart = processData(cart.ordinary_cart_data, false);
/* 预售购物车 */
result.presellGoodsCount = advanceCount;
result.preSellCart = processData(cart.advance_cart_data);
console.log(result)
return result;
});
};
const processData = (data, isAdvanceCart) => {
let result = {};
// 购买的可用商品列表
result.goods = _.get(data, 'goods_list', []).map(good => { return formatCartGoods(good, isAdvanceCart); });
result.promotionPoolList = _.get(data, 'promotion_pool_list', []).map(promotion => {
return {
goods: _.get(promotion, 'goods_list', []).map(good => { return formatCartGoods(good, isAdvanceCart); }),
promotions: _.get(promotion, 'promotion_list', []).map(promo => {
return {
status: promo.status,
conditionUnit: promo.condition_unit,
conditionValue: promo.condition_value,
giftGoodsList: _.get(promo, 'gift_goods_List', []).map(gift => { return formatAdvanceGoods(gift); }),
giftPrice: promo.gift_price,
promotionId: promo.promotion_id,
promotionTitle: promo.promotion_title,
promotionType: promo.promotion_type,
alreadyMatch: promo.alreadyMatch
};
})
};
});
// 失效商品列表
result.notValidGoods = _.get(data, 'sold_out_goods_list', []).map(good => { return formatCartGoods(good, isAdvanceCart, false); });
// 下架的商品列表
result.offShelveGoods = _.get(data, 'off_shelves_goods_list', []).map(good => { return formatCartGoods(good, isAdvanceCart, false); });
// 赠品和加价购商品
if (data.gift_list.length || data.price_gift.length) {
result.freebieOrAdvanceBuy = true;
// 赠品
result.freebie = data.gift_list.map(good => { return formatAdvanceGoods(good); });
result.giftCount = result.freebie.length;
// 加价购
result.advanceBuy = data.price_gift.map(good => { return formatAdvanceGoods(good); });
result.advanceBuyCount = result.advanceBuy.length;
}
// 已参加的活动
if (data.promotion_info && data.promotion_info.length > 0) {
result.promotionInfo = data.promotion_info.map(promotion => {
return {id: promotion.promotion_id, name: promotion.promotion_title};
});
}
// 结算数据
result.formulaPrice = data.shopping_cart_data.promotion_formula;
result.count = data.shopping_cart_data.selected_goods_count;
result.isAllSelected = (data.shopping_cart_data.goods_count === data.shopping_cart_data.selected_goods_count) && (data.shopping_cart_data.selected_goods_count > 0);
result.sumPrice = transPrice(data.shopping_cart_data.last_order_amount);
return result;
};
/**
* 格式化加价购和赠品商品
*
* @param array $advanceGoods 加价购商品列表
* @param int $count 计商品件数
* @return array $arr 处理之后的加价购商品数据
*/
const formatAdvanceGoods = (advanceGood, isGift) => {
let result = {};
result.id = advanceGood.product_skn;
result.name = advanceGood.product_name;
result.thumb = advanceGood.goods_images ? helpers.image(advanceGood.goods_images, 120, 160) : '';
result.price = transPrice(advanceGood.last_price);
result.marketPrice = isGift ? '0.00' : transPrice(advanceGood.market_price);
result.count = advanceGood.storage_number;
return result;
};
/**
* 格式化购物车商品
*
* @param array $cartGoods 购物车商品列表
* @param boolean $isValid 是否是可用商品（非失效商品），默认是
* @param bool $isAdvanceCart 是否是预售购物车（和上市期有关）
* @return array 处理之后的购物车商品数据
*/
const formatCartGoods = (goodData, isAdvanceCart, isValid) => {
let result = {};
result.id = goodData.product_sku;
result.skn = goodData.product_skn;
result.name = goodData.product_name;
result.thumb = goodData.goods_images ? helpers.image(goodData.goods_images, 120, 160) : '';
result.color = goodData.color_name;
result.size = goodData.size_name;
result.checked = goodData.selected === 'Y';
result.price = transPrice(goodData.last_vip_price);
result.isVipPrice = goodData.sales_price !== goodData.last_vip_price && goodData.discount_tag === 'V';
result.isStudents = goodData.sales_price !== goodData.last_vip_price && goodData.discount_tag === 'S';
result.count = goodData.buy_number;
result.promotion_id = goodData.promotion_id;
if (isValid) {
// 库存不足
result.lowStocks = (goodData.buy_number > goodData.storage_number);
} else { // 失效商品
result.inValid = true;
}
// gift=>是否赠品,advanceBuy=>是否加价购,soldOut=>失效商品;
if (!goodData.goods_type) {
result.inValid = true;
}
else if (goodData.goods_type === 'gift' && !goodData.isAdvanceBuy) {
result.isGift = true;
result.salesPrice = transPrice(goodData.sales_price);
result.price = transPrice(goodData.last_price);
}
else if (goodData.goods_type === 'price_gift') {
result.showCheckbox = true;
result.isAdvanceBuy = true;
result.salesPrice = transPrice(goodData.sales_price);
result.price = transPrice(goodData.last_price);
}
else {
result.showCheckbox = true;
}
// 上市期
if (isAdvanceCart && goodData.expect_arrival_time) {
result.appearDate = goodData.expect_arrival_time;
}
// 商品链接
result.link = helpers.urlFormat(`/product/show_${goodData.product_skn}.html`);
};
const transPrice = (price, isSepcialZero) => {
return (price || isSepcialZero) ? price.toFixed(2) : 0;
};
module.exports = {
indexData
}
\ No newline at end of file
... ...
... ... @@ -38,6 +38,7 @@ router.get('/index/new/selectAddress', authMW, order.selectAddress); // 选择åœ
router.get('/index/new/invoiceInfo', authMW, order.invoiceInfo); // 发票信息
router.get('/index/new', indexController.index); // 购物车
router.post('/index/new/data', indexController.indexData); // 购物车
module.exports = router;
... ...
<div class="shopping-cart-page yoho-page ">
{{#unless isLogin}}
<p class="login-info">
<span class="iconfont">&#xe628;</span>
请您先
<a class="btn btn-login" href="{{signurl}}">登录</a>
可以同步电脑和手机中的商品
</p>
{{/unless}}
<div class="cart-box">
</div>
</div>
... ...
... ... @@ -31,6 +31,14 @@ module.exports = {
// imSocket: 'ws://imsocket.yohobuy.com:10000',
// imCs: 'http://imhttp.yohobuy.com/api',
// imServer: 'http://imhttp.yohobuy.com/server'
// api: 'http://dev-api.yohops.com:9999/',
// service: 'http://service.yoho.cn/',
// liveApi: 'http://api.live.yoho.cn/',
// singleApi: 'http://single.yoho.cn/',
// imSocket: 'ws://imsocket.yohobuy.com:10000',
// imCs: 'http://imhttp.yohobuy.com/api',
// imServer: 'http://imhttp.yohobuy.com/server'
},
subDomains: {
host: '.m.yohobuy.com',
... ...
<div class="cart-good ">
<div class="promos ">
<div class="cart-good edit">
<div class="promos more-box ">
<div class="promo-item">
<div class="info">
<span class="flag">加价购</span>差1件立享【满￥399减100】
... ... @@ -36,7 +36,7 @@
<div class="good-new-info">
<a href="//m.yohobuy.com/product/show_{{product_skn}}.html" class="img-a">
<div class="img">
<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="">
<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="">
<div class="flag price-gift"><div class="text">加价购</div></div>
</div>
</a>
... ... @@ -45,7 +45,7 @@
<div class="intro intro-name">
<div class="name-row">
<div class="name">
<a href="//m.yohobuy.com/product/show_{{product_skn}}.html">EBLIS时拼色EBLIS时拼色时尚拼色EBLI色</a>
<a href="//m.yohobuy.com/product/show_{{product_skn}}.html">EBLIS时拼色EBLIS时拼色EBLIS时拼色时尚拼色EBLI色EBLIS时拼色EBLIS时拼色时尚拼色EBLI色EBLIS时拼色EBLIS时拼色时尚拼色EBLI色EBLIS时拼色时尚拼色EBLI色</a>
</div>
</div>
<p class="color-size-row"><span class="color">颜色:黑色</span><span class="size">尺码:S</span></p>
... ... @@ -53,9 +53,9 @@
<div class="intro intro-edit">
<div class="edit-box">
<div class="num-opt">
<a href="#" class="btn btn-minus disabled"><span class="iconfont"></span></a>
<a href="javascript:;" class="btn btn-minus "><span class="iconfont"></span></a>
<input type="text" class="good-num" disabled="true" value="1">
<a href="#" class="btn btn-plus"><span class="iconfont"></span></a>
<a href="javascript:;" class="btn btn-plus"><span class="iconfont"></span></a>
</div>
<div class="size-info">
<div class="txt">颜色:黑色 尺码:S</div>
... ...
<div class="shopping-cart-page yoho-page">
<p class="login-info">
<span class="iconfont">&#xe628;</span>
请您先
<a class="btn btn-login" href="{{signurl}}">登录</a>
可以同步电脑和手机中的商品
</p>
<ul class="cart-nav clearfix">
<li class="active" id="common-cart-nav">
<span>普通商品(13)</span>
</li>
<li id="presell-cart-nav">
<span >预售商品(1)</span>
<div id="presell-tip" class="presell-tip hide">
<div class="triangle"></div>
<p class="pt-content">预售商品点这里结算哦~</p>
</div>
</li>
</ul>
<div class="cart-content normal-good">
<div class="normal-box">
<div class="cart-brand box">
<div class="promotion-header ">
<div class="promo-item">
<div class="info"><i class="iconfont cuxiao"></i>差￥200立享【满￥699减100】</div>
<div class="opt to-gift">
<a href="#">去凑单</a><i class="iconfont to-arrow"></i>
</div>
</div>
<div class="promo-item">
<div class="info"><i class="iconfont cuxiao"></i>差￥200立享【满￥699减100】</div>
<div class="opt to-gift">
<a href="#">去凑单</a><i class="iconfont to-arrow"></i>
</div>
</div>
<div class="down-arrow">
<i class="iconfont arrow"></i>
</div>
</div>
<div class="good-list">
{{> cart-good}}
</div>
</div>
{{#if cartNav}}
<ul class="cart-nav clearfix">
<li class="active" id="common-cart-nav">
<span>普通商品({{commonGoodsCount}})</span>
</li>
<li id="presell-cart-nav">
<span >预售商品({{presellGoodsCount}})</span>
<div id="presell-tip" class="presell-tip hide">
<div class="triangle"></div>
<p class="pt-content">预售商品点这里结算哦~</p>
</div>
<div class="all-gift-box box">
<div class="gift-item">
<div class="flag">
<i class="iconfont gift"></i>
</div>
<div class="content">
<div class="info">已满足全场加价购</div>
</li>
</ul>
{{/if}}
<div class="cart-content normal-good">
<div class="normal-box">
<div class="cart-brand box">
<div class="promotion-header more-box ">
<div class="promo-item">
<div class="info"><i class="iconfont cuxiao"></i>差￥200立享【满￥699减100】</div>
<div class="opt to-gift">
<a href="#">去凑单</a><i class="iconfont to-arrow"></i>
</div>
</div>
</div>
<div class="gift-item">
<div class="flag">
<i class="iconfont price-gift"></i>
</div>
<div class="content">
<div class="info">已满足全场加价购</div>
<div class="promo-item">
<div class="info"><i class="iconfont cuxiao"></i>差￥200立享【满￥699减100】</div>
<div class="opt to-gift">
<a href="#">去凑单</a><i class="iconfont to-arrow"></i>
</div>
</div>
<div class="down-arrow">
<i class="iconfont arrow"></i>
</div>
</div>
</div>
<div class="disable-box box">
{{> cart-good}}
<div class="remove-all">
<button class="btn btn-remove">清空失效商品</button>
<div class="good-list">
{{> cart-good}}
</div>
</div>
<div class="total box">
<div class="activity-title">
<h1>已参与活动</h1>
</div>
<div class="all-gift-box box">
<div class="gift-item">
<div class="flag">
<i class="iconfont gift"></i>
</div>
<div class="activity">
<ul>
<li>【大牌盛宴】下单7折</li>
<li>满¥399免运费</li>
</ul>
<div class="content">
<div class="info">已满足全场加价购</div>
<div class="opt to-gift">
<a href="#">去凑单</a><i class="iconfont to-arrow"></i>
</div>
</div>
</div>
<div class="gift-item">
<div class="flag">
<i class="iconfont price-gift"></i>
</div>
<div class="price-compute">
<p>总计¥1896.60=商品金额¥1986.00-活动金额¥89.40</p>
<div class="content">
<div class="info">已满足全场加价购</div>
<div class="opt to-gift">
<a href="#">去凑单</a><i class="iconfont to-arrow"></i>
</div>
</div>
</div>
</div>
<div class="cart-content advance-good hide"></div>
<div class="recommend-for-you box hide">
</div>
<div class="cart-footer">
<div class="check-all">
<i class="iconfont chk"></i>
<p>全选</p>
<div class="disable-box box">
{{> cart-good}}
<div class="remove-all">
<button class="btn btn-remove">清空失效商品</button>
</div>
<div class="opts edit hide">
<button class="btn btn-gray">移入<br>收藏夹</button>
<button class="btn btn-red">删除</button>
</div>
<div class="total box">
<div class="activity-title">
<h1>已参与活动</h1>
</div>
<div class="opts bill ">
<div class="total">
<p class="price">总计:￥0.00&nbsp;&nbsp;(0件)</p>
<p class="intro">不含运费</p>
</div>
<button class="btn btn-red">结算</button>
<div class="activity">
<ul>
<li>【大牌盛宴】下单7折</li>
<li>满¥399免运费</li>
</ul>
</div>
<div class="price-compute">
<p>总计¥1896.60=商品金额¥1986.00-活动金额¥89.40</p>
</div>
</div>
</div>
<div class="cart-content advance-good hide"></div>
<div class="recommend-for-you box hide">
</div>
<div class="cart-footer">
<div class="check-all">
<i class="iconfont chk"></i>
<p>全选</p>
</div>
<div class="opts edit hide">
<button class="btn btn-gray">移入<br>收藏夹</button>
<button class="btn btn-red">删除</button>
</div>
<div class="opts bill ">
<div class="total">
<p class="price">总计:￥0.00&nbsp;&nbsp;(0件)</p>
<p class="intro">不含运费</p>
</div>
<button class="btn btn-red">结算</button>
</div>
</div>
... ...
... ... @@ -575,6 +575,7 @@ AsideSlider.prototype.asideSlideIn = AsideSlider.prototype.slideIn = function($e
$('body').bind('touchmove', function(e) {
e.preventDefault();
});
console.log('JI_bilibili')
window.JI_bilibili && window.JI_bilibili($el);
};
// $(function () {
... ...
/**
* 购物车选择尺寸、颜色和数量面板
* 显示时构造当前商品信息的HTML插入yoho-page；消失则是直接清除HTML
... ...
module.exports = {
"alg": "SALT_MD5",
"code": 200,
"data": {
"advance_cart_data": {
"gift_list": [],
"goods_list": [],
"off_shelves_goods_list": [],
"price_gift": [],
"promotion_info": [],
"promotion_pool_list": [],
"shopping_cart_data": {
"discount_amount": 0,
"fast_shopping_cost": 15,
"gain_yoho_coin": 0,
"goods_count": 0,
"has_invalid_goods": 0,
"is_multi_package": "N",
"last_order_amount": 0,
"offline_goods_count": 0,
"online_goods_count": 0,
"order_amount": 0,
"package_list": [],
"promotion_formula": "总计¥0.00=商品金额¥0.00",
"promotion_formula_list": [
{
"promotion": "商品金额",
"promotion_amount": "¥0.00"
}
],
"remain_time": 0,
"selected_goods_count": 0,
"shipping_cost": 10,
"str_discount_amount": "¥0.00",
"str_order_amount": "¥0.00"
},
"sold_out_goods_list": []
},
"ordinary_cart_data": {
"gift_list": [],
"goods_list": [],
"off_shelves_goods_list": [],
"price_gift": [],
"promotion_info": [],
"promotion_pool_list": [
{
"goods_list": [
{
"attribute": "1",
"brand_domain": "5CM",
"brand_id": "4",
"brand_name": "5cm",
"buy_limit": 0,
"buy_number": "1",
"buy_type": 2,
"can_cod_pay": "Y",
"cn_alphabet": "5CM5CXSTB8117F55ChenShan",
"color_id": "2",
"color_name": "黑色",
"delay_notice": "",
"discount_tag": "",
"expect_arrival_time": "",
"factory_goods_name": "黑色",
"fit_promotions": [],
"get_yoho_coin": "0",
"goods_id": "352263",
"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",
"goods_type": "ordinary",
"is_advance": "N",
"is_deposit_advance": "N",
"is_jit": "N",
"is_limited": "N",
"is_outlets": "N",
"is_special": "N",
"last_price": "259.0",
"last_vip_price": 259,
"local_buy_number": 0,
"market_price": 839,
"max_sort_id": "1",
"middle_sort_id": "12",
"min_buy_number": 1,
"off_shelves": 0,
"offline_goods_status": 1,
"offline_storage_number": 0,
"offline_storage_status": 1,
"online_storage_number": 0,
"product_id": 272565,
"product_name": "5CM 3D立体印花衬衫",
"product_skc": "278071",
"product_skn": "51151583",
"product_sku": "888728",
"promotion_flag": "0",
"promotion_id": "0",
"real_price": 259,
"real_vip_price": 0,
"sale_price": 0,
"sales_price": 259,
"selected": "N",
"shop_id": 0,
"shopping_cart_goods_id": "60244",
"shopping_cart_id": "118792348",
"shopping_key": "2a7729e3e974cfe476e4472a89c13743",
"size_id": "207",
"size_name": "S",
"small_sort_id": "115",
"storage_number": "7",
"store_id": 0,
"str_subtotal": "¥259.00",
"subtotal": 259,
"supplier_id": 0,
"tags": [],
"uid": "8040155",
"vip1_price": "0.00",
"vip2_price": "0.00",
"vip3_price": "0.00",
"vip_discount": 1,
"vip_discount_money": 0,
"vip_discount_type": "3",
"vip_price": 0,
"wareHouseId": 0,
"yoho_coin_num": "0"
}
],
"promotion_list": [
{
"alreadyMatch": false,
"condition_unit": 1,
"condition_value": -2,
"gift_goods_List": [],
"gift_price": 0,
"promotion_id": 9042,
"promotion_title": "james 5cm两件5折",
"promotion_type": "Discount",
"status": 0
},
{
"alreadyMatch": false,
"condition_unit": 1,
"condition_value": -1,
"gift_goods_List": [],
"gift_price": 0,
"promotion_id": 9004,
"promotion_title": "5cm 赠品",
"promotion_type": "Gift",
"status": 0
},
{
"alreadyMatch": false,
"condition_unit": 2,
"condition_value": -899,
"gift_goods_List": [],
"gift_price": 0,
"promotion_id": 6193,
"promotion_title": "【5CM 新品】 满￥899赠潮袜",
"promotion_type": "Gift",
"status": 0
},
{
"alreadyMatch": false,
"condition_unit": 2,
"condition_value": -300,
"gift_goods_List": [],
"gift_price": 0,
"promotion_id": 9080,
"promotion_title": "线下店满300减30勿动",
"promotion_type": "Cashreduce",
"status": 0
},
{
"alreadyMatch": false,
"condition_unit": 1,
"condition_value": -1,
"gift_goods_List": [],
"gift_price": 0,
"promotion_id": 9156,
"promotion_title": "5CM 促销",
"promotion_type": "Discount",
"status": 0
}
],
"sub_promotion_list": []
},
{
"goods_list": [
{
"attribute": "1",
"brand_domain": "Android Homme",
"brand_id": "813",
"brand_name": "androidhomme",
"buy_limit": 0,
"buy_number": "1",
"buy_type": 2,
"can_cod_pay": "Y",
"cn_alphabet": "ANDROIDHOMMEAHP1510024PROPULSIONHI",
"color_id": "11",
"color_name": "红色",
"delay_notice": "",
"discount_tag": "",
"expect_arrival_time": "12月",
"factory_goods_name": "红色",
"fit_promotions": [],
"get_yoho_coin": "0",
"goods_id": "423037",
"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",
"goods_type": "ordinary",
"is_advance": "N",
"is_deposit_advance": "N",
"is_jit": "N",
"is_limited": "N",
"is_outlets": "N",
"is_special": "N",
"last_price": "11.0",
"last_vip_price": 11,
"local_buy_number": 0,
"market_price": 2950,
"max_sort_id": "6",
"middle_sort_id": "44",
"min_buy_number": 1,
"off_shelves": 0,
"offline_goods_status": 1,
"offline_storage_number": 0,
"offline_storage_status": 1,
"online_storage_number": 0,
"product_id": 328777,
"product_name": "葡萄牙原产 Android Homme PROPULSION HI 中性高帮休闲鞋 红色",
"product_skc": "319742",
"product_skn": "51184089",
"product_sku": "1002521",
"promotion_flag": "109",
"promotion_id": "0",
"real_price": 11,
"real_vip_price": 0,
"sale_price": 0,
"sales_price": 11,
"selected": "N",
"shop_id": 0,
"shopping_cart_goods_id": "60240",
"shopping_cart_id": "118792348",
"shopping_key": "2a7729e3e974cfe476e4472a89c13743",
"size_id": "129",
"size_name": "43码",
"small_sort_id": "147",
"storage_number": "5",
"store_id": 0,
"str_subtotal": "¥11.00",
"subtotal": 11,
"supplier_id": 0,
"tags": [],
"uid": "8040155",
"vip1_price": "10.45",
"vip2_price": "9.90",
"vip3_price": "9.68",
"vip_discount": 1,
"vip_discount_money": 0,
"vip_discount_type": "1",
"vip_price": 11,
"wareHouseId": 0,
"yoho_coin_num": "0"
},
{
"attribute": "1",
"brand_domain": "5CM",
"brand_id": "4",
"brand_name": "5cm",
"buy_limit": 0,
"buy_number": "1",
"buy_type": 2,
"can_cod_pay": "Y",
"cn_alphabet": "5CM5CXSTT8109F55ChenShan",
"color_id": "7",
"color_name": "蓝色",
"delay_notice": "",
"discount_tag": "",
"expect_arrival_time": "",
"factory_goods_name": "蓝色",
"fit_promotions": [],
"get_yoho_coin": "0",
"goods_id": "352259",
"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",
"goods_type": "ordinary",
"is_advance": "N",
"is_deposit_advance": "N",
"is_jit": "N",
"is_limited": "N",
"is_outlets": "N",
"is_special": "N",
"last_price": "11.0",
"last_vip_price": 11,
"local_buy_number": 0,
"market_price": 739,
"max_sort_id": "1",
"middle_sort_id": "12",
"min_buy_number": 1,
"off_shelves": 0,
"offline_goods_status": 1,
"offline_storage_number": 0,
"offline_storage_status": 1,
"online_storage_number": 0,
"product_id": 272563,
"product_name": "5CM 字母刺绣纯色衬衫",
"product_skc": "278069",
"product_skn": "51151582",
"product_sku": "888719",
"promotion_flag": "0",
"promotion_id": "0",
"real_price": 11,
"real_vip_price": 0,
"sale_price": 0,
"sales_price": 11,
"selected": "N",
"shop_id": 0,
"shopping_cart_goods_id": "60242",
"shopping_cart_id": "118792348",
"shopping_key": "2a7729e3e974cfe476e4472a89c13743",
"size_id": "203",
"size_name": "M",
"small_sort_id": "115",
"storage_number": "6",
"store_id": 0,
"str_subtotal": "¥11.00",
"subtotal": 11,
"supplier_id": 0,
"tags": [],
"uid": "8040155",
"vip1_price": "10.45",
"vip2_price": "9.90",
"vip3_price": "9.68",
"vip_discount": 1,
"vip_discount_money": 0,
"vip_discount_type": "1",
"vip_price": 11,
"wareHouseId": 0,
"yoho_coin_num": "0"
}
],
"promotion_list": [
{
"alreadyMatch": false,
"condition_unit": 1,
"condition_value": -2,
"gift_goods_List": [],
"gift_price": 0,
"promotion_id": 9102,
"promotion_title": "买一送一(dev)",
"promotion_type": "Cheapestfree",
"status": 0
}
],
"sub_promotion_list": []
}
],
"shopping_cart_data": {
"discount_amount": 0,
"fast_shopping_cost": 15,
"gain_yoho_coin": 0,
"goods_count": 3,
"has_invalid_goods": 0,
"is_multi_package": "N",
"last_order_amount": 0,
"offline_goods_count": 0,
"online_goods_count": 0,
"order_amount": 0,
"package_list": [],
"promotion_formula": "总计¥0.00=商品金额¥0.00",
"promotion_formula_list": [
{
"promotion": "商品金额",
"promotion_amount": "¥0.00"
}
],
"remain_time": 0,
"selected_goods_count": 0,
"shipping_cost": 10,
"str_discount_amount": "¥0.00",
"str_order_amount": "¥0.00"
},
"sold_out_goods_list": []
}
},
"md5": "ee0be93e30274f6e49c22dcfe2d1012c",
"message": "cart goods list."
}
\ No newline at end of file
... ...
... ... @@ -5,13 +5,76 @@
*/
require('cart/index.page.css')
let testData = require('./data.json');
let $ = require('yoho-jquery');
let hbsTemplate = require('cart/index/index.hbs');
let indexObj = {
minStock: 1,
init() {
let html = hbsTemplate({});
$('#main-wrap').html(html);
let self = this;
$.ajax({
url: '/cart/index/new/data',
type: 'POST',
success: (data) => {
$('.cart-box').html(hbsTemplate(data));
}
})
self.registerEvent();
self.loadRecommendForYou();
},
registerEvent() {
let self = this;
$('.cart-nav').on('click', 'li', function() {
$('.cart-content').eq($(this).index()).removeClass('hide').siblings('.cart-content').addClass('hide');
$(this).addClass('active').siblings().removeClass('active')
});
$('.more-box>.down-arrow').on('click', function() {
$(this).parent().toggleClass('down')
});
$('.opt>.chk').on('click', function() {
$(this).toggleClass('checked')
});
$('.check-all').on('click', function() {
$(this).find('.chk').hasClass('checked') ? $('.opt>.chk').removeClass('checked') : $('.opt>.chk').addClass('checked');
$(this).find('.chk').toggleClass('checked');
});
$('.cart-good').on('click', '.num-opt .btn', function(e) {
let maxStock = 5;
let minusEl = $(e.delegateTarget).find('.btn-minus');
let plusEl = $(e.delegateTarget).find('.btn-plus');
let goodNum = $(e.delegateTarget).find('.good-num').val();
$(this).hasClass('btn-plus') ? goodNum++ : goodNum--;
if (goodNum < self.minStock) {
console.log('不能小于0')
return;
}
if (goodNum > maxStock) {
console.log('不能大于5')
return;
}
if (goodNum === self.minStock) {
$(minusEl).addClass('disabled');
} else if($(minusEl).hasClass('disabled')) {
$(minusEl).removeClass('disabled');
}
if (goodNum === maxStock) {
$(plusEl).addClass('disabled');
} else if($(plusEl).hasClass('disabled')) {
$(plusEl).removeClass('disabled');
}
$(e.delegateTarget).find('.good-num').val(goodNum);
})
},
loadRecommendForYou() {
if ($('.recommend-for-you').length) {
require('./recommend-for-you-cart');
}
}
}
... ...
/**
* 为您优选
* @author: bikai<kai.bi@yoho.cn>
* @date: 2015/11/16
*/
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload');
var $recommendForYou = $('.recommend-for-you');
$.get('/product/recommend-for-you/cart').then(function(html) {
var PRDID =[];
$recommendForYou.html(html).show();
lazyLoad($('img.lazy'));
//为您优选埋点 http://redmine.yoho.cn/issues/10116
$recommendForYou.find('.good-info').each(function() {
PRDID.push($(this).data('id'));
});
window.givePoint({
'REC_POSE': 110003,
'PRD_ID': PRDID.join(','),
'PRD_NUM': $('.recommend-for-you .good-info').length,
'ACTION_ID': 0,
'page_num': 1
});
$recommendForYou.find('.good-info').on('click', 'a', function() {
var index = $(this).closest('.good-info').index() + 1;
window.givePoint({
'REC_POSE': 110003,
'PRD_ID': $(this).closest('.good-info').data('id'),
'PRD_NUM': index,
'ACTION_ID': 1,
'page_num': 1
});
return true;
});
}).fail(function() {
$recommendForYou.hide();
});
\ No newline at end of file
... ...
.good-item {
display: flex;
width: 100%;
&:last-child {
.good-new-info {
border: none;
}
}
display: flex;
width: 100%;
&:last-child {
.good-new-info {
padding-left: 0px;
border: none;
}
.opt {
width: 100px;
display: flex;
align-items: center;
justify-content: center;
.disable {
background-color: #7f7f7f;
}
}
.good-new-info {
padding-left: 0px;
}
.opt {
width: 100px;
display: flex;
align-items: center;
justify-content: center;
.disable {
background-color: #7f7f7f;
}
}
}
.promos {
padding: 10px 30px 10px 100px;
height: 57px;
overflow: hidden;
width: 100%;
&.more {
height: 77px;
.promo-item {
display: none;
&:first-child {
display: flex;
}
}
.down-arrow {
display: block;
}
&.down {
height: auto;
.promo-item {
display: flex;
}
.down-arrow {
.iconfont:before {
content: "\e608";
}
}
}
padding: 11px 30px 11px 100px;
height: 57px;
overflow: hidden;
width: 100%;
&.more-box {
height: 77px;
.promo-item {
display: none;
&:first-child {
display: flex;
}
}
.down-arrow {
display: none;
width: 100%;
height: 25px;
margin-top: -7px;
text-align: center;
.iconfont {
color: #e0e0e0;
font-size: 30px;
&:before {
content: "\e609";
}
}
display: block;
}
.promo-item {
&.down {
height: auto;
.promo-item {
display: flex;
width: 100%;
height: 45px;
line-height: 45px;
.info {
flex: 1;
font-size: 24px;
.flag {
margin-right: 10px;
color: #ff575c;
border: solid 1PX #ff575c;
padding: 0px 16px 0px 16px;
border-radius: 3px;
}
}
.down-arrow {
.iconfont:before {
content: "\e608";
}
}
}
}
.down-arrow {
display: none;
width: 100%;
height: 25px;
margin-top: -7px;
text-align: center;
.iconfont {
color: #e0e0e0;
font-size: 30px;
&:before {
content: "\e609";
}
}
+.good-item {
margin-top: -10px;
}
.promo-item {
display: flex;
width: 100%;
height: 45px;
line-height: 45px;
.info {
flex: 1;
font-size: 23px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.flag {
margin-right: 11px;
color: #ff575c;
border: solid 1PX #ff575c;
padding: 0px 16px 0px 16px;
border-radius: 4px;
}
}
}
+ .good-item {
margin-top: -11px;
}
}
.fill-text {
padding: 2px 12px 2px 12px;
color: #fff;
font-size: 25px;
line-height: 30px;
border-radius: 30px 30px;
padding: 2px 12px 2px 12px;
color: #fff;
font-size: 25px;
line-height: 30px;
border-radius: 30px 30px;
}
.iconfont.chk {
font-size: 40px;
&:before {
content: "\e647";
}
&.checked:before {
content: "\e60a";
}
font-size: 40px;
&:before {
content: "\e647";
}
&.checked:before {
content: "\e60a";
}
}
.good-new-info {
width: 100%;
padding: 20px 30px 20px 30px;
width: 100%;
padding: 20px 30px 20px 30px;
display: flex;
flex: 1;
border-bottom: solid 1PX #f0f0f0;
.img-a {
display: flex;
flex: 1;
border-bottom: solid 1PX #f0f0f0;
.img-a {
display: flex;
align-items: center;
align-items: center;
}
.img {
position: relative;
.thumb {
width: 154px;
}
.img {
position: relative;
.thumb {
width: 154px;
}
.flag {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 24px;
text-align: center;
line-height: 24px;
color: #fff;
font-size: 24px;
&.price-gift {
background-color: #ff0062;
}
&.gift {
background-color: #85c45b;
}
.text {
transform: scale(0.7, 0.7)
}
}
.flag {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 23px;
text-align: center;
line-height: 23px;
color: #fff;
font-size: 23px;
&.price-gift {
background-color: #ff0062;
}
&.gift {
background-color: #85c45b;
}
.text {
transform: scale(0.7, 0.7);
}
}
.info {
}
.info {
flex: 1;
margin-left: 32px;
padding-top: 20px;
position: relative;
.fixed-height {
width: 100%;
min-height: 100px;
display: flex;
.intro {
width: 100%;
flex: 1;
margin-left: 32px;
padding-top: 20px;
position: relative;
.fixed-height {
width: 100%;
min-height: 100px;
display: flex;
.intro {
width: 100%;
flex: 1;
}
}
.name-row {
display: flex;
.name {
flex: 1;
font-size: 28px;
color: #5a5a5a;
}
}
.color-size-row {
color: #b6b6b6;
font-size: 28px;
margin-top: 4px;
span {
margin-right: 18px;
}
}
}
.name-row {
display: flex;
.name {
flex: 1;
font-size: 28px;
color: #5a5a5a;
}
}
.color-size-row {
color: #b6b6b6;
font-size: 28px;
margin-top: 4px;
span {
margin-right: 18px;
}
}
.price {
font-size: 28px;
color: #d0253b;
.vip {
margin-left: 11px;
background-color: #d0021b;
}
}
.tags {
width: 100%;
line-height: 30px;
text-align: right;
.low-stocks {
background-color: #7f7f7f;
}
.appear-date {
padding: 4px 0px;
float: left;
font-size: 23px;
color: #d0253b;
}
}
.count {
width: 45px;
text-align: right;
color: #999;
font-size: 28px;
}
}
.intro-edit {
display: none;
}
.edit-box {
width: 240px;
margin-bottom: 11px;
.num-opt {
height: 64px;
border: solid 1PX #dfdfdf;
border-radius: 5px 5px 0px 0px;
display: flex;
.btn {
width: 70px;
display: block;
height: 100%;
text-align: center;
line-height: 64px;
.iconfont {
color: #444444;
}
.price {
font-size: 28px;
color: #d0253b;
.vip {
margin-left: 10px;
background-color: #d0021b;
}
&.disabled {
.iconfont {
color: #b0b0b0;
}
}
.tags {
width: 100%;
line-height: 30px;
text-align: right;
.low-stocks {
background-color: #7f7f7f;
}
.appear-date {
padding: 3px 0px;
float: left;
font-size: 24px;
color: #d0253b;
}
&.btn-minus {
border-right: 1PX solid #dfdfdf;
.iconfont:before {
content: "\e625";
}
}
.count {
width: 45px;
text-align: right;
color: #999;
font-size: 28px;
&.btn-plus {
border-left: 1px solid #dfdfdf;
.iconfont:before {
content: "\e624";
}
}
}
.good-num {
width: 100px;
text-align: center;
color: #444444;
font-size: 32px;
background-color: #fff;
border: none;
line-height: 50px;
}
}
.intro-edit {
display: none;
}
.edit-box {
width: 240px;
margin-bottom: 10px;
.num-opt {
height: 65px;
border: solid 1px #dfdfdf;
border-radius: 5px 5px 0px 0px;
display: flex;
.btn {
width: 70px;
display: block;
height: 100%;
text-align: center;
line-height: 65px;
.iconfont {
color: #444444;
}
&.disabled {
.iconfont {
color: #b0b0b0;
}
}
&.btn-minus {
border-right: 1px solid #dfdfdf;
.iconfont:before {
content: "\e625";
}
}
&.btn-plus {
border-left: 1px solid #dfdfdf;
.iconfont:before {
content: "\e624";
}
}
}
.good-num {
width: 100px;
text-align: center;
color: #444444;
font-size: 32px;
}
.size-info {
width: 100%;
height: 64px;
line-height: 64px;
padding-left: 14px;
border: solid 1PX #dfdfdf;
border-top: none;
border-radius: 0px 0px 5px 5px;
display: flex;
color: #444;
.txt {
flex: 1;
font-size: 23px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.down {
text-align: center;
width: 45px;
.iconfont {
font-size: 30px;
}
.size-info {
width: 100%;
height: 65px;
line-height: 65px;
padding-left: 14px;
border: solid 1px #dfdfdf;
border-top: none;
border-radius: 0px 0px 5px 5px;
display: flex;
color: #444;
.txt {
flex: 1;
font-size: 24px;
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.down {
text-align: center;
width: 45px;
.iconfont {
font-size: 30px;
}
& .iconfont:before {
content: "\e609";
}
}
& .iconfont:before {
content: "\e609";
}
}
}
}
}
}
.cart-good {
&.edit {
.info {
padding-top: 0px;
}
.intro-name {
display: none;
}
.intro-edit {
display: block;
}
&.edit {
.info {
padding-top: 0px;
}
.intro-name {
display: none;
}
.intro-edit {
display: block;
}
}
}
\ No newline at end of file
... ...
.chose-panel {
position: fixed;
top: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 3;
display: none;
height: 100%;
background: rgba(0, 0, 0, 0.3);
.main {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 3;
display: none;
height: 100%;
background: rgba(0, 0, 0, 0.3);
.main {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 610px;
background: #fff;
height: 610px;
background: #fff;
}
.infos {
padding: 0 22px;
height: 460px;
}
.chose-items {
overflow: auto;
height: 325px;
}
.basic-info {
position: relative;
overflow: hidden;
margin-top: 30px;
margin-bottom: 30px;
}
.thumb {
float: left;
margin-right: 20px;
width: 100px;
}
.text-info {
height: auto;
.seckill-time {
position: absolute;
bottom: 0px;
right: 0px;
float: none;
}
.infos {
padding: 0 22px;
height: 460px;
.name {
display: -webkit-box;
overflow: hidden;
height: 74px;
font-size: 28px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.chose-items {
overflow: auto;
height: 325px;
.price {
display: inline;
font-size: 24px;
}
.basic-info {
position: relative;
overflow: hidden;
margin-top: 30px;
margin-bottom: 30px;
}
.sale-price {
margin-right: 15px;
color: #e10;
.thumb {
float: left;
margin-right: 20px;
width: 100px;
&.no-price {
color: #000;
}
}
.text-info {
height: auto;
.seckill-time {
position: absolute;
bottom: 0px;
right: 0px;
float: none;
}
.name {
display: -webkit-box;
overflow: hidden;
height: 74px;
font-size: 28px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.price {
display: inline;
font-size: 24px;
}
.sale-price {
margin-right: 15px;
color: #e10;
&.no-price {
color: #000;
}
}
.market-price {
color: #b0b0b0;
text-decoration: line-through;
}
.market-price {
color: #b0b0b0;
text-decoration: line-through;
}
.color-list,
.size-list,
.num {
position: relative;
padding-left: 80px;
font-size: 28px;
input.disabled {
border-radius: 0;
background-color: #fff;
color: #000;
opacity: 1;
-webkit-appearance: none;
}
> span {
position: absolute;
top: 20px;
left: 0;
}
> span.left-num {
position: absolute;
top: 20px;
left: 380px;
}
span.disabled {
color: #e6e6e6;
}
}
.color-list,
.size-list,
.num {
position: relative;
padding-left: 80px;
font-size: 28px;
input.disabled {
border-radius: 0;
background-color: #fff;
color: #000;
opacity: 1;
-webkit-appearance: none;
}
.size-list li.hide {
display: none;
> span {
position: absolute;
top: 20px;
left: 0;
}
.block {
display: block;
float: left;
box-sizing: border-box;
margin-right: 30px;
margin-bottom: 30px;
padding: 0 20px;
min-width: 80px;
max-width: 480px;
height: 80px;
border: 1px solid #000;
text-align: center;
line-height: 80px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
&.chosed {
border-color: #e10;
background: resolve("shopping-cart/right.png") no-repeat;
background-position: bottom right;
background-size: 38px;
color: #e10;
}
&.zero-stock {
border-color: #e0e0e0;
color: #e0e0e0;
}
&.zero-stock.chosed {
border-color: #e0e0e0;
background: none;
background-color: #c0c0c0;
color: #e0e0e0;
}
> span.left-num {
position: absolute;
top: 20px;
left: 380px;
}
.num {
margin-bottom: 20px;
span.disabled {
color: #e6e6e6;
}
}
.num .btn {
display: block;
float: left;
width: 80px;
height: 80px;
border: 1px solid #e6e6e6;
text-align: center;
line-height: 80px;
&.disable {
color: #e6e6e6;
}
.size-list li.hide {
display: none;
}
.block {
display: block;
float: left;
box-sizing: border-box;
margin-right: 30px;
margin-bottom: 30px;
padding: 0 20px;
min-width: 80px;
max-width: 480px;
height: 80px;
border: 1px solid #000;
text-align: center;
line-height: 80px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
&.chosed {
border-color: #e10;
background: resolve("shopping-cart/right.png") no-repeat;
background-position: bottom right;
background-size: 38px;
color: #e10;
}
.good-num {
float: left;
margin-left: -1px;
padding: 0;
width: 106px;
height: 80px;
border: 1px solid #e6e6e6;
text-align: center;
line-height: 80px;
&.zero-stock {
border-color: #e0e0e0;
color: #e0e0e0;
}
.btn-plus {
margin-left: -1px;
&.zero-stock.chosed {
border-color: #e0e0e0;
background: none;
background-color: #c0c0c0;
color: #e0e0e0;
}
.btn-wrap {
position: relative;
box-sizing: border-box;
padding: 20px;
height: 120px;
border-top: 1px solid #e6e6e6;
background: #fff;
text-align: center;
.btn-sure {
width: 260px;
height: 80px;
border: none;
background: #e10;
color: #fff;
font-size: 32px;
}
}
.num {
margin-bottom: 20px;
}
.num .btn {
display: block;
float: left;
width: 80px;
height: 80px;
border: 1px solid #e6e6e6;
text-align: center;
line-height: 80px;
&.disable {
color: #e6e6e6;
}
}
.good-num {
float: left;
margin-left: -1px;
padding: 0;
width: 106px;
height: 80px;
border: 1px solid #e6e6e6;
text-align: center;
line-height: 80px;
}
.btn-plus {
margin-left: -1px;
}
.btn-wrap {
position: relative;
box-sizing: border-box;
padding: 20px;
height: 120px;
border-top: 1px solid #e6e6e6;
background: #fff;
text-align: center;
.btn-sure {
width: 260px;
height: 80px;
border: none;
background: #e10;
color: #fff;
font-size: 32px;
}
}
}
... ...
body {
background: #f0f0f0;
background: #f0f0f0;
}
.shopping-cart-page {
margin-bottom: 120px;
overflow-x: hidden;
.box {
margin-top: 20px;
background-color: #FFF;
margin-bottom: 120px;
overflow-x: hidden;
.box {
background-color: #fff;
}
.cart-nav {
color: #c6c6c6;
margin-bottom: 20px;
border-bottom: 1PX solid #e0e0e0;
background: #fff;
li {
float: left;
width: 50%;
padding: 35px 0;
height: 35px;
box-sizing: content-box;
}
.cart-nav {
color: #c6c6c6;
border-bottom: 1PX solid #e0e0e0;
background: #fff;
li {
float: left;
width: 50%;
padding: 35px 0;
height: 35px;
box-sizing: content-box;
}
li.active {
color: #000;
}
li.active {
color: #000;
}
span {
display: block;
box-sizing: border-box;
width: 100%;
height: 35px;
line-height: 35px;
font-size: 35px;
text-align: center;
}
span {
display: block;
box-sizing: border-box;
width: 100%;
height: 35px;
line-height: 35px;
font-size: 35px;
text-align: center;
}
li:first-child span {
border-right: 1PX solid #e0e0e0;
}
li:first-child span {
border-right: 1PX solid #e0e0e0;
}
li:last-child {
position: relative;
}
li:last-child {
position: relative;
}
.presell-tip {
position: absolute;
z-index: 1;
left: -2rem;
top: 1.75rem;
}
.presell-tip {
position: absolute;
z-index: 1;
left: -2rem;
top: 1.75rem;
}
.triangle {
width: 0;
height: 0;
border-left: 8PX solid transparent;
border-right: 8PX solid transparent;
border-bottom: 12PX solid #000;
margin-left: 6rem;
}
.triangle {
width: 0;
height: 0;
border-left: 8PX solid transparent;
border-right: 8PX solid transparent;
border-bottom: 12PX solid #000;
margin-left: 6rem;
}
.pt-content {
position: relative;
padding: 12px;
background: #000;
color: #fff;
font-size: 14px;
border-radius: 5PX;
text-align: center;
width: 7rem;
}
.pt-content {
position: relative;
padding: 12px;
background: #000;
color: #fff;
font-size: 14px;
border-radius: 5PX;
text-align: center;
width: 7rem;
}
.login-info {
height: 54px;
padding: 20px 23px;
color: #24acaa;
text-align: center;
font-size: 33px;
box-sizing: content-box;
.iconfont {
font-size: 33px;
}
.btn {
display: inline-block;
background: #ed0010;
color: #fff;
width: 94px;
height: 54px;
line-height: 54px;
}
}
.login-info {
height: 54px;
padding: 20px 23px;
color: #24acaa;
text-align: center;
font-size: 33px;
box-sizing: content-box;
.iconfont {
font-size: 33px;
}
.btn {
display: inline-block;
background: #ed0010;
color: #fff;
width: 94px;
height: 54px;
line-height: 54px;
}
}
}
.more-box {
transition: all 200s;
}
.promotion-header {
width: 100%;
height: 88px;
overflow: hidden;
padding: 11px 30px 11px 30px;
border-bottom: solid 1PX #f0f0f0;
.promo-item {
height: 66px;
line-height: 66px;
font-size: 26px;
color: #444;
display: flex;
width: 100%;
height: 88px;
overflow: hidden;
padding: 11px 30px 11px 30px;
border-bottom: solid 1PX #f0f0f0;
}
&.more-box {
height: 108px;
.promo-item {
height: 66px;
line-height: 66px;
font-size: 26px;
color: #444;
display: none;
&:first-child {
display: flex;
width: 100%;
}
&.more {
height: 108px;
.promo-item {
display: none;
&:first-child {
display: flex;
}
}
.down-arrow {
display: block;
}
&.down {
height: auto;
.promo-item {
display: flex;
}
.down-arrow {
.iconfont:before {
content: "\e608";
}
}
}
}
}
.down-arrow {
display: none;
width: 100%;
height: 34px;
margin-top: -14px;
text-align: center;
.iconfont {
color: #e0e0e0;
font-size: 30px;
&:before {
content: "\e609";
}
}
display: block;
}
.info {
flex: 1;
.cuxiao {
margin-right: 10px;
color: #ff575c;
font-size: 30px;
}
.cuxiao:before {
content: "\e6b5";
&.down {
height: auto;
.promo-item {
display: flex;
}
.down-arrow {
.iconfont:before {
content: "\e608";
}
}
}
}
.down-arrow {
display: none;
width: 100%;
height: 34px;
margin-top: -14px;
text-align: center;
.iconfont {
color: #e0e0e0;
font-size: 30px;
&:before {
content: "\e609";
}
}
}
.info {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.cuxiao {
margin-right: 11px;
color: #ff575c;
font-size: 30px;
}
.cuxiao:before {
content: "\e6b5";
}
}
}
.to-gift {
text-align: right;
width: 140px;
a {
color: #ff575c;
font-size: 24px;
}
text-align: right;
width: 139px;
a {
color: #ff575c;
font-size: 23px;
}
}
.iconfont.to-arrow {
color: #e0e0e0;
margin-left: 10px;
&:before {
content: "\e604";
}
color: #e0e0e0;
margin-left: 11px;
&:before {
content: "\e604";
}
}
.activity-title{
background-color: #FFF;
border-top: 1px solid #e0e0e0;
font-size: 32px;
padding: 20px 20px 0;
.activity-title {
background-color: #fff;
border-top: 1PX solid #e0e0e0;
font-size: 32px;
padding: 20px 20px 0;
}
.activity{
background-color: #FFF;
padding: 8px 20px 20px 32px;
font-size: 26px;
li:before {
content: "";
display: inline-block;
margin-right: 10px;
width: 8px;
height: 8px;
background-color: #000;
border-radius: 50%;
position: relative;
left: 0;
top: -.12rem;
}
.activity {
background-color: #fff;
padding: 8px 20px 20px 32px;
font-size: 26px;
li:before {
content: "";
display: inline-block;
margin-right: 11px;
width: 8px;
height: 8px;
background-color: #000;
border-radius: 50%;
position: relative;
left: 0;
top: -.12rem;
}
}
.price-compute {
background-color: #FFF;
padding: 20px;
border-top: 1px solid #e0e0e0;
font-size: 28px;
margin-bottom: 37px;
.title {
display: inline-block;
width: 175px;
}
background-color: #fff;
padding: 20px;
border-top: 1px solid #e0e0e0;
font-size: 28px;
margin-bottom: 38px;
.minus {
float: right;
}
.title {
display: inline-block;
width: 175px;
}
.minus {
float: right;
}
}
.cart-footer {
background-color: #FFF;
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
height: 120px;
z-index: 99;
background-color: #fff;
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
height: 120px;
display: flex;
.check-all {
width: 90px;
text-align: center;
padding-top: 20px;
p {
font-size: 26px;
color: #666;
}
}
.opts {
flex: 1;
padding: 18px;
text-align: right;
display: flex;
.check-all {
width: 90px;
text-align: center;
padding-top: 20px;
p{
font-size: 26px;
color: #666;
}
justify-content: flex-end;
&.hide {
display: none;
}
.opts {
flex: 1;
padding: 17px;
text-align: right;
display: flex;
justify-content: flex-end;
&.hide {
display: none;
}
.btn {
width: 170px;
height: 88px;
border-radius: 5px;
color: #fff;
margin-left: 14px;
margin-right: 14px;
&.btn-gray {
background-color: #444444;
}
&.btn-red {
background-color: #d1021c;
}
}
.total {
flex: 1;
padding-top: 10px;
.price {
color: #d0253b;
font-size: 32px;
}
.intro {
color: #b6b6b6;
font-size: 24px;
}
}
.btn {
width: 170px;
height: 88px;
border-radius: 5px;
color: #fff;
margin-left: 14px;
margin-right: 14px;
&.btn-gray {
background-color: #444444;
}
&.btn-red {
background-color: #d1021c;
}
}
.total {
flex: 1;
padding-top: 11px;
.price {
color: #d0253b;
font-size: 32px;
}
.intro {
color: #b6b6b6;
font-size: 23px;
}
}
}
}
.all-gift-box {
.gift-item {
width: 100%;
display: flex;
&:last-child {
.content {
border: none;
}
}
.flag {
width: 80px;
line-height: 80px;
padding-right: 18px;
text-align: right;
color: #444444;
.iconfont {
vertical-align: middle;
font-size: 32px;
&.gift:before {
content: "\e620";
}
&.price-gift:before {
content: "\e645";
}
}
.gift-item {
width: 100%;
display: flex;
&:last-child {
.content {
border: none;
}
}
.flag {
width: 80px;
line-height: 80px;
padding-right: 18px;
text-align: right;
color: #444444;
.iconfont {
vertical-align: middle;
font-size: 32px;
&.gift:before {
content: "\e620";
}
.content {
width: 100%;
display: flex;
height: 88px;
line-height: 88px;
padding-right: 30px;
border-bottom: solid 1px #f1f1f1;
.info {
flex: 1;
}
.opt {
text-align: right;
width: 140px;
}
&.price-gift:before {
content: "\e645";
}
}
}
.content {
flex: 1;
width: 100%;
display: flex;
height: 88px;
line-height: 88px;
padding-right: 30px;
border-bottom: solid 1PX #f1f1f1;
.info {
flex: 1;
}
.opt {
text-align: right;
width: 139px;
}
}
}
}
.disable-box {
.remove-all {
width: 100%;
height: 122px;
border-top: solid 1px #f1f1f1;
text-align: center;
padding-top: 30px;
.btn-remove {
width: 228px;
height: 60px;
border: solid 1px #b0b0b0;
background-color: #FFF;
color: #444444;
font-size: 29px;
border-radius: 3px;
}
.remove-all {
width: 100%;
height: 122px;
border-top: solid 1PX #f1f1f1;
text-align: center;
padding-top: 30px;
.btn-remove {
width: 229px;
height: 60px;
border: solid 1PX #b0b0b0;
background-color: #fff;
color: #444444;
font-size: 29px;
border-radius: 4px;
}
}
}
\ No newline at end of file
... ...
@import "index-new";
@import "cart-good";
\ No newline at end of file
@import "cart-good";
@import "../product/detail/recommend-for-you";
@import "../common/good";
\ No newline at end of file
... ...
... ... @@ -226,3 +226,124 @@
padding-left: 15px;
min-height: 880px;
}
.width750 {
.good-info {
margin: 12px 18px 47px;
width: 323px;
height: 593px;
.tag-container {
height: 33px;
.good-tag {
margin-right: 5px;
height: 33px;
font-size: 21px;
line-height: 33px;
}
.new-tag {
width: 70px;
}
.hot-tag {
width: 70px;
}
.renew-tag {
width: 105px;
}
.sale-tag {
width: 70px;
}
.new-festival-tag {
width: 117px;
background-size: 117px 33px;
}
.limit-tag {
width: 70px;
line-height: 30px;
}
.is-presell {
width: 70px;
}
}
}
.good-detail-img {
height: 431px;
.good-islike {
width: 70px;
height: 70px;
font-size: 35px;
line-height: 70px;
}
img {
height: 431px;
}
.few-tag {
height: 33px;
font-size: 21px;
line-height: 33px;
}
.out-tag {
height: 38px;
font-size: 21px;
line-height: 38px;
}
}
.good-detail-text {
.name a {
margin: 18px 0 12px;
min-height: 59px;
font-size: 26px;
line-height: 35px;
padding: 6px 0;
height: 70px;
}
.price {
font-size: 26px;
line-height: 26px;
.market-price {
margin: 0 0 0 6px;
}
}
.vip-grade {
margin-right: 9px;
width: 61px;
height: 38px;
}
.vip-info {
margin-top: 22px;
font-size: 21px;
line-height: 38px;
.vip-icon {
margin-right: 9px;
width: 103px;
height: 38px;
}
}
}
.goods-container {
padding-top: 9px;
padding-left: 18px;
min-height: 1031px;
}
}
... ...
.recommend-for-you {
&.width750 {
}
padding: 30px 0;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
... ... @@ -60,3 +63,37 @@
}
}
}
.width750 {
.recommend-for-you {
padding: 35px 0;
font-size: 14px;
.title {
font-size: 38px;
line-height: 103px;
}
.swiper-container {
padding: 35px 35px 23px;
.swiper-slide {
margin: 0 12px;
width: 183px;
img {
height: 244px;
}
}
}
.sale-name {
margin-top: 23px;
}
.price {
margin-top: 9px;
font-size: 28px;
.sale-price {
/*display: block;*/
margin-right: 9px;
}
}
}
}
... ...