BJ_ZTEITS-Developers / zteits-rnt-wx

Commit 1a8665415ed3be44f5a2e612bac05a84ae829589

Authored by atao
1 parent 07a50221

提交代码

Inline Side-by-side
Showing 1 changed file with 222 additions and 200 deletions
src/main/webapp/WEB-INF/pages/pay.html
  View file @1a86654
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 - <meta charset="UTF-8">  
5 - <title>支付</title>  
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
7 - <meta name="format-detection" content="telephone=no"/>  
8 - <meta name="format-detection" content="email=no"/>  
9 - <meta name="apple-mobile-web-app-status-bar-style" content="black"/>  
10 - <meta name="apple-mobile-web-app-capable" content="yes"/>  
11 - <meta name="apple-mobile-web-app-title" content="">  
12 - <meta name="google" value="notranslate"><!-- 禁止Chrome 浏览器中自动提示翻译 -->  
13 - <link rel="apple-touch-icon-precomposed" href="favicon.ico">  
14 - <link rel="shortcut icon" href="favicon.ico">  
15 - <link rel="Bookmark" href="favicon.ico">  
16 -  
17 - <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">  
18 - <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">  
19 - <link rel="stylesheet" href="${staticHost}/css/reset.css">  
20 - <link rel="stylesheet" href="${staticHost}/css/card.css?v=1.0">  
21 - <style>  
22 - .checked_icon {  
23 - width: 20px;  
24 - height: 20px;  
25 - background: url("${staticHost}/img/checked_icon.png");  
26 - background-size: 100% 100%;  
27 - } 4 + <meta charset="UTF-8">
  5 + <title>支付</title>
  6 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  7 + <meta name="format-detection" content="telephone=no"/>
  8 + <meta name="format-detection" content="email=no"/>
  9 + <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  10 + <meta name="apple-mobile-web-app-capable" content="yes"/>
  11 + <meta name="apple-mobile-web-app-title" content="">
  12 + <meta name="google" value="notranslate"><!-- 禁止Chrome 浏览器中自动提示翻译 -->
  13 + <link rel="apple-touch-icon-precomposed" href="favicon.ico">
  14 + <link rel="shortcut icon" href="favicon.ico">
  15 + <link rel="Bookmark" href="favicon.ico">
  16 +
  17 + <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
  18 + <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
  19 + <link rel="stylesheet" href="${staticHost}/css/reset.css">
  20 + <link rel="stylesheet" href="${staticHost}/css/card.css?v=1.0">
  21 + <style>
  22 + .checked_icon {
  23 + width: 20px;
  24 + height: 20px;
  25 + background: url("${staticHost}/img/checked_icon.png");
  26 + background-size: 100% 100%;
  27 + }
28 28
29 - .weixin_icon {  
30 - margin-right: 10px;  
31 - width: 20px;  
32 - height: 20px;  
33 - background: url("${staticHost}/img/weixin_pay.png");  
34 - background-size: 100% 100%;  
35 - } 29 + .weixin_icon {
  30 + margin-right: 10px;
  31 + width: 20px;
  32 + height: 20px;
  33 + background: url("${staticHost}/img/weixin_pay.png");
  34 + background-size: 100% 100%;
  35 + }
36 36
37 - .all_told, .platen_number {  
38 - text-align: center;  
39 - } 37 + .all_told, .platen_number {
  38 + text-align: center;
  39 + }
40 40
41 - .all_told {  
42 - padding: 30px 0 10px 0;  
43 - } 41 + .all_told {
  42 + padding: 30px 0 10px 0;
  43 + }
44 44
45 - .all_told span {  
46 - margin-right: 5px;  
47 - font-size: 22px;  
48 - }  
49 - </style> 45 + .all_told span {
  46 + margin-right: 5px;
  47 + font-size: 22px;
  48 + }
  49 + </style>
