chenchao / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit 23edebb2431facc8ff2ae1bc56a33465cb85e5a8 1 parent 5cb0b361

shopping cart chose panel

Inline Side-by-side
Showing 9 changed files with 302 additions and 4 deletions
  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 }