chenchao / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit 83286b11e7a7009a6eab5be4c5b1e847bf2a924b 1 parent 9637884d

shopping cart -> gift and advance buy

Inline Side-by-side
Showing 9 changed files with 287 additions and 26 deletions
  1 +/**
  2 + * 购物车Logic
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/20
  5 + */
  6 +
  7 +var $ = require('yoho.zepto');
  8 +
  9 +var $cartContent = $('.cart-content');
  10 +
  11 +require('./good');
  12 +
  13 +$('.cart-nav').delegate('li', 'touchstart', function() {
  14 + var $this = $(this);
  15 +
  16 + if ($this.hasClass('active')) {
  17 + return;
  18 + }
  19 +
  20 + $this.siblings('.active').removeClass('active');
  21 + $this.addClass('active');
  22 +
  23 + //切换普通商品和预售商品购物车显示
  24 + $cartContent.toggleClass('hide');
  25 +
  26 + //trigger lazyload
  27 + $(window).trigger('scroll');
  28 +});
  1 +/**
  2 + * 赠品/加价购
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/23
  5 + */
  6 +
  7 +var $ = require('yoho.zepto'),
  8 + lazyLoad = require('yoho.zeptolazyload');
  9 +
  10 +var chosePanel = require('./chose-panel');
  11 +
  12 +lazyLoad($('.lazy'));
  13 +
  14 +$('.gift-advance-page').delegate('.chose', 'touchstart', function() {
  15 + var id = $(this).closest('.gift-advance-good').data('id');
  16 +
  17 + $.ajax({
  18 + type: 'GET',
  19 + url: '/shoppingCart/goodinfo',
  20 + data: {
  21 + id: id
  22 + },
  23 + success: function(data) {
  24 + if (data.code === 200) {
  25 + chosePanel.show(data.data);
  26 + }
  27 + }
  28 + });
  29 +});
