item.hbs 9.83 KB
<div class="product-item-page blk-page">
    {{!-- 品牌banner --}}
    {{> brand-banner}}

    <div class="center-content">
        {{> path-nav}}

        {{# goodInfo}}
            <div class="product-main clearfix">
                <div class="thumbs left clearfix">
                    <div class="thumb-list">
                        {{# colors}}
                            <div class="thumb-wrap{{#unless cur}} hide{{/unless}}">
                                {{#if cur}}
                                    {{# thumbs}}
                                        <img class="thumb" src="{{image . 75 100}}" data-shower="{{image . 482 643}}">
                                    {{/ thumbs}}
                                {{^}}
                                    {{# thumbs}}
                                        <img class="thumb lazy" data-original="{{image . 75 100}}" data-shower="{{image . 482 643}}">
                                    {{/ thumbs}}
                                {{/if}}
                            </div>
                        {{/ colors}}
                    </div>
                    <div class="thumb-show right">
                        <img id="main-thumb" src="{{image img 482 643}}" style="display: block;">
                        <div class="check-btns">
                            <span class="iconfont pre-thumb">&#xe62c;</span>
                            <span class="iconfont next-thumb">&#xe629;</span>
                        </div>
                    </div>
                </div>
                <div class="infos left clearfix">
                    <p class="brand-name">{{brandName}}</p>
                    <p class="name">{{name}}</p>
                    <p class="intro">{{intro}}</p>
                    <p class="sell-price">¥{{round sellPrice 2}}</p>
                    {{#if marketPrice}}
                        <p class="market-price">¥{{round marketPrice 2}}</p>
                    {{/if}}

                    <div class="trade-wrapper">
                        <div class="option-content">
                            <p class="choose-color">
                                <label class="title">Color:</label>
                                <span class="color">{{colorName}}</span>
                            </p>
                            <div class="color-list clearfix">
                                {{# colors}}
                                    <div class="color-item" data-color="{{color}}" data-total="{{total}}" >
                                        {{> round-color}}
                                    </div>
                                {{/ colors}}
                            </div>
                            <p class="choose-size">
                                <label class="title">Size:</label>
                                <span class="size"></span>
                            </p>
                            <div class="sizes">
                                {{# colors}}
                                    <ul class="size-list{{#unless cur}} hide{{/unless}} clearfix">
                                        {{# sizes}}
                                            <li {{#unless num}}class="disable"{{/unless}} title="{{title}}" data-sku="{{sku}}" data-num="{{num}}" data-name="{{name}}">{{name}}</li>
                                        {{/ sizes}}
                                    </ul>
                                {{/ colors}}
                            </div>
                        </div>
                        <p class="btns">
                            {{# fashionTopGoods}}
                                {{#if buyNow}}
                                    <span id="buy-now" class="btn">立即购买</span>
                                {{/if}}

                                {{#if openSoon}}
                                    <span class="btn">即将开售</span>
                                {{/if}}
                            {{^}}
                                <span id="add-to-bag" class="btn">加入购物袋</span>
                            {{/ fashionTopGoods}}
                            <span id="sold-out" class="btn disable hide">已售罄</span>
                            <span id="collect-product" class="btn white">收藏商品</span>
                        </p>
                        {{> share}}
                    </div>
                    <div class="balance-wrapper">
                        <p class="success-tip">商品已成功添加到购物袋!</p>
                        <a class="go-bag btn" href="/shopping/cart">去购物袋结算</a>
                        <span id="keep-shopping" class="btn white">继续购物</span>
                    </div>
                </div>
            </div>
        {{/ goodInfo}}

        <div class="other-info">
            {{# brand}}
                <div class="info-block">
                    <div class="block-title">
                        <label class="title-wrapper">
                            <span class="en">{{titleEn}}</span><br>
                            <span class="cn">{{titleCn}}</span>
                        </label>
                    </div>
                    <div class="intro-block">
                        <img src="{{image logo 250 84}}">
                        <div class="intro-text">{{{intro}}}</div>
                    </div>
                </div>
            {{/ brand}}

            {{# description}}
                <div class="info-block">
                    <div class="block-title">
                        <label class="title-wrapper">
                            <span class="en">{{titleEn}}</span><br>
                            <span class="cn">{{titleCn}}</span>
                        </label>
                    </div>
                    <ul class="des-basic clearfix">
                        {{# basic}}
                            <li>
                                {{key}}: {{value}}
                            </li>
                        {{/ basic}}
                    </ul>
                    {{#if comfort}}
                        <ul class="des-comfort clearfix">
                            {{# comfort}}
                                <li>
                                    {{name}}: 
                                    <span class="min-des">{{minDes}}</span>
                                    {{# blocks}}
                                        <span class="comfort-block{{#if cur}} cur{{/if}}"></span>
                                    {{/ blocks}}
                                    <span class="max-des">{{maxDes}}</span>
                                </li>
                            {{/ comfort}}
                        </ul>
                    {{/if}}
                </div>
            {{/ description}}

            {{# material}}
                <div class="info-block">
                    <div class="block-title">
                        <label class="title-wrapper">
                            <span class="en">{{titleEn}}</span><br>
                            <span class="cn">{{titleCn}}</span>
                        </label>
                    </div>
                    {{#if detail}}
                        <ul class="material-detail clearfix">
                            {{# detail}}
                                <li class="clearfix">
                                    <p><img src="{{image img 120 60}}"></p>
                                    <p>
                                        <label class="name">
                                            {{name}}<br>
                                            {{nameEn}}
                                        </label>
                                    </p>
                                    <p class="text">{{text}}</p>
                                </li>
                            {{/ detail}}
                        </ul>
                    {{/if}}

                    {{#if wash}}
                        <ul class="material-wash clearfix">
                            {{# wash}}
                                <li>
                                    <img class="wash-icon" src="{{image img 50 50}}">
                                    <p class="wash-name">{{name}}</p>
                                </li>
                            {{/ wash}}
                        </ul>
                    {{/if}}
                </div>
            {{/ material}}

            {{# sizeInfo}}
                <div class="info-block">
                    <div class="block-title">
                        <label class="title-wrapper">
                            <span class="en">{{titleEn}}</span><br>
                            <span class="cn">{{titleCn}}</span>
                        </label>
                    </div>
                    <div class="size-info">
                        {{# param}}
                            {{> item/size-table}}
                        {{/ param}}

                        <p>
                            ※ 以上尺寸为实物人工测量,因测量方式不同会有1-2CM误差,相关数据仅作参考,以收到实物为准。  单位:CM<br>
                            ※ 参考尺码因衣服版型、剪裁不同会有误差,仅供参考
                        </p>

                        {{# taste}}
                            {{> item/size-table}}
                        {{/ taste}}
                    </div>
                </div>
            {{/ sizeInfo}}

            {{# details}}
                <div class="info-block">
                    <div class="block-title">
                        <label class="title-wrapper">
                            <span class="en">{{titleEn}}</span><br>
                            <span class="cn">{{titleCn}}</span>
                        </label>
                    </div>
                    <div class="detail-content">{{{content}}}</div>
                </div>
            {{/ details}}
        </div>
    </div>
</div>