Ver código fonte

微信支付页面演示

小柒2012 7 anos atrás
pai
commit
c5b98f0ce3

+ 6 - 0
src/main/java/com/itstyle/modules/weixinpay/controller/WeixinPayController.java

@@ -30,6 +30,12 @@ import com.itstyle.modules.weixinpay.util.XMLUtil;
 @RequestMapping(value = "weixin")
 public class WeixinPayController {
 	private static final Logger logger = LoggerFactory.getLogger(WeixinPayController.class);
+	
+	@RequestMapping("/index")
+    public String   index() {
+        return "weixinpay/index";
+    }
+	
 	/**
 	 * 支付后台回调
 	 * @Author  科帮网

+ 2 - 0
src/main/resources/application-dev.properties

@@ -27,3 +27,5 @@ spring.thymeleaf.template.cache=false
 spring.mvc.static-path-pattern=/**
 # \u4fee\u6539\u9ed8\u8ba4\u7684\u9759\u6001\u5bfb\u5740\u8d44\u6e90\u76ee\u5f55
 spring.resources.static-locations = classpath:/templates/,classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/
+
+

+ 2 - 2
src/main/resources/templates/alipay/index.html

@@ -4,11 +4,11 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
 <link rel="stylesheet" th:href="@{/alipay/css/alipay.css}" />
-<title>支付宝电脑网站支付</title>
+<title>支付宝支付</title>
 </head>
 <body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=5>
 	<header class="am-header">
-	<h1>支付宝电脑网站支付体验入口页</h1>
+	<h1>支付宝支付体验入口页</h1>
 	</header>
 	<div id="main">
 		<div id="tabhead" class="tab-head">

+ 7 - 7
src/main/resources/templates/index.html

@@ -2,14 +2,14 @@
 <!-- 哈哈哈 我是个天才 -->
 <html xmlns:th="http://www.thymeleaf.org">
 <head lang="en">
-    <meta charset="UTF-8" />
-    <title></title>
+<meta charset="UTF-8" />
+<title></title>
 </head>
 <body>
-<div style="text-align:center">
-    <a th:href="@{/alipay/index}" >阿里支付</a>
-    <a th:href="@{/weixin/index}" >微信支付</a>
-    <a th:href="@{/alipay/index}" >银联支付</a>
-</div>
+	<div style="text-align: center">
+		<a th:href="@{/alipay/index}">阿里支付</a> 
+		<a th:href="@{/weixin/index}">微信支付</a>
+		<a th:href="@{/alipay/index}">银联支付</a>
+	</div>
 </body>
 </html>

+ 183 - 0
src/main/resources/templates/weixinpay/css/weixinpay.css

@@ -0,0 +1,183 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+
+ul, ol {
+	list-style: none;
+}
+
+body {
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
+		sans-serif;
+}
+
+.tab-head {
+	margin-left: 120px;
+	margin-bottom: 10px;
+}
+
+.tab-content {
+	clear: left;
+	display: none;
+}
+
+h2 {
+	border-bottom: solid #1faf0b 2px;
+	width: 200px;
+	height: 25px;
+	margin: 0;
+	float: left;
+	text-align: center;
+	font-size: 16px;
+}
+
+.selected {
+	color: #FFFFFF;
+	background-color: #1faf0b;
+}
+
+.show {
+	clear: left;
+	display: block;
+}
+
+.hidden {
+	display: none;
+}
+
+.new-btn-login-sp {
+	padding: 1px;
+	display: inline-block;
+	width: 75%;
+}
+
+.new-btn-login {
+	background-color: #1faf0b;
+	color: #FFFFFF;
+	font-weight: bold;
+	border: none;
+	width: 100%;
+	height: 30px;
+	border-radius: 5px;
+	font-size: 16px;
+}
+
+#main {
+	width: 100%;
+	margin: 0 auto;
+	font-size: 14px;
+}
+
+.red-star {
+	color: #f00;
+	width: 10px;
+	display: inline-block;
+}
+
+.null-star {
+	color: #fff;
+}
+
+.content {
+	margin-top: 5px;
+}
+
+.content dt {
+	width: 100px;
+	display: inline-block;
+	float: left;
+	margin-left: 20px;
+	color: #666;
+	font-size: 13px;
+	margin-top: 8px;
+}
+
+.content dd {
+	margin-left: 120px;
+	margin-bottom: 5px;
+}
+
+.content dd input {
+	width: 85%;
+	height: 28px;
+	border: 0;
+	-webkit-border-radius: 0;
+	-webkit-appearance: none;
+}
+
+#foot {
+	margin-top: 10px;
+	position: absolute;
+	bottom: 15px;
+	width: 100%;
+}
+
+.foot-ul {
+	width: 100%;
+}
+
+.foot-ul li {
+	width: 100%;
+	text-align: center;
+	color: #666;
+}
+
+.note-help {
+	color: #999999;
+	font-size: 12px;
+	line-height: 130%;
+	margin-top: 5px;
+	width: 100%;
+	display: block;
+}
+
+#btn-dd {
+	margin: 20px;
+	text-align: center;
+}
+
+.foot-ul {
+	width: 100%;
+}
+
+.one_line {
+	display: block;
+	height: 1px;
+	border: 0;
+	border-top: 1px solid #eeeeee;
+	width: 100%;
+	margin-left: 20px;
+}
+
+.am-header {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: box;
+	width: 100%;
+	position: relative;
+	padding: 7px 0;
+	-webkit-box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	box-sizing: border-box;
+	background: #1D222D;
+	height: 50px;
+	text-align: center;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	box-pack: center;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	box-align: center;
+}
+
+.am-header h1 {
+	-webkit-box-flex: 1;
+	-ms-flex: 1;
+	box-flex: 1;
+	line-height: 18px;
+	text-align: center;
+	font-size: 18px;
+	font-weight: 300;
+	color: #fff;
+}

+ 252 - 0
src/main/resources/templates/weixinpay/index.html

@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<!-- 哈哈哈 我是个天才 -->
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
+<link rel="stylesheet" th:href="@{/weixinpay/css/weixinpay.css}" />
+<title>微信支付</title>
+</head>
+<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=5>
+	<header class="am-header">
+	<h1>微信支付付体验入口页</h1>
+	</header>
+	<div id="main">
+		<div id="tabhead" class="tab-head">
+			<h2 id="tab1" class="selected" name="tab">付 款</h2>
+			<h2 id="tab2" name="tab">交 易 查 询</h2>
+			<h2 id="tab3" name="tab">退 款</h2>
+			<h2 id="tab4" name="tab">退 款 查 询</h2>
+			<h2 id="tab5" name="tab">交 易 关 闭</h2>
+			<h2 id="tab6" name="tab">扫码支付</h2>
+		</div>
+		<form name=alipayment action=pcPay method=post
+			target="_blank">
+			<div id="body1" class="show" name="divcontent">
+				<dl class="content">
+					<dt>商户订单号 :</dt>
+					<dd>
+						<input id="WIDout_trade_no" name="outTradeNo" />
+					</dd>
+					<hr class="one_line">
+					<dt>订单名称 :</dt>
+					<dd>
+						<input id="WIDsubject" name="subject" />
+					</dd>
+					<hr class="one_line">
+					<dt>付款金额 :</dt>
+					<dd>
+						<input id="WIDtotal_amount" name="totalFee" />
+					</dd>
+					<hr class="one_line">
+					<dt>商品描述:</dt>
+					<dd>
+						<input id="WIDbody" name="body" />
+					</dd>
+					<hr class="one_line">
+					<dt></dt>
+					<dd id="btn-dd">
+						<span class="new-btn-login-sp">
+							<button class="new-btn-login" type="submit"
+								style="text-align: center;">付 款</button>
+						</span> <span class="note-help">如果您点击“付款”按钮,即表示您同意该次的执行操作。</span>
+					</dd>
+				</dl>
+			</div>
+		</form>
+		<form name=tradequery action=alipay.trade.query.jsp method=post
+			target="_blank">
+			<div id="body2" class="tab-content" name="divcontent">
+				<dl class="content">
+					<dt>商户订单号 :</dt>
+					<dd>
+						<input id="WIDTQout_trade_no" name="WIDTQout_trade_no" />
+					</dd>
+					<hr class="one_line">
+					<dt>支付宝交易号 :</dt>
+					<dd>
+						<input id="WIDTQtrade_no" name="WIDTQtrade_no" />
+					</dd>
+					<hr class="one_line">
+					<dt></dt>
+					<dd id="btn-dd">
+						<span class="new-btn-login-sp">
+							<button class="new-btn-login" type="submit"
+								style="text-align: center;">交 易 查 询</button>
+						</span> <span class="note-help">商户订单号与支付宝交易号二选一,如果您点击“交易查询”按钮,即表示您同意该次的执行操作。</span>
+					</dd>
+				</dl>
+			</div>
+		</form>
+		<form name=traderefund action=alipay.trade.refund.jsp method=post
+			target="_blank">
+			<div id="body3" class="tab-content" name="divcontent">
+				<dl class="content">
+					<dt>商户订单号 :</dt>
+					<dd>
+						<input id="WIDTRout_trade_no" name="WIDTRout_trade_no" />
+					</dd>
+					<hr class="one_line">
+					<dt>支付宝交易号 :</dt>
+					<dd>
+						<input id="WIDTRtrade_no" name="WIDTRtrade_no" />
+					</dd>
+					<hr class="one_line">
+					<dt>退款金额 :</dt>
+					<dd>
+						<input id="WIDTRrefund_amount" name="WIDTRrefund_amount" />
+					</dd>
+					<hr class="one_line">
+					<dt>退款原因 :</dt>
+					<dd>
+						<input id="WIDTRrefund_reason" name="WIDTRrefund_reason" />
+					</dd>
+					<hr class="one_line">
+					<dt>退款请求号 :</dt>
+					<dd>
+						<input id="WIDTRout_request_no" name="WIDTRout_request_no" />
+					</dd>
+					<hr class="one_line">
+					<dt></dt>
+					<dd id="btn-dd">
+						<span class="new-btn-login-sp">
+							<button class="new-btn-login" type="submit"
+								style="text-align: center;">退 款</button>
+						</span> <span class="note-help">商户订单号与支付宝交易号二选一,如果您点击“退款”按钮,即表示您同意该次的执行操作。</span>
+					</dd>
+				</dl>
+			</div>
+		</form>
+		<form name=traderefundquery
+			action=alipay.trade.fastpay.refund.query.jsp method=post
+			target="_blank">
+			<div id="body4" class="tab-content" name="divcontent">
+				<dl class="content">
+					<dt>商户订单号 :</dt>
+					<dd>
+						<input id="WIDRQout_trade_no" name="WIDRQout_trade_no" />
+					</dd>
+					<hr class="one_line">
+					<dt>支付宝交易号 :</dt>
+					<dd>
+						<input id="WIDRQtrade_no" name="WIDRQtrade_no" />
+					</dd>
+					<hr class="one_line">
+					<dt>退款请求号 :</dt>
+					<dd>
+						<input id="WIDRQout_request_no" name="WIDRQout_request_no" />
+					</dd>
+					<hr class="one_line">
+					<dt></dt>
+					<dd id="btn-dd">
+						<span class="new-btn-login-sp">
+							<button class="new-btn-login" type="submit"
+								style="text-align: center;">退 款 查 询</button>
+						</span> <span class="note-help">商户订单号与支付宝交易号二选一,如果您点击“退款查询”按钮,即表示您同意该次的执行操作。</span>
+					</dd>
+				</dl>
+			</div>
+		</form>
+		<form name=tradeclose action=alipay.trade.close.jsp method=post
+			target="_blank">
+			<div id="body5" class="tab-content" name="divcontent">
+				<dl class="content">
+					<dt>商户订单号 :</dt>
+					<dd>
+						<input id="WIDTCout_trade_no" name="WIDTCout_trade_no" />
+					</dd>
+					<hr class="one_line">
+					<dt>支付宝交易号 :</dt>
+					<dd>
+						<input id="WIDTCtrade_no" name="WIDTCtrade_no" />
+					</dd>
+					<hr class="one_line">
+					<dt></dt>
+					<dd id="btn-dd">
+						<span class="new-btn-login-sp">
+							<button class="new-btn-login" type="submit"
+								style="text-align: center;">交 易 关 闭</button>
+						</span> <span class="note-help">商户订单号与支付宝交易号二选一,如果您点击“交易关闭”按钮,即表示您同意该次的执行操作。</span>
+					</dd>
+				</dl>
+			</div>
+		</form>
+		<form name=alipayqc  method=post
+			target="_blank">
+			<div id="body6"  class="tab-content" name="divcontent">
+				<dl class="content">
+					<dt>商户订单号 :</dt>
+					<dd>
+						<input id="WIDout_trade_no" name="outTradeNo" />
+					</dd>
+					<hr class="one_line">
+					<dt>订单名称 :</dt>
+					<dd>
+						<input id="WIDsubject" name="subject" />
+					</dd>
+					<hr class="one_line">
+					<dt>付款金额 :</dt>
+					<dd>
+						<input id="WIDtotal_amount" name="totalFee" />
+					</dd>
+					<hr class="one_line">
+					<dt>商品描述:</dt>
+					<dd>
+						<input id="WIDbody" name="body" />
+					</dd>
+					<hr class="one_line">
+					<dt></dt>
+					<dd id="btn-dd">
+						<span class="new-btn-login-sp">
+							<button class="new-btn-login" type="submit"
+								style="text-align: center;">付 款</button>
+						</span> <span class="note-help">如果您点击“付款”按钮,即表示您同意该次的执行操作。</span>
+					</dd>
+				</dl>
+			</div>
+		</form>
+		<div id="foot">
+			<ul class="foot-ul">
+				<li>微信版权所有 2015-2018 ALIPAY.COM</li>
+			</ul>
+		</div>
+	</div>
+</body>
+<script language="javascript">
+	var tabs = document.getElementsByName('tab');
+	var contents = document.getElementsByName('divcontent');
+	
+	(function changeTab(tab) {
+	    for(var i = 0, len = tabs.length; i < len; i++) {
+	        tabs[i].onmouseover = showTab;
+	    }
+	})();
+	
+	function showTab() {
+	    for(var i = 0, len = tabs.length; i < len; i++) {
+	        if(tabs[i] === this) {
+	            tabs[i].className = 'selected';
+	            contents[i].className = 'show';
+	        } else {
+	            tabs[i].className = '';
+	            contents[i].className = 'tab-content';
+	        }
+	    }
+	}
+	
+	function GetDateNow() {
+		var vNow = new Date();
+		var sNow = "";
+		sNow += String(vNow.getFullYear());
+		sNow += String(vNow.getMonth() + 1);
+		sNow += String(vNow.getDate());
+		sNow += String(vNow.getHours());
+		sNow += String(vNow.getMinutes());
+		sNow += String(vNow.getSeconds());
+		sNow += String(vNow.getMilliseconds());
+		document.getElementById("WIDout_trade_no").value =  sNow;
+		document.getElementById("WIDsubject").value = "科帮网测试支付";
+		document.getElementById("WIDtotal_amount").value = "100";
+	}
+	GetDateNow();
+</script>
+</html>

+ 11 - 0
src/main/resources/templates/weixinpay/pay.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<!-- 哈哈哈 我是个天才 -->
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
+<title>支付宝电脑网站支付</title>
+</head>
+<body th:utext=${form}>
+	电脑支付
+</body>
+</html>