1 /** 1 /**
2 - * 购物车Logic 2 + * 购物车打包入口
3 * @author: xuqi<qi.xu@yoho.cn> 3 * @author: xuqi<qi.xu@yoho.cn>
4 - * @date: 2015/10/20 4 + * @date: 2015/10/23
5 */ 5 */
6 6
7 -var $ = require('yoho.zepto');  
8 -  
9 -var $cartContent = $('.cart-content');  
10 -  
11 -require('./good');  
12 -  
13 -$('.cart-nav').delegate('li', 'touchstart', function() {  
14 - var $this = $(this);  
15 -  
16 - if ($this.hasClass('active')) {  
17 - return;  
18 - }  
19 -  
20 - $this.siblings('.active').removeClass('active');  
21 - $this.addClass('active');  
22 -  
23 - //切换普通商品和预售商品购物车显示  
24 - $cartContent.toggleClass('hide');  
25 -  
26 - //trigger lazyload  
27 - $(window).trigger('scroll');  
28 -});  
  7 +require('./cart');
  8 +require('./gift-advance');
  1 +.gift-advance-page {
  2 + .gift-advance-good {
  3 + position: relative;
  4 + padding: 20rem / $pxConvertRem 0;
  5 + margin-left: 34rem / $pxConvertRem;
  6 + height: 160rem / $pxConvertRem;
  7 + border-bottom: 1px solid #e0e0e0;
  8 +
  9 + &:last-child {
  10 + border-bottom: none;
  11 + }
  12 + }
  13 +
  14 +
  15 + .advance-block .gift-advance-good:last-child {
  16 + border-bottom: none;
  17 + }
  18 +
  19 + .advance-block:last-child .gift-advance-good:last-child {
  20 + border-bottom: 1px solid #e0e0e0;
  21 + }
  22 +
  23 + .thumb-wrap {
  24 + position: relative;
  25 + float: left;
  26 + width: 120rem / $pxConvertRem;
  27 + height: 160rem / $pxConvertRem;
  28 +
  29 + .thumb {
  30 + width: 100%;
  31 + height: 100%;
  32 + }
  33 + }
  34 +
  35 + .tag {
  36 + position: absolute;
  37 + bottom: 0;
  38 + left: 0;
  39 + right: 0;
  40 + height: 25rem / $pxConvertRem;
  41 + color: #fff;
  42 + text-align: center;
  43 + background: #a1ce4e;
  44 +
  45 + &:before {
  46 + content: '赠品';
  47 + }
  48 + }
  49 +
  50 + .deps {
  51 + margin-left: 135rem / $pxConvertRem;
  52 + }
  53 +
  54 + .name {
  55 + font-size: 28rem / $pxConvertRem;
  56 + }
  57 +
  58 + .row:nth-child(2) {
  59 + font-size: 22rem / $pxConvertRem;
  60 + height: 45rem / $pxConvertRem;
  61 + line-height: 45rem / $pxConvertRem;
  62 +
  63 + > span {
  64 + margin-right: 15rem / $pxConvertRem;
  65 + }
  66 + }
  67 +
  68 + .row:nth-child(3) {
  69 + position: relative;
  70 + }
  71 +
  72 + .color, .size {
  73 + color: #b6b6b6;
  74 + }
  75 +
  76 + .price {
  77 + font-size: 24rem / $pxConvertRem;
  78 + color: #000;
  79 + }
  80 +
  81 + .count {
  82 + font-size: 20rem / $pxConvertRem;
  83 + color: #999;
  84 + margin-left: 22rem / $pxConvertRem;
  85 + }
  86 +
  87 + .chose {
  88 + position: absolute;
  89 + width: 88rem / $pxConvertRem;
  90 + height: 58rem / $pxConvertRem;
  91 + background: #f8f8f8;
  92 + border: 1px solid #ccc;
  93 + right: 20rem / $pxConvertRem;
  94 + top: 71rem / $pxConvertRem;
  95 + font-size: 26rem / $pxConvertRem;
  96 + }
  97 +
  98 + .title {
  99 + height: 50rem / $pxConvertRem;
  100 + line-height: 50rem / $pxConvertRem;
  101 + padding-left: 20rem / $pxConvertRem;
  102 + font-size: 24rem / $pxConvertRem;
  103 + background: #f8f8f8;
  104 + }
  105 +
  106 + .advance-block .tag {
  107 + background: #eb76aa;
  108 + &:before {
  109 + content: '加价购';
  110 + }
  111 + }
  112 +}
