<div class="product-detail-page yoho-page">
    {{# detail}}
        {{# banner}}
            <div class="brand-banner" style="background:{{bgColor}}{{#if bgImg}} url({{bgImg}}){{/if}}">
                <div class="center-content clearfix">
                    <a class="pull-left" href="{{homeUrl}}">
                        <img src="{{logo}}">
                    </a>

                    <div class="opt pull-right">
                        <a class="home" href="{{homeUrl}}" title="{{brandName}}">
                            <span class="iconfont">&#xe617;</span>
                        </a>
                        <span id="brand-favour" class="brand-fav{{#if isCollect}} coled{{/if}}" data-id="{{brandId}}">
                            <i class="iconfont">&#xe616;</i>
                        </span>
                    </div>
                </div>
            </div>
        {{/ banner}}

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

            {{# goodsInfo}}
                <div class="main clearfix" data-skn="{{skn}}" data-id="{{productId}}">
                    <div class="pull-left imgs clearfix">
                        <div class="pull-left img">
                            <div class="tags clearfix">
                                {{# tags}}
                                    {{# isNew}}
                                        <span class="good-tag new-tag">NEW</span>
                                    {{/ isNew}}
                                    {{# isReNew}}
                                        <span class="good-tag renew-tag">再到着</span>
                                    {{/ isReNew}}
                                    {{# isSale}}
                                        <span class="good-tag sale-tag">SALE</span>
                                    {{/ isSale}}
                                    {{# isNewFestival}}
                                        <span class="good-tag new-festival-tag">新品节</span>
                                    {{/ isNewFestival}}
                                    {{# isLimit}}
                                        <span class="good-tag limit-tag">限量商品</span>
                                    {{/ isLimit}}
                                    {{# isYearEndPromotion}}
                                        <span class="good-tag yep-tag">年终大促</span>
                                    {{/ isYearEndPromotion}}
                                    {{# isYearMidPromotion}}
                                        <span class="good-tag ymp-tag">年中热促</span>
                                    {{/ isYearMidPromotion}}
                                {{/ tags}}
                            </div>
                            <img id="img-show" class="img-show" src="{{img}}">
                        </div>
                        <div id="thumbs" class="pull-right thumbs">
                            {{# colors}}
                                <div class="thumb-wrap{{#unless focus}} hide{{/unless}}">
                                    {{#if focus}}
                                        {{# thumbs}}
                                            <img class="thumb" src="{{img}}" data-shower="{{shower}}">
                                        {{/ thumbs}}
                                    {{^}}
                                        {{# thumbs}}
                                            <img class="thumb lazy" data-original="{{img}}" data-shower="{{shower}}">
                                        {{/ thumbs}}
                                    {{/if}}
                                </div>
                            {{/ colors}}
                        </div>
                    </div>
                    <div class="pull-right infos">
                        <p class="name">
                            {{name}}

                            {{#if saleTip}}
                                <span class="sale-tip">{{saleTip}}</span>
                            {{/if}}
                        </p>
                        <a class="brand-name" href="{{brandUrl}}">{{brandName}}</a>
                        <p class="market-price">
                            <span class="title">市场价：</span>
                            <span class="price{{#if hasOtherPrice}} has-other-price{{/if}}">{{marketPrice}}</span>
                        </p>
                        {{#if salePrice}}
                            <p class="sale-price">
                                <span class="title">促销价：</span>
                                <span class="price">{{salePrice}}</span>
                            </p>
                        {{/if}}

                        {{#if presalePrice}}
                            <p class="presale-price">
                                <span class="title">预售价：</span>
                                <span class="price">{{presalePrice}}</span>

                                <span class="arrival-date">上市期：{{arrivalDate}}</span>
                            </p>
                        {{/if}}

                        {{#if advancePrice}}
                            <p class="advance-price">
                                <span class="title">先行价：</span>
                                <span class="price">{{advancePrice}}</span>
                            </p>
                        {{/if}}

                        {{# vipPrice}}
                            <p class="vip-price">
                                {{#if unLogin}}
                                    登录后即可查看vip价格
                                    <a class="login-url" href="{{unLogin}}">立即登录</a>
                                {{/if}}

                                {{#if normalUser}}
                                    <span class="vip-price-item">您当前是普通会员，成为VIP享受更多优惠！</span>
                                {{/if}}

                                {{# prices}}
                                    <span class="vip-price-item{{#if cur}} cur{{/if}}">
                                        {{name}}
                                        <em>
                                            {{price}}
                                        </em>
                                    </span>
                                {{/ prices}}

                                {{#unless unLogin}}
                                    <a class="vip-schedual" href="{{vipSchedualUrl}}">查看我的VIP进度</a>
                                {{/unless}}
                            </p>
                        {{/ vipPrice}}

                        {{#if activity}}
                            <ul class="activity">
                                {{#each activity}}
                                    <li>
                                        {{#if activityImg}}
                                            <a class="img-link" href="{{url}}">
                                                <img src="{{activityImg}}">
                                            </a>
                                        {{^}}
                                            <span class="ac-type">{{type}}</span>
                                            <span class="ac-des">{{des}}</span>
                                        {{/if}}
                                    </li>
                                {{/each}}
                            </ul>
                        {{/if}}

                        <div class="trade-content">
                            <div id="type-chose" class="type-chose">
                                <div class="chose-color row clearfix">
                                    <span class="title pull-left">选颜色：</span>
                                    <ul class="colors pull-left clearfix">
                                        {{#each colors}}
                                            <li class="{{#if focus}}focus{{/if}} {{#if disable}}disable{{/if}} pull-left"
                                                title="{{title}}" data-color="{{name}}" data-total="{{total}}">
                                                <img src="{{src}}">
                                            </li>
                                        {{/each}}
                                    </ul>
                                </div>

                                <div class="chose-size row clearfix">
                                    <span class="title pull-left">
                                        {{#if virtualGoods}}
                                            选日期：
                                        {{^}}
                                            选尺码：
                                        {{/if}}
                                    </span>

                                    <div id="sizes" class="size-wrapper pull-left">
                                        {{#each colors}}
                                            <ul class="size{{#unless focus}} hide{{/unless}}">
                                                {{#each size}}
                                                    <li {{#unless num}}class="disable"{{/unless}} data-sku="{{sku}}"
                                                        data-num="{{num}}" data-name="{{name}}">{{name}}</li>
                                                {{/each}}

                                                {{#unless virtualGoods}}
                                                    <span class="size-ruler"></span>
                                                {{/unless}}

                                                <span class="size-warn warn-tip hide">
                                                    <i class="iconfont">&#xe62c;</i>
                                                    {{#if virtualGoods}}
                                                        请选择日期
                                                    {{^}}
                                                        请选择尺码
                                                    {{/if}}
                                                </span>
                                            </ul>
                                        {{/each}}

                                        {{#unless virtualGoods}}
                                            <p class="color-size-tip hide"></p>
                                        {{/unless}}
                                    </div>
                                </div>

                                <div class="chose-count row clearfix">
                                    <span class="title pull-left">选数量：</span>
                                    <div class="num-wraper pull-left clearfix">
                                        <span id="num" class="num pull-left">1</span>
                                        <span class="minus-plus pull-left">
                                            <i id="plus-num" class="plus iconfont">&#xe610;</i>
                                            <i id="minus-num" class="minus dis iconfont">&#xe600;</i>
                                        </span>
                                        {{#each tags}}
                                            {{#if isFew}}
                                                <span class="warn-tip">即将售罄</span>
                                            {{/if}}
                                        {{/each}}

                                        {{# fashionTopGoods}}
                                            {{#if getLimitedCode}}
                                                <span class="lc-btn get-lc{{#if getLimitedCodeDis}} dis{{/if}}">获取限购码</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 class="lc-btn had-lc">已获取限购码</span>
                                            {{/if}}

                                            {{#if limitedCodeSoldOut}}
                                                <span class="lc-btn lc-sold-out">限购码已抢光</span>
                                            {{/if}}
                                        {{/ fashionTopGoods}}
                                    </div>
                                </div>

                                <p class="row">
                                    {{!-- 各颜色下所有尺码均售罄则只显示售罄按钮 --}}
                                    {{#unless soldOut}}
                                        {{# buyNow}}
                                            <span id="buy-now" class="buy-btn buy-now item-buy{{#if dis}} dis{{/if}}"
                                                  data-base="{{buyNowBase}}">立即购买</span>
                                        {{/ buyNow}}
                                        {{# openSoon}}
                                            <span id="open-soon" class="buy-btn item-buy dis">即将开售</span>
                                        {{/ openSoon}}
                                        {{#if notForSale}}
                                            <span class="buy-btn dis">
                                                <i class="iconfont">&#xe62d;</i>
                                                非买品
                                            </span>
                                        {{/if}}
                                        {{#if addToCart}}
                                            <span id="add-to-cart" class="buy-btn item-buy add-to-cart">
                                                <i class="iconfont">&#xe628;</i>
                                                添加到购物车
                                            </span>
                                        {{/if}}
                                    {{/unless}}

                                    <span id="sold-out" class="buy-btn dis{{#unless soldOut}} hide{{/unless}}">
                                        <i class="iconfont">&#xe62d;</i>
                                        已售罄
                                    </span>

                                    <span id="collect-product" class="{{#if isCollect}}coled {{/if}}collect-product">
                                        <i class="iconfont">&#xe616;</i>
                                        {{#if isCollect}}
                                            <em>已收藏</em>
                                        {{^}}
                                            <em>收藏商品</em>
                                        {{/if}}
                                    </span>
                                </p>

                                <div class="share-row">
                                    <span class="title pull-left">分享商品：</span>
                                    {{> common/share }}
                                </div>
                            </div>

                            <div id="balance" class="balance">
                                <p class="success-tip">商品已成功添加到购物车！</p>
                                <p class="cart-total">购物车一共有<span id="cart-num">0</span>件商品</p>
                                <p class="balance-btns">
                                    <a class="go-cart buy-btn" href="{{goCartUrl}}">
                                        去购物车结算
                                        <i class="iconfont">&#xe601;</i>
                                    </a>

                                    <span id="keep-shopping" class="keep-shopping">
                                        继续购物
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            {{/ goodsInfo}}

            {{!-- 因接口原因，暂存size的title的值 --}}
            <div id="size-title-json" style="display: none;">{{sizeTitleJson}}</div>

            <div class="other-infos">
                <div class="description-material info-block">
                    <p class="block-title">
                        <span class="title cur">商品信息 DESCRIPTION</span>
                        <span class="sep">|</span>
                        <span class="title">材质洗涤 MATERIALS</span>
                    </p>
                    <div class="description-content">
                        {{# description}}
                            <ul class="basic clearfix">
                                {{# basic}}
                                    <li>
                                        {{#if dColor}}
                                            {{key}}: <span id="desc-color">{{value}}</span>
                                        {{^}}
                                            {{key}}: {{value}}
                                        {{/if}}
                                    </li>
                                {{/ basic}}
                            </ul>
                            {{#if comfort}}
                                <ul class="comfort clearfix">
                                    {{# comfort}}
                                        <li class="pull-left">
                                            <span class="comfort-title">{{name}}：</span>
                                            <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}}
                        {{/ description}}
                    </div>
                    <div class="material-content">
                        {{# material}}
                            {{#if materialDetail}}
                                <ul class="material-detail">
                                    {{# materialDetail}}
                                        <li class="clearfix">
                                            <img src="{{img}}">
                                            <p class="name">{{name}}<br>{{enName}}</p>
                                            <p class="text">{{text}}</p>
                                        </li>
                                    {{/ materialDetail}}
                                </ul>
                            {{/if}}

                            {{#if wash}}
                                <ul class="wash">
                                    {{# wash}}
                                        <li>
                                            <img class="wash-icon" src="{{img}}">
                                            <p class="wash-name">{{name}}</p>
                                        </li>
                                    {{/ wash}}
                                </ul>
                            {{/if}}
                        {{/ material}}
                    </div>
                </div>
                <div class="size-info info-block">
                    <p class="block-title">
                        <span class="title cur">尺码信息 SIZE INFO</span>
                    </p>
                    {{# size}}
                        <table class="size-table">
                            <thead>
                            <tr>
                                {{# thead}}
                                    <th>{{name}}</th>
                                {{/ thead}}
                            </tr>
                            </thead>
                            <tbody>
                            {{# tbody}}
                                <tr>
                                    {{#each .}}
                                        <td>{{.}}</td>
                                    {{/each}}
                                </tr>
                            {{/ tbody}}
                            </tbody>
                        </table>
                        <p class="size-tip">
                            ※ 以上尺寸为实物人工测量，因测量方式不同会有1-2CM误差，相关数据仅作参考，以收到实物为准。 单位：CM
                        </p>
                        <p class="size-tip">
                            ※ 参考尺码因衣服版型、剪裁不同会有误差，仅供参考
                        </p>
                        {{#if sizeImg}}
                            <img class="size-img" src="{{sizeImg}}">
                        {{/if}}
                    {{/ size}}
                </div>

                {{#if reference}}
                    <div class="reference info-block">
                        <p class="block-title">
                            <span class="title cur">模特试穿 REFERENCE</span>
                        </p>
                        {{# reference}}
                            <table class="reference-table">
                                <thead>
                                <tr>
                                    {{# thead}}
                                        <th class="{{#if @first}}avatar-col{{/if}}{{#if modelCol}}model-col{{/if}}{{#if remarkCol}}remark-col{{/if}}">{{name}}</th>
                                    {{/ thead}}
                                </tr>
                                </thead>
                                <tbody>
                                {{# tbody}}
                                    <tr>
                                        {{#each .}}
                                            <td>
                                                {{#if @first}}
                                                    <img class="avatar" src="{{.}}">
                                                {{^}}
                                                    {{.}}
                                                {{/if}}
                                            </td>
                                        {{/each}}
                                    </tr>
                                {{/ tbody}}
                                </tbody>
                            </table>
                        {{/ reference}}
                        <p class="size-tip">
                            ※ 模特试穿中身高单位：CM，体重单位：KG，三围单位：CM
                        </p>
                    </div>
                {{/if}}

                {{#if modelCards}}
                    <div class="ref-model info-block">
                        <div class="ref-model">
                            {{# modelCards}}
                                <div class="model" style="background: url({{url}}) no-repeat">
                                    <span>试穿尺码: <em>{{size}}</em></span>
                                </div>
                            {{/ modelCards}}
                        </div>
                    </div>
                {{/if}}

                {{#if fittingReport}}
                    <div class="fitting-report info-block">
                        <p class="block-title">
                            <span class="title cur">试穿报告 FITTING REPORT</span>
                        </p>
                        {{# fittingReport}}
                            {{#if frImg}}
                                <div class="fr-img-wrap">
                                    <img src="{{frImg}}">
                                </div>
                            {{^}}
                                <table class="fitting-report-table">
                                    <thead>
                                    <tr>
                                        {{# thead}}
                                            <th>{{.}}</th>
                                        {{/ thead}}
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {{# tbody}}
                                        <tr>
                                            {{#each .}}
                                                <td>{{.}}</td>
                                            {{/each}}
                                        </tr>
                                    {{/ tbody}}
                                    </tbody>
                                </table>
                            {{/if}}
                        {{/ fittingReport}}
                    </div>
                {{/if}}

                <div class="details info-block">
                    <p class="block-title">
                        <span class="title cur">商品详情 DETAILS</span>
                    </p>
                    <div id="details-html" class="details-html">
                        {{{details}}}
                    </div>
                </div>

                {{# consultComment}}
                    <div class="consult-comment info-block">
                        <p class="block-title">
                            <span class="title">顾客咨询（<em class="consult-num">0</em>）</span>
                            <span class="sep">|</span>
                            <span class="title cur">购买评价（<em class="comment-num">0</em>）</span>
                        </p>
                        <div class="comments cc-content">
                            <h2>购买评价（<em class="comment-num">0</em>）</h2>
                            <ul id="comments-ul"></ul>
                            <p class="more-wrap">
                                <span class="load-more-comments load-more">
                                    加载更多
                                    <i class="iconfont">&#xe61d;</i>
                                </span>
                            </p>
                            <p class="btn-wrap">
                                <a class="btn" href="{{commentUrl}}" target="_blank">
                                    <i class="iconfont">&#xe62a;</i>
                                    我要评论
                                </a>
                            </p>
                        </div>

                        <div class="consults cc-content">
                            <h2>顾客咨询（<em class="consult-num">0</em>）</h2>
                            <ul id="consults-ul"></ul>
                            <p class="more-wrap">
                                <span class="load-more-consults load-more">
                                    加载更多
                                    <i class="iconfont">&#xe61d;</i>
                                </span>
                            </p>
                            <p class="btn-wrap">
                                <span id="consults-btn" class="btn">
                                    <i class="iconfont">&#xe62a;</i>
                                    我要咨询
                                </span>
                            </p>
                            <div class="new-consult hide">
                                <textarea class="my-consult"></textarea>
                                <span class="consult-warn warn-tip hide">
                                    <i class="iconfont">&#xe62c;</i>
                                    请输入咨询内容
                                </span>
                                <span id="submit-consult" class="btn submit-consult">提交咨询</span>
                            </div>

                            <div class="consult-success hide">
                                <p>
                                    <span class="iconfont">&#xe61a;</span>
                                    咨询成功，请等待客服回复
                                </p>
                            </div>
                        </div>
                    </div>
                {{/ consultComment}}

                <div class="after-service">
                    <p id="after-service-switch" class="after-service-switch">
                        <span class="iconfont">&#xe62b;</span>
                        售后服务
                        <span class="iconfont triangle">&#xe604;</span>
                    </p>
                    <div class="after-service-content info-block">
                        <div class="block-title">
                            <span class="title cur">售后服务 AFTER SERVICE</span>
                        </div>
                        <div class="img-1"></div>
                        <div class="img-2"></div>
                        <div class="text">
                            <h4>退换货承诺</h4>
                            <p>
                                自您签收商品7日内可以退货，15日内可以换货，在商品不影响二次销售的情况下，YOHO！有货将为您办理退换货服务，请在网站提交"退换货"申请。需要说明的是：非质量问题的退换货，来回运费由您承担。</p>
                            <h4>退换货方式</h4>
                            <p>
                                针对国内大中型城市，YOHO!有货开通了<span class="orange">"上门换货"</span>服务，上门服务区域及费用请联系客服中心；若您所在的区域不在上门换货范围内，请您选择普通快递将商品、内包装、赠品及发货单等一并寄回。质量问题的退换货，目前不支持运费到付款业务，请您先垫付运费寄回。如需退换货，请致电客服电话：400-889-9646。
                            </p>
                            <h4>退换货邮寄地址</h4>
                            <p>
                                南京市江宁区江宁经济技术开发区苏源大道87号YOHO!有货物流中心东一楼 收件人：YOHO！有货 邮编：211106
                                <br>
                                YOHO！有货客服热线：400-889-9646　　客服邮箱：<a href="mailto:service@yoho.cn">service@yoho.cn</a>
                                <br>
                                有疑问请联系我们，我们将为您提供最优质的产品和服务。
                            </p>
                        </div>
                    </div>
                </div>

                <div class="service"></div>
                {{#if latestWalk}}
                    <div class="info-block latest-walk">
                        <input id="latest-walk-count" type="hidden" value="{{latestWalk}}">
                        <p class="block-title">
                            <span class="title cur">最近浏览 RECENT REVIEW</span>
                        </p>
                        <div id="latest-walk-goods" class="goods clearfix"></div>
                    </div>
                {{/if}}
            </div>
        </div>
    {{/ detail}}
    <script id="comments-tpl" type="text/html">
            \{{# comments}}
        <li>
            <div class="user-info clearfix">
                <img class="user-avatar pull-left" src="\{{avatar}}">
                <p>
                    <span class="name">\{{userName}}  </span>
                    购买了\{{color}}/\{{size}}
                    <br>
                    <span class="date">\{{date}}</span>
                </p>
            </div>
            <p class="comment">\{{comment}}</p>
        </li>
            \{{/ comments}}
    </script>
    <script id="consults-tpl" type="text/html">
            \{{# consults}}
        <li>
            <div class="user-info clearfix">
                <img class="user-avatar" src="\{{avatar}}">
                <p>
                    <span class="question">\{{question}}</span>
                    <br>
                    <span class="date">\{{date}}</span>
                </p>
            </div>
            <p class="consult">\{{answer}}</p>
        </li>
            \{{/ consults}}
    </script>
</div>

{{# statGoodsInfo}}
    <script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
    <script type="text/javascript">
        window.criteo_q = window.criteo_q || [];
        window.criteo_q.push(
                {event: "setAccount", account: 16184},
                {event: "setCustomerId", id: "{{uid}}"},
                {event: "setSiteType", type: "d"},
                {event: "viewItem", item: "{{skn}}"}
        );
    </script>
    <script type="text/javascript">
        var _mvq = _mvq || [];
        _mvq.push(['$setAccount', 'm-23428-1']);
        _mvq.push(['$setGeneral', 'goodsdetail', '', /*用户名*/ '', /*用户id*/ '']);
        _mvq.push(['$logConversion']);
        _mvq.push(['$addGoods', /*分类id*/ '', /*品牌id*/ '', /*商品名称*/ '', /*商品ID*/ '{{skn}}', /*商品售价*/ '', /*商品图片url*/ '', /*分类名*/ '', /*品牌名*/ '', /*商品库存状态1或是0*/ '', /*网络价*/ '', /*收藏人数*/ '']);
        _mvq.push(['$logData']);
        var _goodsData = {
            id: '{{skn}}',// 商品ID
            name: '{{productName}}', // 商品名称
            brand: '{{brandName}}', // 商品品牌(非必填)
            origPrice: '{{marketPrice}}', // 商品原价(非必填)
            price: '{{salePrice}}', // 商品售价
            imgUrl: '{{imageUrl}}', // 商品预览图
            productUrl: '{{productUrl}}', // 商品URL地址
            categoryId: '{{smallSortId}}', // 所属分类ID
            category: '{{fullSortName}}', // 所属分类完整路径, // 所属分类完整路径
            soldOut: '{{soldOut}}' // 状态 1下架，0在售（必填）
        };
    </script>
{{/statGoodsInfo}}

<script type="text/javascript">
    (function () {
        try {
            var timestamp = (new Date()).valueOf();
            var view = document.createElement('img');
            view.src = 'http://shopping.yohobuy.com/1.jpg?t=' + timestamp;
        } catch (e) {
        }
    })();
</script>