Authored by yyq

Merge branch 'feature/shoppingCart' of git.yoho.cn:fe/yohobuy-node into feature/shoppingCart

... ... @@ -5,6 +5,8 @@
'use strict';
const service = require('../models/cart-service');
const helper = require('../models/cart-helper');
const simpleHeaderModel = require('../../../doraemon/models/simple-header');
const getProductInfo = (req, res, next) => {
let pid = req.query.productId || '';
... ... @@ -16,7 +18,113 @@ const getProductInfo = (req, res, next) => {
}).catch(next);
};
/**
* 我的购物车
*/
const cart = (req, res, next) => {
let uid = req.user.uid;
let shoppingKey = helper.getShoppingKeyByCookie(req);
let cartDelList = req.cookies['cart-del-list'];
service.getCartData(uid, shoppingKey, cartDelList)
.then(ret => {
console.log(JSON.stringify(ret));
return res.render('cart', {
module: 'cart',
page: 'cart',
simpleHeader: simpleHeaderModel.setSimpleHeaderData(),
uid: uid,
cartEnsure: {
loginUrl: ''
}
});
})
.catch(next);
};
/**
* 加入购物车
*/
const cartAdd = () => {
};
/**
* 获取购物车商品总数
*/
const cartTotal = () => {
};
/**
* 设置购物车COOKIE信息
*/
const setShoppingCookie = () => {
};
/**
* 购物车商品选择与取消
*/
const selectProduct = () => {
};
/**
* 修改购物车商品数量
*/
const modifyProduct = () => {
};
/**
* 移出购物车
*/
const removeProduct = () => {
};
/**
* 移入收藏夹
* 支持批量移入收藏夹
*/
const moveToFav = () => {
};
/**
* 检查是否收藏
*/
const checkFav = () => {
};
/**
* 凑单商品异步请求
*/
const getTogetherProduct = () => {
};
/**
* 为你优选商品异步请求
*/
const getRecommendProductAction = () => {
};
module.exports = {
getProductInfo
getProductInfo,
cart,
cartAdd,
cartTotal,
setShoppingCookie,
selectProduct,
modifyProduct,
removeProduct,
moveToFav,
checkFav,
getTogetherProduct,
getRecommendProductAction
};
... ...
/**
* Created by yoho on 2016-12-21.
*/
'use strict';
/**
* 从用户加入购物车的COOKIE取出购物车凭证
*/
const getShoppingKeyByCookie = (req) => {
return req.cookies._SPK || '';
};
module.exports = {
getShoppingKeyByCookie
};
... ...
... ... @@ -375,6 +375,16 @@ const getProductInfoAsync = (pid) => {
})();
};
const getCartData = (uid, shoppingKey, cartDelList) => {
return Promise.resolve({
uid,
shoppingKey,
cartDelList
});
};
module.exports = {
getProductInfoAsync // 获取某一个商品详情主页面
getProductInfoAsync, // 获取某一个商品详情主页面
getCartData
};
... ...
... ... @@ -28,4 +28,6 @@ router.get('/easypay', easypay.index); // 限购商品快捷结算页
router.post('/easypay/compute', easypay.compute); // 价格重新计算
router.post('/easypay/submit', easypay.submit); // 限购商品订单提交
router.get('/cart', cart.cart);
module.exports = router;
... ...
<div class="order-ensure-page shop-cart yoho-page clearfix">
<div class="order-edit order-cart" id="cart-page">
<div class="order-title cart-page-title order-ensure-title">
<ul>
<li class="first active">查看购物车</li>
<li>填写订单</li>
<li class="end">付款,完成购买</li>
</ul>
</div>
{{#if cartEnsure.loginUrl}}
<div class="cartnew-tips">
<div class="tipsbox" id="tipsbox">
<a href="javascript:void(0);" class="btn_close" title="关闭"></a>
<strong>温馨提示:</strong>亲爱的顾客,您还没有 <a href="{{cartEnsure.loginUrl}}" class="a_eu">登录</a> 哦,所有商品价格、活动信息以登录后显示为准.
</div>
</div>
{{^}}
<div class="cartnew-tips">
<div class="tipsbox" id="tipsbox">
<a href="javascript:void(0);" class="btn_close" title="关闭"></a>
<strong>温馨提示:</strong>1. 选购单中的商品不保留库存,请及时结算。 2. 商品的价格、相关活动信息及库存以订单提交时为准。
</div>
</div>
{{/if}}
<div class="order-pay">
{{#if cartEnsure.isEmpty}}
<div class="pay-wapper">
<table>
<thead>
<tr>
<th style="width:40%;">
商品信息
</th>
<th style="width:13%;">单价(元)</th>
<th style="width:7%;">返有货币</th>
<th style="width:10%;">数量</th>
<th style="width:10%;">小计(元)</th>
<th style="width:20%;">操作</th>
</tr>
</thead>
<tbody>
<tr class="pre-sell-box">
<td colspan="6" class="cart-empty">
<a href="{{cartEnsure.guangUrl}}">选购商品</a>
<a href="{{cartEnsure.viewOrderUrl}}">查看订单</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="dev-revocation {{#unless cartEnsure.deleteShop}}none{{/unless}}">
<table>
{{# cartEnsure.deleteShop}}
<tr data-productnum="{{productNum}}" data-productsku="{{productSku}}">
<td style="width:40%; text-align: left;">成功删除<a class="title" href="{{link}}" target="_blank">{{productTitle}}</a></td>
<td style="width:10%;"><span class="productPrice">{{productPrice}}</span></td>
<td style="width:10%;"></td>
<td style="width:10%;">{{productNum}}</td>
<td style="width:10%;"></td>
<td style="width:20%; border-right: none; text-align: right;">
<a href="javascript:void(0);"><span class="goBack">撤销本次删除</span></a>
</td>
</tr>
{{/ cartEnsure.deleteShop}}
</table>
</div>
{{^}}
<!-- 购物车商品列表 -->
{{#cartEnsure}}
<div class="pay-wapper">
<table>
<thead>
<tr>
<th style="width:40%;">
商品信息
</th>
<th style="width:13%;">单价(元)</th>
<th style="width:7%;">返有货币</th>
<th style="width:10%;">数量</th>
<th style="width:10%;">小计(元)</th>
<th style="width:20%;">操作</th>
</tr>
</thead>
<tbody>
<!-- 预售商品 -->
{{# preSell}}
<tr class="pre-sell">
<td colspan="6" class="per-list pre-sell-title cart-product-num">
<input class="" type="checkbox" name="" id="" {{#if isChecked}}checked{{/if}}/>
预售商品<span>({{cartProductNum}})</span>预售商品不参加活动,不可使用优惠券,不同上市期的商品我们将为您先到先发。
</td>
</tr>
{{# productItem}}
<tr class="pre-sell-box" {{#if pid}}data-pid="{{pid}}"{{/if}} {{#if id}}data-id="{{id}}"{{/if}} {{#if skn}}data-skn="{{skn}}"{{/if}} {{#if sku}}data-sku="{{sku}}"{{/if}} {{#if productNum}}data-productnum="{{productNum}}"{{/if}} {{#if goodsType}}data-goodstype="{{goodsType}}"{{/if}}>
<td>
<div class="pay-pro">
<input class="cart-item-check" type="checkbox" name="" id="" data-goodstype="{{goodsType}}" {{#if isChecked}}checked{{/if}}/>
<a class="pay-pro-icon" href="{{link}}" target="_blank">
<img src="{{imgCover}}">
<span class="incentive">预售</span>
</a>
<p class="pay-pro-info">
<a href="{{link}}" target="_blank">{{productTitle}}</a>
<span><b title="{{productColor}}">颜色:{{productColor}}<b> 尺码:{{productSize}}</span>
<span class="presell">上市期:{{preSellDate}}</span>
</p>
</div>
</td>
<td class="productPrice">¥{{productPrice}}</td>
<td>{{yohoIcon}}</td>
<td class="adjust-cart-num">
{{#if isGift}}
<div>{{productNum}}</div>
{{^}}
{{#if isPriceGift}}
<div>{{productNum}}</div>
{{^}}
<span class="minus"></span>
<input type="text" value="{{productNum}}" readonly="readonly"/>
<span class="plus"></span>
<p class="tip-message {{#isTipNoStore}}tipNoStore{{/isTipNoStore}}">{{tipMessage}}</p>
{{/if}}
{{/if}}
</td>
<td class="sub-total">¥{{productSubtotal}}</td>
<td class="cart-operation">
<span class="cart-del-btn"><span>删除</span></span>
</td>
</tr>
{{/ productItem}}
{{/ preSell}}
<!--普通商品-->
{{# commonSell}}
<tr>
<td colspan="6" class="common-list cart-product-num">
<input class="" type="checkbox" name="" id="" {{#if isChecked}}checked{{/if}}/>
普通商品({{cartProductNum}})
</td>
</tr>
{{# productItem}}
<tr class="common-sell-box" {{#if pid}}data-pid="{{pid}}"{{/if}} {{#if id}}data-id="{{id}}"{{/if}} {{#if skn}}data-skn="{{skn}}"{{/if}} {{#if sku}}data-sku="{{sku}}"{{/if}} {{#if productNum}}data-productnum="{{productNum}}"{{/if}} {{#if promotionId}}data-promotionid="{{promotionId}}"{{/if}} {{#if goodsType}}data-goodstype="{{goodsType}}"{{/if}}>
<td>
<div class="pay-pro">
<input class="cart-item-check {{#if isGift}}none{{/if}}" type="checkbox" name="" id="" {{#if isChecked}}checked{{/if}}/>
<a class="pay-pro-icon {{#if isGift}}giftInfo{{/if}}" href="{{link}}" target="_blank">
<img src="{{imgCover}}">
{{#isPriceGift}}
<span class="incentive">加价购</span>
{{/isPriceGift}}
{{#isGift}}
<span class="gift">赠品</span>
{{/isGift}}
</a>
<p class="pay-pro-info">
<a href="{{link}}" target="_blank">{{productTitle}}<br /></a>
<span><b title="{{productColor}}">颜色:{{productColor}}</b> 尺码:{{productSize}}</span>
</p>
</div>
</td>
<td><span class="productPrice">¥{{productPrice}}</span>
{{#isVipPrice}}
<span class="vipPrice">(VIP)</span>
{{/isVipPrice}}
{{#isStuPrice}}
<span class="vipPrice">(学生价)</span>
{{/isStuPrice}}
</td>
<td>{{yohoIcon}}</td>
<td class="adjust-cart-num">
{{#if isGift}}
<div>{{productNum}}</div>
{{^}}
{{#if isPriceGift}}
<div>{{productNum}}</div>
{{^}}
<span class="minus"></span>
<input type="text" value="{{productNum}}" readonly="readonly"/>
<span class="plus"></span>
<p class="tip-message {{#isTipNoStore}}tipNoStore{{/isTipNoStore}}">{{tipMessage}}</p>
{{/if}}
{{/if}}
</td>
<td class="sub-total">
{{#if xForOne}}
<del>¥{{productSubtotal}}</del>
<span class="free"></span>
{{^}}
¥{{productSubtotal}}
{{/if}}
</td>
<td class="cart-operation">
<a href="javascript:void(0);" {{#if isGift}}data-gift="1"{{/if}} class="cart-del-btn"><span>删除</span></a>
</td>
</tr>
{{/ productItem}}
{{/ commonSell}}
</tbody>
</table>
</div>
<div class="order-pay">
<!-- 加价购,赠品列表 -->
{{#subjoinItem}}
<div class="pay-wapper {{#if isShowGift}}gift-wrapper{{/if}}">
<div class="cart-product-num">
<strong>{{subjoinType}}</strong>
{{#if isShowGift}}
<i class="icon-zp"></i>
<div data-pageall="{{subjoinPageNum}}" class="cart-unfold cart-page">
<p><span class="f-red">1</span>/<span class="subjoinPageNum">{{subjoinPageNum}}</span></p>
<i class="cart-btn-pre"></i>
<i class="cart-btn-next"></i>
</div>
{{^}}
{{#if isFold}}
<i class="icon-minusCart none"></i>
<i class="icon-addCart"></i>
<div class="cart-unfold unfold-color">
<span>[展开]</span>
</div>
<div data-pageall="{{subjoinPageNum}}" class="cart-unfold cart-page none">
<p><span class="f-red">1</span>/<span class="subjoinPageNum">{{subjoinPageNum}}</span></p>
<i class="cart-btn-pre"></i>
<i class="cart-btn-next"></i>
</div>
{{^}}
<i class="icon-minusCart"></i>
<i class="icon-addCart none"></i>
<div class="cart-unfold unfold-color none">
<span>[展开]</span>
</div>
<div data-pageall="{{subjoinPageNum}}" class="cart-unfold cart-page">
<p><span class="f-red">1</span>/<span class="subjoinPageNum">{{subjoinPageNum}}</span></p>
<i class="cart-btn-pre"></i>
<i class="cart-btn-next"></i>
</div>
{{/if}}
{{/if}}
</div>
<div class="{{#isFold}}fold{{/isFold}}" >
{{#subjoinPage}}
<table class="{{#isHide}}none{{/isHide}}" data-promotion={{promotionId}}>
{{#subjoinInfo}}
<tr>
<td style="width:40%;">
<div class="pay-pro">
<a class="pay-pro-icon" href="{{subjoinLink}}" target="_blank">
<img src="{{imgCover}}">
{{#isPriceGift}}
<span class="incentive">加价购</span>
{{/isPriceGift}}
{{#isGift}}
<span class="gift">赠品</span>
{{/isGift}}
</a>
<p class="pay-pro-info">
<a href="{{subjoinLink}}" target="_blank">{{subjoinTitle}}</a>
</p>
</div>
</td>
<td style="width:13%;">
<del class="wapper-price" style="margin-right: 5px;">¥{{marketPrice}}</del>
<span class="subjoin-price">¥{{subjoinPrice}}</span>
</td>
<td style="width:7%;">{{yohoIcon}}</td>
<td style="width:10%;">1</td>
<td style="width:10%;">¥{{subjoinPrice}}</td>
<td style="width:20%; border-right: none;">
{{#isPriceGift}}
<a href="javascript:void(0);" data-id="{{id}}" class="cart-add-btn order"><span></span></a>
{{/isPriceGift}}
{{#isGift}}
<a href="javascript:void(0);" data-id="{{id}}" class="cart-add-btn zp"><span></span></a>
{{/isGift}}
</td>
</tr>
{{/subjoinInfo}}
</table>
{{/subjoinPage}}
</div>
</div>
{{/subjoinItem}}
</div>
<div class="dev-revocation {{#unless deleteShop}}none{{/unless}}">
<table>
{{#deleteShop}}
<tr data-productnum="{{productNum}}" data-productsku="{{productSku}}" data-promotionid="{{promotionId}}">
<td style="width:40%; text-align: left;">成功删除<a class="title" href="{{link}}" target="_blank">{{productTitle}}</a></td>
<td style="width:10%;"><span class="productPrice">{{productPrice}}</span></td>
<td style="width:10%;"></td>
<td style="width:10%;">{{productNum}}</td>
<td style="width:10%;"></td>
<td style="width:20%; border-right: none; text-align: right;">
<a href="javascript:void(0);"><span class="goBack">撤销本次删除</span></a>
</td>
</tr>
{{/deleteShop}}
</table>
</div>
{{/cartEnsure}}
{{#cartEnsure.salesPromotion}}
<div class="salesPromotion">
<p>
{{#if salesTitle}}
<b>{{salesTitle}}</b>
{{/if}}
{{salesMessage}}</p>
<span><i></i>已参与</span>
</div>
{{/cartEnsure.salesPromotion}}
<!-- 总价计算 -->
<div class="cartnew-sum">
{{#unless cartEnsure.isEmpty}}
<div class="left batch_div">
<a href="javascript:void(0);" class="btn_h" style="display:none;"><span>清空商品</span></a>
<input type="checkbox" id="cbSelAllGoods" {{#if cartEnsure.isCheckedAll}}checked="checked"{{/if}}>
<span>全选</span>
<a class="delAll" href="javascript:void(0);">批量删除</a>
<a class="removeAll" href="javascript:void(0);">批量移入收藏夹</a>
</div>
{{/unless}}
<div class="right">
<p class="sum">商品总价(¥{{cartEnsure.productAmmount}})- 活动(¥{{cartEnsure.activeSale}})= 商品金额总计(¥{{cartEnsure.productAllA}}</p>
<p>
<a href="/help/?category_id=87" class="yoho-coin" target="_blank"></a>
共返有货币:{{cartEnsure.getYoho}}个 商品总价(不含运费):
<strong>¥{{cartEnsure.productAllA}}</strong>
</p>
</div>
</div>
<div class="cartnew-submit" id="payDiv">
<a href="{{cartEnsure.searchUrl}}" class="btn_continue">再逛逛</a>
<a href="javascript:void(0);" class="btn_account" style="display: none;">去结算</a>
<a href="javascript:void(0);" class="btn_account_disabled" style="display: none;">去结算</a>
<div class="go_cash_tips" id="cannotPayNotice" style="display: none;">
<span>请将普通商品与预售商品分开结算,普通商品订单我们将为您优先发货。</span>
</div>
</div>
{{/if}}
</div>
</div>
<!--凑单商品模板-->
<div class="together"></div>
<div class="histroy givePoint"></div>
{{> cart-medley}}
<!-- 商品信息详情 -->
<div class="goods-detail"></div>
<div class="loading"><span></span>请稍后...</div>
</div>
<!-- 商品详细信息窗口 -->
<script type="text/javascript">
(function (d) {
window.bd_cpro_rtid="P1fsPWc";
var s = d.createElement("script");s.type = "text/javascript";s.async = true;s.src = location.protocol + "//cpro.baidu.com/cpro/ui/rt.js";
var s0 = d.getElementsByTagName("script")[0];s0.parentNode.insertBefore(s, s0);
})(document);
</script>
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
{event:"setAccount", account: 16184},
{event:"setCustomerId", id: "{{uid}}"},
{event:"setSiteType", type: "d"},
{event:"viewBasket", item: {{{cartEnsure.criteo}}} }
);
</script>
<!-- 聚效 -->
<script type="text/javascript">
var _mvq = window._mvq || [];
window._mvq = _mvq;
_mvq.push(['$setAccount', 'm-23428-1']);
_mvq.push(['$setGeneral', 'cartview', '', /*用户名*/ '', '{{uid}}']);
_mvq.push(['$logConversion']);
_mvq.push(['$addItem', '', /*商品id*/ '{{cartEnsure.ids}}', '', '']);
_mvq.push(['$logData']);
</script>
... ...
<!-- 凑单,最近浏览商品记录 -->
<script id="togetherProduct" type="text/x-handlebars-template">
<div class="cartnew-goodslist cartnew-goodslist-open" id="orderProduct">
<div class="title">
<h2>
<i class="icon-minus"></i>
<i class="icon-add none"></i>
\{{header}}
</h2>
<div class="right" id="orderProductPage">
\{{#if hasPrev}}
<span class="pageprev btn_type1"><a href="javascript:void(0);" title="上一页"><span></span></a></span>
\{{/if}}
\{{#if hasNext}}
<span class="pagenext btn_type1"><a href="javascript:void(0);" title="下一页"><span></span></a></span>
\{{/if}}
</div>
</div>
<div class="main">
<ul>
\{{# item}}
<li>
<div class="list">
<div class="thumb">
<a href="\{{href}}" title="\{{title}}" target="_blank">
<img src="\{{img}}" alt="\{{alt}}">
</a>
</div>
<div class="name">
<a href="\{{href}}" target="_blank">
<h3>\{{title}}</h3>
</a>
</div>
<div class="price">
\{{#if marketPrice}}
<del>¥\{{marketPrice}}</del>
\{{/if}}
¥\{{price}}</div>
<div class="op">
<a href="javascript:void(0);" data-id="\{{id}}" class="btn_view_s"></a>
</div>
</div>
</li>
\{{/ item}}
</ul>
</div>
</div>
</script>
\ No newline at end of file
... ...

5.48 KB | W: | H:

56.8 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

11.4 KB | W: | H:

16.6 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -132,7 +132,8 @@ function newEditAddress(info) {
cb: function() {
console.log(addDia.packageInfo());
console.log(info);
console.log(info);
// window.open(myCouponUrl);
}
}, {
... ...
.order-ensure-page{
.order-ensure-title {
position: relative;
margin: 30px auto 15px;
&:before {
content: '';
display: block;
background: url(/cart/cart.png);
width: 117px;
height: 33px;
}
}
.order-title {
position: relative;
margin-bottom: 15px;
&:before {
content: '';
display: block;
background: url(/order/save/cart_logo.png);
width: 117px;
height: 33px;
}
&.cart-page-title {
&:before {
content: '';
display: block;
background: url(/order/save/cart.png);
width: 117px;
height: 33px;
}
}
ul {
display: block;
background: url(/order/save/cartnew_flow.png);
width: 364px;
height: 12px;
position: absolute;
right: 0;
top: 0;
li {
display: block;
width: 33.33333333%;
float: left;
font-size: 12px;
color: #999;
height: 50px;
line-height: 50px;
text-align: center;
position: relative;
&.active {
color: #333;
&:after {
display: block;
content: '';
background: url(/order/save/cart_flow_black.png);
width: 12px;
height: 12px;
position: absolute;
left: 50%;
margin-left: -6px;
top: 0;
}
}
&.first {
text-align: left;
&.active {
&:after {
left: 0;
margin-left: 0;
}
}
}
&.end {
text-align: right;
&.active {
&:after {
right: 0;
margin-left: 0;
}
}
}
}
}
}
.none{
display: none;
}
.curser-button {
cursor: pointer;
}
.gift{
position: relative;
width: 988px;
height: 50px;
background:resolve(cart/cart_gift.png) 0 0 repeat;
border: 1px solid #ccc;
text-align: center;
p{
background:resolve(cart/cart_gift_banner.jpg) 0 0 no-repeat;
display: inline-block;
width: 450px;
height: 50px;
overflow: hidden;
}
i{
width: 30px;
height: 30px;
overflow: hidden;
position: absolute;
top: 10px;
right: 5px;
cursor: pointer;
}
.up{
background: url(/cart/btn_gift_up.png);
}
.down{
background: url(/cart/btn_gift_down.png);
}
}
.loading{
width: 120px;
height: 28px;
overflow: hidden;
position: absolute;
left: 50%;
top: 50%;
display: none;
line-height: 30px;
border:1px solid #ccc;
font-size: 12px;
text-indent: 10px;
background: #fff;
span{
width: 20px;
height: 20px;
float: left;
margin: 4px 4px 4px 13px;
background: resolve(cart/loading_s.gif) 2px 2px no-repeat;
}
}
.dev-revocation {
border: 1px solid #fcd081;
background: #fff8d9;
margin-bottom: 15px;
td{
border: none;
a{
color: #468fa2;
margin-left: 12px;
&:hover{
text-decoration:underline;
}
}
}
}
.order-title {
margin-top: 30px;
height: auto;
overflow: hidden;
}
.salesPromotion{
width: 990px;
height: 36px;
border-bottom: #ccc solid 1px;
font-size: 12px;
p{
width: 800px;
height: 36px;
line-height: 36px;
float: left;
padding: 0 10px;
b{
margin-right: 5px;
background: #6c6c6c;
border-radius: 4px;
padding: 1px 5px;
color: #fff;
}
}
span{
width: 150px;
height: 36px;
padding: 0 10px;
line-height: 36px;
float: right;
text-align: right;
position: relative;
i{
position: absolute;
top: 11px;
left: 108px;
float: left;
width: 13px;
height: 13px;
background: url(/cart/checkout.png);
}
}
}
.cartnew-tips {
height: auto;
overflow: hidden;
font-size: 12px;
margin-bottom: 5px;
.tipsbox {
width: 648px;
height: 23px;
line-height: 18px;
padding: 4px 5px 4px 10px;
color: #666;
background: resolve(cart/cartnew_tipsbox.png) no-repeat;
position: relative;
float: left;
.btn_close {
width: 17px;
height: 17px;
padding: 0px;
background: url(/cart/i_close_f.png) no-repeat;
float: right;
cursor: pointer;
}
strong {
color: #000;
font-weight: bold;
}
a {
color: #468fa2;
}
}
}
.pay-wapper {
position: relative;
.pre-sell{
.pre-sell-title {
background: #fff9d9;
span{
margin-right: 10px;
}
}
}
.free{
display: inline-block;
width: 39px;
height: 20px;
background: url(/cart/icon_charge_free.png);
}
.none{
display: none;
}
.fold{
display: none;
}
.vipPrice{
color: #e8044f;
display: block;
}
.presell {
color: #c21250;
display: block;
}
.giftInfo{
margin-left: 30px;
}
.pay-pro-info {
padding-left: 15px;
padding-top: 10px;
margin-left: 0;
float: left;
a {
width: 200px;
}
b {
display: inline-block;
vertical-align: bottom;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-style: normal;
font-weight: 400;
}
}
.pre-sell-box {
.cart-empty{
border: none;
padding: 100px 0 100px 260px ;
background: resolve(cart/cart_empty.gif) 200px 56px no-repeat;
a{
display: inline-block;
width: 90px;
height: 35px;
background: url(/cart/icons02.png);
overflow: hidden;
color: #666;
line-height: 32px;
}
}
.incentive {
background: #000100;
color: #fff;
}
}
.tip-message {
background: #e8044f;
color: #fff;
font-size: 12px;
margin-top: 5px;
}
.cart-product-num {
font-size: 12px;
text-align: left;
height: 33px;
line-height: 33px;
background: #f8f8f8;
padding: 0 10px;
position: relative;
strong{
padding-left: 20px;
font-weight: bold;
}
.icon-minusCart{
position: absolute;
top: 9px;
left: 15px;
float: left;
width: 15px;
height: 15px;
cursor: pointer;
background: url(/cart/i_minus.png);
}
.icon-addCart{
position: absolute;
top: 9px;
left: 15px;
float: left;
width: 15px;
height: 15px;
cursor: pointer;
background: url(/cart/iadd.png);
}
.icon-zp{
position: absolute;
top: 8px;
left: 10px;
float: left;
width: 18px;
height: 19px;
background: url(/cart/i_gift.png);
}
.cart-unfold{
position: absolute;
top: 0;
right: 10px;
i{
width: 28px;
height: 20px;
overflow: hidden;
display: inline-block;
margin-top: 5px;
cursor: pointer;
}
}
.cart-btn-pre{
background: url(/cart/pc_pre.png);
}
.cart-btn-next{
background: url(/cart/pc_next.png);
}
.unfold-color{
color: #666;
cursor: pointer;
}
.cart-page{
p{
float: left;
padding-right: 5px;
}
.f-red{
color: #f00;
}
}
input {
position : relative;
top: 2px;
}
}
input.cart-item-check {
float: left;
margin-top: 25px;
margin-left: 15px;
}
.adjust-cart-num {
input {
width: 30px;
margin: 0 5px;
text-align: center;
}
span {
display: inline-block;
width: 11px;
height: 11px;
cursor: pointer;
font-size: 10px;
}
.minus{
background: url(/cart/ico_minus.png);
}
.plus{
background: url(/cart/ico_plus.png);
}
}
.cart-add-btn{
width: 118px;
height: 32px;
display: inline-block;
overflow: hidden;
border: 0px;
cursor: pointer;
line-height: 32px;
}
.zp{
background: url(/cart/btn_select_zp.png);
}
.order{
background: url(/cart/btn_order.png);
}
.cart-yetremove-btn {
height: 20px;
line-height: 21px;
padding:0 10px;
display: inline-block;
color: #b3b3b3;
position: relative;
border: 1px solid #dcdcdc;
background: #ebebeb;
border-radius: 3px;
}
.cart-del-btn,.cart-remove-btn {
height: 22px;
line-height: 21px;
padding:0 10px;
display: inline-block;
cursor: pointer;
color: #666;
position: relative;
span {
position : relative;
z-index: 100;
}
&:after {
content: '';
display: block;
width: 16px;
height: 100%;
background: url(/cart/btn_hs_03.png);
position: absolute;
right: 0;
top: 0;
z-index: 10;
background-repeat: no-repeat;
}
&:before {
content: '';
display: block;
width: 100%;
height: 100%;
background: url(/cart/btn_hs_01.png);
position : absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
}
}
.special-limit-7day{
display: block;
height: 16px;
line-height: 16px;
}
.special-limit-7day i{
float: left;
display: block;
width: 16px;
height: 16px;
margin-right: 2px;
background: url(/cart/7day-limit.png) no-repeat;
}
}
.cartnew-sum {
background: #efefef;
border: 1px #ccc solid;
padding: 10px;
margin-bottom: 10px;
zoom: 1;
margin-top: 20px;
height: auto;
overflow: hidden;
font-size: 12px;
.left {
float: left;
a {
color: #333;
margin-left: 20px;
}
input {
position: relative;
top: 2px;
}
}
.right {
float: right;
text-align: right;
strong {
color: #e8044f;
font-size: 18px;
}
}
.sum {
color: #333;
font-weight: bold;
padding-bottom: 5px;
}
.yoho-coin {
width: 14px;
height: 14px;
display: inline-block;
background: url(/cart/yoho-coin.png);
vertical-align: middle;
margin-top: -2px;
margin-right: 4px;
}
}
.cartnew-submit {
padding: 10px 0 40px 0;
text-align: right;
position: relative;
.btn_continue {
width: 60px;
height: 33px;
padding: 0px 0px 0px 33px;
text-align: left;
border: 0px;
line-height: 33px;
font-size: 14px;
color: #333;
font-weight: bold;
background: url(/cart/cart_01.png);
display: inline-block;
cursor: pointer;
float: left;
}
.btn_account {
width: 133px;
height: 33px;
padding: 0;
text-align: center;
border: 0;
line-height: 33px;
font-size: 14px;
color: #fff;
font-weight: bold;
background: url(/cart/cart_02.png);
display: inline-block;
cursor: pointer;
float: right;
}
.go_cash_tips {
font-size: 12px;
width: 200px;
padding: 5px 7px 0 28px;
height: 45px;
position: absolute;
right: 135px;
top: 10px;
text-align: left;
color: #e8044f;
background: url(/cart/cart_03.png);
display: block;
}
.btn_account_disabled {
width: 133px;
height: 33px;
padding: 0;
text-align: center;
border: 0;
line-height: 33px;
font-size: 14px;
color: #ccc;
font-weight: bold;
background: url(/cart/cart_04.png);
display: inline-block;
cursor: pointer;
}
}
.cartnew-goodslist {
margin-bottom: 10px;
font-size: 12px;
border: 1px solid #ccc;
.title {
height: 20px;
padding: 8px 10px;
background: #efefef;
h2 {
height: 20px;
line-height: 24px;
overflow: hidden;
font-size: 12px;
float: left;
cursor: pointer;
i {
width: 15px;
height: 15px;
float: left;
position: relative;
top: 4px;
margin-right: 5px;
}
.icon-minus{
background: url(/cart/i_minus.png);
}
.icon-add{
background: url(/cart/iadd.png);
}
}
}
.right {
float: right;
span{
width: 28px;
height: 22px;
display: inline-block;
}
.pageprev{
background: url(/cart/pc_pre.png);
}
.pagenext{
background: url(/cart/pc_next.png);
}
}
.main {
height: 230px;
border-top: 1px #e3e3e3 solid;
display: block;
ul {
height: auto;
width: 100%;
overflow: hidden;
}
li {
width: 16.6667%;
box-sizing: border-box;
height: 230px;
border-right: 1px #e3e3e3 solid;
float: left;
&.end {
border: none;
}
}
.list {
width: 102px;
padding: 10px 0 0px 0;
margin: 0 auto;
}
.thumb {
height: 110px;
img{
display: block;
margin:0 auto;
}
}
.name {
height: 35px;
overflow: hidden;
font-size: 12px;
h3 {
height: 30px;
line-height: 15px;
font-size: 12px;
font-weight: normal;
color: #333;
cursor: pointer;
overflow: hidden;
}
a {
color: #333;
text-decoration: underline;
}
}
.price {
color: #333;
height: 25px;
line-height: 25px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-align: center;
font-size: 12px;
del{
color: #999;
}
}
.op {
text-align: center;
padding: 0 0 5px 0;
}
.btn_view_s {
width: 100px;
height: 22px;
background: url(/cart/btn_view_s.png);
display: inline-block;
border: 0;
}
}
}
}
... ...
.shop-cart{
.goods-detail{
position: absolute;
top: 10%;
left: 0;
z-index: 101;
width: 650px;
height: auto;
overflow: hidden;
border:1px solid #ccc;
border-radius: 5px;
background: #fff;
display: none;
.magnify{
position: absolute;
width: 12px;
height: 12px;
background: url(/cart/magnify.png);
bottom: 2px;
right: 2px;
}
.detail-header{
display: block;
font-size: 12px;
line-height: 16px;
text-align: center;
color: #fff;
margin-top: 5px;
box-sizing: border-box;
padding-right: 5px;
height: 16px;
cursor: move;
.colse{
float: right;
width: 46px;
height: 16px;
background: #ccc;
border-radius: 2px;
cursor: pointer;
&:hover{
background: #414141;
}
}
}
.detail-body{
width: 610px;
padding: 15px;
margin: 0 auto;
.none{
display: none;
}
.detail-bigpic{
width: 290px;
padding-bottom: 15px;
float: left;
.bigpic{
width: 210px;
height: 280px;
display: block;
margin:0 auto 10px;
img{
width: 100%;
height: auto;
}
}
.piclist{
height: 65px;
cursor: pointer;
span{
width: 10px;
height: 60px;
}
.pre{
background: url(/cart/pre.png);
float: left;
}
.con{
width: 260px;
height: 65px;
overflow: hidden;
float: left;
margin-left: 5px;
li{
float: left;
width: 58px;
height: 58px;
border: 1px #ccc solid;
margin: 1px;
vertical-align: top;
overflow: hidden;
text-align: center;
img{
width: auto;
height: 100%;
display: inline-block;
}
}
.active{
width: 56px;
height: 56px;
border: 2px #333 solid;
}
}
.next{
background: url(/cart/next.png);
float: right;
}
}
}
.detail-info{
width: 300px;
float: right;
padding-bottom: 15px;
.title{
padding: 5px 0;
h2{
width: 300px;
color: #000;
font-size: 12px;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
}
}
.arrivalDate{
color: #f00;
}
.type{
padding-bottom: 10px;
.type-s{
background: #ccc;
padding: 0px 5px;
color: #fff;
font-size: 12px;
height: 15px;
line-height: 15px;
display: inline-block;
}
}
.price{
padding: 0px 0px 10px 0px;
margin-bottom: 10px;
border-bottom: 1px #000 solid;
.oldprice{
color: #999;
font-size: 14px;
font-weight: bold;
display: block;
padding-bottom: 5px;
}
.newprice{
color: #000;
font-size: 14px;
font-weight: bold;
height: 30px;
line-height: 30px;
padding: 0px 0px 5px 0px;
b{
font-size: 22px;
font-family: arial;
}
}
}
.order{
color: #000;
font-size: 12px;
dd{
width: 55px;
float: left;
padding-bottom: 8px;
}
dt{
width: 245px;
float: left;
padding-bottom: 8px;
}
dd.colorBox{
line-height: 44px;
}
.colorBox{
height: 75px;
li{
width: 44px;
height: 65px;
overflow: hidden;
text-align: center;
margin-right: 4px;
display: inline;
float: left;
cursor: pointer;
.atcive{
width: 40px;
height: 40px;
border: 2px #e8044f solid;
span{
position: absolute;
bottom: 0;
right: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: resolve(cart/ico_r_act.png) 0 0 no-repeat;
}
}
p{
width: 42px;
height: 42px;
margin: 0px;
display: inline-block;
border: 1px #ccc solid;
position: relative;
img{
width: 100%;
height: auto;
}
}
span{
line-height: 20px;
}
}
}
.showSizeBox{
height: 25px;
line-height: 18px;
span{
cursor: pointer;
height: 18px;
padding: 0px 10px;
border: 1px #ccc solid;
margin: 1px 5px 5px 1px;
display: inline;
float: left;
overflow: hidden;
}
.atcive{
height: 16px;
border: 2px #f00 solid;
background: resolve(cart/ico_r_act.png) right bottom no-repeat;
}
.null-atcivec{
height: 18px;
border: 1px #ccc solid;
color: #ccc;
}
.atcivec{
height: 16px;
border: 2px #ccc solid;
background: resolve(cart/ico_r_act_h.png) right bottom no-repeat;
color: #ccc;
}
}
.amount_wrapper{
width: 100px;
height: 20px;
display: inline-block;
.amount{
width: 12px;
height: 12px;
display: inline;
cursor: pointer;
border: 0px;
float: left;
font-size: 10px;
color: #c4c4c4;
}
.cut{
background: url(/cart/ico_minus.png);
margin: 5px 5px 0px 0px;
}
.add{
background: url(/cart/ico_plus.png);
margin: 5px 0px 0px 5px;
}
.mnum{
width: 33px;
height: 18px;
line-height: 16px;
border: #c4c4c4 solid 1px;
text-align: center;
overflow: hidden;
float: left;
font-size: 12px;
}
}
}
.submit{
padding-top: 10px;
float: left;
input{
width: 225px;
height: 45px;
overflow: hidden;
border: 0px;
cursor: pointer;
float: left;
}
.addcart{
background: url(/cart/btn_b_add.png);
}
.btn_pre_sale{
background: url(/cart/btn_pre_sale.png);
}
.btn_sellout{
background: url(/cart/btn_b_sellout.png);
}
.fav_count{
background: url(/cart/btn_b_sc.png);
height: 30px;
}
}
}
.detail-size{
float: left;
border-top: 1px #ccc dashed;
width: 100%;
height: auto;
padding-bottom: 15px;
h3{
height: 35px;
line-height: 35px;
font-size: 14px;
span{
font-size: 12px;
}
}
table{
width: 100%;
height: auto;
border: 1px solid #ccc;
margin-bottom: 5px;
font-size: 12px;
td{
border: 1px solid #fff;
padding: 3px;
font-weight: normal;
background: #fbfbfb;
text-align: center;
padding: 8px 3px;
}
tr:nth-of-type(even) td{
background:#f4f4f4;
}
}
.size-info{
font-size: 12px;
color: #999;
}
}
}
}
}
... ...
@import "order-ensure";
@import "order-ensure2016";
@import "cart";
@import "goods-detail";
... ...