{extend name="$LAYOUT_HOME_BASE" /}
{block name="title"}{$goods['goodsName']} - 积分商城 - {__block__}{/block}
{block name="meta"}
<meta name="description" content="{$goods['goodsSeoDesc']}">
<meta name="Keywords" content="{$goods['goodsSeoKeywords']}">
{/block}
{block name="css"}
<link href="__ROOT__/addons/integral/view/home/index/css/goods.css?v={$v}" rel="stylesheet">
{/block}
{block name="nav"}
	{include file="$LAYOUT_HOME_TOP" /}
	{include file="$LAYOUT_HOME_HEADER" /}
{/block}
{block name="main"}
<style type="text/css">
    #preview ul li:nth-child(n+2) {display: none;}
</style>
<div class='wst-filters'>
<div class='filters'>
   <div class='item'>
     <a class='link' href='{:WSTDomain()}'>首页</a>
      <i class="arrow">></i>
      <a class='link' href="{:addon_url('integral://goods/lists')}">积分商城 </a>
      <i class="arrow">></i>
      <a class='link' href='javascript:void(0);'><span style="display: block;width: 120px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">{$goods['goodsName']}</span></a>
   </div>
   <div class='wst-clear'></div>
</div>
</div>
<div class='wst-w'>
   <div class="wst-container">
      <div class="goods-details">
      <div class='goods-img-box'>
          {if $goods['goodsVideo']!=""}
            <div class="wst-video-box">
              <video muted src="__RESOURCE_PATH__/{$goods["goodsVideo"]}" id='previewVideo' controls="controls" autoplay="autoplay" width='350' height='350'></video>
            </div>
          {/if}
          <div class="goods-img spec-preview" id="preview">
              <ul>
                  {volist name="$goods['gallery']" id='vo'}
                  <li >
                      <img title="{$goods['goodsName']|WSTStripTags}"
                           alt="{$goods['goodsName']|WSTStripTags}"
                           class='cloudzoom'
                           src="__RESOURCE_PATH__/{:WSTImg($vo)}"
                           layer-src="__RESOURCE_PATH__/{:WSTImg($vo, 0)}"
                           width="350" height="350"></li>
                  {/volist}
              </ul>
          </div>
          <div class="goods-pics">
            <i class="prev">&lt;</i>
            <i class="next">&gt;</i>
            <div class="items">
                <ul>
                    {if $goods['goodsVideo']!=""}
                    <li class="gallery-li hover">
                        <div class="wst-video-btn"><i class="fa fa-play-circle"></i></div>
                        <img class="gvideo gallery-img" src="__RESOURCE_PATH__/{$goods['goodsImg']}"  width="60" height="60">
                    </li>
                    {/if}
                    <div id="gallery-img-0">
                        {volist name="$goods['gallery']" id='vo' key='gi'}
                        <li class="gallery-li {$goods['goodsVideo']=='' && $key==1 ? 'hover': ''}">
                            <img title="{$goods['goodsName']|WSTStripTags}"
                                 alt="{$goods['goodsName']|WSTStripTags}"
                                 class='cloudzoom-gallery gallery-img'
                                 src="__RESOURCE_PATH__/{:WSTImg($vo)}"
                                 layer-src="__RESOURCE_PATH__/{:WSTImg($vo, 0)}"
                                 data-cloudzoom="useZoom: '.cloudzoom', image:'__RESOURCE_PATH__/{:WSTImg($vo)}', zoomImage:'__RESOURCE_PATH__/{$vo}' " width="60" height="60">
                        </li>
                        {/volist}
                    </div>
                </ul>
         <div class="blank"></div>
      </div>
         </div>
         <div class="wst-clear"></div>
      </div>
      <div class='intro'>
          <h2>{$goods['goodsName']}</h2>
          <span class='tips'>{$goods['goodsTips']}</span>
          <div class='summary'>
            <div class="infol">
             <div class='item'>
               <div class='dt'>市场价</div>
               <div class='dd market-price'>{if($goods['isSpec']==1)}{$goods['defaultSpecs']['marketPrice']}{else}{$goods['marketPrice']}{/if}元</div>
             </div>
             <div class='item'>
                <div class='dt'>兑换价：</div>
               <div class='dd price' id='j-shop-price'>￥{$goods['goodsPrice']} </span> 
               <span class="price2"> + </span>
               <span class="integralnum">{$goods['integralNum']}</span> 
               <span class="price2"> 积分</span> 
               </div>
               <div class='wst-clear'></div>
             </div>
             </div>
             <div class='wst-clear'></div>
          </div>
          {if($goods['integralDesc'])}
          <div class='integral-desc' style="background-color:#f5f5f5">
            <div class='dt'>积分商城说明：</div>
            <div class='dd'>{$goods['integralDesc']}</div>
            <div class='wst-clear'></div>
          </div>
          {/if}
          <div class='buy'>
             <div class='item'>
                <div class='dt'>累计评价</div><div class='dd'>{$goods['appraiseNum']}</div>
                <div class='dt'>商品评分</div><div class='dd'>{for start="0" end="$goods['scores']['totalScores']"}<img src="__STATIC__/plugins/raty/img/star-on.png">{/for}</div>
                <div class='dt'>销量</div><div class='dd'>{$goods['orderNum']} {$goods['goodsUnit']}</div>
             </div>
          </div>
          <div class='spec'>
             {if !empty($goods['spec'])}
             {volist name="$goods['spec']" id='vo'}
             <div class='item'>
               <div class='dt'>{$vo['name']}</div>
               <div class='dd'>
               {volist name="$vo['list']" id='vo2'}
                  {if $vo2['itemImg']!=''}
                  <div class='j-option img j-selected' data-val="{$vo2['itemId']}" style='height:28px;padding:0px;'><img class="cloudzoom-gallery" width="28" height="28" src="__RESOURCE_PATH__/{:WSTImg($vo2['itemImg'])}" data-cloudzoom="useZoom: '.cloudzoom', image:'__RESOURCE_PATH__/{:WSTImg($vo2['itemImg'])}', zoomImage:'__RESOURCE_PATH__/{$vo2['itemImg']}' "  title="{$vo2['itemName']|WSTStripTags}" alt="{$vo2['itemName']|WSTStripTags}"/><i></i></div>
                  {else}
                  <div class='j-option j-selected' data-val="{$vo2['itemId']}">{$vo2['itemName']}<i></i></div>
                  {/if}
               {/volist}
               </div>
               <div class='wst-clear'></div>
             </div>
             {/volist}
             {/if}
          </div>
          <div class='buy'>
             <div class='item'>
                <div class='dt'>数量</div>
                <div class='dd'>
                  <a href='#none' class='buy-btn' id='buy-reduce' style='color:#ccc;' onclick='javascript:WST.changeIptNum(-1,"#buyNum","#buy-reduce,#buy-add")'>-</a>
                  <input type='text' id='buyNum' class='buy-num' value='1' data-min='1' autocomplete="off" onkeyup='WST.changeIptNum(0,"#buyNum","#buy-reduce,#buy-add")' onkeypress="return WST.isNumberKey(event);" maxlength="6"/>
                  <a href='#none' class='buy-btn' id='buy-add' onclick='javascript:WST.changeIptNum(1,"#buyNum","#buy-reduce,#buy-add")'>+</a>
                    &nbsp; &nbsp;（库存<span id='goods-stock'>{$goods['totalNum']-$goods['orderNum']}</span>&nbsp;{$goods['goodsUnit']}）
                </div>
             </div>
             <div class='item' style='padding-left:75px;margin-top:20px;'>
                {if !$goods['status']}
                  <a id='addBtn' href='javascript:void(0);' class='addBtn un-buy'>立即购买</a>
                {else}
                  {if condition="$goods['totalNum'] elt $goods['orderNum']"}
                  <a id='addBtn' href='javascript:void(0);' class='addBtn un-buy'>已抢完</a>
                  {else}
                  <a id='addBtn' href='javascript:addCart(1,"#buyNum")' class='addBtn'>立即购买</a>
                  {/if}
                {/if}

               {if ($goods['favGood']>0)}
                 <a href='javascript:void(0);' onclick='WST.cancelFavorite(this,0,{$goods["goodsId"]},{$goods['favGood']},1)' class='favorite j-fav'><i class="iconfont default"></i><i class="iconfont red"></i><i class="iconfont move"></i>喜欢</a>
               {else}
                 <a href='javascript:void(0);' onclick='WST.addFavorite(this,0,{$goods["goodsId"]},{$goods["goodsId"]},1)' class='favorite j-fav2'><i class="iconfont default"></i><i class="iconfont red"></i><i class="iconfont move"></i>喜欢</a>
               {/if}
               <div class='wst-clear'></div>
             </div>
          </div>
      </div>
      <div class='wst-clear'></div>
      </div>
   </div>
