<!VDNDOC "PageBase":"nvo_wxpay","IniEvent":"PageIni">
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>支付</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			.mui-bar {
				height: 55px;
				top: 0px;
			}
			
			.mui-btn {
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<div id="dcontent" class="mui-content">
			<div class="mui-content-padded">
				<p style="text-indent: 22px;">本例演示如何通过公众平台实现在线支付，包括微信及支付宝支付，这是一个简化的业务流程：</p>
				<p>1、点击【提交订单】后台形成订单到本系统中</p>
				<p>2、选择微信或支付宝支付</p>
				<p>2、调用对应支付函数完成前台支付</p>
				<p>3、后台异步接收支付通知进行验证</p>
				<p>4、跳转到支付完成页面</p>
				<p>5、发送微信模板消息通知用户支付成功</p>
				<p>其中涉及到的包括前台的wx.config、chooseWXPay函数及后台与微信、支付宝交互、异步支付通知验证等操作VDN在都封装好，只需要简单的调用即可</p>

			</div>
				<div class="mui-content-padded">
					<form id='form1' method="post">
					<div class="mui-input-row">
						<label>订单号：</label>
						<input name="t_no" id="t_no" type="text" class="mui-input-clear" placeholder="请输入订单号" readonly="readonly" />
					</div>
					<div class="mui-input-row">
						<label>品&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
						<select id="d_goods" name="d_goods">
							<option value="烟台大樱桃">烟台大樱桃</option>
							<option value="烟台苹果">烟台苹果</option>
							<option value="莱阳梨">莱阳梨</option>
							<option value="潍坊萝卜">潍坊萝卜</option>
						</select>
					</div>
					<div class="mui-input-row">
						<label>金额(元)：</label>
						<input name="t_fee" id="t_fee" type="text" value="0.01" readonly="readonly" />

					</div>
					<div class="mui-button-row">
						<button name="b_pay_1" id="b_pay_1" class="mui-btn mui-btn-block mui-btn-primary">提交订单</button>
					</div>
					</form>
					<div class="mui-button-row">
						<button name="b_pay_2" id="b_pay_2" class="mui-btn mui-btn-block  mui-btn-red">提交订单(Ajax)</button>
					</div>
				</div>
			
		</div>
	</body>
	<script src="js/jweixin-1.2.0.js"></script>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="js/vdn.js"></script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		//===========================以下代码只有方式二 Ajax提交是才需要=============================
		//===========================微信SDK初始化==================================
		var config_ok = true;
		<!--INCLUDE:wx_config;JS-->
		wx.error(function(err) {
			config_ok = false;
			alert("wx config error:" + err.errMsg);
		});
		wx.ready(function() {

		})
		//===========================支付=======================================
		$("#b_pay_2").click(function() {
				mui("#b_pay_2").button('loading');
				vdn.submit("form1", {
						"method": "nvo_wxpay.createbill",
					}, function(data) {
						var result = eval('(' +data.Result +')');
						wx.chooseWXPay({
							timestamp: result.timestamp, 
							nonceStr: result.nonceStr, 
							package: result.package, 
							signType: result.signType,
							paySign: result.paySign, 
							success: function(res) {
								// 支付成功进行跳转
								$(location).prop('href', "pay_result.html?id=" + result.id );
								
							},
							fail: function(err) {
								alert(err.errMsg);
							}
						});
						mui("#b_pay_2").button('reset');
					},
					function(err) {
						mui.toast(err.Message + "(" + err.Code.toString() + ")");
						mui("#b_pay_2").button('reset');
					}
				);
		});
	</script>

</html>