1 -@import "good", "chose-panel"; 1 +@import "good", "chose-panel", "gift-advance-good";
2 2
3 3
4 .icon-checkbox:before { content: "\e61c"; } 4 .icon-checkbox:before { content: "\e61c"; }
  1 +{{> layout/header}}
  2 +<div class="gift-advance-page yoho-page">
  3 + {{# shoppingCart}}
  4 + {{#if gift}}
  5 + {{# gift}}
  6 + {{> shopping-cart/gift-advance-good}}
  7 + {{/ gift}}
  8 + {{^}}
  9 + {{# advance}}
  10 + <div class="advance-block">
  11 + <p class="title">{{title}}</p>
  12 + {{# goods}}
  13 + {{> shopping-cart/gift-advance-good}}
  14 + {{/ goods}}
  15 + </div>
  16 + {{/ advance}}
  17 + {{/if}}
  18 + {{/ shoppingCart}}
  19 +</div>
  20 +{{> layout/footer}}
1 <script> 1 <script>
2 seajs.use('js/common'); 2 seajs.use('js/common');
3 </script> 3 </script>
  4 +
4 {{!-- 逛(PLUS+STAR) --}} 5 {{!-- 逛(PLUS+STAR) --}}
5 {{#if psList}} 6 {{#if psList}}
6 <script> 7 <script>
@@ -27,6 +28,7 @@ @@ -27,6 +28,7 @@
27 seajs.use('js/guang/detail'); 28 seajs.use('js/guang/detail');
28 </script> 29 </script>
29 {{/if}} 30 {{/if}}
  31 +
30 {{!-- 注册 --}} 32 {{!-- 注册 --}}
31 {{#if regIndex}} 33 {{#if regIndex}}
32 <script> 34 <script>
@@ -43,6 +45,7 @@ @@ -43,6 +45,7 @@
43 seajs.use('js/passport/register/password'); 45 seajs.use('js/passport/register/password');
44 </script> 46 </script>
45 {{/if}} 47 {{/if}}
  48 +
46 {{!-- 登陆 --}} 49 {{!-- 登陆 --}}
47 {{#if loginIndex}} 50 {{#if loginIndex}}
48 <script> 51 <script>
@@ -54,6 +57,7 @@ @@ -54,6 +57,7 @@
54 seajs.use('js/passport/login/international'); 57 seajs.use('js/passport/login/international');
55 </script> 58 </script>
56 {{/if}} 59 {{/if}}
  60 +
57 {{!-- 密码找回 --}} 61 {{!-- 密码找回 --}}
58 {{#if backEmail}} 62 {{#if backEmail}}
59 <script> 63 <script>
@@ -80,6 +84,7 @@ @@ -80,6 +84,7 @@
80 seajs.use('js/passport/back/new-password'); 84 seajs.use('js/passport/back/new-password');
81 </script> 85 </script>
82 {{/if}} 86 {{/if}}
  87 +
83 {{!-- 首页 --}} 88 {{!-- 首页 --}}
84 {{#if grilsHomePage}} 89 {{#if grilsHomePage}}
85 <script> 90 <script>
@@ -101,51 +106,64 @@ @@ -101,51 +106,64 @@
101 seajs.use('js/home/home'); 106 seajs.use('js/home/home');
102 </script> 107 </script>
103 {{/if}} 108 {{/if}}
  109 +
104 {{!-- 新品到着 --}} 110 {{!-- 新品到着 --}}
105 {{#if newArrival}} 111 {{#if newArrival}}
106 <script> 112 <script>
107 seajs.use('js/product/newsale/newarrival'); 113 seajs.use('js/product/newsale/newarrival');
108 </script> 114 </script>
109 {{/if}} 115 {{/if}}
  116 +
110 {{!-- 折扣专区 --}} 117 {{!-- 折扣专区 --}}
111 {{#if discount}} 118 {{#if discount}}
112 <script> 119 <script>
113 seajs.use('js/product/newsale/discount'); 120 seajs.use('js/product/newsale/discount');
114 </script> 121 </script>
115 {{/if}} 122 {{/if}}
  123 +
116 {{!-- 商品列表 --}} 124 {{!-- 商品列表 --}}
117 {{#if goodListPage}} 125 {{#if goodListPage}}
118 <script> 126 <script>
119 seajs.use('js/product/list'); 127 seajs.use('js/product/list');
120 </script> 128 </script>
121 {{/if}} 129 {{/if}}
  130 +
122 {{!-- 商品详情 --}} 131 {{!-- 商品详情 --}}
123 {{#if goodDetail}} 132 {{#if goodDetail}}
124 <script> 133 <script>
125 seajs.use('js/product/detail/detail'); 134 seajs.use('js/product/detail/detail');
126 </script> 135 </script>
127 {{/if}} 136 {{/if}}
  137 +
128 {{!-- 品类 --}} 138 {{!-- 品类 --}}
129 {{#if categoryPage}} 139 {{#if categoryPage}}
130 <script> 140 <script>
131 seajs.use('js/category/index'); 141 seajs.use('js/category/index');
132 </script> 142 </script>
133 {{/if}} 143 {{/if}}
  144 +
134 {{!-- 品牌 --}} 145 {{!-- 品牌 --}}
135 {{#if brandPage}} 146 {{#if brandPage}}
136 <script> 147 <script>
137 seajs.use('js/category/brand'); 148 seajs.use('js/category/brand');
138 </script> 149 </script>
139 {{/if}} 150 {{/if}}
  151 +
140 {{!-- 搜索 --}} 152 {{!-- 搜索 --}}
141 {{#if searchPage}} 153 {{#if searchPage}}
142 <script> 154 <script>
143 seajs.use('js/index/search'); 155 seajs.use('js/index/search');
144 </script> 156 </script>
145 {{/if}} 157 {{/if}}
  158 +
146 {{!-- 购物车 --}} 159 {{!-- 购物车 --}}
147 {{#if shoppingCartPage}} 160 {{#if shoppingCartPage}}
148 <script> 161 <script>
149 - seajs.use('js/shopping-cart/index'); 162 + seajs.use('js/shopping-cart/cart');
  163 +</script>
  164 +{{/if}}
  165 +{{#if giftAdvancePage}}
  166 +<script>
  167 + seajs.use('js/shopping-cart/gift-advance');
150 </script> 168 </script>
151 {{/if}} 169 {{/if}}
  1 +<div class="gift-advance-good" data-id={{id}}>
  2 + <div class="thumb-wrap">
  3 + <img class="thumb lazy" data-original={{thumb}}>
  4 + <p class="tag"></p>
  5 + </div>
  6 + <div class="deps">
  7 + <p class="name row">{{name}}</p>
  8 + <p class="row">
  9 + {{#if color}}
  10 + <span class="color">
  11 + 颜色:{{color}}
  12 + </span>
  13 + {{/if}}
  14 +
  15 + {{#if size}}
  16 + <span class="size">
  17 + 尺码:{{size}}
  18 + </span>
  19 + {{/if}}
  20 + </p>
  21 + <p class="row">
  22 + <span class="price">
  23 + ￥{{price}}
  24 + </span>
  25 + <span class="count">
  26 + ×{{count}}
  27 + </span>
  28 + </p>
  29 + <button class="chose">选择</button>
  30 + </div>
  31 +</div>
@@ -84,6 +84,49 @@ class ShoppingCartController extends AbstractAction @@ -84,6 +84,49 @@ class ShoppingCartController extends AbstractAction
84 $this->_view->display('index', array('shoppingCartPage' => true, 'pageHeader' => array( 84 $this->_view->display('index', array('shoppingCartPage' => true, 'pageHeader' => array(
85 'navBack' => 'http://m.yohobuy.com', 'navTitle' => '购物车'), 'shoppingCart' => $data)); 85 'navBack' => 'http://m.yohobuy.com', 'navTitle' => '购物车'), 'shoppingCart' => $data));
86 } 86 }
  87 +
  88 + public function giftAdvanceAction()
  89 + {
  90 + $data = array(
  91 + 'advance' => array(
  92 + array(
  93 + 'title' => '【izzue】加￥19购袜子',
  94 + 'goods' => array(
  95 + 'id' => 1,
  96 + 'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/09/17/03/014cacfa5c458b9732c68adf1af15d7a45.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/90',
  97 + 'name' => 'Life.After.Life纯棉短袜',
  98 + 'salePrice' => 19,
  99 + 'price' => 99
  100 + )
  101 + ),
  102 + array(
  103 + 'title' => '【银鳞堂】加￥9购手绳',
  104 + 'goods' => array(
  105 + 'id' => 1,
  106 + 'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/03/10/01bc1878f9154e77ac4f7a6003c954f1b8.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  107 + 'name' => '银鳞堂民族风牛皮手绳',
  108 + 'salePrice' => 9,
  109 + 'price' => 19
  110 + )
  111 + )
  112 + )
  113 + );
  114 +
  115 + // $data = array(
  116 + // 'gift' => array(
  117 + // 'id' => 1,
  118 + // 'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/09/17/03/014cacfa5c458b9732c68adf1af15d7a45.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/90',
  119 + // 'name' => 'Life.After.Life纯棉短袜',
  120 + // 'color' => '黄色',
  121 + // 'size' => 'L',
  122 + // 'price' => 0,
  123 + // 'count' => 1
  124 + // )
  125 + // );
  126 +
  127 + $this->_view->display('gift-advance', array('giftAdvancePage' => true, 'pageHeader' => array(
  128 + 'navBack' => true, 'navTitle' => '加价购'), 'shoppingCart' => $data));
  129 + }
87 130
88 /** 131 /**
89 * 读取chose-panel内容 132 * 读取chose-panel内容