<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>购买商品</title>
		
		<link href="__CSS__/xg_common.css" rel="stylesheet" > 
    <style>

        html{

        }
        body{
            min-height: 100vh;
            margin: 0px auto;
            font:14px/1.42858 '微软雅黑';
            background-color: #f2f2f2;
            position: relative;
        }
        h1,h2,h3,h3,h5,h6,ul,li,ol,p{
            margin: 0;
            padding: 0;
        }
        .header,.footer{
            position: fixed;
            left: 0px;right: 0px;
            z-index: 2;

        }
        .header .xg-title{
            margin: 0px;
            text-align: center;
            font-size: .49rem;
            font-weight: normal;
        }
        /*商品信息模块*/
        .good-info{
            margin-bottom: 0.14rem;
        }
        .good-info h5{
            margin-bottom: 0.12rem;
            color: rgb(151,151,151);
            font-size: 0.32rem;
            font-weight: normal;
        }
        .good-info-left{
            display: block;
            float: left;
            margin-right: 0.32rem;
        }
        .good-info-img{
            display: inline-block;
            width: 3.5rem;
        }
        .good-info-right{
            overflow: hidden;
        }
        .good-info-desc{
            font-size: 0.43rem;
            color: rgb(51,51,51);
            margin-bottom: 0.72rem;
			font-weight: bold;
        }
        .good-info-tags{
            display: inline-block;
			color: rgb(151,151,151);
			padding: 0.01rem 0.12rem;
			border: 1px solid currentColor;
			border-radius: 20px;
			font-size: 0.3rem;
        }
        .good-info-price{
            color: rgb(217,65,50);
			float: right;
			font-size: 0.4rem;
			vertical-align: sub;
			margin-top: 0.05rem;
        }
        .good-info-price>small{
            font-size: 0.2rem;
        }
        /*支付方式模块*/
        .pay-way{
            margin-bottom: 0.14rem;
            padding-bottom: 0;
        }
        .pay-way .pay-way-desc{
            font-size: 0.4rem;
            color: #d94133;
            padding-bottom: 0.16rem;
			font-weight:bold;
        }
        .pay-way-list{
            list-style: none;
            font-size: 0.4rem;
            line-height: 1.32rem;
            color: rgb(102,102,102);
        }
        .pay-way-item{
            border-top: 1px solid #f2f2f2;
            padding-left: 0.66rem;
            background-size: 0.54rem 0.54rem;
            background-position: left center;
            background-repeat: no-repeat;
        }
        .pay-way-item.zfb{
            background-image: url("__IMG__/trade/icon_zhifubao@3x.png");
        }
        .pay-way-item.wx{
            background-image: url("__IMG__/trade/icon_weixin@3x.png");
        }
        .pay-way-right{
            float: right;
        }
        .pay-way-right > .pay-price{
            float: left;
            color: rgb(217,65,50);
            display: none;
        }
        .pay-way-right > .icon-check{
            float: right;
            width: 0.7rem;
            height: 1.32rem;
            font-size: 0;
            background: url("__IMG__/trade/btn_normal_weixuan@3x.png") no-repeat center center / 0.5rem 0.5rem;
        }
        .pay-way-item.active .pay-way-right > .pay-price{
            display: inline-block;
        }
        .pay-way-item.active .pay-way-right > .icon-check{
            background-image: url("__IMG__/trade/btn_selected_xuanzhong@3x.png");
        }
        /*温馨提示模块*/
        .xg-tips h5{
            color: rgb(51,51,51);
            margin: 0px  0px 0.5rem;
            font-size: 0.43rem;
            font-weight: normal;
        }
        .tips-list{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .tips-item{
            line-height: 0.5rem;
            font-size: 0.33rem;
            margin-bottom: 0.16rem;
            color: rgb(151,151,151);
        }
				
				.pop-window {
	display:none;
	-webkit-overflow-scrolling: touch;
	overflow:hidden;
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:100vw;
	height:100vh;
	z-index:999;
	background:rgba(0,0,0,.2);
}

.pop-window .pop-box {
	position:relative;
	top:26%;
	margin:0 auto 0;
	width:80vw;
	background:#FFF;
	border-radius:3vw;
	max-width:293px;
}
.pop-window .pop-page {position:relative;margin:0 auto;width:100%;height:100%;background:#FFF;}
.pop-window .pop-page .pop-wrap,.pop-window .pop-page .pop-wrap>div {height:100%;}
.pop-window .pop-box .pop-wrap {
	padding:5vw 7vw;
}
.pop-window .pop-box .pop-wrap .pop-title {
	position:relative;
	margin:0;
	color:#707070;
	font-size:2.7rem;
	font-weight:normal;
	text-align:center;
}
/* .pop-window .pop-box .pop-wrap .pop-title span {
	color:#18B1EA;
}*/
	.pop-window .pop-box .pop-wrap .pop-close {
	position:absolute;
	right:-1rem;
	top:-1rem;
	font-size:2.2rem;
	color:#999;
}
.pop-window .pop-box .pop-wrap .pop-content {
	color:#999;
	font-size:1.8rem;
	position:relative;
	margin-top:.2rem;
}
.pop-window .pop-box .pop-wrap .pop-content .des {
	color:#666;
	display:block;
}
.pop-window .pop-box .pop-wrap .pop-btnbox {
	overflow:hidden;
	clear:both;
	position:relative;
}
.pop-window .pop-box .pop-wrap .pop-btnbox .pop-btn {
	width:45%;
	text-align:center;
	padding:.4rem 0;
	font-size:2.6rem;
	border-radius:4rem;
	display:block;
}
.pop-window .pop-box .pop-wrap .pop-btnbox .pop-cancel {
	color:#707070;
	border:1px solid #F1F1F1;
	float:left;
}
.pop-window .pop-box .pop-wrap .pop-btnbox .pop-confirm {
	color:#FFF;
	background:#18B1EA;
	border:1px solid #18B1EA;
	float:right;
}
.pop-window .pop-box .pop-wrap .pop-btnbox .pop-confirm.disabled {
	background:#CCC;
	border-color:#CCC;
}
.pop-window .pop-box .pop-wrap .pop-btnbox .pop-input {
	padding:.8rem 0rem .8rem 8rem;
	width:100%;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	color:#18B1EA;
	border:none;
	border-radius:2rem;
	font-size:3rem;
	line-height:1;
	vertical-align: middle;
}
.pop-window .pop-box .pop-wrap .pop-btnbox .pop-span {
	width: 205px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	color: #18B1EA;
	font-size: 2rem;
	line-height: 3rem;
	vertical-align: middle;
	overflow-x: scroll;
	display: inline-block;
}
.pop-window .pop-box .pop-wrap .pop-btnbox .prefix {
	position:absolute;
	left:.5rem;
	top:0rem;
	font-size:1.6rem;
	display:block;
	text-align: left;
	vertical-align:middle;
	line-height: 3rem;
}
.pop-window .pop-box .pop-wrap .pop-btnbox .pop-copy {
	background:#18B1EA;
	color:#FFF;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	position:absolute;
	top:0;
	right:0;
	height:100%;
	width:7rem;
	font-size:2rem;
	text-align:center;
	padding-top:.8rem;
	border-top-right-radius:2rem;
	border-bottom-right-radius:2rem;
}
.pop-window .pop-box .pop-wrap .pop-textarea {
	width:100%;
	height:26vh;
	padding:.4rem;
	font-size:1.5rem;
	border:1px solid #DCDCDC;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.totalnum {
	position:absolute;
	bottom:-1.2rem;
	right:.3rem;
	font-size:1.2rem;
}
.pop-dialog {
	display:none;
	position:fixed;
	z-index:1999;
	top:0;
	left:0;
	right:0;
	text-align:center;
	width:100vw;
	height:100vh;
}
.pop-dialog span {
	background:rgba(0,0,0,.6);
	top:50%;
	color:#FFF;
	display:inline-block;
	line-height:2;
	position:relative;
	padding:.5rem 2rem;
	word-break:break-all;
	max-width:60vw;
}
.pop-table {
	display:table;
	width:100%;height:100%;
	position:relative;
}
.pop-table .pop-wrap{display:table-cell;width:100%;height:100%;vertical-align:middle;text-align:center;}
.pop-row {
	display:table-row;
	position:relative;
}
.pop-cell {
	display:table-cell;
	position:relative;
	vertical-align:middle;
}
.pop-cell.pop-mark{
	width:24%;
}
.pop-form {
	display:none;
	-webkit-overflow-scrolling: touch;
	overflow:hidden;
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:100vw;
	height:100vh;
	z-index:999;
	background:rgba(0,0,0,.5);
}
.pop-form .pop-box {
	position:relative;
	top:28%;
	margin:0 auto 0;
	width:90vw;
	background:#FFF;
	border-radius:3vw;
}
.pop-form .pop-box .pop-wrap {
	padding:4vw 6vw 6vw;
}
.pop-form .pop-box .pop-wrap form {
	padding:1px;
}
.pop-form .pop-box .pop-wrap .pop-content {
	position:relative;
	width:100%;
}
.pop-form .pop-title {
	position:relative;
	margin:0;
	color:#707070;
	font-size:3.4rem;
	font-weight:100;
	text-align:center;
}
.pop-form .pop-box .pop-wrap .pop-close {
	position:absolute;
	right:0rem;
	top:0rem;
	font-size:2.2rem;
	color:#999;
}
.pop-form .pop-table-wrap {
	padding-top:1.7rem;
	width:100%;
	position:relative;
	overflow:hidden;
}
.pop-form .pop-table-wrap .pop-table {
	}
.pop-form .pop-table-wrap .pop-table .pop-cell {
	height:6rem;
	font-size:2.2rem;
}
.pop-form .pop-table-wrap .pop-table .pop-cell:first-child {
	width:3.5rem;
	white-space: nowrap;
}
.pop-form .pop-table-wrap .pop-table .pop-cell:last-child {
	text-align:right;
}
.pop-form .pop-table-wrap .pop-table .pop-cell .pgood {
	}
.pop-form .pop-table-wrap .pop-table .pop-cell p {
	margin:0;
}
.pop-form .pop-table-wrap .pop-table .pop-row~.pop-row {
	border-top:1px solid rgba(231,231,231,.5);
}
.pop-form .pop-table-wrap .pop-table .paddress {
	font-size:0.48rem;
	width:88%;
}
.pop-form .pop-table-wrap .pop-table .paddress {
	text-align: left;
	float: right;
}
.pop-form .pop-table-wrap .pop-table .paddress span {
	display:block;
	text-overflow:ellipsis;
	overflow:hidden;
}
.pop-form .pop-table-wrap .pop-table .pop-cell .icon-right {
	position:absolute;
	top:34.3%;
	right:0.2rem;
	width:0.3rem;
	height:0.54rem;
	display:block;
}
.pop-form .pop-butn-box {
	padding-top:0.58rem;
}
.pop-form .pop-butn-box .butn {
	width:100%;
	-webkit-appearance:none;
	font-size:3rem;
	color:#FFF;
	display:inline-block;
	padding:0.6rem 0;
	background:#18B1EA;
	border-radius:3rem;
	border:none;
	margin:0;
}
.pop-message,.pop-cue,.pop-notice,.pop-hint,.pop-share,.pop-prompt,.pop-prompt2,.pop-form,.pop-bind,.pop-login,.pop-pay,.pop-pay-temp,.pop-partir,.pop-bookmark,.pop-load {display:none;position:fixed;z-index:1999;top:0;left:0;right:0;text-align:center;width:100vw;height:100vh;}
.pop-message .pop-box {background:rgba(0,0,0,.84);position:relative;color:#FFF;display:inline-block;position:relative;word-break:break-all;border-radius:0.2rem;width:4.64rem;height:4.64rem;}
.pop-message .pop-box .pop-image {width:1.94rem;height:1.4rem;margin-top:1.12rem;}
.pop-message .pop-box .pop-text {margin:0.76rem 0 0;font-size:0.52rem;color:#FFF;}
.pop-info {background-color:rgba(0,0,0,0);}
.pop-info .pop-page {display:table;background:transparent;}	
.pop-info .pop-wrap {display:table-cell;vertical-align:middle;}
.pop-info .publishing {width:4.5rem;height:3rem !important;margin:0 auto;background:#333;border-radius:0.4rem;}
.pop-info .publishing img {margin:0 auto;display:block;width:1.5rem;padding:0.5rem 0 0.1rem;}
.pop-info .publishing span{font-size:.38rem;color:#FFF;text-align:center;display:block;}			
.look_result {color:#18B1EA;font-size:.32rem;cursor:pointer;width:3.5rem;height:1.4rem;line-height:1.4rem;margin:0 auto;background:#FFF;display:inline-block;border-radius:3px;}
	@media screen and (min-width: 768px) {
    html {
        font-size:48px!important;
    }
		.look_result {font-size:.44rem;width:5rem;height:2rem;line-height:2rem;}
}			
				
				
    </style>
</head>
<body>
    <header class="header">
        <a class="xg-back" href="javascript:;" onclick="history.back();"></a>
        <h1 class="xg-title">购买商品</h1>
    </header>
    <main class="xg-main">
        <div class="xg-container">
            <div class="xg-module good-info">
                <h5>商品信息</h5>
                <div class="good-info-container clf">
                    <img class="good-info-left good-info-img" src="__IMG__/pic_zhanghao@3x.png" width="160" alt="">
                    <div class="good-info-right">
                        <div class="good-info-desc">{$data.title}</div>
                        <span class="good-info-tags">{$data.game_name}</span>
                        <strong class="good-info-price"><small>¥</small>{$data.price}</strong>
                    </div>
                </div>

            </div>
            <div class="xg-module pay-way">
               <if condition="I('time') neq '' ">
                <p class="pay-way-desc"></p>
                <script type="text/javascript" src="__JS__/jquery-1.11.3.min.js"></script>
                <script type="text/javascript">
				/*倒计时*/
				var intDiff = parseInt("{:I('time')}");//倒计时总秒数量
				function timer(intDiff){
					var jsdtime = $('.pay-way-desc').html(alo(intDiff));
					if(intDiff>0)
						var a = setInterval(function(){
							--intDiff>=0?jsdtime.html(alo(intDiff)):(clearInterval(a));
						}, 1000);
				}
				function alo(intDiff) {
					var day=hour=minute=second=0;
					if (intDiff>0) {
						day = Math.floor(intDiff / (60 * 60 * 24));
						hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
						minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
						second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
					}
					return '请在'+minute+'分'+second+'秒内完成购买';
				}
				$(function(){
					timer(intDiff);
				});
			   </script>
                <else/>
                <p class="pay-way-desc">订单有效支付时间为30分钟</p>
                </if>
                <ul class="pay-way-list" id="pay_way">
                    <li class="pay-way-item zfb active" data-way="1">
                        <span class="way-type">支付宝支付</span>
                        <span class="pay-way-right"><strong class="pay-price">-{$data.price}</strong><i class="icon-check"></i></span>
                    </li>
                    <li class="pay-way-item wx" data-way="2">
                        <span class="way-type">微信支付</span>
                        <span class="pay-way-right"><strong class="pay-price">-{$data.price}</strong><i class="icon-check"></i></span>
                    </li>
                </ul>
            </div>
            <div class="xg-module xg-tips">
                <h5>温馨提示</h5>
                <ul class="tips-list">
                    <li class="tips-item">1.角色信息已通过平台官网审验;</li>
                    <li class="tips-item">2.购买后,登录游戏,选择【购买到的小号】进入游戏查验角色;</li>
                    <li class="tips-item">3.交易过程仅限小号转移,不存在游戏号交易或换绑行为,无需担心角色找回;</li>
                    <li class="tips-item">4.购买后<span class="clo_red">不支持退货</span></li>
                </ul>
            </div>
        </div>
    </main>
    <footer class="footer" id="submit_data">
				<input type="hidden" name="way" value="1">
				<input type="hidden" name="pay_amount" value="{$data.price}">
				<input type="hidden" name="id" value="{$data.id}">
				<input type="hidden" name="small_id" value="{$data.small_id}">
        <button type="button" class="xg-btn xg-btn-submit xg-btn-primary jssubmit">确认支付</button>
    </footer>
		<div class="popmsg pop-dialog"></div>
		<div class="popwin pop-window"><div class="pop-table"><div class="pop-wrap"></div></div></div>
		<!-- <div class="popwin2 pop-window" style="display:block;"><div class="pop-table"><div class="pop-wrap"><a class="look_result"><span>查看支付结果</span></a></div></div></div>
		 --><script src="__JS__/jquery-1.11.1.min.js"></script>
		<script src="__JS__/xg_mobile.js"></script>
		<script src="__JS__/pop.lwx.min.js"></script>
		<script>
			$(function() {
			
				var pmsg = $(".popmsg").pop();
				var popwin = $('.popwin').pop();
				
				$('input[name="way"]').val($('#pay_way li.active').attr('data-way'));
				
				$('#pay_way li').click(function() {
					var that = $(this);
					that.siblings('li').removeClass('active');
					that.addClass('active');
					$('input[name="way"]').val(that.attr('data-way'));
					return false;
				});
				
				$('.jssubmit').click(function() {
					var that = $(this),form = $('#submit_data');
					if(that.hasClass('nodisabled')) {return false;}
					that.addClass('nodisabled');
					if(validate(form)) {
						$.ajax({
							type:'post',
							dataType:'json',
							url:'{:U("buy_good")}',
							data:form.find('input').serialize(),
							success:function(data){
								if(parseInt(data.status) == 1) {
									that.removeClass('nodisabled');
									if($('#pay_way li.active').attr('data-way')==1){
										window.location.href = data.url;
									} else {
										window.location.href = data.url;
										//popwin.open(400,'<a class="look_result" id="jslookresult"><span>查看支付结果</span></a>');
										popwin.find('#jslookresult').on('click',function() {
											
											$.ajax({
												type:'post',
												dataType:'json',
												data:form.find('input').serialize(),
												url:'{:U("Pay/look")}',
												success:function(result){
													if(parseInt(result.status)==1) {
														window.location.href = result.url;
													} else {
														popwin.close(300);
														pmsg.msg('支付失败');
													}
												},
												error:function(){
													popwin.close(300);
													pmsg.msg('服务器故障,请稍后再试');
												}
											});
											
											return false;
										});
									}
								} else {
									if(data.url) {
										window.location.href=data.url;
									} else {
										pmsg.msg(data.info);
										that.removeClass('nodisabled');
									}
								}
							},
							error:function(){
								pmsg.msg('服务器故障,请稍后再试');that.removeClass('nodisabled');
							},
						});
						
					} else {
						that.removeClass('nodisabled');
					}
					
					return false;
				});
				
			});
			
			function validate(obj) {
				var way = $.trim(obj.find('input[name="way"]').val());
				
				if(!way) {pmsg.msg('请选择支付方式');return false;}
				
				return true;
			}
			
		</script>
</body>
</html>