<{import 
	file="header_top.html" 
	title="付款"
	css="public"
}>
<style type="text/css"> 
.main_bar{ width:100%; background:#fff; padding:10px 0 0 0; float:left; } 
.main{ width:1000px; margin:0 auto; }
.main .name{ width:100%; padding:20px 0 10px; float:left; }
.main .name a{ font-size:18px; color:#333; float:left;}

label{ padding:0 30px 0 0; float:left;}
label input{ margin:23px 10px 0 0; float:left;} 

.logo{ margin-top:20px; padding:0; float:left; }
.logo img{ height:40px; float:left; }
.logo span{ font-style:inherit; font-size:18px; padding:7px 0 0 30px; float:left; }
.logout{ margin-top:32px; float:right; }
.logout a{ padding:10px 10px 8px; font-size:14px; color:#333; }
 
.lbox{ width:100%; background:#fff; margin-top:30px; padding:50px 0 200px; float:left; }
.opr{ width:100%; float:left; }
.opr .ol{ padding:12px 0 0 50px; font-size:16px; float:left; }
.opr .or{ padding:10px 50px 0 0; font-size:16px; float:right; }
.opr .name{ padding:30px 0 3px 50px; font-size:18px; float:left; }
.opr .con{ padding:10px 0 0 50px; float:left; } 

.pay_con{ width:1180px; float:left; } 

/*支付合子*/
.paybox{ position:relative; margin:0 30px 0 0; float:left; }
.paybox a.payimg{ border:1px solid #ddd; line-height:18px; cursor:pointer; padding:10px 35px 10px; background:#fff; border-radius:2px; float:left; }
.paybox a.payimg.ch{ border:1px solid #f00; background:#fff; }
.paybox a svg{ width:38px; height:38px; float: left; }
.paybox a span{ padding:10px 0 0 10px; font-size:16px; float:left; }

.paybox .ewmbox{ position:absolute; width:150px; padding:15px; margin-top:70px; margin-left:2px; background:#fff; border:1px solid #efefef; box-shadow: 0 1px 4px rgba(0,0,0,.1); float:left; }
.paybox .ewmbox:before{ position: absolute; content: ""; width: 0; height: 0; top: -11px; left:80px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid #cbcbcb; }
.paybox .ewmbox img{ width:150px; height:150px; float:left; }
.paybox .ewmbox span{ width:150px; text-align:center; color:#888; padding:5px 0; float:left; }

.paygobox{ box-sizing: border-box; padding:20px 0 0 50px; margin-top:10px; float:left; }
.paygobox a.submit{ padding:10px 50px 9px; background:#f00; color:#fff; font-size:14px; border-radius:2px; }
.paygobox a.submit.no{ background:#f8f8f8; border:1px solid #eee; color:#888; }
</style> 
<div class="main_bar">
	<div class="main">
		<div class="logo">
			<a href="<{$__URI__}>"><img src="<{$__IMG__}><{$UQCMS.site_logo}>"></a>
			<span>收银台</span>
		</div>
		<div class="logout">
			<a href="<{$__URI__}>member/index">个人中心</a>
			<a href="<{$__URI__}>index/logout">退出</a>
		</div>
	</div>
</div>
<{uqcms m="account" v="row" c="admin_pay:trade_no=smarty.get.trade_no"}>
<div class="main_bar" style="padding:0 0 50px 0;">
	<div class="main" style="width:1000px;"> 
	<{if $row.error == '1'}>
		<div class="pay_con">
			<div class="errmsg"><i></i><span><{$row.msg}></span></div>
		</div>
	<{else}>
		<input type="hidden" name="trade_no" value="<{$row.trade_no}>" id="trade_no"/> 
		<div class="lbox" style="box-shadow: 0 6px 32px rgba(0,0,0,.13);"> 
			<div class="opr">
				<div class="ol">交易号：<{$row.trade_no}></div>
				<div class="or">应付金额 <span style="color:#f00; font-family: verdana; font-size:22px;">￥<{$row.price}></span> 元 </div>
			</div>
			<div class="opr"> 
				<span style="font-size:12px; color:#666; padding:15px 0 0 50px; float:left; ">商品名称：<{$row.title}></span> 
			</div>
			
			<div class="opr pay_list">
				<div class="name">在线支付</div>
				<div class="con">
					<{uqcms m="api" v="pay" c="alist:type=pay"}>
					<{if $pay}>
						<{foreach item=i from=$pay}>
							<div class="paybox">
								<a href="javascript:;" class="payimg" data-code="<{$i.alias}>"><{$i.svg}><span><{$i.name}></span></a>
							</div>
						<{/foreach}>
					<{else}>
						<div class=""><span>暂无支付，请先对接接口。</span></div> 
					<{/if}>
				</div>
			</div> 
		</div> 
	<{/if}>			
	</div>
</div>
</body>
</html>
<{import file="bottom.html"}>
<script type="text/javascript">
/**
<div class="opr paygobox">
	<a href="javascript:;" id="gourl" class="submit no">前往支付</a>
</div>

// 支付测试弹窗
<{if $i.alias == 'wxpay'}> <div class="wxpay_box ewmbox"><img id="wxpay_img_code" src="//weixin.uqcms.com/ajax/qrcode?size=8&amp;code=d2VpeGluOi8vd3hwYXkvYml6cGF5dXJsP3ByPXA2V2k5a1Q="><span>请使用微信扫一扫<br>扫描二维码支付</span></div><{/if}>
*/
$(function(){ 
	$("a.payimg").click(function(){
		$this = $(this); 
		index = $(".paybox a.payimg").index(this);
		$(".paybox a.payimg").removeClass('ch');
		$(".paybox a.payimg").next(".ewmbox").hide();
		$("#gourl").addClass('no').attr('href', 'javascrip:;'); 
		$this.addClass('ch'); 
		trade_no = $("#trade_no").val();
		payment = $this.attr('data-code'); 
		$.post(URI+'ajax/pay', {trade_no:trade_no, payment:payment}, function(result){
			data = jQuery.parseJSON(result);
			if(data.type == 'link'){
				$(".paygobox").remove();
				html = '<div class="opr paygobox"><a href="javascript:;" id="gourl" class="submit no">前往支付</a></div>';
				$(".pay_list").after(html);
				$('#gourl').removeClass('no').attr('href', data.link).attr('data-type', 'online').html('前往支付'); 
			}else if(data.type == 'code'){ 	// 二维码支付，弹出二维码 
				$(".paygobox").remove();
				html = '<div class="wxpay_box ewmbox">'+
							'<img id="wxpay_img_code" src="aa.jpg"/>'+
							'<span>请使用微信扫一扫<br>扫描二维码支付</span>'+
						'</div>';
				$this.after(html).next(".ewmbox").show();
				img_url = URI+'ajax/qrcode?size=8&code='+data.code;
				$('#wxpay_img_code').attr('src', img_url);
				$('#gourl').html('等待支付'); 
			}else{
				$(".paygobox").remove();
				$.alert(data.msg);
			}
		}); 
	});
	
	$("#gourl").click(function(){
		pay_type = $(this).attr('data-type'); 
		if(pay_type == 'balance'){		// 余额操作
			var trade_no = $("#trade_no").val();
			$.post(URI+'notice/balance_pay', {trade_no:trade_no}, function(result){
				data = jQuery.parseJSON(result); 
				if(data.error == '0'){ 
					$.alert('支付成功');
				}else{
					$.alert(data.msg);
				}
			}); 
		}
	});
	
});

<{if $row.error == '0'}> 
/*获取账户的支付状态*/
function aa(){
	$.get("<{$__URI__}>notice/check_pay_status?trade_no=<{$row.trade_no}>", function(result){ 
		data = jQuery.parseJSON(result); 
		if(data.error == '0'){
			alert('支付成功,正在跳转...');
			if(data.pay_type == '1'){
				window.location.href=URI+"order/index";
			}else if(data.pay_type == '2'){
				window.location.href=URI+"account/index";
			}else{
				window.location.href=URI+"order/index";
			}
		}
	}); 
}
// 检测是否支付
setInterval("aa()", 2000); 
<{/if}> 
/*三分钟当前二维码失效, 刷新当前页面即可*/
setInterval(function(){
	location.reload();
}, 180000);
</script>