master

分支 (1)

管理

管理

master

jywhweixin_web
/
pay.html

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/app.css" />

		<style type="text/css">
			.mui-content>.mui-card:first-child {
				margin-top: 6px;
			}

			.mui-row .hmx-test-xs {
				padding-left: 56px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-card mui-hidden">
				<div class="mui-row">
					<div class="mui-col-xs-3 mui-text-center">
						<img src="img/mine_avatar.png" style="width: 60px;height: 60px;" />
					</div>
					<div class="mui-col-xs-9 hmx-text-darkgray" style="line-height: 65px;margin: 0;">
						张某某
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-row hmx-text-md">
					购买：
					<span id="specialName">
						专辑名称
					</span> -
					<span id="author">
						歌手名
					</span>
				</div>

				<div id="audiosList">

				</div>

				<!--<div class="mui-row">
					<span class="hmx-test-xs">
						01.歌曲名
					</span>
				</div>
				<div class="mui-row">
					<span class="hmx-test-xs">
						02.歌曲名
					</span>
				</div>-->
				<div class="mui-row">
					<hr />
				</div>
				<div class="mui-row hmx-text-md">
					价格：
					<span class="hmx-text-orange">
						￥
					</span>
					<span id="unitPrice" class="hmx-text-orange">
						0.00
					</span>
					<span class="hmx-text-orange">
						元
					</span>
				</div>
			</div>

			<button type="button" class="mui-btn mui-btn-block hmx-btn-orange hmx-btn-lg" style="margin: 60px 12px 0 12px;width: -webkit-calc(100% - 24px);letter-spacing: 0;">微信支付</button>
		</div>
		<script src='js/jquery-2.1.4.min.js'></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			var row = JSON.parse(window.sessionStorage.getItem("$row"));
			debugger;
			$(function() {
				initUI(row);
				alert($.getContextPath());
				$.ajax({
					type: "get",
					url: $.getContextPath() + "/weixin/wxpay/getWeixinConfig",
					async: true,
					success: function(r) {
						//						alert(JSON.stringify(r));
						wx.config({
							debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: r.appId, // 必填，公众号的唯一标识
							timestamp: r.timestamp, // 必填，生成签名的时间戳
							nonceStr: r.nonceStr, // 必填，生成签名的随机串
							signature: r.signature, // 必填，签名，见附录1
							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						});
						// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
					},
					error: function(a, b, c) {
						console.log(a.status);
						console.log(c.readyState);
						console.log(b);
						alert(a.status + " " + b + " " + c.readyState);
					}
				});
			});

			wx.ready(function() {
				$.ajax({
					type: "get",
					url: $.getContextPath() + "/weixin/wxpay/getJSSDKPayInfo",
					async: true,
					data: {
						//						openid: 'oWLepv2wvJsurFt5_dnGbmeq95Y8',
						//						total_fee: 1,
						specialId: row['specialId'],
					},
					success: function(r) {
						//						alert(row['specialId']+"^^^^^^^^^");
						//						alert(JSON.stringify(r));
						if(r.result == true) {
							alert('wx.chooseWXPay start');
							wx.chooseWXPay({
								//									appId: payConfigObject.Client_appId,
								timestamp: r.datum.timeStamp,
								nonceStr: r.datum.nonceStr,
								package: r.datum.package,
								signType: r.datum.signType,
								paySign: r.datum.paySign,
								success: function(res) {
									alert('订阅成功！');
//									window.history.go(1 - window.history.length);
									window.history.go(-2);
								},
								cancel: function(res) {
									alert(JSON.stringify(res));
								}
							});
							//							alert('wx.chooseWXPay end');
						} else {
							alert('请稍后再试~');
						}

					},
					error: function(a, b, c) {
						console.log(a.status);
						console.log(c.readyState);
						console.log(b);
						alert(a.status + " " + b + " " + c.readyState);
					}
				});

			});

			function initUI(r) {
				$('#specialName').html(r['specialName']);
				$('#author').html(r['author']);
				$('#unitPrice').html(r['unitPrice']);
				getAudios(r['specialId']);

			};

			function getAudios(specialId) {
				$('#audiosList').UIListView({
					//					dataUrl 'http://jwangkun.vicp.net/jywhweixin/weixin/front_index/latest',
					dataUrl: "data/front_index/audios.json",
					itemTplUrl: "tpl/payAudiosListItem.tpl",
					queryData: {
						specialId: specialId
					},
				});
			};
		</script>
	</body>

</html>