LeeWeiCheng
/
altob.st123
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
VM暫存
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
253 Commits
5 Branches
790KB
Tree: 1218380200
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '1218380200'
${ noResults }
altob.st123/views/payment/main_page.php

999 lines
43KB
Raw Blame History 

  1. <!DOCTYPE html>

  2. <html lang="zh-TW">

  3. <head>

  4.     <meta charset="utf-8">

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  6.     <meta name="viewport" content="width=device-width, initial-scale=1">

  7.     <meta name="description" content="">

  8.     <meta name="author" content="">

  9.     <title><?=STATION_NAME?>停車場</title>

  10.     <!-- Bootstrap Core CSS -->

  11.     <link href="<?=BOOTSTRAPS?>bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

  12.     <!-- MetisMenu CSS -->

  13.     <link href="<?=BOOTSTRAPS?>bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

  14.     <!-- Timeline CSS -->

  15.     <link href="<?=BOOTSTRAPS?>dist/css/timeline.css" rel="stylesheet">

  16.     <!-- Custom CSS -->

  17.     <link href="<?=BOOTSTRAPS?>dist/css/sb-admin-2.css" rel="stylesheet">

  18.     <!-- Morris Charts CSS -->

  19.     <link href="<?=BOOTSTRAPS?>bower_components/morrisjs/morris.css" rel="stylesheet">

  20.     <!-- Custom Fonts -->

  21.     <link href="<?=BOOTSTRAPS?>bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

  22. 

  23. </head>

  24. <body style="font-family:Microsoft JhengHei;">

  25.     <div id="wrapper">

  26.         <!-- Navigation -->

  27.         <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

  28.             <div class="navbar-header">

  29.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

  30.                     <span class="sr-only">Toggle navigation</span>

  31.                     <span class="icon-bar"></span>

  32.                     <span class="icon-bar"></span>

  33.                     <span class="icon-bar"></span>

  34.                 </button>

  35.                 <a class="navbar-brand" href=""><?=STATION_NAME?>停車場</a>

  36.             </div>

  37. 

  38.             <!-- /.navbar-top-links(左側選單) -->

  39.             <div class="navbar-default sidebar" role="navigation">

  40.                 <div class="sidebar-nav navbar-collapse">

  41.                     <ul class="nav" id="side-menu">

  42.                         <li>

  43.                             <a href="#"><i class="fa fa-user fa-fw"></i>服務項目<span class="fa arrow"></span></a>

  44.                             <ul class="nav nav-second-level">

  45. 								<li>

  46.                                     <a href="#" onclick="show_item('payment');">臨停繳費</a>

  47.                                 </li>

  48. 								<li>

  49.                                     <a href="#" onclick="show_item('car_lock');">會員鎖車</a>

  50.                                 </li>

  51.                             </ul>

  52.                             <!-- /.nav-second-level -->

  53.                         </li>

  54.                     </ul>

  55.                 </div>

  56.                 <!-- /.sidebar-collapse -->

  57.             </div>

  58.             <!-- /.navbar-static-side -->

  59.         </nav>

  60.         <div id="page-wrapper"><?php /* 主要資料顯示區 */ ?>

  61.             <div class="row">

  62.                 <div class="col-lg-12">

  63.                     <h1 class="page-header"><?=STATION_NAME?>停車場</h1><?php /* 右側小表頭 */ ?>

  64.                 </div>

  65.                 <!-- /.col-lg-12 -->

  66.             </div>

  67.             <!-- /.row -->

  68. 

  69. 			<?php /* ----- 付款 ----- */ ?>

  70.             <div data-items="payment" class="row">

  71.                 <div class="col-lg-12">

  72.                     <div class="panel panel-default">

  73.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  74.                             臨停繳費

  75.                         </div>

  76.                         <div class="panel-body">

  77.                             <div data-rows class="row">

  78.                                 <div class="col-lg-6">

  79. 									<form id="payment_form" role="form" method="post">

  80.                                         <div class="form-group">

  81.                                             <label>車牌號碼</label>

  82. 											<input type="text" id="payment_lpr" class="form-control" style="text-transform:uppercase" placeholder="限英數字" autofocus required pattern="[A-Za-z0-9]*" />

  83.                                         </div>

  84.                                         <button type="submit" class="btn btn-default"onclick="do_payment(event);">確定</button>

  85.                                         <button type="reset" class="btn btn-default">重填</button>

  86.                                     </form>

  87.                                 </div>

  88.                                 <!-- /.col-lg-6 (nested) -->

  89.                             </div>

  90.                         </div>

  91.                         <!-- /.panel-body -->

  92.                     </div>

  93.                     <!-- /.panel -->

  94.                 </div>

  95.                 <!-- /.col-lg-12 -->

  96.             </div>

  97.             <?php /* ----- 付款(結束) ----- */ ?>

  98. 			

  99. 			<?php /* ----- 帳單明細顯示 ----- */ ?> 

  100.             <div data-items="price_data" class="row" style="display:none;">

  101.                 <div class="col-lg-12">

  102.                     <div class="panel panel-default">

  103.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  104.                             帳單明細

  105.                         </div>

  106.                         <div class="panel-body">

  107.                             <div data-rows class="row">

  108.                                 <div class="col-lg-12">

  109.                             	<div class="dataTable_wrapper">

  110.                                 <table class="table table-striped table-bordered table-hover">

  111.                                     <thead>

  112.                                         <tr>

  113. 											<th style="text-align:center;"></th>

  114. 											<th style="text-align:center;">說明</th>

  115. 											<th style="text-align:center;">結算</th>

  116.                                         </tr>   

  117.                                         <tr id="price_data_list" style="display:none;">

  118. 											<td data-tag="p_no" style="text-align:center;vertical-align: middle;"></td>

  119. 											<td data-tag="p_meta" style="text-align:left;vertical-align: middle;"></td>

  120. 											<td data-tag="p_result" style="text-align:left;vertical-align: middle;"></td>

  121.                                         </tr>

  122.                                     </thead>

  123.                                     <tbody id="price_data_tbody" style="font-size:10px;"></tbody>

  124. 									<tr>

  125. 										<td style="text-align:left;vertical-align: middle;">

  126. 										</td>

  127. 										<td style="text-align:left;vertical-align: middle;">

  128. 										</td>

  129. 										<td style="text-align:left;vertical-align: middle;">

  130. 										</td>

  131. 									</tr>

  132. 									<tr>

  133. 										<td style="text-align:left;vertical-align: middle;">

  134. 										</td>

  135. 										<td style="text-align:center;vertical-align: middle;">

  136. 										</td>

  137. 										<td style="text-align:center;vertical-align: middle;">

  138. 										</td>

  139. 									</tr>

  140. 									<tr>

  141. 										<td style="text-align:left;vertical-align: middle;">

  142. 										</td>

  143. 										<td style="text-align:center;vertical-align: middle;">

  144. 											時間加總

  145.                                         </td>

  146. 										<td style="text-align:center;vertical-align: middle;">

  147. 											費用加總

  148. 										</td>

  149. 									</tr>

  150. 									<tr>

  151. 										<td style="text-align:left;vertical-align: middle;">

  152. 										</td>

  153. 										<td style="text-align:center;vertical-align: middle;">

  154. 											<span id="show_amt_detail_time"></span>

  155. 										</td>

  156. 										<td style="text-align:center;vertical-align: middle;">

  157. 											<span id="show_amt_detail_price"></span>

  158. 										</td>

  159. 									</tr>

  160. 									<tr>

  161. 										<td style="text-align:left;vertical-align: middle;">

  162. 										</td>

  163. 										<td style="text-align:center;vertical-align: middle;">

  164. 										</td>

  165. 										<td style="text-align:center;vertical-align: middle;">

  166. 											<button type="button" class="btn btn-default" onclick="show_item_without_change('payment_data');">返回結帳畫面</button>

  167. 										</td>

  168. 									</tr>

  169.                                 </table>

  170.                                 </div>

  171.                                 </div>

  172.                                 <!-- /.col-lg-6 (nested) -->

  173.                             </div>

  174.                             <?php /* ----- 報表清單(結束) ----- */ ?> 

  175.                         </div>

  176.                         <!-- /.panel-body -->

  177.                     </div>

  178.                     <!-- /.panel -->

  179.                 </div>

  180.                 <!-- /.col-lg-12 -->

  181.             </div>   

  182.             <?php /* ----- 帳單明細顯示(結束) ----- */ ?> 

  183. 

  184. 			<?php /* ----- 帳單查詢結果 ----- */ ?>

  185.             <!-- div data-items="rent_sync" class="row" style="display:none;"-->

  186.             <div data-items="payment_data" class="row" style="display:none;">

  187.                 <div class="col-lg-12">

  188.                     <div class="panel panel-default">

  189.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  190.                             帳單查詢結果

  191.                         </div>

  192.                         <div class="panel-body" style="margin: 0px auto;">

  193.                             <div data-rows class="row">

  194.                                 <div class="col-lg-6" style="margin: 0px auto;">

  195. 								<form id="payment_data" role="form" method="post">

  196.                                 <table class="table table-striped table-bordered table-hover"">

  197.                                     <tbody id="available_curr_tbody" style="font-size:14px;">

  198.                                         <tr>

  199.                                             <td style="text-align:right;vertical-align: middle;" width="20%">車號</td>

  200.                                             <td id="show_payment_lpr" style="text-align:left;vertical-align:middle;text-transform:uppercase;"></td>

  201.                                         </tr>

  202.                                         <tr>

  203.                                             <td style="text-align:right;vertical-align: middle;">進場時間</td>

  204.                                             <td id="show_in_time" style="text-align:left;vertical-align: middle;"></td>

  205.                                         </tr>

  206.                                         <tr>

  207.                                             <td style="text-align:right;vertical-align: middle;">結算時間</td>

  208.                                             <td id="show_balance_time" style="text-align:left;vertical-align: middle;"></td>

  209.                                         </tr>

  210. 										<tr>

  211.                                             <td style="text-align:right;vertical-align: middle;">停車時間</td>

  212.                                             <td id="show_amt_detail" style="text-align:left;vertical-align: middle;"></td>

  213.                                         </tr>

  214.                                         <tr>

  215.                                             <td style="text-align:right;vertical-align: middle;">金額 (NTD)</td>

  216.                                             <td id="show_amt" style="text-align:left;vertical-align: middle;"></td>

  217.                                         </tr>

  218.                                         <tr class="form-group"style="display:none;">

  219.                                             <td style="text-align:right;vertical-align: middle;">發票載具 <br/>(手機條碼)</td>

  220. 											<td style="text-align:left;vertical-align: middle;">

  221. 											<input type="text" id="invoice_receiver" class="form-control" placeholder="如不要發票請留空白"

  222. 												data-validation="custom"

  223. 												data-validation-regexp="^$|^(?=.{7}$)([A-Za-z0-9]+)$|^(?=.{8}$)\u002F([A-Za-z0-9]+)$"

  224. 												data-validation-error-msg="請輸入正確載具<br/>格式： / + 7碼 <br/>(共8碼)"

  225. 												/>

  226.                                             </td>

  227.                                         </tr>

  228. 										<tr class="form-group" style="display:none;">

  229. 											<td style="text-align:right;vertical-align: middle;"></td>

  230. 											<td style="text-align:left;vertical-align: middle; color: red;">

  231. 												若發票載具留空白，發票將自動送個社福團體

  232. 											</td>

  233. 										</tr>

  234. 										<tr class="form-group">

  235.                                             <td style="text-align:right;vertical-align: middle;">公司統編</td>

  236. 											<td style="text-align:left;vertical-align: middle;">

  237. 											<input type="tel" id="company_no" class="form-control" placeholder="如不打統編請留空白"

  238. 												data-validation="custom"

  239. 												data-validation-optional="true"

  240. 												data-validation-regexp="^(?=.{8}$)([0-9]+)$"

  241. 												data-validation-error-msg="請輸入正確統編<br/>例如：80682490"

  242. 												data-validation-error-msg-container="#company_no_error_msg"

  243. 												/>

  244. 												<span id="company_no_error_msg"></span>

  245.                                             </td>

  246.                                         </tr>

  247. 										

  248. 										<!--tr class="form-group">

  249. 											<td style="text-align:right;vertical-align: middle;">TEST</td>

  250. 											<td style="text-align:left;vertical-align: middle;">

  251. 												<select multiple="multiple" size="5" data-validation="length" data-validation-length="min2">

  252. 												  <option>A</option>

  253. 												  <option>B</option>

  254. 												  <option>C</option>

  255. 												  <option>D</option>

  256. 												  <option>E</option>

  257. 												</select>

  258. 											</td>

  259. 										</tr-->

  260. 										

  261. 										<tr class="form-group">

  262.                                             <td style="text-align:right;vertical-align: middle;">電子信箱</td>

  263. 											<td style="text-align:left;vertical-align: middle;">

  264. 											<input type="email" id="email" class="form-control" placeholder="發票將寄信通知"

  265. 												data-validation="email"

  266. 												data-validation-optional="true"

  267. 												data-validation-error-msg="請輸入正確信箱<br/>例如：altob@gmail.com"

  268. 												data-validation-error-msg-container="#email_error_msg"

  269. 												/>

  270. 												<span id="email_error_msg"></span>

  271.                                             </td>

  272.                                         </tr>

  273. 										<tr class="form-group">

  274.                                             <td style="text-align:right;vertical-align: middle;">手機號碼</td>

  275. 											<td style="text-align:left;vertical-align: middle;">

  276. 											<input type="tel" id="mobile" class="form-control" placeholder="發票將寄簡訊通知"

  277. 												data-validation="custom"

  278. 												data-validation-optional="true"

  279. 												data-validation-regexp="^(?=.{10}$)09([0-9]+)$"

  280. 												data-validation-error-msg="請輸入正確手機號碼<br/>例如：0912345678"

  281. 												data-validation-error-msg-container="#mobile_error_msg"

  282. 												/>

  283. 												<span id="mobile_error_msg"></span>

  284.                                             </td>

  285.                                         </tr>

  286. 										<tr>

  287.                                             <td style="text-align:right;vertical-align: middle;">訂單编號</td>

  288.                                             <td id="show_order_no" style="text-align:left;vertical-align: middle;"></td>

  289.                                         </tr>

  290. 										<tr>

  291.                                             <td style="text-align:right;vertical-align: middle;">有效期限</td>

  292.                                             <td id="show_balance_time_limit_countdown" style="text-align:left;vertical-align: middle; color: red;"></td>

  293.                                         </tr>

  294. 										<!--tr>

  295.                                             <td style="text-align:right;vertical-align: middle;">※</td>

  296.                                             <td id="show_balance_time_limit_countdown" style="text-align:left;vertical-align: middle; color: red;"></td>

  297.                                         </tr-->

  298.                                         <tr>

  299.                                             <td style="text-align:right;vertical-align: middle;">

  300. 												<button type="button" class="btn btn-default" onclick="transfer_money(event);">開始付款</button>

  301.                                             </td>

  302.                                             <td style="text-align:left;vertical-align: middle;">

  303. 												<button type="button" class="btn btn-default" onclick="show_item('price_data');">查看明細</button>

  304. 												

  305. 												<button type="button" class="btn btn-default" onclick="show_item('payment');">取消</button>

  306.                                             </td>

  307.                                         </tr>

  308.                                     </tbody>

  309.                                 </table>

  310. 								</form>

  311.                                 </div>

  312.                                 <!-- /.col-lg-6 (nested) -->

  313.                             </div>

  314.                             <!-- /.row (nested) -->

  315.                         </div>

  316.                         <!-- /.panel-body -->

  317.                     </div>

  318.                     <!-- /.panel -->

  319.                 </div>

  320.                 <!-- /.col-lg-12 -->

  321.             </div>

  322.             <?php /* ----- 帳單查詢結果(結束) ----- */ ?>

  323. 			

  324. 			

  325. 			

  326. 			

  327.             <?php /* ----- 鎖車作業 ----- */ ?>

  328.             <div data-items="car_lock" class="row" style="display:none;">

  329.                 <div class="col-lg-12">

  330.                     <div class="panel panel-default">

  331.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  332.                             會員鎖車

  333.                         </div>

  334.                         <div class="panel-body">

  335.                             <div data-rows class="row">

  336.                                 <div class="col-lg-6">

  337.                                         <div class="form-group">  

  338.                                         	<form id="form_lock" method="post">

  339.                                             <label>請鍵入車牌號碼</label>

  340.                                             <input type="text" id="lpr_lock" class="form-control" style="text-transform:uppercase;" placeholder="限英數字" autofocus required pattern="[A-Za-z0-9]*" /><br />

  341.                                             <label>密碼(第一次與車號相同)</label>

  342.                                             <input type="password" id="pswd_lock" class="form-control" style="text-transform:uppercase;" autofocus required pattern="[A-Za-z0-9]*" /><br />

  343.                                         	<button type="submit" id="qcar_lock" class="btn btn-default">查詢</button>

  344.                                         	<button type="submit" id="change_pswd_lock" class="btn btn-default">更改密碼</button>

  345.                                         	<button type="reset" class="btn btn-default">清除資料</button>

  346.                                             </form>

  347.                                         </div>

  348.                                 </div>

  349.                                 <!-- /.col-lg-6 (nested) -->

  350.                             </div>

  351.                         </div>

  352.                         <!-- /.panel-body -->

  353.                     </div>

  354.                     <!-- /.panel -->

  355.                 </div>

  356.                 <!-- /.col-lg-12 -->

  357.             </div>

  358.             <?php /* ----- 鎖車(結束) ----- */ ?>  

  359.                                                                 

  360.             <?php /* ----- 更改鎖車密碼 ----- */ ?>

  361.             <div data-items="pswd_lock" class="row" style="display:none;">

  362.                 <div class="col-lg-12">

  363.                     <div class="panel panel-default">

  364.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  365.                             更改鎖車密碼

  366.                         </div>

  367.                         <div class="panel-body">

  368.                             <div data-rows class="row">

  369.                                 <div class="col-lg-6">

  370.                                         <div class="form-group">  

  371.                                         	<form id="form_new_pswd" method="post">

  372.                                             <label>新密碼</label>

  373.                                             <input type="text" id="new_pswd1" class="form-control" style="text-transform:uppercase;" placeholder="限英數字" autofocus required pattern="[A-Za-z0-9]*" /><br />

  374.                                             <label>再鍵一次密碼</label>

  375.                                             <input type="password" id="new_pswd2" class="form-control" style="text-transform:uppercase;" placeholder="限英數字" autofocus required pattern="[A-Za-z0-9]*" /><br />

  376.                                         	<button type="submit" class="btn btn-default">儲存</button>

  377.                                         	<button type="button" class="btn btn-default">取消</button>

  378.                                             </form>

  379.                                         </div>

  380.                                 </div>

  381.                                 <!-- /.col-lg-6 (nested) -->

  382.                             </div>

  383.                         </div>

  384.                         <!-- /.panel-body -->

  385.                     </div>

  386.                     <!-- /.panel -->

  387.                 </div>

  388.                 <!-- /.col-lg-12 -->

  389.             </div>

  390.             <?php /* ----- 更改密碼(結束) ----- */ ?>   

  391.             

  392.             <?php /* ----- 鎖車與解鎖 ----- */ ?>

  393.             <div data-items="status_lock" class="row" style="display:none;">

  394.                 <div class="col-lg-12">

  395.                     <div class="panel panel-default">

  396.                         <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>

  397.                             鎖車/解鎖

  398.                         </div>

  399.                         <div class="panel-body">

  400.                             <div data-rows class="row">

  401.                                 <div class="col-lg-6">

  402.                                         <div class="form-group">  

  403.                                         	<form id="form_active_lock" method="post">

  404.                                             <label><span id="lpr_on_off"></span>: [<span id="lock_on_off">無</span>鎖車]</label><br />

  405.                                         	<input type="button" id="lock_unlock" class="btn btn-default" value="鎖車" />

  406.                                         	<input type="button" id="lock_back" class="btn btn-default" value="結束" />

  407.                                             </form>

  408.                                         </div>

  409.                                 </div>

  410.                                 <!-- /.col-lg-6 (nested) -->

  411.                             </div>

  412.                         </div>

  413.                         <!-- /.panel-body -->

  414.                     </div>

  415.                     <!-- /.panel -->

  416.                 </div>

  417.                 <!-- /.col-lg-12 -->

  418.             </div>

  419.             <?php /* ----- 鎖車與解鎖(結束) ----- */ ?>   

  420. 			

  421. 			

  422. 

  423.         <!-- /#page-wrapper -->

  424.     </div>

  425.     <!-- /#wrapper -->

  426.     <!-- jQuery -->

  427.     <script src="<?=BOOTSTRAPS?>bower_components/jquery/dist/jquery.min.js"></script>

  428.     <!-- Bootstrap Core JavaScript -->

  429.     <script src="<?=BOOTSTRAPS?>bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

  430.     <!-- Metis Menu Plugin JavaScript -->

  431.     <script src="<?=BOOTSTRAPS?>bower_components/metisMenu/dist/metisMenu.min.js"></script>

  432.     <!-- Morris Charts JavaScript -->

  433.     <script src="<?=BOOTSTRAPS?>bower_components/raphael/raphael-min.js"></script>

  434.     <!--script src="<?=BOOTSTRAPS?>bower_components/morrisjs/morris.min.js"></script-->

  435.     <!--script src="<?=BOOTSTRAPS?>js/morris-data.js"></script-->

  436. 

  437. 

  438. 

  439. 

  440.     <!-- virtual keyboard -->

  441.   	<!--link href="<?=WEB_LIB?>virtual-keyboard/css/jquery-ui.min.css" rel="stylesheet">

  442. 	<link href="<?=WEB_LIB?>virtual-keyboard/css/keyboard.css" rel="stylesheet">

  443.   	<script src="<?=WEB_LIB?>virtual-keyboard/js/jquery-ui.min.js"></script>

  444.   	<script src="<?=WEB_LIB?>virtual-keyboard/js/jquery.keyboard.js"></script>

  445.   	<script src="<?=WEB_LIB?>virtual-keyboard/js/jquery.keyboard.extension-caret.js"></script-->

  446. 

  447. 	<!-- jQuery validate -->

  448. 	<script src="<?=WEB_LIB?>form-validator/jquery.form-validator.min.js"></script>

  449. 	<!-- alertify -->

  450. 	<link href="<?=WEB_LIB?>css/alertify.core.css" rel="stylesheet">

  451. 	<link href="<?=WEB_LIB?>css/alertify.bootstrap.css" rel="stylesheet">

  452. 	<script src="<?=WEB_LIB?>js/alertify.min.js"></script> 

  453. 	<!-- alertify -->

  454. 	<script src="<?=WEB_LIB?>js/moment.min.js"></script> 

  455. 	

  456. 	

  457. 	<!-- md5 -->

  458. 	<script src="<?=WEB_LIB?>js/md5.min.js"></script> 

  459. 	

  460. 

  461.     <!-- Custom Theme JavaScript -->

  462.     <script src="<?=BOOTSTRAPS?>dist/js/sb-admin-2.js"></script>

  463.     <div id="works" style="display:none;"></div><?php /* 作為浮動顯示區之用 */ ?>

  464. </body>

  465. </html>

  466. 

  467. <script>

  468. 

  469. <?php /* alertify function */ ?>

  470. function alertify_log($msg)

  471. {

  472. 	alertify.set({delay : 2000});

  473. 	alertify.log($msg);

  474. }

  475. function alertify_error($msg)

  476. {

  477. 	alertify.set({delay : 2000});

  478. 	alertify.error($msg);

  479. }

  480. function alertify_success($msg)

  481. {

  482. 	alertify.set({delay : 2000});

  483. 	alertify.success($msg);

  484. }

  485. 

  486. var refreshIntervalId = 0; // timer id

  487. 

  488. <?php /* 顯示指定項目 */ ?>

  489. function show_item(tags)

  490. {

  491. 	$("#payment_lpr").val("");<?php /* 清除車號欄位 */ ?>

  492. 	$("#show_in_time").val("");

  493. 	$("#show_balance_time").val("");

  494. 	$("#show_amt_detail").val("");

  495. 	$("#show_amt").val("");

  496. 	$("#invoice_receiver").val("");<?php /* 清除載具欄位 */ ?>

  497. 	$("#show_order_no").val("");

  498. 	//$("#show_balance_time_limit").val("");

  499. 	$("#show_balance_time_limit_countdown").val("");

  500. 	

  501. 	if(tags.indexOf('payment_data') < 0 && tags.indexOf('price_data') < 0){

  502. 		clearInterval(refreshIntervalId); // 消除倒數計時timer

  503. 		//console.log("clearInterval..");

  504. 	}

  505. 	

  506. 	$("[data-items]").hide();

  507. 	$("[data-items="+tags+"]").show();

  508.     return false;

  509. }

  510. 

  511. <?php /* 顯示指定項目, 不修改資料 */ ?>

  512. function show_item_without_change(tags)

  513. {

  514. 	$("[data-items]").hide();

  515. 	$("[data-items="+tags+"]").show();

  516.     return false;

  517. }

  518. 

  519. // 付款

  520. function do_payment(event)

  521. {

  522. 	event.preventDefault();

  523. 

  524. 	if ($("#payment_lpr").val() == "")

  525.     {

  526. 		alertify_error("請填寫車號");

  527.        	return false;

  528.     }

  529. 

  530. 	$.ajax

  531. 	({

  532. 		url: "<?=APP_URL?>payment_lpr",

  533. 		type: "post",

  534. 		dataType:"text",

  535. 		data:{

  536. 			"payment_lpr": $("#payment_lpr").val()

  537. 		},

  538. 		success: function(result)

  539. 		{

  540. 			if (/^[\],:{}\s]*$/.test(result.replace(/\\["\\\/bfnrtu]/g, '@').

  541. 			replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').

  542. 			replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {

  543. 				//the json is ok

  544. 			}else{

  545. 				//the json is not ok

  546. 				alertify_error("查無資料，請鍵入正確資料 (回傳資料有誤)");

  547. 				return false;

  548. 			}

  549. 			

  550. 			var jdata = JSON.parse(result);

  551. 			//console.log(jdata);

  552. 			if(!jdata)

  553. 			{

  554.             	alertify_error("查無資料，請鍵入正確資料");

  555.                 return false;

  556.             }

  557. 			

  558. 			if(jdata.member_no > 0)

  559. 			{

  560. 				alertify_log("會員無須繳款，謝謝");

  561.                 return false;

  562. 			}

  563. 			

  564. 			if(jdata.amt <= 0)

  565. 			{

  566.             	alertify_log("目前無須繳款，謝謝");

  567.                 return false;

  568.             }

  569. 			

  570. 			if(jdata.amt > 1000)

  571. 			{

  572.             	alertify_log("[ 代碼:001 ]<br/>請到管理室繳費, 謝謝");

  573.                 return false;

  574.             }

  575. 

  576. 			// variables for time units

  577. 			var days, hours, minutes, seconds;

  578. 			 

  579. 			// get tag element

  580. 			var countdown = $("#show_balance_time_limit_countdown");

  581. 			

  582. 			//var countdown_offset_ms = 60*5*1000; // 比資料庫早5分鐘timeout

  583. 			var duration = moment.duration({minutes: 5}); // 比資料庫早5分鐘timeout

  584. 			

  585. 			// set the date we're counting down to

  586. 			var target_date = moment(jdata.balance_time_limit).subtract(duration);

  587. 			//var target_date = new Date(jdata.balance_time_limit).getTime();

  588. 			

  589. 			//console.log(target_date.diff(moment(), 'seconds'));

  590. 			

  591. 			// update the tag with id "countdown" every 1 second

  592. 			refreshIntervalId = setInterval(function () {

  593. 			    // find the amount of "seconds" between now and target

  594. 				var seconds_left = target_date.diff(moment(), 'seconds');

  595. 				

  596. 				//console.log(seconds_left);

  597. 				

  598. 				//var current_date = new Date().getTime();

  599. 			    //var seconds_left = (target_date - current_date - countdown_offset_ms) / 1000;

  600. 			

  601. 				if(seconds_left <= 0){

  602. 					clearInterval(refreshIntervalId);

  603. 					// reload page

  604. 					location.reload();

  605. 				}

  606. 			 

  607. 			    // do some time calculations

  608. 			    days = parseInt(seconds_left / 86400);

  609. 			    seconds_left = seconds_left % 86400;

  610. 			     

  611. 			    hours = parseInt(seconds_left / 3600);

  612. 			    seconds_left = seconds_left % 3600;

  613. 			     

  614. 			    minutes = parseInt(seconds_left / 60);

  615. 			    seconds = parseInt(seconds_left % 60);

  616. 

  617. 				if(minutes < 10){

  618. 					minutes = '0' + minutes;

  619. 				}

  620. 				if(seconds < 10){

  621. 					seconds = '0' + seconds;

  622. 				}

  623. 			    // format countdown string + set tag value

  624. 				countdown.text(['還剩 ', minutes, ' : ', seconds, ' 有效'].join(''));

  625. 			}, 1000);

  626. 			

  627. 			$("#show_payment_lpr").text(jdata.lpr);

  628.             $("#show_in_time").text(jdata.in_time);

  629. 			$("#show_balance_time").text(jdata.balance_time);

  630. 			$("#show_amt_detail").text([jdata.bill_days, ' 天 : ', jdata.bill_hours, ' 小時 : ', jdata.bill_mins, ' 分鐘'].join(''));

  631.             $("#show_amt").text([jdata.amt, ' 元'].join(''));

  632. 			$("#show_order_no").text(jdata.order_no);

  633. 			//$("#show_balance_time_limit").text(new Date(target_date - countdown_offset_ms));

  634. 			show_item("payment_data");

  635. 			

  636. 			// parse price detail

  637. 			$("#price_data_tbody").html("");	

  638. 			

  639. 			<?php /* 明細頁面產生 (開始) */ ?>

  640. 			

  641. 			// A. 依r_no 分群, 暫存到 tmp_r_no_array

  642. 			var tmp_r_no_array = [];

  643. 			for(lv1 in jdata.price_detail)

  644.             {        

  645. 				if (lv1 == 0) { continue; }

  646. 				var today = jdata.price_detail[lv1];

  647. 				for(lv2 in today)

  648. 				{

  649. 					if(lv2.match(/\u003A/)){ // 取出有時間的部份

  650. 						var detail = today[lv2];

  651. 						if(!(detail.r_no in tmp_r_no_array)){

  652. 							tmp_r_no_array[detail.r_no] = [];

  653. 						}

  654. 						tmp_r_no_array[detail.r_no].push([detail.r_no, '_', lv1, '_', lv2].join(''));

  655. 					}

  656. 				}

  657. 			}

  658. 			//console.log('tmp_r_no_array: ' + tmp_r_no_array);

  659. 			// B. 將 tmp_r_no_array 解析, 產生顯示用的 price_result_array

  660. 			var price_result_array = [];

  661. 			var last_r_no_keys_array = [];

  662. 			var check_p = 0;

  663. 			for(r_no in tmp_r_no_array)

  664. 			{

  665. 				var r_no_array = tmp_r_no_array[r_no].sort(); // 依r_no 排序

  666. 				//console.log(r_no + ' length: ' + r_no_array.length);

  667. 				

  668. 				for(key in r_no_array)

  669. 				{

  670. 					var keys = r_no_array[key].split('_');

  671. 					var r_no = keys[0];

  672. 					var lv1 = keys[1];

  673. 					var lv2 = keys[2];

  674. 					var time_str = [lv1, ' ', lv2].join('');

  675. 					var detail = jdata.price_detail[lv1][lv2];

  676. 					var detail_p0_price = jdata.price_detail[lv1].p0;

  677. 					var detail_limit0 = jdata.price_detail[lv1].limit0;

  678. 					var detail_free0_min = jdata.price_detail[lv1].free0_min;

  679. 									

  680. 					if(detail.p > 0){

  681. 						check_p += detail.p;

  682. 						var before_keys = last_r_no_keys_array.pop(); //r_no_array[key - 1].split('_');

  683. 						

  684. 						var before_r_no = before_keys[0];

  685. 						var before_lv1 = before_keys[1];

  686. 						var before_lv2 = before_keys[2];

  687. 						var before_time_str = [before_lv1, ' ', before_lv2].join('');

  688. 						var before_detail = jdata.price_detail[before_lv1][before_lv2];

  689. 						

  690. 						// create result

  691. 						var data_p_desc = '';

  692. 						var data_p_time = '';

  693. 						var data_p_time_desc = ['*時段 ', before_time_str, '<br/>至 ', time_str].join('');

  694. 						var data_p_price_desc = [detail.p, ' 元'].join('');

  695. 						

  696. 						// p_desc

  697. 						if(detail.status == 1){

  698. 							data_p_desc = ['費率：每日最高收費上限 ', detail_limit0, ' 元，已達當日上限'].join(''); // '每日最高收費上限 150元';

  699. 						}else{

  700. 							data_p_desc = [' 每小時 ', 2 * detail_p0_price, ' 元，前 ', detail_free0_min, ' 分鐘免費。'].join(''); // '費率：每小時 20元';

  701. 						}

  702. 						

  703. 						// p_time

  704. 						var detail_part = [];

  705. 						if('h' in detail && detail.h > 0){

  706. 							detail_part.push(detail.h, ' 小時 ');

  707. 						}

  708. 						if('i' in detail && detail.i > 0){

  709. 							detail_part.push(detail.i, ' 分鐘');

  710. 						}

  711. 						//if(detail.p < before_detail_p2_price){detail_part.push(' (', r_no, ') ');}

  712. 						data_p_time = detail_part.join('');

  713. 						

  714. 						if(price_result_array.length > 0){

  715. 							if(r_no == price_result_array[price_result_array.length - 1].r_no){

  716. 								// 與上一筆結算為同一價錢週期時, 更新上一筆結算

  717. 								var last_result = price_result_array[price_result_array.length - 1];

  718. 								last_result.p_desc = '每日最高收費上限 150元';

  719. 								last_result.p_time = [last_result.p_time, '接續<br/><br/>', data_p_time].join('');;

  720. 								last_result.p_time_desc = [last_result.p_time_desc, ' 接續<br/><br/>', data_p_time_desc].join('');

  721. 								last_result.p_price_desc = [last_result.p_price_desc, ' + ', data_p_price_desc].join('');

  722. 								// push last

  723. 								last_r_no_keys_array.push(keys);

  724. 								continue;

  725. 							}

  726. 						}

  727. 						

  728. 						// 與上一筆結算不同價錢週期, 新增一筆結算

  729. 						var data = [];

  730. 						data.r_no = r_no;

  731. 						data.p_desc = data_p_desc;

  732. 						data.p_time = data_p_time;

  733. 						data.p_time_desc = data_p_time_desc;

  734. 						data.p_price_desc = data_p_price_desc;

  735. 						price_result_array.push(data);

  736. 						// push last

  737. 						last_r_no_keys_array.push(keys);

  738. 					}else{

  739. 						// push last

  740. 						last_r_no_keys_array.push(keys);

  741. 					}

  742. 				}

  743. 			}

  744. 			

  745. 			// C. 根據 price_result_array, 產生頁面顯示

  746. 			var seq = 0;

  747. 			for(key in price_result_array)

  748. 			{	

  749. 				var result = price_result_array[key];

  750. 				var meta_0_str = ++seq;

  751. 				$("#price_data_list>[data-tag=p_no]").text(meta_0_str);

  752. 				$("#price_data_list>[data-tag=p_meta]").html(result.p_time_desc);

  753. 				$("#price_data_list>[data-tag=p_result]").html(result.p_time);

  754. 				$("<tr data-day='day'>"+$("#price_data_list").html()+"</tr>").appendTo("#price_data_tbody"); 

  755. 				$("#price_data_list>[data-tag=p_no]").text("");

  756. 				$("#price_data_list>[data-tag=p_meta]").html(result.p_desc);

  757. 				$("#price_data_list>[data-tag=p_result]").html(result.p_price_desc);

  758. 				$("<tr data-day='day' style='color: red;'>"+$("#price_data_list").html()+"</tr>").appendTo("#price_data_tbody"); 

  759. 			}

  760. 			var bill_time_part = ['共 '];

  761. 			if('bill_days' in jdata && jdata.bill_days > 0){

  762. 				bill_time_part.push(jdata.bill_days, ' 天 : ');

  763. 			}

  764. 			if('bill_hours' in jdata && jdata.bill_hours > 0){

  765. 				bill_time_part.push(jdata.bill_hours, ' 小時 : ');

  766. 			}

  767. 			if('bill_mins' in jdata && jdata.bill_mins > 0){

  768. 				bill_time_part.push(jdata.bill_mins, ' 分鐘');

  769. 			}

  770. 			$("#show_amt_detail_time").text(bill_time_part.join(''));

  771. 			$("#show_amt_detail_price").text([jdata.amt, ' 元'].join(''));

  772. 			

  773. 			<?php /* 明細頁面產生 (結束) */ ?>

  774. 			

  775. 		}

  776. 		

  777. 	});

  778. }

  779. 

  780. // 開啟轉帳畫面

  781. function transfer_money(event)

  782. {

  783. 	event.preventDefault();

  784. 	

  785. 	if(! $("#payment_data").isValid()) return false;

  786. 	

  787. 	if($("#email").val() == '' && $("#mobile").val() == '')

  788. 	{

  789. 		alertify_error("請至少提供一項發票通知方式<br/>1. 電子信箱 <br/>2. 或 手機號碼<br/><br/>謝謝!!");

  790. 		return false;

  791. 	}

  792. 

  793. 	if (! confirm("開始結帳嗎 ?"))	return false;

  794. 	

  795. 	// Create Base64 Object

  796. 	var Base64 = {_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

  797. 

  798. 	var order_no = $("#show_order_no").text() == '' ? '0' : $("#show_order_no").text();

  799.     var invoice_receiver = $("#invoice_receiver").val() == '' ? '0' : $("#invoice_receiver").val();

  800. 	var company_no = $("#company_no").val() == '' ? '0' : $("#company_no").val();

  801. 	var email = $("#email").val() == '' ? '0' : Base64.encode($("#email").val()).slice(0, -1); // remove base64 '=' for URI rule

  802. 	var mobile = $("#mobile").val() == '' ? '0' : $("#mobile").val();

  803. 		

  804.     webatm = window.open(

  805. 		["<?=APP_URL?>transfer_money/", 

  806. 			order_no, "/", 

  807. 			encodeURI(invoice_receiver), "/", 

  808. 			encodeURI(company_no), "/", 

  809. 			email, "/",

  810. 			mobile, "/"

  811. 			].join('')

  812. 		, "_self");

  813. 	/*

  814. 	location.replace(

  815. 		["<?=APP_URL?>transfer_money/", 

  816. 			order_no, "/", 

  817. 			encodeURI(invoice_receiver), "/", 

  818. 			encodeURI(company_no), "/", 

  819. 			email, "/",

  820. 			mobile, "/"

  821. 			].join('')

  822. 		);

  823. 	*/

  824. 

  825. 	// window.top.close(); // 關視窗

  826.     // setTimeout(function(){ webatm.close(); }, 3000);

  827. }

  828. 

  829. $(document).ready(function()

  830. {

  831. 	<?php /* validate  設定start */ ?>

  832. 	$.validate(

  833. 		{

  834. 			modules : 'security',

  835. 		}

  836. 	);

  837. 	<?php /* validate  設定end */ ?>

  838. 	

  839. 	// 定時自動更新頁面

  840. 	(function autoReloadPage(){

  841. 		var pageReloadTimeMillis = 600000;			// 頁面, 自動重新載入週期 ( 10 min )

  842. 		var pageCheckReloadTimeMillis = 10000;		// 頁面, 判斷重新載入週期 ( 10 sec )

  843. 		var aliveTime = moment();

  844. 		$(document.body).bind("mousemove keypress", function(e) {

  845. 			aliveTime = moment();

  846. 		});

  847. 		function refresh() {

  848. 			if(moment() - aliveTime >= pageReloadTimeMillis) // 如果頁面沒動作, 才更新

  849. 				window.location.reload(true);

  850. 			else 

  851. 				setTimeout(refresh, pageCheckReloadTimeMillis);

  852. 		}

  853. 		setTimeout(refresh, pageCheckReloadTimeMillis);

  854. 	})();

  855. 	

  856. 	

  857. 	

  858. 	

  859. 	

  860. 	// ----- 鎖車密碼更新 -----

  861. 	$("#form_new_pswd").submit(function(event)

  862. 	{                  

  863.     	event.preventDefault(); 

  864.         

  865.         $("#new_pswd1").val($("#new_pswd1").val().toUpperCase());

  866.         $("#new_pswd2").val($("#new_pswd2").val().toUpperCase());

  867. 		if ($("#new_pswd1").val() != $("#new_pswd2").val() || $("#new_pswd1").val() == "" || $("#new_pswd2").val() == "")

  868.     	{

  869.      		alert("密碼不符規定, 請重新輸入 !");

  870.         	return false;

  871.     	}                 

  872.                         

  873.         // 查詢目前有無鎖車狀況

  874. 		$.ajax

  875.     	({                         

  876.         	url:"<?=APP_URL?>change_pswd",

  877.         	dataType:"text",

  878.         	type:"post",

  879.         	data:

  880.             	{	"lpr":$("#lpr_lock").val(),

  881.             		"new_pswd":$("#new_pswd1").val()

  882.             	},

  883.         	success:function(jdata)

  884.         	{                           

  885.         		alert("密碼更新完成 !");

  886.             	$("#pswd_lock").val("");

  887.             	show_item("car_lock");     

  888.     		}                                                                          

  889.     	}); 

  890.     });

  891.     

  892.     

  893.     // ----- 鎖車 -----

  894. 	$("#form_lock").submit(function(event)

  895. 	{                  

  896.     	event.preventDefault(); 

  897.         submit_id = $(document.activeElement).prop('id');

  898.         

  899. 		if ($("#lpr_lock").val() == "" || $("#pswd_lock").val() == "")

  900.     	{

  901.      		alert("請填寫車號及密碼");

  902.         	return false;

  903.     	}                 

  904.         

  905.         $("#lpr_lock").val($("#lpr_lock").val().toUpperCase());

  906.         $("#pswd_lock").val($("#pswd_lock").val().toUpperCase()); 

  907.         

  908.         // 查詢目前有無鎖車狀況

  909. 		$.ajax

  910.     	({                         

  911.         	url: "<?=APP_URL?>security_action/"+$("#lpr_lock").val()+"/"+md5($("#pswd_lock").val().toUpperCase())+"/2", 

  912.         	dataType:"json",

  913.         	type:"post",

  914.         	data:{},

  915.         	success:function(jdata)

  916.         	{

  917.         		if (jdata["result_code"] == "FAIL")

  918.             	{

  919.             		alert("車號或密碼錯誤");

  920.                 	return false;

  921.             	}

  922.                   

  923.                 // 更改密碼, 進入下一個畫面

  924.         		if (submit_id == "change_pswd_lock")

  925.         		{                       

  926.                 	$("#new_pswd1").val("");

  927.                 	$("#new_pswd2").val("");

  928.            			show_item("pswd_lock");

  929.             		return true;

  930.         		} 

  931.                                                            

  932.                 $("#lpr_on_off").text($("#lpr_lock").val());

  933.                 lock_on_off = jdata["result"][0]["result"];

  934.                 if (lock_on_off == "ON")

  935.                 {

  936.                 	$("#lock_on_off").text("已");  

  937.                 	$("#lock_unlock").val("解鎖");  

  938.                 }                           

  939.                 else

  940.                 {

  941.                 	$("#lock_on_off").text("無"); 

  942.                 	$("#lock_unlock").val("鎖車");    

  943.                 }

  944.             	show_item("status_lock");     

  945.     		}                                                                          

  946.     	}); 

  947.     	return false;

  948.     });

  949.             

  950.            

  951.     // ----- 鎖車或解鎖 -----

  952. 	$("#lock_unlock").click(function()

  953. 	{                   

  954.     	lock_str = $("#lock_unlock").val();

  955.                           

  956.     	if (!confirm("確定"+lock_str+"嗎 ?")) return false;

  957.             

  958.     	lock_val = lock_str == "解鎖" ? "0" : "1";

  959.         

  960.         // 查詢目前有無鎖車狀況

  961. 		$.ajax

  962.     	({                         

  963.         	url: "<?=APP_URL?>security_action/"+$("#lpr_lock").val()+"/"+md5($("#pswd_lock").val())+"/"+lock_val, 

  964.         	dataType:"json",

  965.         	type:"post",

  966.         	data:{},

  967.         	success:function(jdata)

  968.         	{           

  969.                 if (lock_val == "1")

  970.                 {

  971.                 	$("#lock_on_off").text("已");  

  972.                 	$("#lock_unlock").val("解鎖");  

  973.                 }                           

  974.                 else

  975.                 {

  976.                 	$("#lock_on_off").text("無"); 

  977.                 	$("#lock_unlock").val("鎖車");    

  978.                 }

  979.             	show_item("status_lock");     

  980.     		}                                                                          

  981.     	}); 

  982.     });     

  983.     

  984.     

  985.     // ----- 鎖車結東 -----

  986. 	$("#lock_back,#end_qcar").click(function()

  987. 	{                                  

  988.     	window.location.reload(true);        

  989.     });	

  990. 

  991. 	

  992. 	

  993. 	

  994. 	

  995. 	

  996. 	

  997. });

  998. </script>