{extend name="$index_style_layout" /}

<!--SEO相关-->
{block name="head_title"}{$info.title}{/block}
{block name="head_keword"}{$info.keywords?:$info.title}  {$s_info.name} {/block}
{block name="head_description"}{:get_word(del_html($info['content']),300)}{/block}

{block name="body_content"}
<link rel="stylesheet" href="/public/static/index/default/pclist.css">
<div class="ArticlMainContainer">
	<div class="LeftsCnt">
		{include file="cms@content/left" /}
	</div>
	<div class="RightCnt">
             
		<!-----商品基本信息开始----->
		<link rel="stylesheet" href="/public/static/css/shopbaseinfo.css">
		<div class="Base_ShopInfo">
			<div class="ImgCnt">
				<div class="Shop_BigImg"><div></div></div>
				<div class="Shop_ListImgs">
					<ul></ul>
					<dl>
						<dt onclick="pravShowImg()"><i class="fa fa-angle-left"></i></dt>
						<dd onclick="nextShowImg()"><i class="fa fa-angle-right"></i></dd>
					</dl>
				</div>
			</div>
			<div class="InfoCnt">
				<h3>{$info.title}</h3>
				<ul>
					<li>发布时间：<span>{:date("Y-m-d H:i:s",$info.create_time)}</span></li>
					<li>商品价格：<span class="price">&yen;<em>{$info.price}</em></span></li>
				</ul>
				<div class="qb_ui_pc_select_shoptype">
{php}
$field_array=get_field($info['mid']);
$array1=get_shop_type('type1',$info);
$array2=get_shop_type('type2',$info);
$array3=get_shop_type('type3',$info);
{/php}
{notempty name="array1"}
			<ul class="shoptype1">
				<ol>{$field_array.type1.title}</ol>
				<li>
				{volist name="array1" id="rs"}
					<div data-price="{$rs.price}">{$rs.title}</div>
				{/volist}
				</li>
			</ul>
{/notempty}
{notempty name="array2"}
			<ul class="shoptype2">
				<ol>{$field_array.type2.title}</ol>
				<li>
				{volist name="array2" id="rs"}
					<div>{$rs.title}</div>
				{/volist}
				</li>
			</ul>
{/notempty}
{notempty name="array3"}
			<ul class="shoptype3">
				<ol>{$field_array.type3.title}</ol>
				<li>
				{volist name="array3" id="rs"}
					<div>{$rs.title}</div>
				{/volist}
				</li>
			</ul>
{/notempty}
			<dl>
				<dt>购买数量</dt>
				<dd class="chnageBuyNum">
					<span class="fa fa-minus"></span>
					<div><input type="text" value="1"/></div>
					<em class="fa fa-plus"></em>
				</dd>
			</dl>
			<div class="butters">
				<span><button onclick="BuyThisShop(2)">立即购买</button></span>
				<em><button onclick="BuyThisShop(1)">加入购物车</button></em>
			</div>			
		</div>
		<script>
			var type1=0;
			var type2=0;
			var type3=0;
			var shopnum=1;
			var shopprice="{$info.price}";
			$('.shoptype1 li div').click(function(){
				$('.shoptype1 li div').removeClass('ck');
				$(this).addClass('ck');
				type1=$(this).index()+1;
				var thisprice = $(this).data('price');
				if(thisprice>0){
					$('.Base_ShopInfo .InfoCnt .price em').html(thisprice);
				}else{
					$('.Base_ShopInfo .InfoCnt .price em').html(shopprice);
				}
			});
			$('.shoptype2 li div').click(function(){
				$('.shoptype2 li div').removeClass('ck');
				$(this).addClass('ck');
				type2=$(this).index()+1;
			});
			$('.shoptype3 li div').click(function(){
				$('.shoptype3 li div').removeClass('ck');
				$(this).addClass('ck');
				type3=$(this).index()+1;
			});
			$('.chnageBuyNum em').click(function(){
				shopnum++;
				$('.chnageBuyNum div input').val(shopnum);
			});
			$('.chnageBuyNum span').click(function(){
				shopnum--;
				if(shopnum<1){
					layer.alert('购买数量不能小于1');
					shopnum=1;
				}
				$('.chnageBuyNum div input').val(shopnum);
			});
			function BuyThisShop(totype){
				if((type1==0&&$(".shoptype1").length>0)||(type2==0&&$(".shoptype2").length>0)||(type3==0&&$(".shoptype3").length>0)){
					layer.alert('没有选择商品类型');
				}else{
					var gotourl="{:urls('car/add')}?shopid={$id}&type1="+type1+"&type2="+type2+"&type3="+type3+"&num="+shopnum;
					$.get(gotourl+"&"+Math.random(),function(res){
						if(res.code==0){			
							if(totype==1){
								layer.msg('成功加入购物车');
							}else{
								window.location.href="{:urls('car/index')}";
							}
						}else{
							layer.alert('出错了:'+res.msg);
						}
					});					
				}				
			}
			$('.chnageBuyNum div input').change(function(){
				shopnum=parseInt($(this).val());
				if(shopnum<1){
					layer.alert('购买数量不能小于1');
					shopnum=1;
					$(this).val(shopnum);
				}
			});
		</script>
			</div>
		</div>
		<script>
		var shopimgs=[
		{volist name="listdb" id="rs"}
		'{$rs.picurl}',
		{/volist}
		];
		</script>
		<script type="text/javascript" src="/public/static/js/shopimgs.js"></script>
		<!-----商品基本信息结束----->
		<link rel="stylesheet" href="/public/static/css/shopotherinfo.css">
		<div class="Other_ShopInfo">
			<div class="changetypes">
				<span>产品详情</span>
				<span>相关评论</span>
				<span>注意事项</span>
			</div>
			<div class="showtypes">
				<div class="Cnt qb_ui_ShowContent">{$info.content}</div>
				<div class="Cnt">
					<!--引用评论碎片模板common\view\comment\shoppc01.htm每页显示3条评论-->
					{qb:comment name="commentshoppc01" rows='5' tpl="comment/pc01"}{/qb:comment}
				</div>
				<div class="Cnt qb_ui_ShowContent">{qb:tag name="shop_notice_001" type="text"}购买注意事项!!{/qb:tag}</div>
			</div>
		</div>
		<script>
			function changeShow(i){
				$('.changetypes span').removeClass('ck');
				$('.changetypes span').eq(i).addClass('ck');
				$('.showtypes .Cnt').hide();
				$('.showtypes .Cnt').eq(i).fadeIn();
			}
			changeShow(0);
			$('.changetypes span').click(function(){
				changeShow($(this).index());
			});
		</script>
	</div>	
</div>

<!-- 微动态自动收录用户感兴趣的主题,时间60代表用户停留60秒将自动收藏 -->
{:fun('sns@fav',$info,60,'系统帮你订阅了本主题,下次本主题有回复,将会通知你')}

{/block}