50 </head> 50 </head>
51 51
52 <body ontouchstart> 52 <body ontouchstart>
53 <input type="hidden" id="parkOrderId" value="${parkOrderId!''}"/> 53 <input type="hidden" id="parkOrderId" value="${parkOrderId!''}"/>
54 <div class="weui-panel__bd card-top"> 54 <div class="weui-panel__bd card-top">
55 - <input type="hidden" id="orderId" value=""/>  
56 - <div class="weui-media-box weui-media-box_text weui-media-box-border card-park">  
57 - <h4 class="weui-media-box__title park-tit" id="parkLotName"></h4>  
58 - <p class="weui-media-box__desc park-desc" id="parkLotAddress"></p>  
59 - </div>  
60 - <div class="park-bg"></div> 55 + <input type="hidden" id="orderId" value=""/>
  56 + <div class="weui-media-box weui-media-box_text weui-media-box-border card-park">
  57 + <h4 class="weui-media-box__title park-tit" id="parkLotName"></h4>
  58 + <p class="weui-media-box__desc park-desc" id="parkLotAddress"></p>
  59 + </div>
  60 + <div class="park-bg"></div>
61 </div> 61 </div>
62 <div class="weui-cells weui-cells_form" style="margin-top: 0em;"> 62 <div class="weui-cells weui-cells_form" style="margin-top: 0em;">
63 - <div class="weui-cell">  
64 - <div class="weui-cell__hd"><label for="" class="weui-label">车&nbsp;&nbsp;牌&nbsp;&nbsp;号</label></div>  
65 - <div class="weui-cell__bd" id="carNum"> 63 + <div class="weui-cell">
  64 + <div class="weui-cell__hd"><label for="" class="weui-label">车&nbsp;&nbsp;牌&nbsp;&nbsp;号</label></div>
  65 + <div class="weui-cell__bd" id="carNum">
66 66
  67 + </div>
67 </div> 68 </div>
68 - </div>  
69 - <div class="weui-cell">  
70 - <div class="weui-cell__hd"><label for="" class="weui-label">卡&nbsp;&nbsp;类&nbsp;&nbsp;型</label></div>  
71 - <div class="weui-cell__bd" id="carTypeRemark"> 69 + <div class="weui-cell">
  70 + <div class="weui-cell__hd"><label for="" class="weui-label">卡&nbsp;&nbsp;类&nbsp;&nbsp;型</label></div>
  71 + <div class="weui-cell__bd" id="carTypeRemark">
72 72
  73 + </div>
73 </div> 74 </div>
74 - </div>  
75 - <div class="weui-cell">  
76 - <div class="weui-cell__hd"><label for="" class="weui-label">订购数量</label></div>  
77 - <div class="weui-cell__bd" id="buyNum"> 75 + <div class="weui-cell">
  76 + <div class="weui-cell__hd"><label for="" class="weui-label">订购数量</label></div>
  77 + <div class="weui-cell__bd" id="buyNum">
78 78
  79 + </div>
79 </div> 80 </div>
80 - </div>  
81 - <div class="weui-cell">  
82 - <div class="weui-cell__hd"><label for="" class="weui-label">开始时间</label></div>  
83 - <div class="weui-cell__bd" id="startDate"> 81 + <div class="weui-cell">
  82 + <div class="weui-cell__hd"><label for="" class="weui-label">开始时间</label></div>
  83 + <div class="weui-cell__bd" id="startDate">
84 84
  85 + </div>
85 </div> 86 </div>
86 - </div>  
87 87
88 - <div class="weui-cell">  
89 - <div class="weui-cell__hd"><label for="" class="weui-label">有效期至</label></div>  
90 - <div class="weui-cell__bd" id="endDate"> 88 + <div class="weui-cell">
  89 + <div class="weui-cell__hd"><label for="" class="weui-label">有效期至</label></div>
  90 + <div class="weui-cell__bd" id="endDate">
91 91
  92 + </div>
