master

分支 (1)

管理

管理

master

go-game-client
/
orderlist.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢乐豆记录</title>
		<script src="js/jquery-1.9.1.min.js"></script>

		<!-- 引入jquery-ui插件 -->
		<link rel="stylesheet" type="text/css" href="plugins/jquery-ui.min.css"/>
		<script type="text/javascript" src="plugins/jquery-ui-1.9.2.custom.min.js"></script>


		<script>
			//页面加载时触发
			$(function(){
				//查询订单记录的接口
				queryOrderList();
			});

			//查询充值订单列表
			function queryOrderList(){

				//获取当前登录用户id
				var uid = localStorage.getItem("uid");

				$.ajax({
					type: "GET",
					url: "http://localhost:8080/order/list",
					data: {
						uid: uid
					},
					success: function(data){
						console.log(data);

						for(var i = 0; i < data.length; i++){
							var item = data[i];
							var html = "<tr><td>" + item.orderId + "</td> <td>"
							 + item.money + "</td> <td>"
							 + item.beanNumber + "</td> <td>"
							 + item.createTime + "</td> <td>"
							 + (item.status == 1 ? "已支付" : "<button onclick=\"goPay('" + item.orderId + "')\">去支付</button>") + "</td></tr>";

							$("#mytbody").append(html);
						}
					}
				});
			}

			/**
			 * 去支付
			 */
			var orderId = null;
			function goPay(orderid){
				orderId = orderid;
				//alert("去支付！" + orderid);

				//弹出一个支付成功的弹出框，让用户支付完成后点击
				$("#paydialog").dialog({
					title: "支付中",
					width: 400,
					height: 300
				});

				//打开一个新页签，进行支付宝支付
				window.open("http://localhost:8080/order/pay?orderid=" + orderid);
			}

			/**
			 * 支付结果的查询
			 */
			function payQuery(){
				// alert("查询支付结果的订单：" + orderId);

				//发送请求给后端，进行订单交易的查询
				$.ajax({
					type: "GET",
					url: "http://localhost:8080/pay/query",
					data: {
						orderid: orderId
					},
					success: function(data){
						//data > 0  支付成功  最新的欢乐豆数量
						//data -1 支付还未成功
						if(data > 0){
							//支付成功
							$("#paydialog").dialog("close");
							//更新浏览器保存的欢乐豆数量
							localStorage.setItem("happyBean", data);
						} else {
							//支付还未成功
							alert("交易未完成！");
						}
					}
				});

			}
		</script>
		<style>
			.body_class {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.table_class {
				width: 100%;
				text-align: center;
			}

			.table_class td{
				padding: 20px;
				border: 1px solid white;
			}

			.table_class thead tr {
				background-color: aquamarine;
			}

			.table_class tbody tr:nth-child(even) {
				background-color: #FFFFFF;
			}

			.table_class tbody tr:nth-child(odd) {
				background-color: gainsboro;
			}


		</style>
	</head>
	<body class="body_class">
		<h1>充值订单列表</h1>

		<table class="table_class">
			<thead>
				<tr>
					<td>订单号</td>
					<td>充值金额</td>
					<td>欢乐豆数量</td>
					<td>下单时间</td>
					<td>订单状态</td>
				</tr>
			</thead>
			<tbody id="mytbody">

			</tbody>
		</table>

		<!-- 支付进行中...弹出框 -->
		<div id="paydialog" style="display: none;">
			<div style="width: 100%; height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;">
				<span>正在支付.....</span>
				<button onclick="payQuery()" style="margin-top: 40px;">支付已完成</button>
			</div>
		</div>
	</body>
</html>