fe / YOHOBUYPC · Commits

Go to a project

Authored by Rock Zhang
Commit a49343468a46577389a4b0484bd6bcf66d420f49 2 parents 1cff6b92 e92e709f

Merge branch 'develop' of git.dev.yoho.cn:web/yohobuy into develop

Inline Side-by-side
Showing 14 changed files with 309 additions and 7 deletions
@@ -64,7 +64,7 @@ @@ -64,7 +64,7 @@
64 { 64 {
65 pageHeader: { 65 pageHeader: {
66 //对应页面有就传，没有就不传 66 //对应页面有就传，没有就不传
67 - navBack: '', 67 + navBack: true,
68 navTitle: '', 68 navTitle: '',
69 navHome: '' 69 navHome: ''
70 } 70 }
No preview for this file type
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata> 4 <metadata>
5 -Created by FontForge 20120731 at Wed Oct 21 18:23:04 2015 5 +Created by FontForge 20120731 at Wed Oct 21 19:30:11 2015
6 By Ads 6 By Ads
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Wed Oct 21 18:23:04 2015 @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Wed Oct 21 18:23:04 2015
19 bbox="0 -224 3943 812.871" 19 bbox="0 -224 3943 812.871"
20 underline-thickness="50" 20 underline-thickness="50"
21 underline-position="-100" 21 underline-position="-100"
22 - unicode-range="U+0078-E623" 22 + unicode-range="U+0078-E625"
23 /> 23 />
24 <missing-glyph horiz-adv-x="374" 24 <missing-glyph horiz-adv-x="374"
25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> 25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -142,5 +142,9 @@ d="M586 588q-64 150 -188 203q-114 47 -222 -7q-112 -56 -155 -192q-20 -67 -21 -144 @@ -142,5 +142,9 @@ d="M586 588q-64 150 -188 203q-114 47 -222 -7q-112 -56 -155 -192q-20 -67 -21 -144
142 t57 38t55 43t47 48t39 56.5t25 66.5t8.5 78.5q0 75 -19.5 138t-52.5 105.5t-76.5 70.5t-91 37.5t-98 1t-96 -34.5t-85.5 -72.5t-67 -108.5z" /> 142 t57 38t55 43t47 48t39 56.5t25 66.5t8.5 78.5q0 75 -19.5 138t-52.5 105.5t-76.5 70.5t-91 37.5t-98 1t-96 -34.5t-85.5 -72.5t-67 -108.5z" />
143 <glyph glyph-name="uniE623" unicode="&#xe623;" 143 <glyph glyph-name="uniE623" unicode="&#xe623;"
144 d="M835 576l-60 63l-263 -275v0l-263 275l-60 -63l262 -276l-262 -276l60 -63l263 275v0l263 -275l60 63l-262 276z" /> 144 d="M835 576l-60 63l-263 -275v0l-263 275l-60 -63l262 -276l-262 -276l60 -63l263 275v0l263 -275l60 63l-262 276z" />
  145 + <glyph glyph-name="uniE624" unicode="&#xe624;" horiz-adv-x="1000"
  146 +d="M459 754h22h23h20h22h22v-191v-191h191h191v-109h-191h-191v-191v-190h-109v190v191h-191h-190q-1 37 -1 109h128h127h127v116v150v116z" />
  147 + <glyph glyph-name="uniE625" unicode="&#xe625;" horiz-adv-x="1000"
  148 +d="M77 372h873v-109h-873v109z" />
145 </font> 149 </font>
146 </defs></svg> 150 </defs></svg>
No preview for this file type
No preview for this file type
  1 +/**
  2 + * 购物车选择尺寸、颜色和数量面板
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/21
  5 + */
  6 +
  7 +var $ = require('yoho.zepto');
  8 +var Handlebars = require('yoho.handlebars');
  9 +
  10 +var $page = $('.yoho-page');
  11 +
  12 +var tpl;
  13 +
  14 +//读取partials
  15 +$.ajax({
  16 + type: 'GET',
  17 + url: '/shoppingCart/tpl',
  18 + success: function(data) {
  19 + tpl = Handlebars.compile(data);
  20 + }
  21 +});
  22 +
  23 +//显示
  24 +function show(data) {
  25 + var html = tpl(data);
  26 +
  27 + $page.append(html);
  28 +}
  29 +
  30 +exports.show = show;
@@ -8,6 +8,8 @@ var $ = require('yoho.zepto'), @@ -8,6 +8,8 @@ var $ = require('yoho.zepto'),
8 ellipsis = require('mlellipsis'), 8 ellipsis = require('mlellipsis'),
9 lazyLoad = require('yoho.zeptolazyload'); 9 lazyLoad = require('yoho.zeptolazyload');
10 10
  11 +var chosePanel = require('./chose-panel');
  12 +
11 ellipsis.init(); 13 ellipsis.init();
12 14
13 lazyLoad($('.lazy')); 15 lazyLoad($('.lazy'));
@@ -23,4 +25,22 @@ $('.checkbox').bind('touchstart', function() { @@ -23,4 +25,22 @@ $('.checkbox').bind('touchstart', function() {
23 } else { 25 } else {
24 $this.removeClass('icon-checkbox').addClass('icon-cb-checked'); 26 $this.removeClass('icon-checkbox').addClass('icon-cb-checked');
25 } 27 }
26 -});  
  28 +});
  29 +
  30 +$('.icon-edit').bind('touchstart', function() {
  31 + var id = $(this).closest('.shopping-cart-good').data('id');
  32 +
  33 + $.ajax({
  34 + type: 'GET',
  35 + url: '/shoppingCart/goodinfo',
  36 + data: {
  37 + id: id
  38 + },
  39 + success: function(data) {
  40 + if (data.code === 200) {
  41 + chosePanel.show(data.data);
  42 + }
  43 + }
  44 + });
  45 +});
  46 +
