<extend name="Public/bases2" />
<block name="css">
  <link href="__CSS__/game.css" rel="stylesheet" > 
  <link href="__CSS__/trade.css" rel="stylesheet" > 
	<style>
		.confirm_btn.disabled {background:#bbb} .xgdisabled {background:#c1c3c1;}
		.h_tit {font-weight:normal;}
		.intruct_tab tr td:first-child {display:none;}
		.intruct_tab tr {counter-increment: item;}
		.intruct_tab p:before{
			content: counter(item);
			display: inline-block;
			width: 1.33rem;
			height: 1.33rem;
			border-radius: 100%;
			font-size: 1rem;
			color: #fff;
			text-align: center;
			background-color: #999;
			margin-right: 0.7rem;
		}
		.mast_read {width:90%;}
		@media screen and (min-width:640px) {
			.read_main {padding:2.8rem 2.4rem;}
			.h_tit {font-size:2.5rem;}
			.intruct_tab p{font-size:1.8rem;line-height:1.444;margin-bottom:0.25rem;}
			.read_toptit {padding:2rem;font-size:2.8rem;height:auto;}
			.intruct_tab p:before {width:1.8rem;height:1.8rem;line-height:1.8rem;font-size:1.7rem;}
			.label_txt {font-size:1.5rem;}
			.readed {margin-top:1rem;}
			.remember_btn {height:3.6rem;line-height:3.6rem;font-size:2.2rem;width:50%;margin-top:2.8rem;}
			.flow_img {height:11.3rem;width:90%;}
			
		}
	</style>
	<script src="__JS__/lwx.js"></script>
</block>
<block name="body" >
    <!--头部-->
    <div class="zmarg_btm59">
		  
	<header class="header trade-header">
      <div class="">
		<a href="javascript:;" onclick="history.back();" class="go_back">
			<span class="table">
				<span class="table-cell">
					<img class="img_goback" src="__IMG__/trade/btn_normal_back@3x.png" alt="" height="" width="">
				</span>
			</span>
		</a>
        <h1 class="trade_caption">商品详情</h1>
				<eq name="data.status" value="3">
		<a href="javascript:;" class="buyer_reader jsbuymustread">买家必读</a>
				</eq>
      </div>
    </header>
      <div class="xg_main clearfix">
			<div class="t-list gd-t-list">
				<div class="content gift-content pad_b0">
				
				<empty name="data">
					<div class="no_data">
						<div class="nodata_content">
							<img class="nodata_img" src="__IMG__/trade/icon_shangpin@3x.png" alt="" height="" width="">
							<p class="nodata_txt">暂无此商品,逛逛其他地方吧~</p>
						</div>
					</div>
				<else />
				
					<div class="xg_version">
						<div class="media">
							  <div class="media-left  media-middle">
									<a href="javsccript:;" class="a_version">
									  <img class="media-object img_version" src="__IMG__/trade/pic_1@3x.png" alt="">
									</a>
							  </div>
							  <div class="media-body">
									<h4 class="media-heading font_h">{$data.game_name}</h4>
									<p class="meader_txt">
										<span>{$data.game_size}</span>
										<span>{$data.game_type_name}</span>
									</p>
							  </div>
							  <!--<div class="media-right  media-middle">-->
									<!--<a href="{:U('Game/detail',array('id'=>$data['game_id']))}" class="a_download">下载</a>-->
							  <!--</div>-->
						</div>
					</div>
					<div class="border_div"></div>
					<div class="trumpt">
						<div class="trumpt_top z_clearfix">
							<div class="trumpt_tl">
								<div class="trump_line">
									<span class="tl_t_tit">上架:</span>
									<span class="span_des">{$data.online_time|date='m-d H:i',###}</span>
								</div>
								<div class="trump_line">
									<span class="tl_t_tit">小号:</span>
									<span class="span_des">{$data.small_account}</span>
								</div>
								<div class="trump_line">
									<span class="tl_t_tit">区服:</span>
									<span class="span_des">{$data.server_name}</span>
								</div>
							</div>
							<div class="trumpt_tr">
								<div class="trump_line price">售价</div>
								<div class="trump_line price_num">¥{$data.price}</div>
								<div class="trump_line">&nbsp;</div>
							</div>
						</div>
						<div class="border_div1"></div>
						<div class="trumpt_botm">
							<span class="trump_des">此小号已创建{$data.day}天,累充{$data.accumulation}</span>
							<a class="trump_abtn"><switch name="data.status"><case value="3">信息已审核</case><case value="4">已出售</case><case value="1">已出售</case></switch></a>
						</div>
					</div>
					<div class="border_div"></div>
						<div class="screenshot">
						<h3 class="screenshot_h">{$data.title}</h3>
						<p class="screenshot_p">{$data.content}</p>
						<div id="screenshotbox" class="clearfix">
						<volist name=":explode(',',$data['screenshot'])" id="vo">
						<p class="p_img"><img class="" src="{$vo|get_cover='path'}" height="" width=""></p>
						</volist>
						</div>
						<div class="div_ftf">
							<div class="table">
								<div class="table-cell">
									<eq name="data.status" value="3">
									<a class="confirm_btn" id="buy_btn" href="javascript:;">确认购买</a>
									<else />
									<a class="confirm_btn disabled">角色已出售</a>
									</eq>
								</div>
							</div>
						</div>	
				</empty>
					
				</div>
			</div>
	  
      </div>
    </div>
	
	<!-- 买家必读弹窗 begin!-->
		  <div class="xg_mask jsbuymustreadcontent" style="<eq name='rule_status' value='1'>display:none;</eq>">
			<div class="table">
				<div class="table-cell">
					<div class="mast_read">
						<div class="read_toptit">买家必读</div>
						<div class="read_main">
							<h4 class="h_tit">购买流程</h4>
							<p style="width:100%;">
								<img class="flow_img" src="__IMG__/trade/icon_maijia@3x.png" alt="" height="" width="">
							</p>
							<h4 class="h_tit">买家须知</h4>
							<div class="instruct">
								<table class="intruct_tab">
									<tbody>
										<tr>
											<td><span class="instruct_num">1</span></td>
											<td>
												<p>角色信息已通过本平台审核,因时间因素造成排行榜,称号,装备,到期等变化,不视为信息失实;</p>
											</td>
										</tr>
										<tr>
											<td><span class="instruct_num">2</span></td>
											<td>
												<p>购买后,角色小号自动转入你的平台账号内,重新登录游戏【选择小号】处查收即可;</p>
											</td>
										</tr>
										<tr>
											<td><span class="instruct_num">3</span></td>
											<td>
												<p>交易过程仅限小号转移,不存在游戏账号交易或换绑行为,无需担心角色找回;</p>
											</td>
										</tr>
										<tr>
											<td><span class="instruct_num">4</span></td>
											<td>
												<p>交易完成后,不支持退货!</p>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
							<p class="z_clearfix readed">
								<label class="label_control">
									<eq name="rule_status" value="1">
									<input type="checkbox" id="readed" checked class="input_control">
									<else />
									<input type="checkbox" id="readed" class="input_control">
									</eq>
									<i class="label_icon"></i>
									<span class="label_txt">我已阅读</span>
								</label>
							</p>
							
								<p>
									<a class="remember_btn <eq name='rule_status' value='0'>xgdisabled</eq> js_closemask" href="javascript:;">我记住了</a>
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		  </div>
		<!--end! 买家必读弹窗-->
	 
    </div>
		
		<div class="popmsg pop-dialog"></div>
		<div class="popwin pop-window" style="background:#FFF;"><div class="pop-page"><div class="pop-wrap"></div></div></div>
		<script src="__JS__/pop.lwx.min.js"></script>
<script>	
	$(function() {
		var first = $('#screenshotbox .p_img:eq(0) img');
		if(first && first.width()<first.height()) {
			$('#screenshotbox .p_img').css({width:'50%',float:'left'}).find('img').css({width:'98%'});
			$('#screenshotbox .p_img:nth-child(2n)').css({'text-align':'right'});
		}
	
		$('.zmarg_btm59').css('margin-bottom',0);
		$('.content').css({'min-height':($(window).height()-$(".header").height()-$(".foot-nav").height()-16)});
		$(".no_data").css({'height':($('.content').height())});
		
		$("body").delegate('.jsdown','click',function(){
			var url = $(this).attr('url');
			var pmsg = $(".popmsg").pop();
			$.ajax({
				url:url,
				type:"get",
				dataType:"json",
				data:{},
				success:function(result){
					if(result.status == 0){
						pmsg.msg(result.info);
					}else{
						location.href=result.url;
						return false;
					}
				},
				error:function(){
					alert("服务器异常");
				}
			})
		});
		
	});
	</script>
		

	<script>
	$(function() {
		var pmsg = $(".popmsg").pop();
		$('#buy_btn').on('click',function() {
			var that = $(this);
			if(that.hasClass('nodisabled')) {return false;}
			// that.addClass('nodisabled');
			$.ajax({
				type:'post',
				dataType:'json',
				data:{id:'{$data["id"]}'},
				url:'{:U("checkLogin")}',
				success:function(data) {
					if(parseInt(data.status)==1) {
						
						$.ajax({
							type:'post',
							dataType:'json',
							data:{id:'{$data["id"]}'},
							url:'{:U("checkIsSelf")}',
							success:function(data){
								if(parseInt(data.status)==1) {
									
						window.location.href = '{:U("Trade/buy_good",array("id"=>$data["id"],"is_app"=>I("is_app"),"token"=>I("token")))}';
								
								} else {
									if(data.html) {
										$('.trade-header').hide();
										$('html').css({overflow:'hidden'});
										var pwin = $(".popwin").pop().open(800,data.html);
									} else {
										pmsg.msg(data.info);
									}
									that.removeClass('nodisabled');
								}
							},
							error:function(){
								pmsg.msg('服务器故障,请稍后再试');
								that.removeClass('disabled');
							},
						});
						
					} else {
						$('.trade-header').hide();
						$('html').css({overflow:'hidden'});
						var pwin = $(".popwin").pop().open(800,data.html);
						that.removeClass('nodisabled');
					}
				},
				error:function(){
					pmsg.msg('服务器故障,请稍后再试');
					that.removeClass('disabled');
				},
			});
			
			return false;
		});
		
		$('#readed').change(function (e) {
				var checked = $(this).prop('checked');
				if(checked){    //选中‘我已阅读’
						$('.js_closemask').removeClass('xgdisabled');
				}else{
						$('.js_closemask').addClass('xgdisabled');
				}
				return false;
		});
		
		//点击我记住了按钮关闭遮罩层弹窗
		$(".js_closemask").click(function(){			
			var that = $(this);
			if(!$('#readed').prop('checked')) {pmsg.msg('请勾选"我已阅读"');return false;}
			if(that.hasClass('xgdisabled')) {pmsg.msg('请勾选"我已阅读"');return false;}
			that.addClass('xgdisabled');
			$.ajax({
				type:'post',
				dataType:'json',
				url:'{:U("Trade/rule_status")}',
				data:{rule:1},
				success:function(data){
					that.removeClass('xgdisabled');
					if(parseInt(data.status) ==1) {
					}
					$('.jsbuymustreadcontent').hide();
window.location.reload();
					
				},
				error:function(){
					pmsg.msg('服务器故障,请稍后再试....');that.removeClass('xgdisabled');
				},
			});
			
			
			return false;
		});
		
		
		$('.jsbuymustread').click(function() {
			$('.jsbuymustreadcontent').show();			
			return false;
		});
		
	});
</script>

</block>