fe / yohobuy-node · Commits

Go to a project

Authored by 刘传洋
Commit 45f0cf60cd66e2f4640cfa27cba7161052dfbc74 2 parents a0137f4e 50b077ee

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

Inline Side-by-side
Showing 7 changed files with 129 additions and 122 deletions
... ... @@ -10,6 +10,12 @@ const helper = require('../models/cart-helper');
const ghelper = require('../../guang/models/guang-helper');
const simpleHeaderModel = require('../../../doraemon/models/simple-header');
const stepper = [
{name: '查看购物车', focus: true},
{name: '填写订单'},
{name: '付款，完成购买'}
];
const getProductInfo = (req, res, next) => {
let pid = req.query.productId || '';
... ... @@ -85,6 +91,7 @@ const cart = (req, res, next) => {
return res.render('cart', {
module: 'cart',
page: 'cart',
stepper: stepper,
simpleHeader: simpleHeaderModel.setSimpleHeaderData(),
uid: uid,
cart: ret
... ...
<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>
{{> shopping-step}}
</div>
{{#unless cart.isLogin}}
<div class="cartnew-tips">
... ... @@ -56,7 +52,7 @@
<div class="pay-wapper">
<div class="cart-title">
<p class="left" style="width:6%;">
<i class="cart-item-check iconfont cart-item-checked"></i> 全选
<i class="cart-item-check iconfont cart-item-checked"></i>&nbsp;&nbsp;全选
</p>
<p style="width:40%">商品信息</p>
<p style="width:14%">单价</p>
... ...
... ... @@ -27,11 +27,10 @@
{{/unless}}
<a class="pay-pro-icon" href="{{link}}" target="_blank">
<img src="{{imgCover}}">
{{#if isAdvance}}<span class="incentive red">预售</span>{{/if}}
{{#if isAdvance}}<span class="incentive">预售</span>{{/if}}
</a>
<p class="pay-pro-info">
{{#if tag}}<code class="order-pay-mark">{{tag}}</code>{{/if}}
<a href="{{link}}" target="_blank">{{productTitle}}</a>
<a href="{{link}}" target="_blank"><code class="good-mark">7777{{tag}}</code>{{productTitle}}</a>
<em class="pay-pro-detail"><span><b title="{{productColor}}">颜色：{{productColor}}</b> 尺码：{{productSize}}<i class="iconfont">&#xe6c7;</i></span></em>
</p>
</div>
... ...

47 KB | W: | H:

49.7 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

16.6 KB | W: | H:

11.4 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
.order-ensure-page{
.order-title {
position: relative;
margin-bottom: 15px;
margin-top: 30px;
height: auto;
overflow: hidden;
&: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 !important;
}
... ... @@ -464,11 +381,79 @@
background-color: transparent;
}
.order-ensure-title {
position: relative;
margin: 40px auto 50px;
&:before {
content: '';
display: block;
background: url(/cart/cart-ico.png);
width: 150px;
height: 42px;
}
}
.shopping-step {
width: 440px;
font-size: 15px;
display: block;
border-top: 2px solid #b0b0b0;
position: absolute;
right: 0;
top: 0;
li {
display: block;
float: left;
position: relative;
width: 33.33%;
color: #999;
line-height: 40px;
text-align: center;
&:after {
content: '';
display: block;
position: absolute;
background: url(/cart/step-off.png);
width: 12px;
height: 12px;
left: 50%;
margin-left: -6px;
top: -7px;
}
&.first {
text-align: left;
}
&.last {
text-align: right;
}
&.first:after {
left: 0;
margin-left: 0;
}
&.last:after {
left: auto;
right: 0;
margin-left: 0;
}
}
}
.cart-table {
border: 1px solid #e0e0e0;
&:not(last-child){
margin-top:-1px;
}
&+.gift-sell {
margin-top: -1px;
}
}
.pre-sell {
... ... @@ -490,11 +475,11 @@
.gift-sell {
border: 1px solid #e0e0e0;
padding:20px 30px 20px 55px;
padding: 18px 30px 19px 55px;
.order-pay-mark{
width: 70px;
height: 20px;
line-height: 20px;
width: 66px;
height: 18px;
line-height: 18px;
display: inline-block;
margin-right: 20px;
background-color: #ff575c;
... ... @@ -513,6 +498,9 @@
color: #444;
line-height: 1;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
.order-pay-link{
display: inline-block;
... ... @@ -539,7 +527,7 @@
height: auto;
overflow: hidden;
font-size: 12px;
margin-bottom: 5px;
margin-bottom: 10px;
.tipsbox {
position: relative;
float: left;
... ... @@ -570,6 +558,19 @@
}
}
.good-mark {
min-width: 48px;
height: 16px;
line-height: 16px;
display: inline-block;
margin-right: 5px;
background-color: #ff575c;
color: #fff;
font-size: 12px;
text-align: center;
vertical-align: top;
}
.order-pay {
width: 100%;
line-height: 150%;
... ... @@ -665,22 +666,22 @@
cursor: pointer;
}
}
.cart-btn-pre{
.cart-btn-pre {
background: url(/cart/pc_pre.png);
}
.cart-btn-next{
.cart-btn-next {
background: url(/cart/pc_next.png);
}
.unfold-color{
.unfold-color {
color: #666;
cursor: pointer;
}
.cart-page{
p{
.cart-page {
p {
float: left;
padding-right: 5px;
}
.f-red{
.f-red {
color: #f00;
}
}
... ... @@ -704,7 +705,7 @@
}
li {
position: relative;
padding: 0 30px 0 60px;
padding: 0 30px 0 54px;
&:hover {
.pay-pro-detail {
border-color: #e0e0e0;
... ... @@ -714,6 +715,9 @@
}
}
.cart-item-check {
top: 63px;
}
}
.tr{
border-bottom: 1px solid #e0e0e0;
... ... @@ -760,26 +764,27 @@
}
.out-of-stock {
position:absolute;
top:20px;
left:0;
position: absolute;
top: 30px;
left: -35px;
display: inline-block;
font-size: 12px;
color: #000;
background-color: #f0f0f0;
padding: 8px 10px;
line-height: 12px;
z-index: 30;
&:after {
position: absolute;
top: 52px;
left: 5px;
top: 28px;
left: 8px;
content: '';
display: inline-block;
width: 0;
height: 0;
border-top: 14px solid #f0f0f0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f0f0f0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
}
... ... @@ -787,7 +792,7 @@
float: left;
text-align: left;
padding-left: 15px;
padding-top: 10px;
padding-top: 5px;
margin-left: 0;
a {
display:block;
... ... @@ -1045,7 +1050,6 @@
width: 38px;
text-align: center;
height: 30px;
font-family: verdana;
color: #444;
font-size: 15px;
border: 1px solid #e0e0e0;
... ... @@ -1165,22 +1169,23 @@
.pay-pro-icon {
float: left;
width: 70px;
width: 66px;
height: 90px;
overflow: hidden;
border: 1px solid #e9e9e9;
box-sizing: border-box;
display: block;
position: relative;
img {
max-width: 70px;
max-width: 66px;
}
.incentive {
position: absolute;
left: 0px;
left: -1px;
bottom: 0px;
width: 100%;
width: 66px;
display: block;
height: 16px;
line-height: 16px;
height: 18px;
line-height: 18px;
font-size:12px;
text-align: center;
color: #fff;
... ... @@ -1285,7 +1290,7 @@
height: 15px;
color:#e9e9e9;
float: left;
margin-top: 25px;
margin-top: 0;
margin-left: 15px;
display: inline-block;
cursor: pointer;
... ...