{extend name="default/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="__STYLE__/css/swiper.min.css?v={$v}" rel="stylesheet">
<link href="__STYLE__/css/goods.css?v={$v}" rel="stylesheet">
{/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>
   	  {if($goods['goodsCatId'])}
	   	  {volist name=":WSTPathGoodsCat($goods['goodsCatId'])" id='vo'}
	   	  <i class="arrow">></i>
	      <a class='link' href='{:url("home/goods/lists","catId=".$vo["catId"])}'>{$vo['catName']}</a>
	      {/volist}
   	  {/if}
   	  <i class="arrow">></i>
   	  <a class='link' href='javascript:void(0);'><span style="display: block;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' id='j-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 j-shop-price'>{if($goods['isSpec']==1)}{$goods['defaultSpecs']['specPrice']}{else}{$goods['shopPrice']}{/if}元</div>
             </div>
             <div class='item' id='j-promotion' style='display:none'>
               <div class='dt'>促销</div>
               <div class='dd'>
                 {:hook('homeDocumentGoodsPromotionDetail',['goods'=>$goods])}
               </div>
             </div>
             {:hook('homeDocumentGoodsPropDetail',['goods'=>$goods,'getParams'=>input()])}
             </div>
             <div class='wst-clear'></div>
          </div>
          <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>
                  <div class='dt' style="float: left;">成交量</div><div class='dd' style="width: 50%;overflow: hidden;">{$goods['saleNum']} 笔
                  <div class="wst-contrast"  style="float: right;" onclick="javascript:contrastGoods(1,{$goods['goodsId']},1)"><i></i>对比</div></div>
                </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 {$key==0?'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 {$key==0?'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'>{if($goods['isSpec']==1)}{$goods['defaultSpecs']['specStock']}{else}{$goods['goodsStock']}{/if}</span>&nbsp;{$goods['goodsUnit']}）
                </div>
             </div>
             <div class='item' style='padding-left:75px;margin-top:20px;'>
               {if $goods['read']}
                 <a id='buyBtn' href='javascript:void(0);' class='buyBtn un-buy'>立即购买</a>
                 {if $goods['goodsType']==0}
                 <a id='addBtn' href='javascript:void(0);' class='addBtn un-buy' ><i class="iconfont"></i>加入购物车</a>
                 {/if}
               {else}
                 <a id='buyBtn' href='javascript:addCart(1,"#buyNum")' class='buyBtn'>立即购买</a>
                 {if $goods['goodsType']==0}
                 <a id='addBtn' href='javascript:addCart(0,"#buyNum")' class='addBtn' ><i class="iconfont"></i>加入购物车</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}" src="__RESOURCE_PATH__/{:WSTConf('CONF.goodsLogo')}">
		    			<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['read']}
			        <a href='javascript:addCart(0,"#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[i].userPhoto}}" class="apprimg" src="__RESOURCE_PATH__/{:WSTConf('CONF.userLogo')}"/>
                  </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>
                  {{# if(d[i]['shopReply']!='' && d[i]['shopReply']!=null){ }}
                  <div class="reply-box">
                     <p class="reply-content"><a href="javascript:void(0)" onclick="goShop({{d[i]['shopId']}})">{{d[i]['shopName']}}</a>：{{d[i]['shopReply']}}</p>
                     <p class="reply-time">{{d[i]['replyTime']}}</p>
                 </div>
                 {{# } }}

               </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","goodsId=".$bes["goodsId"])}" target="_blank"><img class='goodsImg goodsImg-best' data-original="__RESOURCE_PATH__/{:WSTImg($bes['goodsImg'])}"  title="{$bes['goodsName']|WSTStripTags}" src="__RESOURCE_PATH__/{:WSTConf('CONF.goodsLogo')}"/></a>
				    		<a href="{:Url("home/goods/detail","goodsId=".$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","goodsId=".$his["goodsId"])}" target="_blank"><img class='goodsImg goodsImg-history' data-original="__RESOURCE_PATH__/{:WSTImg($his['goodsImg'])}"  title="{$his['goodsName']|WSTStripTags}" src="__RESOURCE_PATH__/{:WSTConf('CONF.goodsLogo')}"/></a>
				    		<a href="{:Url("home/goods/detail","goodsId=".$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>
{/* 对比框 */}
<div class="wst-cont-frame" id="j-cont-frame">
  <div class="head"><span>对比栏</span><a href="javascript:void(0);" class="close" onclick="javascript:contrastGoods(0,0,0)">关闭</a></div>
  <div class="list">
    <div class="goods" id="contrastList"></div>
    <div class="term-contrast">
      <p><a class="contrast" href="{:Url('home/goods/contrast')}" target="_blank">对比</a></p>
      <p><a href="javascript:void(0);" onclick="javascript:contrastDel(0)" class="empty">清空</a></p>
    </div>
  </div>
  <script id="colist" type="text/html">
    {{# if(d.data && d.data.length>0){ }}
    {{# for(var i=0; i<d.data.length; i++){ }}
    <div class="term">
      <div class="img"><a href="{{WST.U('home/goods/detail','goodsId='+d.data[i].goodsId)}}" target="_blank"><img class="contImg" data-original="__RESOURCE_PATH__/{{ d.data[i].goodsImg }}" title="{{ d.data[i].goodsName }}" width="50" height="50"></a></div>
      <div class="info"><a href="{{WST.U('home/goods/detail','goodsId='+d.data[i].goodsId)}}" target="_blank"><p class="name">{{ d.data[i].goodsName }}</p></a><p class="price"><span>￥{{ d.data[i].shopPrice }}</span><a href="javascript:contrastDel({{ d.data[i].goodsId }});" >删除</a></p></div>
    </div>
    {{# } }}
    {{# } }}
    {{# var data = (d.data)?d.data.length:0 }}
    {{# for(var i=data+1; i<5; i++){ }}
    <div class="term-empty">
      <div class="img">{{ i }}</div>
      <div class="info"><p>您还可以继续添加</p></div>
    </div>
    {{# } }}
    </script>
</div>
{/block}
{block name="js"}
<script>
var goodsInfo = {
	id:{$goods['goodsId']},	
	isSpec:{$goods['isSpec']},
	goodsStock:{$goods['goodsStock']},
	marketPrice:{$goods['marketPrice']},
	goodsPrice:{$goods['shopPrice']}
	{if isset($goods['saleSpec'])}
	,sku:{:json_encode($goods['saleSpec'])}
	{/if}
}
</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/goods.js?v={$v}'></script>
<script type='text/javascript' src='__STYLE__/js/qrcode.js?v={$v}'></script>
<script>
$(function(){
        layer.photos({
             photos: '#gallery-img-0',
        });

        layer.photos({
            photos: '#preview',
        });
        var qr = qrcode(10, 'M');
		var url = '{:url("wechat/goods/index","","html",true)}?goodsId={$goods["goodsId"]}';
		qr.addData(url);
		qr.make();
		$('#qrcode').html(qr.createImgTag());
});
</script>
{/block}