@@ -22,7 +22,8 @@ @@ -22,7 +22,8 @@
22 "yoho.iswiper": "3.0.1", 22 "yoho.iswiper": "3.0.1",
23 "iscroll": "5.1.2", 23 "iscroll": "5.1.2",
24 "import-style": "1.0.0", 24 "import-style": "1.0.0",
25 - "yoho.zeptolazyload": "0.0.1" 25 + "yoho.zeptolazyload": "0.0.1",
  26 + "yoho.handlebars": "3.0.3"
26 }, 27 },
27 "devDependencies": { 28 "devDependencies": {
28 "expect.js": "0.3.1" 29 "expect.js": "0.3.1"
  1 +.chose-panel {
  2 + position: absolute;
  3 + top: 0;
  4 + bottom: 0;
  5 + left: 0;
  6 + right: 0;
  7 + background: rgba(0,0,0,.3);
  8 +
  9 + .main {
  10 + position: absolute;
  11 + height: 718rem / $pxConvertRem;
  12 + bottom: 0;
  13 + left: 0;
  14 + right: 0;
  15 + background: #fff;
  16 + }
  17 +
  18 + .infos {
  19 + height: 546rem / $pxConvertRem;
  20 + padding: 30rem / $pxConvertRem 22rem / $pxConvertRem 20rem / $pxConvertRem;
  21 + }
  22 +
  23 + .basic-info {
  24 + margin-bottom: 30rem / $pxConvertRem;
  25 + }
  26 +
  27 + .thumb {
  28 + float: left;
  29 + width: 80rem / $pxConvertRem;
  30 + height: 106rem / $pxConvertRem;
  31 + }
  32 +
  33 + .text-info {
  34 + margin-left: 102rem / $pxConvertRem;
  35 +
  36 + .name {
  37 + font-size: 28rem / $pxConvertRem;
  38 + }
  39 +
  40 + .sale-price {
  41 + color: #e10;
  42 +
  43 + &.no-price {
  44 + color: #000;
  45 + }
  46 + }
  47 +
  48 + .market-price {
  49 + color: #b0b0b0;
  50 + text-decoration: line-through;
  51 + }
  52 + }
  53 +
  54 + .color-list, .size-list, .num {
  55 + position: relative;
  56 + font-size: 28rem / $pxConvertRem;
  57 + padding-left: 80rem / $pxConvertRem;
  58 +
  59 + > span {
  60 + position: absolute;
  61 + left: 0;
  62 + top: 20rem / $pxConvertRem;
  63 + }
  64 + }
  65 +
  66 + .block {
  67 + float: left;
  68 + display: block;
  69 + width: 80rem / $pxConvertRem;
  70 + height: 80rem / $pxConvertRem;
  71 + border: 1px solid #000;
  72 + margin-right: 30rem / $pxConvertRem;
  73 + margin-bottom: 30rem / $pxConvertRem;
  74 + line-height: 80rem / $pxConvertRem;
  75 + text-align: center;
  76 +
  77 + &.chosed {
  78 + border-color: #e10;
  79 + background: image-url('shopping-cart/right.png') no-repeat;
  80 + background-size: 38rem / $pxConvertRem;
  81 + background-position: bottom right;
  82 + color: #e10;
  83 + }
  84 + }
  85 +
  86 + .num .btn {
  87 + float: left;
  88 + display: block;
  89 + height: 80rem / $pxConvertRem;
  90 + width: 80rem / $pxConvertRem;
  91 + text-align: center;
  92 + line-height: 80rem / $pxConvertRem;
  93 + border: 1px solid #e6e6e6;
  94 +
  95 + &.disable {
  96 + color: #e6e6e6;
  97 + }
  98 + }
  99 +
  100 + .good-num {
  101 + float: left;
  102 + width: 106rem / $pxConvertRem;
  103 + height: 80rem / $pxConvertRem;
  104 + line-height: 80rem / $pxConvertRem;
  105 + padding: 0;
  106 + border: none;
  107 + border-top: 1px solid #e6e6e6;
  108 + border-bottom: 1px solid #e6e6e6;
  109 + text-align: center;
  110 + }
  111 +
  112 + .btn-wrap {
  113 + height: 80rem / $pxConvertRem;
  114 + border-top: 1px solid #e6e6e6;
  115 + padding: 21rem / $pxConvertRem;
  116 + text-align: center;
  117 +
  118 + .btn-sure {
  119 + width: 260rem / $pxConvertRem;
  120 + height: 80rem / $pxConvertRem;
  121 + background: #e10;
  122 + color: #fff;
  123 + font-size: 32rem / $pxConvertRem;
  124 + border: none;
  125 + }
  126 + }
  127 +}
1 -@import "good"; 1 +@import "good", "chose-panel";
2 2
3 3
4 .icon-checkbox:before { content: "\e61c"; } 4 .icon-checkbox:before { content: "\e61c"; }
  1 +<div class="chose-panel">
  2 + <div class="main">
  3 + <div class="infos">
  4 + <div class="basic-info">
  5 + <img class="thumb" src={{thumb}}>
  6 + <div class="text-info">
  7 + <p class="name">{{name}}</p>
  8 + <p class="price">
  9 + <span class="sale-price{{^price}} no-price{{/price}}">￥{{salePrice}}</span>
  10 + {{#if price}}
  11 + <span class="market-price">￥{{price}}</span>
  12 + {{/if}}
  13 + </p>
  14 + </div>
  15 + </div>
  16 + <div class="color-list">
  17 + <span>颜色</span>
  18 + <ul class="clearfix" data-type="color">
  19 + {{# colors}}
  20 + <li class="block {{#if chosed}}chosed{{/if}}" data-id={{id}}>
  21 + {{name}}
  22 + </li>
  23 + {{/ colors}}
  24 + </ul>
  25 + </div>
  26 + <div class="size-list">
  27 + <span>尺码</span>
  28 + <ul class="clearfix" data-type="size">
  29 + {{# sizes}}
  30 + <li class="block {{#if chosed}}chosed{{/if}}" data-id={{id}}>
  31 + {{name}}
  32 + </li>
  33 + {{/ sizes}}
  34 + </ul>
  35 + </div>
  36 + <div class="num">
  37 + <span>数量</span>
  38 + <div class="clearfix">
  39 + <a class="btn btn-minus" href="javascript:void(0);">
  40 + <span class="iconfont">&#xe625;</span>
  41 + </a>
  42 + <input id="good-num" class="good-num" type="text" value={{num}}>
  43 + <a class="btn btn-plus" href="javascript:void(0);">
  44 + <span class="iconfont">&#xe624;</span>
  45 + </a>
  46 + </div>
  47 + </div>
  48 + </div>
  49 + <div class="btn-wrap">
  50 + <button id="chose-btn-sure" class="btn btn-sure">确定</button>
  51 + </div>
  52 + </div>
  53 +</div>
1 -<div class="shopping-cart-good clearfix"> 1 +<div class="shopping-cart-good clearfix" data-id={{id}}>
2 <span class="checkbox icon-cb-checked iconfont"></span> 2 <span class="checkbox icon-cb-checked iconfont"></span>
3 <div class="info"> 3 <div class="info">
4 <img class="thumb lazy" data-original={{thumb}}> 4 <img class="thumb lazy" data-original={{thumb}}>
@@ -15,6 +15,7 @@ class ShoppingCartController extends AbstractAction @@ -15,6 +15,7 @@ class ShoppingCartController extends AbstractAction
15 'presellGoodsCount' => 2, 15 'presellGoodsCount' => 2,
16 'goods' => array( 16 'goods' => array(
17 array( 17 array(
  18 + 'id' => 1,
18 'name' => '黄伟文Wyman X y yohood 联名商品YYYOHOOD圆领卫衣', 19 'name' => '黄伟文Wyman X y yohood 联名商品YYYOHOOD圆领卫衣',
19 'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/09/17/03/014cacfa5c458b9732c68adf1af15d7a45.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/90', 20 'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/09/17/03/014cacfa5c458b9732c68adf1af15d7a45.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/90',
20 'color' => '黄色', 21 'color' => '黄色',
@@ -25,6 +26,7 @@ class ShoppingCartController extends AbstractAction @@ -25,6 +26,7 @@ class ShoppingCartController extends AbstractAction
25 'lowStocks' => true 26 'lowStocks' => true
26 ), 27 ),
27 array( 28 array(
  29 + 'id' => 2,
28 'name' => 'TYAKSHA圣诞树凭借三角领蓝色白条毛衣', 30 'name' => 'TYAKSHA圣诞树凭借三角领蓝色白条毛衣',
29 'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/03/10/01bc1878f9154e77ac4f7a6003c954f1b8.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90', 31 'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/03/10/01bc1878f9154e77ac4f7a6003c954f1b8.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
30 'color' => '黄色', 32 'color' => '黄色',
@@ -52,4 +54,69 @@ class ShoppingCartController extends AbstractAction @@ -52,4 +54,69 @@ class ShoppingCartController extends AbstractAction
52 $this->_view->display('index', array('shoppingCartPage' => true, 'pageHeader' => array( 54 $this->_view->display('index', array('shoppingCartPage' => true, 'pageHeader' => array(
53 'navBack' => 'http://m.yohobuy.com', 'navTitle' => '购物车'), 'shoppingCart' => $data)); 55 'navBack' => 'http://m.yohobuy.com', 'navTitle' => '购物车'), 'shoppingCart' => $data));
54 } 56 }
  57 +
  58 + /**
  59 + * 读取chose-panel内容
  60 + */
  61 + public function tplAction()
  62 + {
  63 + if($this->isAjax()) {
  64 + $data = file_get_contents('../../../template/m.yohobuy.com/partials/shopping-cart/chose-panel.phtml');
  65 +
  66 + echo($data);
  67 + }
  68 + }
  69 +
  70 + public function goodinfoAction()
  71 + {
  72 + if ($this->isAjax()) {
  73 + $data = array(
  74 + 'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/09/17/03/014cacfa5c458b9732c68adf1af15d7a45.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/90',
  75 + 'name' => '黄伟文Wyman X y yohood 联名商品YYYOHOOD圆领卫衣',
  76 + 'price' => 289,
  77 + 'salePrice' => 241,
  78 + 'colors' => array(
  79 + array(
  80 + 'id' => 1,
  81 + 'name' => '黄色'
  82 + ),
  83 + array(
  84 + 'id' => 2,
  85 + 'chosed' => true,
  86 + 'name' => '白色'
  87 + )
  88 + ),
  89 + 'sizes' => array(
  90 + array(
  91 + 'id' => 1,
  92 + 'name' => 'XS'
  93 + ),
  94 + array(
  95 + 'id' => 2,
  96 + 'name' => 'S'
  97 + ),
  98 + array(
  99 + 'id' => 3,
  100 + 'chosed' => true,
  101 + 'name' => 'M'
  102 + ),
  103 + array(
  104 + 'id' => 4,
  105 + 'name' => 'L'
  106 + ),
  107 + array(
  108 + 'id' => 5,
  109 + 'name' => 'XL'
  110 + ),
  111 + array(
  112 + 'id' => 6,
  113 + 'name' => 'XXL'
  114 + )
  115 + ),
  116 + 'num' => 1
  117 + );
  118 +
  119 + $this->echoJson(array('code' => 200, 'data' => $data));
  120 + }
  121 + }
55 } 122 }