BJ_ZTEITS-Developers / zteits-rnt-wx

Blame view

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