92 </div> 93 </div>
93 - </div>  
94 - <div class="weui-cell">  
95 - <div class="weui-cell__hd"><label for="" class="weui-label">支付金额</label></div>  
96 - <div class="weui-cell__bd" id="totalAmount"> 94 + <div class="weui-cell">
  95 + <div class="weui-cell__hd"><label for="" class="weui-label">支付金额</label></div>
  96 + <div class="weui-cell__bd" id="totalAmount">
97 97
  98 + </div>
98 </div> 99 </div>
99 - </div>  
100 100
101 </div> 101 </div>
102 102
103 <div class="weui-cells"> 103 <div class="weui-cells">
104 - <label class="weui-cell">  
105 - <div class="weui-cell__hd weixin_icon">  
106 - </div>  
107 - <div class="weui-cell__bd">  
108 - <p>微信支付</p>  
109 - </div>  
110 - <div class="weui-cell__hd checked_icon"> 104 + <label class="weui-cell">
  105 + <div class="weui-cell__hd weixin_icon">
  106 + </div>
  107 + <div class="weui-cell__bd">
  108 + <p>微信支付</p>
  109 + </div>
  110 + <div class="weui-cell__hd checked_icon">
111 111
112 - </div>  
113 - </label> 112 + </div>
  113 + </label>
