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 1 <!DOCTYPE html>
2 2 <html lang="en">
3 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 50 </head>
51 51  
52 52 <body ontouchstart>
53 53 <input type="hidden" id="parkOrderId" value="${parkOrderId!''}"/>
54 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 61 </div>
62 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 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 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 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 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 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 99 </div>
99   - </div>
100 100  
101 101 </div>
102 102  
103 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 115 </div>
116 116  
117 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 119 </div>
120 120  
121 121  
... ... @@ -124,134 +124,156 @@
124 124 <script src="${staticHost}/js/jsutil.js"></script>
125 125 <script src="${staticHost}/js/url.js"></script>
126 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 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 278 </script>
257 279 </body>
... ...