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

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

        {{# goodInfo}}
            <div class="product-main clearfix" data-id="{{id}}">
                <div class="thumbs left clearfix">
                    <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 class="thumb-list hide">
                        {{# colors}}
                            <div class="thumb-wrap{{#unless cur}} hide{{/unless}}">
                                {{#if cur}}
                                    {{# thumbs}}
                                        <img class="thumb{{#if @first}} cur{{/if}}" 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>
                <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>
                        <div class="tip-content">
                            {{# fashionTopGoods}}
                                {{#if getLimitedCode}}
                                    <span>
                                        点击
                                        <i class="get-lc{{#unless getLimitedCodeDis}} blue{{/unless}}">获取限购码</i>
                                        ,凭借限购码购买商品
                                    </span>
                                    <div class="lc-container hide">
                                        <span class="lc-arrow"></span>
                                        <div class="lc-content">
                                            <div class="qr-code"></div>
                                            <p class="title">打开APP扫描二维码获取限购码</p>
                                            <p class="sub-title">商品开售后即可购买</p>
                                        </div>
                                    </div>
                                {{/if}}

                                {{#if hadLimitedCode}}
                                    <span>您已获取限购码</span>
                                {{/if}}

                                {{#if limitedCodeSoldOut}}
                                    <span>限购码已抢光</span>
                                {{/if}}
                            {{/ fashionTopGoods}}

                            {{#if soldOut}}
                            {{!--     <span>
                                    点击
                                    <i class="arr-notice blue">到货通知</i>
                                    ,到货第一时间通知您
                                </span> --}}

                                <script type="text/html" id="arrival-notice-tpl">
                                    // <h1>到货通知</h1>
                                    // <p>商品一旦在30日内到货,我们将会第一时间通知您,请及时关注哦!</p>
                                    // <div class="phone-num">手机号<input type="text" class="notice-phone"></div>
                                    // <p>
                                    //     <span class="iconfont add-fav checked">&#xe602;</span>
                                    //     添加到收藏夹
                                    // </p>
                                </script>
                                <script type="text/html" id="arrival-notice-success-tpl">
                                    // <h1>到货通知</h1>
                                    // <p>商品订阅到货通知成功!</p>
                                </script>
                            {{/if}}
                        </div>
                        <p class="btns">
                            {{#unless soldOut}}
                                {{# buyNow}}
                                    <span id="buy-now" class="btn{{#if dis}} disable{{/if}}" data-base="{{buyNowBase}}">立即购买</span>
                                {{/ buyNow}}
                                {{# openSoon}}
                                    <span id="open-soon" class="btn disable">即将开售</span>
                                {{/ openSoon}}
                                {{#if notForSale}}
                                    <span class="btn disable">
                                        <i class="iconfont">&#xe62d;</i>
                                        非卖品
                                    </span>
                                {{/if}}
                                {{#if addToBag}}
                                    <span id="add-to-bag" class="btn">
                                        <i class="iconfont">&#xe632;</i>
                                        加入购物袋
                                    </span>
                                {{/if}}
                            {{/unless}}
                            <span id="sold-out" class="btn disable{{#unless soldOut}} hide{{/unless}}">已售罄</span>
                            <span id="collect-product" class="btn white{{#if productFav}} coll{{/if}}">
                                <span class="collecting">
                                    <i class="iconfont">&#xe644;</i>
                                    收藏商品
                                </span>
                                <span class="collected">
                                    <i class="iconfont">&#xe627;</i>
                                    <em>已收藏</em>
                                    <em class="cal-col">取消收藏</em>
                                </span>
                            </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>
                    <div class="des-wrapper">
                        <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>
                </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" data-img="{{sizeImage}}">
                        {{# param}}
                            {{> item/size-table}}
                        {{/ param}}

                        <p>
                            ※ 以上尺寸为实物人工测量,因测量方式不同会有1-2CM误差,相关数据仅作参考,以收到实物为准。  单位:CM<br>
                            ※ 参考尺码因衣服版型、剪裁不同会有误差,仅供参考
                        </p>
                        {{!-- 解决首次弹出示意图弹窗因图片高度获取不到定位异常问题 --}}
                        <img src="{{sizeImage}}" style="display: none;">

                        {{# 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>
{{/ content}}
</div>