114 114
115 </div> 115 </div>
116 116
117 <div class="pay-content-padded"> 117 <div class="pay-content-padded">
118 - <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定支付</a> 118 + <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定支付</a>
119 </div> 119 </div>
120 120
121 121
@@ -124,134 +124,156 @@ @@ -124,134 +124,156 @@
124 <script src="${staticHost}/js/jsutil.js"></script> 124 <script src="${staticHost}/js/jsutil.js"></script>
125 <script src="${staticHost}/js/url.js"></script> 125 <script src="${staticHost}/js/url.js"></script>
126 <script type="text/javascript"> 126 <script type="text/javascript">
127 - var totleMoney;  
128 - var func = {  
129 - //1.获取订单信息  
130 - initOrderInfo: function () {  
131 - $('#orderId').val();  
132 - $('#parkLotName').empty();  
133 - $('#parkLotAddress').empty();  
134 - $('#carNum').empty();  
135 - $('#buyNum').empty();  
136 - $('#startDate').empty();  
137 - $('#endDate').empty();  
138 - $('#totalAmount').empty();  
139 - $('#carTypeRemark').empty();  
140 -  
141 - var parkOrderId = $('#parkOrderId').val();  
142 - var jsonInfo = {};  
143 - jsonInfo.parkOrderId = parkOrderId;  
144 - if (parkOrderId != null && parkOrderId != '') {  
145 - jsutil.defaultReq(  
146 - mUrl.queryOrderForNotPay,  
147 - jsonInfo,  
148 - function (data) {  
149 - if ("8888" != data.code) {  
150 - windown.location.href = mUrl.errorView; 127 + var totleMoney;
  128 + var func = {
  129 + //1.获取订单信息
  130 + initOrderInfo: function () {
  131 + $('#orderId').val();
  132 + $('#parkLotName').empty();
  133 + $('#parkLotAddress').empty();
  134 + $('#carNum').empty();
  135 + $('#buyNum').empty();
  136 + $('#startDate').empty();
  137 + $('#endDate').empty();
  138 + $('#totalAmount').empty();
  139 + $('#carTypeRemark').empty();
  140 +
  141 + var parkOrderId = $('#parkOrderId').val();
  142 + var jsonInfo = {};
  143 + jsonInfo.parkOrderId = parkOrderId;
  144 + if (parkOrderId != null && parkOrderId != '') {
  145 + jsutil.defaultReq(
  146 + mUrl.queryOrderForNotPay,
  147 + jsonInfo,
  148 + function (data) {
  149 + if ("8888" != data.code) {
  150 + windown.location.href = mUrl.errorView;
  151 + } else {
  152 + var order = data.data;
  153 +
  154 + $('#orderId').val(order.orderId);
  155 + $('#parkLotName').text(order.parkName);
  156 + $('#parkLotAddress').text(order.parkaddress);
  157 + $('#carNum').text(order.carNum);
  158 + $('#buyNum').text(order.buyNum);
  159 + $('#startDate').text(order.startDate);
  160 + $('#endDate').text(order.endDate);
  161 + totleMoney = order.totleMoney / 100;
  162 + $('#totalAmount').text('￥' + totleMoney);
  163 +
  164 + $('#carTypeRemark').text(order.orderTypeRemark);
  165 + }
  166 + });
151 } else { 167 } else {
152 - var order = data.data;  
153 -  
154 - $('#orderId').val(order.orderId);  
155 - $('#parkLotName').text(order.parkName);  
156 - $('#parkLotAddress').text(order.parkaddress);  
157 - $('#carNum').text(order.carNum);  
158 - $('#buyNum').text(order.buyNum);  
159 - $('#startDate').text(order.startDate);  
160 - $('#endDate').text(order.endDate);  
161 - totleMoney = order.totleMoney/100;  
162 - $('#totalAmount').text('￥'+totleMoney);  
163 -  
164 - $('#carTypeRemark').text(order.orderTypeRemark); 168 + windown.location.href = mUrl.errorView;
165 } 169 }
166 - });  
167 - } else {  
168 - windown.location.href = mUrl.errorView;  
169 - }  
170 170
171 - }  
172 - };  
173 -  
174 - $(function () {  
175 - func.initOrderInfo();  
176 - });  
177 -  
178 - var flg = true;  
179 - $("#showTooltips").click(function () {  
180 - if (flg) {  
181 - flg = false;  
182 - $('#showTooltips').attr('class', 'weui-btn weui-btn_primary weui-btn_disabled');  
183 - var parkOrderId = $('#parkOrderId').val();  
184 - if (parkOrderId.length < 1) {  
185 - $.toptip("亲!订单Id为空", 2000, "error");  
186 - $('#showTooltips').attr('class', 'weui-btn weui-btn_primary');  
187 - flg = true;  
188 - return false;  
189 - }  
190 - var req = {  
191 - orderId: parkOrderId  
192 - }  
193 -  
194 - $.ajax({  
195 - url: mUrl.getJSPayParam,  
196 - type: 'post',  
197 - dataType: 'json',  
198 - data: req,  
199 - success: function (res) {  
200 - if (res.code == '8888') {  
201 - var payParam = res.data;  
202 - console.log(payParam);  
203 - //调用微信支付  
204 - callpay(payParam);  
205 - } else {  
206 - $.toptip(res.msg, 2000, "error");  
207 - $('#showTooltips').attr('class', 'weui-btn weui-btn_primary');  
208 - flg = true;  
209 - console.log('详细错误信息为:' + res.data);  
210 - }  
211 } 171 }
212 - });  
213 - }//IF  
214 - });  
215 -  
216 - //调用微信JS api 支付  
217 - function jsApiCall(payParam) {  
218 - WeixinJSBridge.invoke(  
219 - 'getBrandWCPayRequest',  
220 - JSON.parse(payParam),  
221 - function (res) {  
222 -  
223 - if (res.err_msg == "get_brand_wcpay_request:ok") {  
224 - //$.alert("亲!支付成功!");  
225 - //支付成功  
226 - window.location.href = mUrl.paySuccessView + '&payMoney=' + totleMoney; 172 + };
  173 +
  174 + $(function () {
  175 + func.initOrderInfo();
  176 + });
  177 +
  178 + var flg = true;
  179 + $("#showTooltips").click(function () {
  180 + if (flg) {
  181 + flg = false;
  182 + $('#showTooltips').attr('class', 'weui-btn weui-btn_primary weui-btn_disabled');
  183 + var parkOrderId = $('#parkOrderId').val();
  184 + if (parkOrderId.length < 1) {
  185 + $.toptip("亲!订单Id为空", 2000, "error");
  186 + $('#showTooltips').attr('class', 'weui-btn weui-btn_primary');
  187 + flg = true;
  188 + return false;
  189 + }
  190 + var req = {
  191 + orderId: parkOrderId
  192 + }
227 193
228 - } else {  
229 - $('#showTooltips').attr('class', 'weui-btn weui-btn_primary');  
230 - flg = true;  
231 - //支付失败  
232 - $.alert('亲!支付失败了!');  
233 - //$.alert('亲!支付失败了 '+JSON.stringify(res));  
234 - //windows.location.href='${host}/pay/payFail'; 194 + $.ajax({
  195 + url: mUrl.getJSPayParam,
  196 + type: 'post',
  197 + dataType: 'json',
  198 + data: req,
  199 + success: function (res) {
  200 + if (res.code == '8888') {
  201 + var payParam = res.data;
  202 + console.log(payParam);
  203 + //调用微信支付
  204 + callpay(payParam);
  205 + } else {
  206 + $.toptip(res.msg, 2000, "error");
  207 + $('#showTooltips').attr('class', 'weui-btn weui-btn_primary');
  208 + flg = true;
  209 + console.log('详细错误信息为:' + res.data);
  210 + }
  211 + }
  212 + });
  213 + }//IF
  214 + });
  215 +
  216 + //调用微信JS api 支付
  217 + function jsApiCall(payParam) {
  218 + WeixinJSBridge.invoke(
  219 + 'getBrandWCPayRequest',
  220 + JSON.parse(payParam),
  221 + function (res) {
  222 +
  223 + if (res.err_msg == "get_brand_wcpay_request:ok") {
  224 + //$.alert("亲!支付成功!");
  225 + //支付成功
  226 + //调用后台，通知抬杆放行
  227 + passHandrail();
  228 + window.location.href = mUrl.paySuccessView + '&payMoney=' + totleMoney;
  229 +
  230 + } else {
  231 + $('#showTooltips').attr('class', 'weui-btn weui-btn_primary');
  232 + flg = true;
  233 + //支付失败
  234 + $.alert('亲!支付失败了!');
  235 + //$.alert('亲!支付失败了 '+JSON.stringify(res));
  236 + //windows.location.href='${host}/pay/payFail';
  237 +
  238 + }
  239 +
  240 +
  241 + }
  242 + );
  243 + }
235 244
  245 + //支付成功后，调用此函数通知抬杆
  246 + function passHandrail() {
  247 + var orderId = $('#parkOrderId').val();
  248 + var req = {
  249 + orderId: orderId
236 } 250 }
237 251
  252 + $.ajax({
  253 + url: mUrl.passHandrail,
  254 + type: 'post',
  255 + dataType: 'json',
  256 + data: req,
  257 + success: function (res) {
  258 + console.log(res);
  259 + }
  260 + })
  261 +
  262 + }
  263 +
238 264
239 - }  
240 - );  
241 - }  
242 -  
243 - function callpay(payParam) {  
244 - if (typeof WeixinJSBridge == "undefined") {  
245 - if (document.addEventListener) {  
246 - document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);  
247 - } else if (document.attachEvent) {  
248 - document.attachEvent('WeixinJSBridgeReady', jsApiCall);  
249 - document.attachEvent('onWeixinJSBridgeReady', jsApiCall);  
250 - }  
251 - } else {  
252 - jsApiCall(payParam); 265 + function callpay(payParam) {
  266 + if (typeof WeixinJSBridge == "undefined") {
  267 + if (document.addEventListener) {
  268 + document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
  269 + } else if (document.attachEvent) {
  270 + document.attachEvent('WeixinJSBridgeReady', jsApiCall);
  271 + document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
  272 + }
  273 + } else {
  274 + jsApiCall(payParam);
  275 + }
253 } 276 }
254 - }  
255 277
256 </script> 278 </script>
257 </body> 279 </body>