</div>
  <div class='goods-desc' id="goods-desc">
      <div id='tab' class="wst-tab-box">
        <div class="goods-item" id='goodsTabs'>
        <div class="wst-container">
          <div class="edge">
            <div class="goods">
              <img class='goodsImg' data-original="__RESOURCE_PATH__/{:WSTImg($goods['goodsImg'])}"  title="{$goods['goodsName']|WSTStripTags}">
              <div class="info"><p class="name">{$goods['goodsName']}</p><p class="price j-shop-price">{$goods['shopPrice']}元</p></div>
              <div class='wst-clear'></div>
            </div>
          </div>
          <div class="middle">
          <ul class="wst-tab-nav">
             <li><p>详情描述</p></li>
             <li><p>商品属性</p></li>
             <li><p>评价晒单<span id="apprNum">({$goods['appraiseNum']})</span></p></li>
             <li><p style="border-right:0px;">商品咨询</p></li>
          </ul>
        </div>
        <div class="edge">
          <div class="addbtn">
          {if $goods['status']}
              <a href='javascript:addCart(1,"#buyNum")'><i class="iconfont"></i>加入购物车</a>
              {/if}
              </div>
        </div>
      </div><div class='wst-clear'></div>
      </div>
    <div class="wst-container">
        <div class="wst-tab-content" style='min-height:1312px;'>
           <div class="wst-tab-item goods-desc-box" style="position: relative;">
           {$goods['goodsDesc']|htmlspecialchars_decode}
           </div>
           <div class="wst-tab-item" style="position: relative;display:none">
              <table class='wst-attrs-list'>
                 {volist name="$goods['attrs']" id="vo"}
                 <tr>
                    <th nowrap>{$vo['attrName']}</th>
                    <td>{$vo['attrVal']}</td>
                 </tr>
                 {/volist}
              </table>
           </div>
            <input type="hidden" id="filtertype" value="all" />
            <script id="tblist" type="text/html">
              <div class="appr-filter">
                <ul class="appr-filterbox">
                  <li><a href="javascript:void(0)" onclick="apprfilter('all')" id='all'>全部评价(<span id="totalNum">0</span>)</a></li>
                  <li><a href="javascript:void(0)" onclick="apprfilter('pic')" id='pic'>晒图(<span id="picNum">0</span>)</a></li>
                  <li><a href="javascript:void(0)" onclick="apprfilter('best')" id='best'>好评(<span id="bestNum">0</span>)</a></li>
                  <li><a href="javascript:void(0)" onclick="apprfilter('good')" id='good'>中评(<span id="goodNum">0</span>)</a></li>
                  <li><a href="javascript:void(0)" onclick="apprfilter('bad')" id='bad'>差评(<span id="badNum">0</span>)</a></li>
                </ul>
              </div>
               {{# for(var i = 0; i < d.length; i++){ }}
               <div class="appraises-box">
               <div class="wst-appraises-right">
                  <div class="userinfo">
                    <img data-original="__RESOURCE_PATH__/{{d.userPhoto}}" class="apprimg" />
                  </div>
               </div>
                <div class="wst-appraises-left">
                  <p class="app-content">
                    {{d[i]['content']}}
                    <div class="goods-spec-box">
                        {{d[i]['goodsSpecNames']}}
                    </div>
                  </p>
                  {{#  if(WST.blank(d[i]['images'])!=''){ var img = d[i]['images'].split(','); var length = img.length;  }}
                  <div id="img-file-{{i}}">
                  {{#  for(var g=0;g<length;g++){  }}
                    <div class="appr-img"><a><img src="__RESOURCE_PATH__/{{img[g].replace('.','_thumb.')}}" layer-src="__RESOURCE_PATH__/{{img[g]}}" /></a></div>
                  {{#  } }}
          <div class='wst-clear'></div>
                  </div>
                  {{# }  }}
                  <p class="apprtime">{{d[i]['createTime']}}</p>
               </div>
             <div class="wst-clear"></div>
              </div> 
               {{# } }}
               </script>
           <div class="wst-tab-item" style="position: relative;display:none;">
                 <div class="appraise-head">
                   <div class="app-head-lbox">
                     <div class='percent'>
                       <i class="best_percent">0</i><span>%</span>
                     </div>
                     <p class="text">满意度</p><p class="amount">{$goods['appraiseNum']}名用户评价 </p>
                   </div>
                   <div class="app-head-rbox">
                     <div class="app-hr-item">
                       <div class="app-hr-text">好评(<i class="best_percent">0</i>%)</div>
                       <div class="percentbox">
                           <div class="percentbg" id="best_percentbg" style="width:0%"></div>
                       </div>
                     </div>
                     <div class="app-hr-item">
                       <div class="app-hr-text">中评(<i class="good_percent">0</i>%)</div>
                       <div class="percentbox">
                           <div class="percentbg" id="good_percentbg" style="width:0%"></div>
                       </div>
                     </div>
                     <div class="app-hr-item">
                       <div class="app-hr-text">差评(<i class="bad_percent">0</i>%)</div>
                       <div class="percentbox">
                           <div class="percentbg" id="bad_percentbg" style="width:0%"></div>
                       </div>
                     </div>
                   </div>
           <div class="wst-clear"></div>
               </div>
                <div id='ga-box'></div>
                <div id='pager' class="wst-pager"></div>
                <div class="wst-clear"></div>
           </div>
            <div class="wst-tab-item" style="position: relative;display:none;">
                <div class="appr-filter">
                  <input type='hidden' id="consultType" value="0" />
                  <ul class="appr-filterbox">
                    <li><a class="gc-filter curr" href="javascript:void(0)" onclick="filterConsult(this,'0')">全部</a></li>
                    <li><a class="gc-filter" href="javascript:void(0)" onclick="filterConsult(this,'1')">商品咨询</a></li>
                    <li><a class="gc-filter" href="javascript:void(0)" onclick="filterConsult(this,'2')">库存配送</a></li>
                    <li><a class="gc-filter" href="javascript:void(0)" onclick="filterConsult(this,'3')">支付</a></li>
                    <li><a class="gc-filter" href="javascript:void(0)" onclick="filterConsult(this,'4')">发票保修</a></li>
                  </ul>
                   <div class="searchout">
                      <input type="text" class="search-text" id="consultKey" placeholder="请输入关键词" />
                      <div class="csbtn" onClick="queryConsult(0)">搜索</div>
                    </div>
                </div>
                <div class="consult-searchbox">
                    <p class="search-tips">温馨提示：因每位咨询者购买情况、咨询时间等不同，以下回复对咨询者3天内有效，其他网友仅供参考。</p>
                </div>
                <div class="wst-clear"></div>
                <div class="consult-listbox" id="consultBox">
                  
                </div>
                <script id="gclist" type="text/html">
                  <ul class='consult-list'>
                    {{# for(let i=0;i<d.length;++i){  }}
                      <li>
                          <ul class="consult-item">
                            {/* 提问 */}
                            <li class='ask'>
                              <div class="wst-lfloat cs-content">{{d[i]['consultContent']}}&nbsp;<span class="c999">({{(WST.blank(d[i]['loginName'])=='')?'游客':d[i]['loginName']}})</span></div>
                              <div class="wst-rfloat time">{{d[i]['createTime']}}</div>
                              <div class="wst-clear"></div>
                            </li>
                            {/* 回复 */}
                            {{# if(d[i]['reply']!=''){  }}
                              <li class='answer'>
                                <div class="wst-lfloat cs-shops">
                                 {{d[i]['reply']}}
                                </div>
                                <div class="wst-rfloat time">{{d[i]['replyTime']}}</div>
                                <div class="wst-clear"></div>
                              </li>
                            {{# }  }} 
                            
                          </ul>
                      </li>
                    {{# }  }}
                  </ul>
                </script>
                <div id="consult-pager" class="wst-pager">
                    商品咨询分页占位
                </div>
                {/* 发表咨询 */}
                <div class="consult-publish">
                  <p class="title">发表咨询</p>
                  <div class="explain">
                    声明：您可在购买前对产品包装、颜色、运输、库存等方面进行咨询，我们有专人进行回复！因厂家随时会更改一些产品的包装、颜色、产地等参数，所以该回复仅在当时对提问者有效，其他网友仅供参考！咨询回复的工作时间为：周一至周五，9:00至18:00，请耐心等待工作人员回复。
                  </div>
                  <ul>
                    <li>
                      <div class="consult-term">
                        <label class="iconfont icon"></label>
                        <select id="pointType" name="pointType">
                             <option value="0">咨询类型</option>
                             {volist name=":WSTDatas('COUSULT_TYPE')" id="vo"}
                                 <option value="{$vo['dataVal']}">{$vo['dataName']}</option>
                 {/volist}
                             </select>
                      </div>
                    </li>
                    <li>
                      <div class="consult-content">
                          <label class="prompt">在这里描述您遇到的问题</label>
                          <textarea id="consultContent" placeholder="问题描述须大于3小于200个字" onfocus="consultText(1)" onblur="consultText(0)"></textarea>
                      </div>
                    </li>
                    <li>
                      <button id="consultCommit" onclick="consultCommit()">提交</button>
                    </li>
                  </ul>
                </div>
              </div>
      </div>
      </div>
  </div>  
  <div class='wst-clear'></div>
  <div class="wst-container">
    <div class="wst-label">
      <div class="title"><span>猜你喜欢</span></div>
      <div class="swiper-container goods-best">
          <div class="swiper-wrapper">
            {wst:goods type="best" cat="$goods['goodsCatId']" id="bes" num="20"}
            <div class="swiper-slide">
              <div class="goods">
                <a href="{:Url("home/goods/detail","id=".$bes["goodsId"])}" target="_blank"><img class='goodsImg goodsImg-best' data-original="__RESOURCE_PATH__/{:WSTImg($bes['goodsImg'])}"  title="{$bes['goodsName']|WSTStripTags}"></a>
                <a href="{:Url("home/goods/detail","id=".$bes["goodsId"])}" target="_blank"><p class="name">{$bes['goodsName']}</p></a>
                <p class="price">{$bes['shopPrice']}元</p>
                <p class="deal">{$bes['saleNum']}人购买</p>
              </div>
            </div>
            {/wst:goods}
          </div>
          <div class="swiper-pagination paging"></div>
      </div>
    </div>
    <div class="wst-label">
      <div class="title"><span>最近浏览的商品</span></div>
      <div class="swiper-container goods-history">
          <div class="swiper-wrapper">
            {wst:goods type="history" id="his" num="20"}
            <div class="swiper-slide">
              <div class="goods">
                <a href="{:Url("home/goods/detail","id=".$his["goodsId"])}" target="_blank"><img class='goodsImg goodsImg-history' data-original="__RESOURCE_PATH__/{:WSTImg($his['goodsImg'])}"  title="{$his['goodsName']|WSTStripTags}"></a>
                <a href="{:Url("home/goods/detail","id=".$his["goodsId"])}" target="_blank"><p class="name">{$his['goodsName']}</p></a>
                <p class="price">{$his['shopPrice']}元</p>
                <p class="deal">{$his['saleNum']}人购买</p>
              </div>
            </div>
            {/wst:goods}
          </div>
          <div class="swiper-pagination paging"></div>
      </div>
    </div>
  </div>
</div>
{/block}
{include file="$LAYOUT_HOME_RIGHT_CART"/}
{/block}
{block name="footer"}
  {include file="$LAYOUT_HOME_FOOTER" /}
{/block}
{block name="js"}
<script>
var goodsInfo = {integralId:{$goods['id']},id:{$goods['goodsId']}}
</script>
<script type='text/javascript' src='__STYLE__/js/swiper.jquery.min.js?v={$v}'></script>
<script type='text/javascript' src='__STYLE__/js/cloudzoom.js?v={$v}'></script>
<script type='text/javascript' src='__STYLE__/js/qrcode.js?v={$v}'></script>
<script type='text/javascript' src='__ROOT__/addons/integral/view/home/index/js/goods.js?v={$v}'></script>
<script>
    $(function(){

        layer.photos({
            photos: '#gallery-img-0',
        });

        layer.photos({
            photos: '#preview',
        });

    });
</script>

{/block}