Authored by xuqi

product detail

  1 +{{> layout/header}}
  2 +<div class="product-detail-page yoho-page">
  3 + {{# detail}}
  4 +
  5 + {{# banner}}
  6 + <div class="brand-banner" style="background:{{bgColor}}{{#if bgImg}} url({{bgImg}}){{/if}}">
  7 + <div class="center-content clearfix">
  8 + <a class="pull-left" href="{{homeUrl}}">
  9 + <img src="{{logo}}" alt="{{alt}}">
  10 + </a>
  11 +
  12 + <div class="opt pull-right">
  13 + <a class="home" href="{{homeUrl}}">
  14 + <span class="iconfont">&#xe617;</span>
  15 + </a>
  16 + <span id="brand-favour" class="brand-fav">
  17 + <i class="iconfont{{#if coled}} coled{{/if}}">&#xe616;</i>
  18 + </span>
  19 + </div>
  20 + </div>
  21 + </div>
  22 + {{/ banner}}
  23 +
  24 + <div class="center-content">
  25 + {{> layout/path-nav}}
  26 +
  27 + {{# goodInfo}}
  28 + <div class="main clearfix">
  29 + <div class="pull-left imgs clearfix">
  30 + <div class="pull-left img">
  31 + <div class="tags clearfix">
  32 + {{# tags}}
  33 + {{# isNew}}
  34 + <span class="good-tag new-tag">NEW</span>
  35 + {{/ isNew}}
  36 + {{# isReNew}}
  37 + <span class="good-tag renew-tag">再到着</span>
  38 + {{/ isReNew}}
  39 + {{# isSale}}
  40 + <span class="good-tag sale-tag">SALE</span>
  41 + {{/ isSale}}
  42 + {{# isNewFestival}}
  43 + <span class="good-tag new-festival-tag">新品节</span>
  44 + {{/ isNewFestival}}
  45 + {{# isLimit}}
  46 + <span class="good-tag limit-tag">限量商品</span>
  47 + {{/ isLimit}}
  48 + {{# isYearEndPromotion}}
  49 + <span class="good-tag yep-tag">年终大促</span>
  50 + {{/ isYearEndPromotion}}
  51 + {{# isYearMidPromotion}}
  52 + <span class="good-tag ymp-tag">年中热促</span>
  53 + {{/ isYearMidPromotion}}
  54 + {{# isFew}}
  55 + <p class="good-tag few-tag">即将售罄</p>
  56 + {{/ isFew}}
  57 + {{/ tags}}
  58 + </div>
  59 + <img class="img-show" src="{{img}}">
  60 + </div>
  61 + <div class="pull-right thumbs">
  62 + {{# thumbs}}
  63 + <a href="{{url}}">
  64 + <img class="thumb" src="{{img}}">
  65 + </a>
  66 + {{/ thumbs}}
  67 + </div>
  68 + </div>
  69 + <div class="pull-right infos">
  70 + <p class="name">
  71 + {{name}}
  72 + </p>
  73 + <a class="brand-name" href="{{brandUrl}}">{{brandName}}</a>
  74 + <p class="market-price {{#if salePrice}}with-sale{{/unless}}">
  75 + <span class="title">市场价:</span>
  76 + <span class="price">¥{{marketPrice}}</span>
  77 + </p>
  78 + {{#if salePrice}}
  79 + <p class="sale-price">
  80 + <span class="title">促销价:</span>
  81 + <span class="price">¥{{salePrice}}</span>
  82 + </p>
  83 + {{/if}}
  84 +
  85 + {{#if activity}}
  86 + <ul class="activity">
  87 + {{#each activity}}
  88 + <li>
  89 + {{#if sizeImg}}
  90 + <a class="img-link" href="{{url}}">
  91 + <img src="{{sizeImg}}">
  92 + </a>
  93 + {{^}}
  94 + <span class="ac-type">{{type}}</span>
  95 + <span class="ac-des">【{{des}}】</span>
  96 + {{/if}}
  97 + </li>
  98 + {{/each}}
  99 + </ul>
  100 + {{/if}}
  101 +
  102 + <div class="chose-color row clearfix">
  103 + <span class="title pull-left">选颜色:</span>
  104 + <ul class="colors pull-left">
  105 + {{#each colors}}
  106 + <li class="{{#if focus}}focus{{/if}} {{#if disable}}disable{{/if}}" title="{{title}}">
  107 + <img src="{{src}}">
  108 + </li>
  109 + {{/each}}
  110 + </ul>
  111 + </div>
  112 +
  113 + <div class="chose-size row clearfix">
  114 + <span class="title pull-left">选尺码:</span>
  115 +
  116 + <div class="size-wrapper pull-left">
  117 + {{#each colors}}
  118 + <ul class="size {{#unless focus}}hide{{/unless}} clearfix">
  119 + {{#each size}}
  120 + <li {{#if disable}}class="disable"{{/if}} data-title="{{title}}" data-sku="{{sku}}">{{name}}</li>
  121 + {{/each}}
  122 + </ul>
  123 + {{/each}}
  124 + <span class="size-ruler"></span>
  125 +
  126 + <span class="size-warn hide">
  127 + <i></i>
  128 + 请选择尺码
  129 + </span>
  130 +
  131 + <span class="color-size-tip hide"></span>
  132 + </div>
  133 + </div>
  134 +
  135 + <div class="row clearfix">
  136 + <span class="title pull-left">选数量:</span>
  137 + <div class="num-wraper pull-left clearfix">
  138 + <span id="num" class="num pull-left">1</span>
  139 + <span class="minus-plus pull-left">
  140 + <i class="plus iconfont">&#xe610;</i>
  141 + <i class="minus iconfont">&#xe600;</i>
  142 + </span>
  143 + <span class="num-warn hide">
  144 + <i></i>
  145 + 库存不足
  146 + </span>
  147 + </div>
  148 + </div>
  149 +
  150 + <p class="row">
  151 + <span id="add-to-cart" class="add-to-cart">
  152 + <i class="iconfont">&#xe628;</i>
  153 + 添加到购物车
  154 + </span>
  155 +
  156 + <span id="collect-product" class="collect-product">
  157 + {{#if coled}}
  158 + <i class="coled iconfont">&#xe616;</i>
  159 + 已收藏
  160 + {{^}}
  161 + <i class="iconfont">&#xe616;</i>
  162 + 收藏商品
  163 + {{/if}}
  164 + </span>
  165 + </p>
  166 +
  167 + <p class="share-row">
  168 + <span class="title pull-left">分享商品:</span>
  169 + <span class="share-wrapper pull-left clearfix">
  170 + <i class="weibo" data-type="weibo" title="分享到新浪微博"></i>
  171 + <i class="weixin" data-type="weixin" title="分享到微信朋友圈"></i>
  172 + <i class="qweibo" data-type="qweibo" title="分享到腾讯微博"></i>
  173 + <i class="qzone" data-type="qzone" title="分享到QQ空间"></i>
  174 + <i class="qq" data-type="qq" title="分享到QQ好友"></i>
  175 + <i class="renren" data-type="renren" title="分享到人人"></i>
  176 + <i class="douban" data-type="douban" class="分享到豆瓣"></i>
  177 + </span>
  178 + </p>
  179 + </div>
  180 + </div>
  181 + {{/ goodInfo}}
  182 + </div>
  183 + {{/ detail}}
  184 +</div>
  185 +{{> layout/footer}}
@@ -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 Dec 16 20:00:14 2015 5 +Created by FontForge 20120731 at Thu Dec 17 18:03:02 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 Dec 16 20:00:14 2015 @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Wed Dec 16 20:00:14 2015
19 bbox="0 -214 1172.1 864" 19 bbox="0 -214 1172.1 864"
20 underline-thickness="50" 20 underline-thickness="50"
21 underline-position="-100" 21 underline-position="-100"
22 - unicode-range="U+0078-E627" 22 + unicode-range="U+0078-E629"
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" />
@@ -134,5 +134,11 @@ q14 5 23 14.5t12 20.5t3 23t-3.5 22t-8.5 18t-10 11zM0 295v-380q0 -28 20 -48.5t49 @@ -134,5 +134,11 @@ q14 5 23 14.5t12 20.5t3 23t-3.5 22t-8.5 18t-10 11zM0 295v-380q0 -28 20 -48.5t49
134 <glyph glyph-name="uniE627" unicode="&#xe627;" horiz-adv-x="1025" 134 <glyph glyph-name="uniE627" unicode="&#xe627;" horiz-adv-x="1025"
135 d="M512 623q-167 0 -304.5 -89.5t-205.5 -236.5q-4 -9 0 -18q45 -96 121 -169.5t177 -115t212 -41.5q167 0 304.5 89.5t205.5 236.5q1 3 1.5 6t0 6t-1.5 6q-68 147 -205.5 236.5t-304.5 89.5zM512 57q-96 0 -163.5 67.5t-67.5 163.5t67.5 163.5t163.5 67.5t163.5 -67.5 135 d="M512 623q-167 0 -304.5 -89.5t-205.5 -236.5q-4 -9 0 -18q45 -96 121 -169.5t177 -115t212 -41.5q167 0 304.5 89.5t205.5 236.5q1 3 1.5 6t0 6t-1.5 6q-68 147 -205.5 236.5t-304.5 89.5zM512 57q-96 0 -163.5 67.5t-67.5 163.5t67.5 163.5t163.5 67.5t163.5 -67.5
136 t67.5 -163.5q0 -47 -18.5 -89.5t-49.5 -73.5t-73.5 -49.5t-89.5 -18.5zM364 288q0 -61 43.5 -104.5t104.5 -43.5t104.5 43.5t43.5 104.5t-43.5 104.5t-104.5 43.5t-104.5 -43.5t-43.5 -104.5z" /> 136 t67.5 -163.5q0 -47 -18.5 -89.5t-49.5 -73.5t-73.5 -49.5t-89.5 -18.5zM364 288q0 -61 43.5 -104.5t104.5 -43.5t104.5 43.5t43.5 104.5t-43.5 104.5t-104.5 43.5t-104.5 -43.5t-43.5 -104.5z" />
  137 + <glyph glyph-name="uniE628" unicode="&#xe628;"
  138 +d="M482 83q-24 0 -41.5 -17.5t-17.5 -42.5t17.5 -42.5t42 -17.5t42 17.5t17.5 42.5q0 16 -8 30t-21.5 22t-30.5 8zM769 83q-25 0 -42.5 -17.5t-17.5 -42.5q0 -16 8 -30t21.5 -22t30.5 -8q25 0 42.5 17.5t17.5 42.5q0 38 -34 54q-13 6 -26 6zM839 193h-417l-143 425
  139 +q-7 18 -29 18h-127q-13 0 -22 -8t-9 -20q0 -4 1 -7t2.5 -6t3.5 -5.5t4.5 -4.5t5.5 -3.5t6.5 -2t7.5 -0.5h105l143 -424q7 -19 29 -19h439q13 0 21.5 8t8.5 20.5t-8.5 20.5t-21.5 8zM904 524l-516 45q-12 1 -18.5 -7t-1.5 -20l90 -270q4 -12 16 -21.5t24 -9.5h377q12 0 22 10
  140 +t11 23l23 216q1 8 -2 15.5t-10 12.5t-15 6z" />
  141 + <glyph glyph-name="uniE629" unicode="&#xe629;"
  142 +d="M154 686v-646h146l-14 -208l240 208h344v646h-716zM752 176h-134v159h-192v-159h-134v382h134v-148h192v148h134v-382z" />
137 </font> 143 </font>
138 </defs></svg> 144 </defs></svg>
  1 +.product-detail-page {
  2 + .brand-banner {
  3 + height: 45px;
  4 + width: 100%;
  5 +
  6 + img {
  7 + display: block;
  8 + height: 45px;
  9 + }
  10 +
  11 + .opt {
  12 + margin-top: 5px;
  13 + }
  14 +
  15 + .home, .brand-fav {
  16 + display: inline-block;
  17 + width: 32px;
  18 + height: 32px;
  19 + line-height: 32px;
  20 + border: 1px solid #fff;
  21 + text-align: center;
  22 + color: #fff;
  23 + }
  24 +
  25 + .home {
  26 + margin-right: 5px;
  27 +
  28 + .iconfont {
  29 + font-size: 14px;
  30 + }
  31 + }
  32 +
  33 + .brand-fav .iconfont {
  34 + font-size: 12px;
  35 + }
  36 +
  37 + .coled {
  38 + color: #ee0014;
  39 + }
  40 + }
  41 +
  42 + .path-nav {
  43 + border: none;
  44 + margin-bottom: 0;
  45 + }
  46 +
  47 + .main {
  48 + width: 990px;
  49 + margin: 0 auto;
  50 +
  51 + .infos {
  52 + width: 465px;
  53 + }
  54 +
  55 + .img {
  56 + position: relative;
  57 + width: 420px;
  58 + height: 560px;
  59 + }
  60 +
  61 + .img-show {
  62 + display: block;
  63 + width: 100%;
  64 + height: 100%;
  65 + }
  66 +
  67 + .tags {
  68 + position: absolute;
  69 + top: 0;
  70 + left: 0;
  71 + }
  72 +
  73 + .good-tag {
  74 + float: left;
  75 + height: 22px;
  76 + line-height: 22px;
  77 + color: #fff;
  78 + padding: 0 7px;
  79 + margin-right: 5px;
  80 + font-size: 12px;
  81 + box-sizing: border-box;
  82 + -moz-box-sizing:border-box;
  83 + -webkit-box-sizing:border-box;
  84 + }
  85 +
  86 + @each $tag, $bgColor in (new-tag, #78dc7d),
  87 + (renew-tag, #78dc7e),
  88 + (new-festival-tag, #000000),
  89 + (yep-tag, #ff565b),
  90 + (ymp-tag, #ff565b),
  91 + (sale-tag, #ff565b),
  92 + (few-tag, #ffac5b) {
  93 + .#{$tag} {
  94 + background: $bgColor;
  95 + }
  96 + }
  97 +
  98 + .limit-tag {
  99 + border: 1px solid #4e4e4e;
  100 + color: #4e4e4e;
  101 + }
  102 +
  103 + .thumbs {
  104 + width: 75px;
  105 + height: 510px;
  106 + overflow: hidden;
  107 + }
  108 +
  109 + .thumb {
  110 + display: block;
  111 + width: 75px;
  112 + margin-bottom: 2px;
  113 + }
  114 +
  115 + .name {
  116 + font-size: 18px;
  117 + font-weight: bold;
  118 + line-height: 24px;
  119 + }
  120 +
  121 + .brand-name {
  122 + color: #666;
  123 + font-size: 12px;
  124 + }
  125 +
  126 + .title {
  127 + color: #999;
  128 + font-size: 12px;
  129 + }
  130 +
  131 + .market-price {
  132 + margin-top: 8px;
  133 + }
  134 +
  135 + .price {
  136 + color: #000;
  137 + font-size: 22px;
  138 + line-height: 24px;
  139 + font-weight: bold;
  140 + }
  141 +
  142 + .with-sale .price {
  143 + color: #999;
  144 + text-decoration: line-through;
  145 + font-size: 12px;
  146 + }
  147 +
  148 + .activity {
  149 + margin-top: 12px;
  150 +
  151 + li {
  152 + line-height: 20px;
  153 + }
  154 + }
  155 +
  156 + .ac-type {
  157 + display: inline-block;
  158 + width: 43px;
  159 + height: 16px;
  160 + line-height: 16px;
  161 + margin-right: 5px;
  162 + text-align: center;
  163 + background: #999;
  164 + color: #fff;
  165 + font-size: 12px;
  166 + }
  167 +
  168 + .ac-des {
  169 + font-size: 12px;
  170 + }
  171 +
  172 + .row {
  173 + margin-top: 10px;
  174 + }
  175 +
  176 + .chose-color {
  177 + padding-top: 20px;
  178 + margin-top: 20px;
  179 + border-top: 1px solid #eaeceb;
  180 +
  181 + .title {
  182 + margin-top: 14px;
  183 + }
  184 +
  185 + img {
  186 + display: block;
  187 + height: 36px;
  188 + width: 36px;
  189 + border: 2px solid #fff;
  190 + }
  191 +
  192 + .focus img {
  193 + border-color: #222;
  194 + }
  195 + }
  196 +
  197 + .chose-size {
  198 + font-size: 12px;
  199 +
  200 + .title {
  201 + margin-top: 6px;
  202 + }
  203 +
  204 + li {
  205 + float: left;
  206 + display: block;
  207 + height: 22px;
  208 + line-height: 22px;
  209 + width: 38px;
  210 + padding-top: 0 5px;
  211 + margin-right: 5px;
  212 + border: 1px solid #eaeceb;
  213 + text-align: center;
  214 +
  215 + &.disable {
  216 + opacity: 0.5;
  217 + filter: Alpha(opacity=50);
  218 + }
  219 +
  220 + &.focus {
  221 + color: #fff;
  222 + background: #222;
  223 + }
  224 + }
  225 + }
  226 +
  227 + .size {
  228 + display: inline-block;
  229 + }
  230 +
  231 + .size-ruler {
  232 + display: inline-block;
  233 + width: 57px;
  234 + height: 24px;
  235 + background: image-url('product/size-ruler.jpg');
  236 + }
  237 +
  238 + .num {
  239 + display: block;
  240 + width: 38px;
  241 + height: 23px;
  242 + line-height: 23px;
  243 + text-align: center;
  244 + border: 1px solid #eaeceb;
  245 + }
  246 +
  247 + .minus-plus {
  248 + display: block;
  249 + width: 14px;
  250 + height: 25px;
  251 + border: 1px solid #eaeceb;
  252 + border-left: none;
  253 +
  254 + i {
  255 + display: block;
  256 + width: 13px;
  257 + height: 13px;
  258 + line-height: 8px;
  259 + font-size: 12px;
  260 + }
  261 + }
  262 +
  263 + .minus {
  264 + border-top: 1px solid #eaeceb;
  265 + }
  266 +
  267 + .add-to-cart {
  268 + display: inline-block;
  269 + margin-right: 10px;
  270 + height: 48px;
  271 + line-height: 48px;
  272 + width: 197px;
  273 + text-align: center;
  274 + color: #fff;
  275 + background: #e92601;
  276 + font-size: 14px;
  277 + }
  278 +
  279 + .collect-product {
  280 + display: inline-block;
  281 + width: 127px;
  282 + height: 48px;
  283 + text-align: center;
  284 + line-height: 48px;
  285 + background: #fff;
  286 + color: #222;
  287 + border: 1px solid #ccc;
  288 + font-weight: bold;
  289 + font-size: 12px;
  290 +
  291 + .iconfont {
  292 + color: #ccc;
  293 + font-size: 12px;
  294 + }
  295 +
  296 + .coled {
  297 + color: #fa5252;
  298 + }
  299 + }
  300 +
  301 + .share-row {
  302 + margin-top: 20px;
  303 +
  304 + .title {
  305 + margin-top: 2px;
  306 + }
  307 +
  308 + i {
  309 + display: block;
  310 + float: left;
  311 + width: 16px;
  312 + height: 16px;
  313 + margin-left: 5px;
  314 + background: image-url('guang/detail/icon-share.png') no-repeat;
  315 + }
  316 +
  317 + $left: 0px;
  318 + @each $icon in weibo,qweibo,renren,qzone,qq,douban,weixin {
  319 + .#{$icon} {
  320 + background-position: 0 $left;
  321 + }
  322 +
  323 + $left: $left - 16px;
  324 + }
  325 + }
  326 + }
  327 +}
1 -@import "search", "list", "filter-box", "sort-pager", "good";  
  1 +@import "search", "list", "detail", "filter-box", "sort-pager", "good";
  1 +<?php
  2 +
  3 +use Action\AbstractAction;
  4 +use Plugin\Helpers;
  5 +
  6 +class ItemController extends AbstractAction
  7 +{
  8 + public function indexAction()
  9 + {
  10 + $data = array(
  11 + 'productDetailPage' => true,
  12 + 'detail' => array(
  13 + 'banner' => array(
  14 + 'id' => '',
  15 + 'bgColor' => '#abab43',
  16 + 'bgImg' => 'http://img10.static.yhbimg.com/brandBanner/2015/03/20/09/018e4c599a3ca16fe5c67f77ef05cea723.jpg',
  17 + 'logo' => 'http://img10.static.yhbimg.com/brandLogo/2015/12/04/16/0144f2beb0c06d554d3819394ab974ac45.jpg?imageView/3/w/500/h/45',
  18 + 'alt' => 'BRISTON',
  19 + 'homeUrl' => '',
  20 + 'liked' => true
  21 + ),
  22 + 'pathNav' => array(
  23 + array(
  24 + 'href' => '/boys',
  25 + 'name' => 'BOYS首页'
  26 + ),
  27 + array(
  28 + 'href' => '/boys?sort=1',
  29 + 'name' => '服配'
  30 + ),
  31 + array(
  32 + 'href' => '/boys?sort=1&msort=232',
  33 + 'name' => '手表'
  34 + ),
  35 + array(
  36 + 'name' => 'BRISTON 手表Clubmaster CHRONO black Silver - Black dial基本系列黑盘 '
  37 + )
  38 + ),
  39 + 'goodInfo' => array(
  40 + 'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/420x560/extent/420x560/background/d2hpdGU=/position/center/quality/90',
  41 + 'tags' => array(
  42 + 'isNew' => true,
  43 + 'isLimit' => true,
  44 + 'isNewFestival' => true
  45 + ),
  46 + 'thumbs' => array(
  47 + array(
  48 + 'url' => '',
  49 + 'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/75x100/extent/75x100/background/d2hpdGU=/position/center/quality/90'
  50 + )
  51 + ),
  52 + 'name' => 'BRISTON 手表Clubmaster CHRONO black Silver - Black dial基本系列黑盘',
  53 + 'brandUrl' => '',
  54 + 'brandName' => 'BRISTON',
  55 + 'marketPrice' => '2180.00',
  56 + 'activity' => array(
  57 + array(
  58 + 'url' => '',
  59 + 'sizeImg' => 'http://img11.static.yhbimg.com/productbanner/2015/12/11/00/01ba262a2fbac23b022eeace17cf5c3685.jpg'
  60 + ),
  61 + array(
  62 + 'type' => '加价购',
  63 + 'des' => '全场99元加价购'
  64 + ),
  65 + array(
  66 + 'type' => '加价购',
  67 + 'des' => '全场59元加价购'
  68 + ),
  69 + array(
  70 + 'type' => '加价购',
  71 + 'des' => '全场19元加价购'
  72 + )
  73 + ),
  74 + 'colors' => array(
  75 + array(
  76 + 'focus' => true,
  77 + 'title' => 'BRISTON 手表Clubmaster CHRONO black Silver - Black dial基本系列黑盘 黑色',
  78 + 'src' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/40x40/extent/40x40/background/d2hpdGU=/position/center/quality/90',
  79 + 'size' => array(
  80 + array(
  81 + 'name' => 'F'
  82 + )
  83 + )
  84 + )
  85 + )
  86 + )
  87 + )
  88 + );
  89 +
  90 + $this->_view->display('index', $data);
  91 + }
  92 +}