VM暫存
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

8 lat temu
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569
  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?>) - 歐Pa卡</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. </head>
  23. <body style="font-family:Microsoft JhengHei;">
  24. <div id="wrapper">
  25. <!-- Navigation -->
  26. <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
  27. <div class="navbar-header">
  28. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  29. <span class="sr-only">Toggle navigation</span>
  30. <span class="icon-bar"></span>
  31. <span class="icon-bar"></span>
  32. <span class="icon-bar"></span>
  33. </button>
  34. <a class="navbar-brand" href="<?=APP_URL?>">歐特儀停車場 (<?=STATION_NAME?>)</a>
  35. </div>
  36. <!-- /.navbar-top-links(左側選單) -->
  37. <div class="navbar-default sidebar" role="navigation">
  38. <div class="sidebar-nav navbar-collapse">
  39. <ul class="nav" id="side-menu">
  40. <li>
  41. <a href="#"><i class="fa fa-user fa-fw"></i>服務項目<span class="fa arrow"></span></a>
  42. <ul class="nav nav-second-level">
  43. <li>
  44. <a href="#" onclick="show_item('check_user');">用戶查詢</a>
  45. </li>
  46. <li>
  47. <a href="#" onclick="get_allpa_products(event);">加值清單</a>
  48. </li>
  49. <!--li>
  50. <a href="#" onclick="show_item('card_register_barcode_input');">卡片記名</a>
  51. </li-->
  52. <li>
  53. <a href="#" onclick="show_item('about_allpa');">使用說明</a>
  54. </li>
  55. </ul>
  56. <!-- /.nav-second-level -->
  57. </li>
  58. </ul>
  59. </div>
  60. <!-- /.sidebar-collapse -->
  61. </div>
  62. <!-- /.navbar-static-side -->
  63. </nav>
  64. <div id="page-wrapper">
  65. <div class="row">
  66. <div class="col-lg-12">
  67. <h1 class="page-header">歡迎使用 - 歐Pa卡</h1>
  68. </div>
  69. <!-- /.col-lg-12 -->
  70. </div>
  71. <!-- /.row -->
  72. <?php /* ----- 查詢用戶 ----- */ ?>
  73. <div data-items="check_user" class="row">
  74. <div class="col-lg-12">
  75. <div class="panel panel-default">
  76. <div class="panel-body">
  77. <div data-rows class="row">
  78. <div class="col-lg-6">
  79. <form id="check_user_form" role="form" method="post">
  80. <div class="form-group">
  81. <label>車牌號碼</label>
  82. <input type="text" id="user_lpr" class="form-control" style="text-transform:uppercase"
  83. placeholder="請輸入您的車牌號碼"
  84. data-validation="custom"
  85. data-validation-regexp="^([a-zA-Z0-9]+)$"
  86. data-validation-error-msg="限英數字 (範例: ABC2016)"/>
  87. </div>
  88. <button type="submit" class="btn btn-default" onclick="do_check_user(event);">查詢</button>
  89. <button type="reset" class="btn btn-default">重填</button>
  90. </form>
  91. </div>
  92. <!-- /.col-lg-6 (nested) -->
  93. </div>
  94. <!-- /.row (nested) -->
  95. </div>
  96. <!-- /.panel-body -->
  97. </div>
  98. <!-- /.panel -->
  99. </div>
  100. <!-- /.col-lg-12 -->
  101. </div>
  102. <?php /* ----- 查詢用戶 (END) ----- */ ?>
  103. <?php /* ----- 加值清單 ----- */ ?>
  104. <div data-items="allpa_products" class="row" style="display:none;">
  105. <div class="col-lg-12">
  106. <div class="panel panel-default">
  107. <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>
  108. 加值清單
  109. </div>
  110. <div class="panel-body">
  111. <div data-rows class="row">
  112. <div class="col-lg-12">
  113. <div class="dataTable_wrapper">
  114. <table class="table table-striped table-bordered table-hover">
  115. <thead>
  116. <tr>
  117. <th style="text-align:center;">卡片</th>
  118. <th style="text-align:center;">說明</th>
  119. <th style="text-align:center;">功能</th>
  120. </tr>
  121. <tr id="product_list" style="display:none;">
  122. <td data-tag="p_name" style="text-align:center;vertical-align: middle;"></td>
  123. <td data-tag="p_desc" style="text-align:left;vertical-align: middle;"></td>
  124. <td data-tag="p_function" style="text-align:center;vertical-align: middle;"></td>
  125. </tr>
  126. </thead>
  127. <tbody id="product_data_tbody" style="font-size:10px;"></tbody>
  128. </table>
  129. </div>
  130. </div>
  131. <!-- /.col-lg-6 (nested) -->
  132. </div>
  133. </div>
  134. <!-- /.panel-body -->
  135. </div>
  136. <!-- /.panel -->
  137. </div>
  138. <!-- /.col-lg-12 -->
  139. </div>
  140. <?php /* ----- 加值清單 (END) ----- */ ?>
  141. <?php /* ----- 用戶資訊 ----- */ ?>
  142. <div data-items="user_allpa_info" class="row" style="display:none;">
  143. <div id="user_invalid_allpa_info" class="col-lg-12" style="display:none;">
  144. <div class="panel panel-default">
  145. <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>
  146. 卡片異常
  147. </div>
  148. <div class="panel-body">
  149. <div data-rows class="row">
  150. <div class="col-lg-6" style="margin: 0px auto;">
  151. <form id="invalid_allpa_info" role="form" method="post">
  152. <table class="table table-striped table-bordered table-hover"">
  153. <tbody id="available_curr_tbody" style="font-size:14px;">
  154. <tr>
  155. <td style="text-align:right;vertical-align: middle; color: blue;">綁定車牌號碼</td>
  156. <td id="show_invalid_lpr" style="text-align:left;vertical-align: middle;"></td>
  157. </tr>
  158. <tr>
  159. <td style="text-align:right;vertical-align: middle; color: red;">歐Pa卡號 (32碼)</td>
  160. <td id="show_invalid_barcode" style="text-align:left;vertical-align: middle;"></td>
  161. </tr>
  162. <tr>
  163. <td style="text-align:right;vertical-align: middle;">卡片餘額</td>
  164. <td id="show_invalid_balance" style="text-align:left;vertical-align: middle;"></td>
  165. </tr>
  166. <tr>
  167. <td style="text-align:right;vertical-align: middle;">紅利點數</td>
  168. <td id="show_invalid_bonus" style="text-align:left;vertical-align: middle;"></td>
  169. </tr>
  170. <tr>
  171. <td style="text-align:right;vertical-align: middle; color: red;">卡片狀態</td>
  172. <td id="show_invalid_card_status" style="text-align:left;vertical-align: middle;"></td>
  173. </tr>
  174. </tbody>
  175. </table>
  176. </form>
  177. </div>
  178. </div>
  179. <!-- /.row (nested) -->
  180. </div>
  181. <!-- /.panel-body -->
  182. </div>
  183. <!-- /.panel -->
  184. </div>
  185. <!-- /.col-lg-12 -->
  186. <div id="user_current_allpa_info" class="col-lg-12" style="display:none;">
  187. <div class="panel panel-default">
  188. <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>
  189. 我的歐Pa卡
  190. </div>
  191. <div class="panel-body">
  192. <div data-rows class="row">
  193. <div class="col-lg-6" style="margin: 0px auto;">
  194. <form id="current_allpa_info" role="form" method="post">
  195. <table class="table table-striped table-bordered table-hover"">
  196. <tbody id="available_curr_tbody" style="font-size:14px;">
  197. <tr>
  198. <td style="text-align:right;vertical-align: middle; color: blue;">綁定車牌號碼</td>
  199. <td id="show_info_lpr" style="text-align:left;vertical-align: middle;"></td>
  200. </tr>
  201. <tr>
  202. <td style="text-align:right;vertical-align: middle;">歐Pa卡號 (32碼)</td>
  203. <td id="show_info_barcode" style="text-align:left;vertical-align: middle;"></td>
  204. </tr>
  205. <tr>
  206. <td style="text-align:right;vertical-align: middle;">卡片餘額</td>
  207. <td id="show_info_balance" style="text-align:left;vertical-align: middle;"></td>
  208. </tr>
  209. <tr>
  210. <td style="text-align:right;vertical-align: middle;">紅利點數</td>
  211. <td id="show_info_bonus" style="text-align:left;vertical-align: middle;"></td>
  212. </tr>
  213. </tbody>
  214. </table>
  215. </form>
  216. </div>
  217. </div>
  218. <!-- /.row (nested) -->
  219. </div>
  220. <!-- /.panel-body -->
  221. </div>
  222. <!-- /.panel -->
  223. </div>
  224. <!-- /.col-lg-12 -->
  225. <div id="allpa_user_bill_info" class="col-lg-12" style="display:none;">
  226. <div class="panel panel-default">
  227. <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>
  228. 使用記錄
  229. </div>
  230. <div class="panel-body">
  231. <div data-rows class="row">
  232. <div class="col-lg-12">
  233. <div class="dataTable_wrapper">
  234. <table class="table table-striped table-bordered table-hover">
  235. <thead>
  236. <tr>
  237. <th style="text-align:center;">項目</th>
  238. <th style="text-align:center;">說明</th>
  239. <th style="text-align:center;">金額</th>
  240. <th style="text-align:center;">狀態</th>
  241. </tr>
  242. <tr id="allpa_user_bill_list" style="display:none;">
  243. <td data-tag="b_name" style="text-align:center;vertical-align: middle;"></td>
  244. <td data-tag="b_desc" style="text-align:left;vertical-align: middle;"></td>
  245. <td data-tag="b_amt" style="text-align:center;vertical-align: middle;"></td>
  246. <td data-tag="b_function" style="text-align:center;vertical-align: middle;"></td>
  247. </tr>
  248. </thead>
  249. <tbody id="allpa_user_bill_data_tbody" style="font-size:10px;"></tbody>
  250. </table>
  251. </div>
  252. </div>
  253. <!-- /.col-lg-6 (nested) -->
  254. </div>
  255. </div>
  256. <!-- /.panel-body -->
  257. </div>
  258. <!-- /.panel -->
  259. </div>
  260. <!-- /.col-lg-12 -->
  261. <div id="user_bill_info" class="col-lg-12" style="display:none;">
  262. <div class="panel panel-default">
  263. <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>
  264. 加值清單
  265. </div>
  266. <div class="panel-body">
  267. <div data-rows class="row">
  268. <div class="col-lg-12">
  269. <div class="dataTable_wrapper">
  270. <table class="table table-striped table-bordered table-hover">
  271. <thead>
  272. <tr>
  273. <th style="text-align:center;">卡片</th>
  274. <th style="text-align:center;">說明</th>
  275. <th style="text-align:center;">狀態</th>
  276. </tr>
  277. <tr id="bill_list" style="display:none;">
  278. <td data-tag="b_name" style="text-align:center;vertical-align: middle;"></td>
  279. <td data-tag="b_desc" style="text-align:left;vertical-align: middle;"></td>
  280. <td data-tag="b_function" style="text-align:center;vertical-align: middle;"></td>
  281. </tr>
  282. </thead>
  283. <tbody id="bill_data_tbody" style="font-size:10px;"></tbody>
  284. </table>
  285. </div>
  286. </div>
  287. <!-- /.col-lg-6 (nested) -->
  288. </div>
  289. </div>
  290. <!-- /.panel-body -->
  291. </div>
  292. <!-- /.panel -->
  293. </div>
  294. <!-- /.col-lg-12 -->
  295. </div>
  296. <?php /* ----- 用戶資訊 (END) ----- */ ?>
  297. <?php /* ----- 結帳頁 ----- */ ?>
  298. <div data-items="payment_data" class="row" style="display:none;">
  299. <div class="col-lg-12">
  300. <div class="panel panel-default">
  301. <div class="panel-body">
  302. <div data-rows class="row">
  303. <div class="col-lg-6" style="margin: 0px auto;">
  304. <form id="payment_data" role="form" method="post">
  305. <table class="table table-striped table-bordered table-hover"">
  306. <tbody id="available_curr_tbody" style="font-size:14px;">
  307. <tr class="form-group">
  308. <td style="text-align:right;vertical-align: middle; color: blue;">車牌號碼</td>
  309. <td style="text-align:left;vertical-align: middle;">
  310. <input type="text" id="payment_lpr" class="form-control" style="text-transform:uppercase"
  311. placeholder="請輸入您要加值的車牌號碼"
  312. data-validation="custom"
  313. data-validation-regexp="^([a-zA-Z0-9]+)$"
  314. data-validation-error-msg="限英數字 (範例: ABC2016)"
  315. data-validation-error-msg-container="#lpr_error_msg"
  316. />
  317. <span id="lpr_error_msg"></span>
  318. </td>
  319. </tr>
  320. <tr>
  321. <td style="text-align:right;vertical-align: middle;">卡片名稱</td>
  322. <td id="show_product_name" style="text-align:left;vertical-align: middle;"></td>
  323. </tr>
  324. <tr>
  325. <td style="text-align:right;vertical-align: middle;">說明</td>
  326. <td id="show_product_desc" style="text-align:left;vertical-align: middle;"></td>
  327. </tr>
  328. <tr>
  329. <td style="text-align:right;vertical-align: middle;">備註</td>
  330. <td id="show_remarks" style="text-align:left;vertical-align: middle;"></td>
  331. </tr>
  332. <tr>
  333. <td style="text-align:right;vertical-align: middle;">金額 (NTD)</td>
  334. <td id="show_amt" style="text-align:left;vertical-align: middle;"></td>
  335. </tr>
  336. <tr class="form-group"style="display:none;">
  337. <td style="text-align:right;vertical-align: middle;">發票載具 <br/>(手機條碼)</td>
  338. <td style="text-align:left;vertical-align: middle;">
  339. <input type="text" id="invoice_receiver" class="form-control" placeholder="如不要發票請留空白"
  340. data-validation="custom"
  341. data-validation-regexp="^$|^(?=.{7}$)([A-Za-z0-9]+)$|^(?=.{8}$)\u002F([A-Za-z0-9]+)$"
  342. data-validation-error-msg="請輸入正確載具<br/>格式: / + 7碼 <br/>(共8碼)"
  343. />
  344. </td>
  345. </tr>
  346. <tr class="form-group" style="display:none;">
  347. <td style="text-align:right;vertical-align: middle;"></td>
  348. <td style="text-align:left;vertical-align: middle; color: red;">
  349. 若發票載具留空白,發票將自動送個社福團體
  350. </td>
  351. </tr>
  352. <tr class="form-group">
  353. <td style="text-align:right;vertical-align: middle;">公司統編</td>
  354. <td style="text-align:left;vertical-align: middle;">
  355. <input type="tel" id="company_no" class="form-control" placeholder="如不打統編請留空白"
  356. data-validation="custom"
  357. data-validation-optional="true"
  358. data-validation-regexp="^(?=.{8}$)([0-9]+)$"
  359. data-validation-error-msg="請輸入正確統編<br/>例如:80682490"
  360. data-validation-error-msg-container="#company_no_error_msg"
  361. />
  362. <span id="company_no_error_msg"></span>
  363. </td>
  364. </tr>
  365. <tr class="form-group">
  366. <td style="text-align:right;vertical-align: middle;">電子信箱</td>
  367. <td style="text-align:left;vertical-align: middle;">
  368. <input type="email" id="email" class="form-control" placeholder="發票將寄信通知"
  369. data-validation="email"
  370. data-validation-optional="true"
  371. data-validation-error-msg="請輸入正確信箱<br/>例如:altob@gmail.com"
  372. data-validation-error-msg-container="#email_error_msg"
  373. />
  374. <span id="email_error_msg"></span>
  375. </td>
  376. </tr>
  377. <tr class="form-group">
  378. <td style="text-align:right;vertical-align: middle;">手機號碼</td>
  379. <td style="text-align:left;vertical-align: middle;">
  380. <input type="tel" id="mobile" class="form-control" placeholder="發票將寄簡訊通知"
  381. data-validation="custom"
  382. data-validation-optional="true"
  383. data-validation-regexp="^(?=.{10}$)09([0-9]+)$"
  384. data-validation-error-msg="請輸入正確手機號碼<br/>例如:0912345678"
  385. data-validation-error-msg-container="#mobile_error_msg"
  386. />
  387. <span id="mobile_error_msg"></span>
  388. </td>
  389. </tr>
  390. <tr>
  391. <td style="text-align:right;vertical-align: middle;">訂單编號</td>
  392. <td id="show_order_no" style="text-align:left;vertical-align: middle;"></td>
  393. </tr>
  394. <tr>
  395. <td style="text-align:right;vertical-align: middle;">有效期限</td>
  396. <td id="show_valid_time_countdown" style="text-align:left;vertical-align: middle; color: red;"></td>
  397. </tr>
  398. <tr>
  399. <td style="text-align:right;vertical-align: middle;">
  400. <button type="button" class="btn btn-default" onclick="transfer_money(event);">開始付款</button>
  401. </td>
  402. <td style="text-align:left;vertical-align: middle;">
  403. <button type="button" class="btn btn-default" onclick="show_item('allpa_products');">取消</button>
  404. </td>
  405. </tr>
  406. </tbody>
  407. </table>
  408. </form>
  409. </div>
  410. </div>
  411. <!-- /.row (nested) -->
  412. </div>
  413. <!-- /.panel-body -->
  414. </div>
  415. <!-- /.panel -->
  416. </div>
  417. <!-- /.col-lg-12 -->
  418. </div>
  419. <?php /* ----- 結帳頁 (END) ----- */ ?>
  420. <?php /* ----- PIN碼, 儲值 ----- */ ?>
  421. <div data-items="allpa_reload" class="row" style="display:none;">
  422. <div class="col-lg-12">
  423. <div class="panel panel-default">
  424. <div class="panel-body">
  425. <div data-rows class="row">
  426. <div class="col-lg-6" style="margin: 0px auto;">
  427. <form id="allpa_reload_data" role="form" method="post">
  428. <table class="table table-striped table-bordered table-hover"">
  429. <tbody id="available_curr_tbody" style="font-size:14px;">
  430. <tr>
  431. <td style="text-align:right;vertical-align: middle; color: blue;">車牌號碼</td>
  432. <td id="show_reload_lpr" style="text-align:left;vertical-align: middle;"></td>
  433. </tr>
  434. <tr>
  435. <td style="text-align:right;vertical-align: middle;">歐Pa卡號 (32碼)</td>
  436. <td id="show_reload_barcode" style="text-align:left;vertical-align: middle;"></td>
  437. </tr>
  438. <tr>
  439. <td style="text-align:right;vertical-align: middle;">儲值前金額</td>
  440. <td id="show_reload_amount_before" style="text-align:left;vertical-align: middle;"></td>
  441. </tr>
  442. <tr>
  443. <td style="text-align:right;vertical-align: middle; color: blue;">本次加值金額</td>
  444. <td id="show_reload_amt" style="text-align:left;vertical-align: middle;"></td>
  445. </tr>
  446. <tr>
  447. <td style="text-align:right;vertical-align: middle;">儲值後金額</td>
  448. <td id="show_reload_amount_next" style="text-align:left;vertical-align: middle;"></td>
  449. </tr>
  450. <tr>
  451. <td style="text-align:right;vertical-align: middle;">儲值 PIN 碼</td>
  452. <td id="show_pin_pic" style="text-align:left;vertical-align: middle;"></td>
  453. </tr>
  454. <tr class="form-group">
  455. <td style="text-align:right;vertical-align: middle;"></td>
  456. <td style="text-align:left;vertical-align: middle;">
  457. <input type="text" id="reload_pin" class="form-control" placeholder="請輸入儲值PIN碼"
  458. data-validation="custom"
  459. data-validation-regexp="^([a-zA-Z0-9]+)$"
  460. data-validation-error-msg="請輸入儲值PIN碼"
  461. data-validation-error-msg-container="#pin_error_msg"
  462. />
  463. <span id="pin_error_msg"></span>
  464. </td>
  465. </tr>
  466. <tr>
  467. <td style="text-align:right;vertical-align: middle;">有效期限</td>
  468. <td id="show_pin_valid_time_countdown" style="text-align:left;vertical-align: middle; color: red;"></td>
  469. </tr>
  470. <tr>
  471. <td style="text-align:right;vertical-align: middle;">
  472. <button type="button" class="btn btn-default" onclick="do_allpa_reload(event);">確定儲值</button>
  473. </td>
  474. <td style="text-align:left;vertical-align: middle;">
  475. <button type="button" class="btn btn-default" onclick="show_item('user_allpa_info');">取消</button>
  476. </td>
  477. </tr>
  478. <input id="reload_pin_check_id" type="hidden" name="reload_pin_check_id" value="0" />
  479. <input id="reload_order_no" type="hidden" name="reload_order_no" value="0" />
  480. </tbody>
  481. </table>
  482. </form>
  483. </div>
  484. </div>
  485. <!-- /.row (nested) -->
  486. </div>
  487. <!-- /.panel-body -->
  488. </div>
  489. <!-- /.panel -->
  490. </div>
  491. <!-- /.col-lg-12 -->
  492. </div>
  493. <?php /* ----- PIN碼, 儲值 (END) ----- */ ?>
  494. <?php /* ----- 實體卡記名A ----- */ ?>
  495. <div data-items="card_register_barcode_input" class="row" style="display:none;">
  496. <div class="col-lg-12">
  497. <div class="panel panel-default">
  498. <div class="panel-body">
  499. <div data-rows class="row">
  500. <div class="col-lg-6">
  501. <form id="card_register_barcode_input_form" role="form" method="post">
  502. <div class="form-group">
  503. <label>歐Pa卡號</label>
  504. <input type="text" id="card_register_barcode" class="form-control"
  505. placeholder="請輸入歐Pa卡號 (32碼)"
  506. data-validation="custom"
  507. data-validation-regexp="^(?=.{32}$)([0-9]+)$"
  508. data-validation-error-msg="歐Pa卡號碼格式: 32碼 數字">
  509. </div>
  510. <button type="submit" class="btn btn-default" onclick="do_card_register_barcode_input(event);">確定</button>
  511. <button type="reset" class="btn btn-default">重填</button>
  512. </form>
  513. </div>
  514. <!-- /.col-lg-6 (nested) -->
  515. </div>
  516. <!-- /.row (nested) -->
  517. </div>
  518. <!-- /.panel-body -->
  519. </div>
  520. <!-- /.panel -->
  521. </div>
  522. <!-- /.col-lg-12 -->
  523. </div>
  524. <?php /* ----- 實體卡記名A (END) ----- */ ?>
  525. <?php /* ----- 實體卡記名B (卡片查詢結果顯示, 輸入要綁定的車牌) ----- */ ?>
  526. <div data-items="card_register_lpr_input" class="row" style="display:none;">
  527. <div class="col-lg-12">
  528. <div class="panel panel-default">
  529. <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>
  530. 卡片上的金額, 將轉移給車牌號碼
  531. </div>
  532. <div class="panel-body">
  533. <div data-rows class="row">
  534. <div class="col-lg-6">
  535. <form id="card_register_lpr_input_form" role="form" method="post">
  536. <table class="table table-striped table-bordered table-hover"">
  537. <tbody id="available_curr_tbody" style="font-size:14px;">
  538. <tr>
  539. <td style="text-align:right;vertical-align: middle; color: blue;">歐Pa卡號 (32碼)</td>
  540. <td id="card_register_barcode_value" style="text-align:left;vertical-align: middle;"></td>
  541. </tr>
  542. <tr>
  543. <td style="text-align:right;vertical-align: middle;">卡片金額</td>
  544. <td id="card_register_balance_value" style="text-align:left;vertical-align: middle;"></td>
  545. </tr>
  546. <tr>
  547. <td style="text-align:right;vertical-align: middle;">紅利點數</td>
  548. <td id="card_register_bonus_value" style="text-align:left;vertical-align: middle;"></td>
  549. </tr>
  550. <tr>
  551. <td style="text-align:right;vertical-align: middle;">卡片狀態</td>
  552. <td id="card_register_card_status_value" style="text-align:left;vertical-align: middle;"></td>
  553. </tr>
  554. </tbody>
  555. </table>
  556. <div class="form-group">
  557. <label>要綁定的車牌號碼</label>
  558. <input type="text" id="card_register_lpr" class="form-control" style="text-transform:uppercase"
  559. placeholder="請輸入您要綁定的車牌號碼"
  560. data-validation="custom"
  561. data-validation-regexp="^([a-zA-Z0-9]+)$"
  562. data-validation-error-msg="限英數字 (範例: ABC2016)"/>
  563. </div>
  564. <button type="submit" class="btn btn-default" onclick="do_card_register(event);">確認綁定</button>
  565. <button type="reset" class="btn btn-default">重填</button>
  566. </form>
  567. </div>
  568. <!-- /.col-lg-6 (nested) -->
  569. </div>
  570. <!-- /.row (nested) -->
  571. </div>
  572. <!-- /.panel-body -->
  573. </div>
  574. <!-- /.panel -->
  575. </div>
  576. <!-- /.col-lg-12 -->
  577. </div>
  578. <?php /* ----- 實體卡記名B (卡片查詢結果顯示, 輸入要綁定的車牌) (END) ----- */ ?>
  579. <?php /* ----- 歐趴卡使用說明 ----- */ ?>
  580. <div data-items="about_allpa" class="row" style="display:none;">
  581. <div class="col-lg-12">
  582. <div class="panel panel-default">
  583. <div class="panel-heading"><?php /* 資料顯示區灰色小表頭 */ ?>
  584. 歐Pa卡使用說明
  585. </div>
  586. <div class="panel-body">
  587. <div data-rows class="row">
  588. <div class="col-lg-6">
  589. <div class="col-lg-8 col-lg-offset-2 text-center">
  590. <h3 class="section-heading">履約事項</h2>
  591. <hr class="light">
  592. 本卡所收取之金額,已存入發行商於中國信託商業銀行開立之信託專戶,專款專用;所稱專用係指供發行人履行交付商品或提供服務義務使用。
  593. 本信託受益人為發行人,非本卡持有人,信託期間自儲值日起一年,信託存續期間屆滿後,由中國信託商業銀行將信託專戶餘額交由發行人領回。
  594. </div>
  595. <div class="col-lg-8 col-lg-offset-2 text-center">
  596. <h3 class="section-heading">說明、一</h2>
  597. <hr class="light">
  598. ※目前停車場付費方式包括在自動繳費機付費、月租繳費以及行動支付,此外,公司也發行歐Pa卡,提供客人另一種付費管道。
  599. </div>
  600. <div class="col-lg-8 col-lg-offset-2 text-center">
  601. <h3 class="section-heading">說明、二</h2>
  602. <hr class="light">
  603. ※客人只須上網登錄車號,當進入停車場時,系統會直接在雲端扣點數,無須搖下車窗,即可透過車牌辨識進場。
  604. </div>
  605. <div class="col-lg-8 col-lg-offset-2 text-center">
  606. <h3 class="section-heading">說明、三</h2>
  607. <hr class="light">
  608. ※出場時,系統也會自動比對餘額與自動扣款。
  609. </div>
  610. <div class="col-lg-8 col-lg-offset-2 text-center">
  611. <h3 class="section-heading">說明、四</h2>
  612. <hr class="light">
  613. ※未來歐Pa卡可透過現金、上網等管道儲值。
  614. </div>
  615. <div class="col-lg-8 col-lg-offset-2 text-center">
  616. <h3 class="section-heading">說明、五</h2>
  617. <hr class="light">
  618. ※目前僅供部份場站使用,接下來將陸續導入本公司各停車場,未來只要是本公司歐Pa卡客戶,即可方便進出各停車場。
  619. </div>
  620. <div class="col-lg-8 col-lg-offset-2 text-center">
  621. <h3 class="section-heading">謝謝!!</h2>
  622. <hr class="light">
  623. ※若遇卡片使用問題,請參照:<a href="<?=APP_URL?>">官網</a>說明或洽各<p><a href="maps://maps.google.com/maps?daddr=25.0267747,121.5410621&amp;ll=">歐特儀特約停車場站管理室</a>或電洽歐特儀<a href="tel:+886227057716">(02) 2705-7716 </a>將有專人為您服務。
  624. </div>
  625. </div>
  626. <!-- /.col-lg-6 (nested) -->
  627. </div>
  628. <!-- /.row (nested) -->
  629. </div>
  630. <!-- /.panel-body -->
  631. </div>
  632. <!-- /.panel -->
  633. <div class="fb-like" data-share="true" data-width="450" data-show-faces="true"></div>
  634. </div>
  635. <!-- /.col-lg-12 -->
  636. </div>
  637. <?php /* ----- 歐趴卡使用說明 (END) ----- */ ?>
  638. </div>
  639. <!-- /#page-wrapper -->
  640. </div>
  641. <!-- /#wrapper -->
  642. <!-- jQuery -->
  643. <script src="<?=BOOTSTRAPS?>bower_components/jquery/dist/jquery.min.js"></script>
  644. <!-- Bootstrap Core JavaScript -->
  645. <script src="<?=BOOTSTRAPS?>bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  646. <!-- Metis Menu Plugin JavaScript -->
  647. <script src="<?=BOOTSTRAPS?>bower_components/metisMenu/dist/metisMenu.min.js"></script>
  648. <!-- Morris Charts JavaScript -->
  649. <script src="<?=BOOTSTRAPS?>bower_components/raphael/raphael-min.js"></script>
  650. <!--script src="<?=BOOTSTRAPS?>bower_components/morrisjs/morris.min.js"></script-->
  651. <!--script src="<?=BOOTSTRAPS?>js/morris-data.js"></script-->
  652. <!-- virtual keyboard -->
  653. <!--link href="<?=WEB_LIB?>virtual-keyboard/css/jquery-ui.min.css" rel="stylesheet">
  654. <link href="<?=WEB_LIB?>virtual-keyboard/css/keyboard.css" rel="stylesheet">
  655. <script src="<?=WEB_LIB?>virtual-keyboard/js/jquery-ui.min.js"></script>
  656. <script src="<?=WEB_LIB?>virtual-keyboard/js/jquery.keyboard.js"></script>
  657. <script src="<?=WEB_LIB?>virtual-keyboard/js/jquery.keyboard.extension-caret.js"></script-->
  658. <!-- jQuery validate -->
  659. <script src="<?=WEB_LIB?>form-validator/jquery.form-validator.min.js"></script>
  660. <!-- alertify -->
  661. <link href="<?=WEB_LIB?>css/alertify.core.css" rel="stylesheet">
  662. <link href="<?=WEB_LIB?>css/alertify.bootstrap.css" rel="stylesheet">
  663. <script src="<?=WEB_LIB?>js/alertify.min.js"></script>
  664. <!-- alertify -->
  665. <script src="<?=WEB_LIB?>js/moment.min.js"></script>
  666. <!-- Custom Theme JavaScript -->
  667. <script src="<?=BOOTSTRAPS?>dist/js/sb-admin-2.js"></script>
  668. <div id="works" style="display:none;"></div><?php /* 作為浮動顯示區之用 */ ?>
  669. </body>
  670. <script>
  671. window.fbAsyncInit = function() {
  672. FB.init({
  673. appId : '191092301278009',
  674. xfbml : true,
  675. version : 'v2.6'
  676. });
  677. };
  678. (function(d, s, id){
  679. var js, fjs = d.getElementsByTagName(s)[0];
  680. if (d.getElementById(id)) {return;}
  681. js = d.createElement(s); js.id = id;
  682. js.src = "//connect.facebook.net/en_US/sdk.js";
  683. fjs.parentNode.insertBefore(js, fjs);
  684. }(document, 'script', 'facebook-jssdk'));
  685. </script>
  686. </html>
  687. <script>
  688. var pinIntervalId = 0; // pin timer
  689. var refreshIntervalId = 0; // payment timer
  690. <?php /* alertify function */ ?>
  691. function alertify_log($msg)
  692. {
  693. alertify.set({delay : 2000});
  694. alertify.log($msg);
  695. }
  696. function alertify_error($msg)
  697. {
  698. alertify.set({delay : 2000});
  699. alertify.error($msg);
  700. }
  701. function alertify_success($msg)
  702. {
  703. alertify.set({ labels: {
  704. ok : "確定"
  705. } });
  706. alertify.alert($msg, function (e){
  707. location.reload(); // F5
  708. });
  709. }
  710. <?php /* 顯示指定項目 */ ?>
  711. function show_item(tags)
  712. {
  713. // 查詢
  714. $("#user_lpr").val("");
  715. // 啟用
  716. $("#reload_pin").val("");
  717. // 付款
  718. $("#payment_lpr").val("");
  719. $("#company_no").val("");
  720. $("#email").val("");
  721. $("#mobile").val("");
  722. // 記名
  723. $("#card_register_barcode").val("");
  724. $("#card_register_lpr").val("");
  725. if(tags.indexOf('payment_data') < 0){
  726. clearInterval(refreshIntervalId); // 消除倒數計時timer
  727. //console.log("clearInterval..");
  728. }
  729. if(tags.indexOf('allpa_reload') < 0){
  730. clearInterval(pinIntervalId); // 消除倒數計時timer
  731. //console.log("pinIntervalId..");
  732. }
  733. $("[data-items]").hide();
  734. $("[data-items="+tags+"]").show();
  735. return false;
  736. }
  737. // 判斷回傳資料是否有效
  738. function is_valid_result(result)
  739. {
  740. if(result){
  741. return true;
  742. }else{
  743. alertify_error("未知的錯誤..");
  744. return false;
  745. }
  746. }
  747. // 判斷回傳資料是否為json
  748. function is_json_result(result)
  749. {
  750. if (/^[\],:{}\s]*$/.test(result.replace(/\\["\\\/bfnrtu]/g, '@').
  751. replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
  752. replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
  753. //the json is ok
  754. return true;
  755. }else{
  756. //the json is not ok
  757. alertify_error("查無資料,請鍵入正確資料 (回傳資料有誤)");
  758. return false;
  759. }
  760. }
  761. // 執行卡片記名 step 1
  762. function do_card_register_barcode_input(event)
  763. {
  764. event.preventDefault();
  765. if(! $("#card_register_barcode_input_form").isValid()) return false;
  766. var barcode = $("#card_register_barcode").val() == '' ? '0' : $("#card_register_barcode").val();
  767. $.ajax
  768. ({
  769. url: "<?=APP_URL?>get_barcode_info",
  770. type: "post",
  771. dataType:"text",
  772. data:{
  773. "barcode": barcode
  774. },
  775. success: function(result)
  776. {
  777. if(!is_valid_result(result)){ return false; }
  778. if(!is_json_result(result)){ return false; }
  779. var jdata = JSON.parse(result);
  780. if(jdata.result_code == "OK")
  781. {
  782. //console.log(jdata);
  783. // 已開卡
  784. if(jdata.result){
  785. alertify_log("已開卡..");
  786. user_allpa_info_handler(jdata);
  787. return false;
  788. }
  789. // 綁定頁
  790. $("#card_register_barcode_value").text(jdata.barcode);
  791. $("#card_register_balance_value").text(jdata.balance);
  792. $("#card_register_card_status_value").text(jdata.card_status);
  793. $("#card_register_bonus_value").text(jdata.bonus);
  794. show_item("card_register_lpr_input");
  795. }else{
  796. alertify_error([
  797. "查詢失敗..<br/><br/>",
  798. "[代碼] : ", jdata.result_code, "<br/>",
  799. "[訊息] : ", jdata.result_msg, "<br/>"
  800. ].join(''));
  801. }
  802. },
  803. error: function (xhr, ajaxOptions, thrownError)
  804. {
  805. alertify_error("發生未知錯誤, 請稍候再試");
  806. }
  807. })
  808. }
  809. // 執行卡片記名 step 2
  810. function do_card_register(event)
  811. {
  812. event.preventDefault();
  813. if(! $("#card_register_lpr_input_form").isValid()) return false;
  814. var barcode = $("#card_register_barcode_value").text() == '' ? '0' : $("#card_register_barcode_value").text();
  815. var lpr = $("#card_register_lpr").val();
  816. $.ajax
  817. ({
  818. url: "<?=APP_URL?>card_register",
  819. type: "post",
  820. dataType:"text",
  821. data:{
  822. "barcode": barcode,
  823. "lpr": lpr
  824. },
  825. success: function(result)
  826. {
  827. if(!is_valid_result(result)){ return false; }
  828. if(!is_json_result(result)){ return false; }
  829. var jdata = JSON.parse(result);
  830. if(jdata.result_code == "OK")
  831. {
  832. alertify_log("卡片記名完成");
  833. user_allpa_info_handler(jdata);
  834. return false;
  835. } else if(jdata.result_code == "-201") // 已註冊的車牌, 詢問點數轉移
  836. {
  837. console.log("switch?? " + jdata);
  838. alertify_log([
  839. "車牌已綁卡, 請直接購卡加值..<br/><br/>",
  840. "[代碼] : ", jdata.result_code, "<br/>",
  841. "[訊息] : ", jdata.result_msg, "<br/>"
  842. ].join(''));
  843. } else {
  844. alertify_error([
  845. "卡片記名失敗..<br/><br/>",
  846. "[代碼] : ", jdata.result_code, "<br/>",
  847. "[訊息] : ", jdata.result_msg, "<br/>"
  848. ].join(''));
  849. }
  850. },
  851. error: function (xhr, ajaxOptions, thrownError)
  852. {
  853. alertify_error("發生未知錯誤, 請稍候再試");
  854. }
  855. })
  856. }
  857. // 開啟轉帳畫面
  858. function transfer_money(event)
  859. {
  860. event.preventDefault();
  861. if($("#payment_lpr").val() == '')
  862. {
  863. alertify_log("請指定要加值的車牌號碼!!");
  864. return false;
  865. }
  866. if(! $("#payment_data").isValid()) return false;
  867. if($("#email").val() == '' && $("#mobile").val() == '')
  868. {
  869. alertify_error("請至少提供一項發票通知方式<br/>1. 電子信箱 <br/>2. 或 手機號碼<br/><br/>謝謝!!");
  870. return false;
  871. }
  872. if (! confirm("開始結帳嗎 ?")) return false;
  873. // Create Base64 Object
  874. 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}}
  875. var lpr = $("#payment_lpr").val() == '' ? 'UNKNOWN' : $("#payment_lpr").val();
  876. var order_no = $("#show_order_no").text() == '' ? '0' : $("#show_order_no").text();
  877. var invoice_receiver = $("#invoice_receiver").val() == '' ? '0' : $("#invoice_receiver").val();
  878. var company_no = $("#company_no").val() == '' ? '0' : $("#company_no").val();
  879. var email = $("#email").val() == '' ? '0' : Base64.encode($("#email").val()).slice(0, -1); // remove base64 '=' for URI rule
  880. var mobile = $("#mobile").val() == '' ? '0' : $("#mobile").val();
  881. webatm = window.open(
  882. ["<?=APP_URL?>transfer_money/",
  883. lpr, "/",
  884. order_no, "/",
  885. encodeURI(invoice_receiver), "/",
  886. encodeURI(company_no), "/",
  887. email, "/",
  888. mobile, "/"
  889. ].join('')
  890. , "_self");
  891. }
  892. // 執行 PIN 儲值
  893. function do_allpa_reload(event)
  894. {
  895. event.preventDefault();
  896. if(! $("#allpa_reload_data").isValid()) return false;
  897. var pin_check_id = $("#reload_pin_check_id").text() == '' ? '0' : $("#reload_pin_check_id").text();
  898. var order_no = $("#reload_order_no").text() == '' ? '0' : $("#reload_order_no").text();
  899. var reload_pin = $("#reload_pin").val() == '' ? '0' : $("#reload_pin").val();
  900. $.ajax
  901. ({
  902. url: "<?=APP_URL?>allpa_reload",
  903. type: "post",
  904. dataType:"text",
  905. data:{
  906. "pin_check_id": pin_check_id,
  907. "order_no": order_no,
  908. "reload_pin": reload_pin
  909. },
  910. success: function(result)
  911. {
  912. if(!is_valid_result(result)){ return false; }
  913. if(!is_json_result(result)){ return false; }
  914. var jdata = JSON.parse(result);
  915. if(jdata.result_code == "OK")
  916. {
  917. alertify_log([
  918. "PIN 儲值成功..<br/><br/>",
  919. "[代碼] : ", jdata.result_code, "<br/>",
  920. "[訊息] : ", jdata.result_msg, "<br/>"
  921. ].join(''));
  922. user_allpa_info_handler(jdata);
  923. }else{
  924. alertify_error([
  925. "PIN 儲值失敗..<br/><br/>",
  926. "[代碼] : ", jdata.result_code, "<br/>",
  927. "[訊息] : ", jdata.result_msg, "<br/>"
  928. ].join(''));
  929. }
  930. },
  931. error: function (xhr, ajaxOptions, thrownError)
  932. {
  933. alertify_error("發生未知錯誤, 請稍候再試");
  934. }
  935. })
  936. }
  937. // 啟用卡片
  938. function do_activate(order_no)
  939. {
  940. $.ajax
  941. ({
  942. url: "<?=APP_URL?>activate_bill",
  943. type: "post",
  944. dataType:"text",
  945. data:{
  946. "order_no": order_no
  947. },
  948. success: function(result)
  949. {
  950. if(!is_valid_result(result)){ return false; }
  951. if(!is_json_result(result)){ return false; }
  952. var jdata = JSON.parse(result);
  953. if(jdata.result_code == "OK")
  954. {
  955. //console.log(jdata);
  956. // 新開卡
  957. if(!jdata.encoded_pic){
  958. user_allpa_info_handler(jdata);
  959. return false;
  960. }
  961. // variables for time units
  962. var days, hours, minutes, seconds = 0;
  963.  
  964. // get tag element
  965. var countdown = $("#show_pin_valid_time_countdown");
  966. countdown.val("");
  967. //var countdown_offset_ms = 60*5*1000; // 比資料庫早5分鐘timeout
  968. var duration = moment.duration({minutes: 0}); // 比資料庫早5分鐘timeout
  969. // set the date we're counting down to
  970. var target_date = moment(jdata.valid_before).subtract(duration);
  971. //var target_date = new Date(jdata.balance_time_limit).getTime();
  972. pinIntervalId = setInterval(function () {
  973.     // find the amount of "seconds" between now and target
  974. var seconds_left = target_date.diff(moment(), 'seconds');
  975. //console.log(seconds_left);
  976. //var current_date = new Date().getTime();
  977.     //var seconds_left = (target_date - current_date - countdown_offset_ms) / 1000;
  978. if(seconds_left <= 0){
  979. clearInterval(pinIntervalId);
  980. // reload page
  981. show_item('check_user');
  982. }
  983.  
  984.     // do some time calculations
  985.     days = parseInt(seconds_left / 86400);
  986.     seconds_left = seconds_left % 86400;
  987.      
  988.     hours = parseInt(seconds_left / 3600);
  989.     seconds_left = seconds_left % 3600;
  990.      
  991.     minutes = parseInt(seconds_left / 60);
  992.     seconds = parseInt(seconds_left % 60);
  993. if(minutes < 10){
  994. minutes = '0' + minutes;
  995. }
  996. if(seconds < 10){
  997. seconds = '0' + seconds;
  998. }
  999.     // format countdown string + set tag value
  1000. countdown.text(['還剩 ', minutes, ' : ', seconds, ' 有效'].join(''));
  1001. }, 1000);
  1002. $("#show_reload_lpr").text(jdata.lpr);
  1003. $("#show_reload_barcode").text(jdata.barcode);
  1004. $("#show_reload_amount_before").text([jdata.amount_before, ' 元'].join(''));
  1005. $("#show_reload_amt").text([jdata.amt, ' 元'].join(''));
  1006. $("#show_reload_amount_next").text([jdata.amount_before, ' 元', " + ", jdata.amt, ' 元'].join(''));
  1007. $("#show_pin_pic").html('<img src="data:image/gif;base64,' +jdata.encoded_pic+ '" />');
  1008. // hidden
  1009. $("#reload_pin_check_id").text(jdata.pin_check_id);
  1010. $("#reload_order_no").text(jdata.order_no);
  1011. show_item("allpa_reload");
  1012. }else{
  1013. alertify_error([
  1014. "啟用失敗..<br/><br/>",
  1015. "[代碼] : ", jdata.result_code, "<br/>",
  1016. "[訊息] : ", jdata.result_msg, "<br/>"
  1017. ].join(''));
  1018. }
  1019. },
  1020. error: function (xhr, ajaxOptions, thrownError)
  1021. {
  1022. alertify_error("發生未知錯誤, 請稍候再試");
  1023. }
  1024. })
  1025. }
  1026. // 購買卡片
  1027. function do_purchase(product_id)
  1028. {
  1029. $.ajax
  1030. ({
  1031. url: "<?=APP_URL?>purchase",
  1032. type: "post",
  1033. dataType:"text",
  1034. data:{
  1035. "product_id": product_id
  1036. },
  1037. success: function(result)
  1038. {
  1039. if(!is_valid_result(result)){ return false; }
  1040. if(!is_json_result(result)){ return false; }
  1041. var jdata = JSON.parse(result);
  1042. if(jdata.result_code == "OK")
  1043. {
  1044. //console.log(jdata);
  1045. // variables for time units
  1046. var days, hours, minutes, seconds = 0;
  1047.  
  1048. // get tag element
  1049. var countdown = $("#show_valid_time_countdown");
  1050. countdown.val("");
  1051. //var countdown_offset_ms = 60*5*1000; // 比資料庫早5分鐘timeout
  1052. var duration = moment.duration({minutes: 5}); // 比資料庫早5分鐘timeout
  1053. // set the date we're counting down to
  1054. var target_date = moment(jdata.valid_time).subtract(duration);
  1055. //var target_date = new Date(jdata.balance_time_limit).getTime();
  1056. refreshIntervalId = setInterval(function () {
  1057.     // find the amount of "seconds" between now and target
  1058. var seconds_left = target_date.diff(moment(), 'seconds');
  1059. //console.log(seconds_left);
  1060. //var current_date = new Date().getTime();
  1061.     //var seconds_left = (target_date - current_date - countdown_offset_ms) / 1000;
  1062. if(seconds_left <= 0){
  1063. clearInterval(refreshIntervalId);
  1064. // reload page
  1065. show_item('allpa_products');
  1066. }
  1067.  
  1068.     // do some time calculations
  1069.     days = parseInt(seconds_left / 86400);
  1070.     seconds_left = seconds_left % 86400;
  1071.      
  1072.     hours = parseInt(seconds_left / 3600);
  1073.     seconds_left = seconds_left % 3600;
  1074.      
  1075.     minutes = parseInt(seconds_left / 60);
  1076.     seconds = parseInt(seconds_left % 60);
  1077. if(minutes < 10){
  1078. minutes = '0' + minutes;
  1079. }
  1080. if(seconds < 10){
  1081. seconds = '0' + seconds;
  1082. }
  1083.     // format countdown string + set tag value
  1084. countdown.text(['還剩 ', minutes, ' : ', seconds, ' 有效'].join(''));
  1085. }, 1000);
  1086. $("#show_product_name").text(jdata.product_name);
  1087. $("#show_product_desc").text(jdata.product_desc);
  1088. $("#show_remarks").text(jdata.remarks);
  1089. $("#show_amt").text([jdata.amt, ' 元'].join(''));
  1090. $("#show_order_no").text(jdata.order_no);
  1091. show_item("payment_data");
  1092. }else{
  1093. alertify_error([
  1094. "購買失敗..<br/><br/>",
  1095. "[代碼] : ", jdata.result_code, "<br/>",
  1096. "[訊息] : ", jdata.result_msg, "<br/>"
  1097. ].join(''));
  1098. }
  1099. },
  1100. error: function (xhr, ajaxOptions, thrownError)
  1101. {
  1102. alertify_error("發生未知錯誤, 請稍候再試");
  1103. }
  1104. })
  1105. }
  1106. // 加值清單
  1107. function get_allpa_products(event)
  1108. {
  1109. event.preventDefault();
  1110. $.ajax
  1111. ({
  1112. url: "<?=APP_URL?>get_allpa_products",
  1113. type: "post",
  1114. dataType:"text",
  1115. success: function(result)
  1116. {
  1117. if(!is_valid_result(result)){ return false; }
  1118. if(!is_json_result(result)){ return false; }
  1119. var jdata = JSON.parse(result);
  1120. // 清空
  1121. $("#product_data_tbody").html("");
  1122. if(jdata.length > 0){
  1123. for(key in jdata) {
  1124. var result = jdata[key];
  1125. $("#product_list>[data-tag=p_name]").text(result['product_name']);
  1126. $("#product_list>[data-tag=p_desc]").html(result['product_desc']);
  1127. $("#product_list>[data-tag=p_function]").html("<pre type='button' class='btn btn-default' onclick='do_purchase("+result['product_id']+")'> 購 買 </pre>");
  1128. $("<tr data-day='day'>"+$("#product_list").html()+"</tr>").appendTo("#product_data_tbody");
  1129. }
  1130. }else{
  1131. $("#product_list>[data-tag=p_name]").text("暫不提供, 敬請期待..");
  1132. $("#product_list>[data-tag=p_desc]").html("");
  1133. $("#product_list>[data-tag=p_function]").html("");
  1134. $("<tr data-day='day'>"+$("#product_list").html()+"</tr>").appendTo("#product_data_tbody");
  1135. }
  1136. show_item('allpa_products');
  1137. },
  1138. error: function (xhr, ajaxOptions, thrownError)
  1139. {
  1140. alertify_error("發生未知錯誤, 請稍候再試");
  1141. }
  1142. })
  1143. }
  1144. // 查詢用戶
  1145. function do_check_user(event)
  1146. {
  1147. event.preventDefault();
  1148. if ($("#user_lpr").val() == "")
  1149. {
  1150. alertify_error("請填寫車號");
  1151. return false;
  1152. }
  1153. if(! $("#check_user_form").isValid()) return false;
  1154. $.ajax
  1155. ({
  1156. url: "<?=APP_URL?>get_allpa_info",
  1157. type: "post",
  1158. dataType:"text",
  1159. data:{
  1160. "user_lpr": $("#user_lpr").val()
  1161. },
  1162. success: function(result)
  1163. {
  1164. if(!is_valid_result(result)){ return false; }
  1165. if(!is_json_result(result)){ return false; }
  1166. var jdata = JSON.parse(result);
  1167. if(jdata.result_code == "OK")
  1168. {
  1169. user_allpa_info_handler(jdata);
  1170. }else{
  1171. alertify_error([
  1172. "查無資料..<br/><br/>",
  1173. "[代碼] : ", jdata.result_code, "<br/>",
  1174. "[訊息] : ", jdata.result_msg, "<br/>"
  1175. ].join(''));
  1176. }
  1177. },
  1178. error: function (xhr, ajaxOptions, thrownError)
  1179. {
  1180. alertify_error("發生未知錯誤, 請稍候再試");
  1181. }
  1182. })
  1183. }
  1184. // 歐Pa卡 - 繳費
  1185. function do_allpa_pay_bill(order_no)
  1186. {
  1187. $.ajax
  1188. ({
  1189. url: "<?=APP_URL?>allpa_pay_bill",
  1190. type: "post",
  1191. dataType:"text",
  1192. data:{
  1193. "order_no": order_no
  1194. },
  1195. success: function(result)
  1196. {
  1197. if(!is_valid_result(result)){ return false; }
  1198. if(!is_json_result(result)){ return false; }
  1199. var jdata = JSON.parse(result);
  1200. if(jdata.result_code == "OK")
  1201. {
  1202. user_allpa_info_handler(jdata);
  1203. }else{
  1204. alertify_error([
  1205. "處理失敗..<br/><br/>",
  1206. "[代碼] : ", jdata.result_code, "<br/>",
  1207. "[訊息] : ", jdata.result_msg, "<br/>"
  1208. ].join(''));
  1209. }
  1210. },
  1211. error: function (xhr, ajaxOptions, thrownError)
  1212. {
  1213. alertify_error("發生未知錯誤, 請稍候再試");
  1214. }
  1215. })
  1216. }
  1217. // user_allpa_info, 頁面回傳流程
  1218. function user_allpa_info_handler(jdata)
  1219. {
  1220. //console.log(jdata.result);
  1221. var allpa_current = jdata.result.allpa_current;
  1222. var allpa_invalid = jdata.result.allpa_invalid;
  1223. var allpa_other = jdata.result.allpa_other;
  1224. var bill_ready = jdata.result.bill_ready;
  1225. var bill_finished = jdata.result.bill_finished;
  1226. var allpa_user_bill_finished = jdata.result.allpa_user_bill_finished;
  1227. var allpa_user_bill_gg = jdata.result.allpa_user_bill_gg;
  1228. var allpa_user_bill_debt = jdata.result.allpa_user_bill_debt;
  1229. //console.log("allpa_current: " + allpa_current);
  1230. //console.log("allpa_other: " + allpa_other);
  1231. //console.log("bill_ready: " + bill_ready);
  1232. //console.log("bill_finished: " + bill_finished);
  1233. // 目前卡片資訊
  1234. if(allpa_current){
  1235. $("#show_info_lpr").text(allpa_current.lpr);
  1236. $("#show_info_barcode").text(allpa_current.barcode);
  1237. $("#show_info_balance").text(allpa_current.balance);
  1238. $("#show_info_bonus").text(allpa_current.bonus);
  1239. $("#user_current_allpa_info").show();
  1240. }else{
  1241. $("#user_current_allpa_info").hide();
  1242. }
  1243. // 無效的卡片資訊
  1244. if(allpa_invalid){
  1245. $("#show_invalid_card_status").text(allpa_invalid.card_status);
  1246. $("#show_invalid_lpr").text(allpa_invalid.lpr);
  1247. $("#show_invalid_barcode").text(allpa_invalid.barcode);
  1248. $("#show_invalid_balance").text(allpa_invalid.balance);
  1249. $("#show_invalid_bonus").text(allpa_invalid.bonus);
  1250. $("#user_invalid_allpa_info").show();
  1251. }else{
  1252. $("#user_invalid_allpa_info").hide();
  1253. }
  1254. // 卡片使用資訊
  1255. if(allpa_user_bill_finished || allpa_user_bill_gg || allpa_user_bill_debt){
  1256. $("#allpa_user_bill_data_tbody").html("");
  1257. for(key in allpa_user_bill_debt) {
  1258. var result = allpa_user_bill_debt[key];
  1259. var b_name = "尚未付款";
  1260. var b_desc = ['*時段 ', result['in_time'], '<br/>至 ', result['balance_time']].join('');
  1261. var b_amt = [result['amt'], ' 元'].join('');
  1262. $("#allpa_user_bill_list>[data-tag=b_name]").text(b_name);
  1263. $("#allpa_user_bill_list>[data-tag=b_desc]").html(b_desc);
  1264. $("#allpa_user_bill_list>[data-tag=b_amt]").text(b_amt);
  1265. $("#allpa_user_bill_list>[data-tag=b_function]").html("<pre type='button' class='btn btn-default' onclick='do_allpa_pay_bill("+result['order_no']+")'>繳 費</pre>");
  1266. $("<tr data-day='day' style='color: blue;'>"+$("#allpa_user_bill_list").html()+"</tr>").appendTo("#allpa_user_bill_data_tbody");
  1267. }
  1268. for(key in allpa_user_bill_gg) {
  1269. var result = allpa_user_bill_gg[key];
  1270. var b_name = "系統錯誤";
  1271. var b_desc = ['*時段 ', result['in_time'], '<br/>至 ', result['balance_time']].join('');
  1272. var b_amt = [result['amt'], ' 元'].join('');
  1273. $("#allpa_user_bill_list>[data-tag=b_name]").text(b_name);
  1274. $("#allpa_user_bill_list>[data-tag=b_desc]").html(b_desc);
  1275. $("#allpa_user_bill_list>[data-tag=b_amt]").text(b_amt);
  1276. $("#allpa_user_bill_list>[data-tag=b_function]").html("請通知管理員");
  1277. $("<tr data-day='day' style='color: red;'>"+$("#allpa_user_bill_list").html()+"</tr>").appendTo("#allpa_user_bill_data_tbody");
  1278. }
  1279. for(key in allpa_user_bill_finished) {
  1280. var result = allpa_user_bill_finished[key];
  1281. var b_name = "結帳完成";
  1282. var b_desc = ['*時段 ', result['in_time'], '<br/>至 ', result['balance_time']].join('');
  1283. var b_amt = [result['amt'], ' 元'].join('');
  1284. $("#allpa_user_bill_list>[data-tag=b_name]").text(b_name);
  1285. $("#allpa_user_bill_list>[data-tag=b_desc]").html(b_desc);
  1286. $("#allpa_user_bill_list>[data-tag=b_amt]").text(b_amt);
  1287. $("#allpa_user_bill_list>[data-tag=b_function]").html("已完成");
  1288. $("<tr data-day='day'>"+$("#allpa_user_bill_list").html()+"</tr>").appendTo("#allpa_user_bill_data_tbody");
  1289. }
  1290. $("#allpa_user_bill_info").show();
  1291. }else{
  1292. $("#allpa_user_bill_info").hide();
  1293. }
  1294. // 卡片購買資訊
  1295. if(bill_ready || bill_finished){
  1296. $("#bill_data_tbody").html("");
  1297. for(key in bill_ready) {
  1298. var result = bill_ready[key];
  1299. $("#bill_list>[data-tag=b_name]").text(result['product_name']);
  1300. $("#bill_list>[data-tag=b_desc]").html(result['product_desc']);
  1301. $("#bill_list>[data-tag=b_function]").html("<pre type='button' class='btn btn-default' onclick='do_activate("+result['order_no']+")'>啟 用</pre>");
  1302. $("<tr data-day='day'>"+$("#bill_list").html()+"</tr>").appendTo("#bill_data_tbody");
  1303. }
  1304. for(key in bill_finished) {
  1305. var result = bill_finished[key];
  1306. $("#bill_list>[data-tag=b_name]").text(result['product_name']);
  1307. $("#bill_list>[data-tag=b_desc]").html(result['product_desc']);
  1308. $("#bill_list>[data-tag=b_function]").html("已啟用");
  1309. $("<tr data-day='day'>"+$("#bill_list").html()+"</tr>").appendTo("#bill_data_tbody");
  1310. }
  1311. $("#user_bill_info").show();
  1312. }else{
  1313. $("#user_bill_info").hide();
  1314. }
  1315. show_item('user_allpa_info');
  1316. }
  1317. // 執行卡號綁定
  1318. /*
  1319. function do_register(event)
  1320. {
  1321. event.preventDefault();
  1322. if ($("#register_lpr").val() == "")
  1323. {
  1324. alertify_error("請填寫車號");
  1325. return false;
  1326. }
  1327. if ($("#register_barcode").val() == "")
  1328. {
  1329. alertify_error("請填寫卡號");
  1330. return false;
  1331. }
  1332. if(! $("#register_form").isValid()) return false;
  1333. $.ajax
  1334. ({
  1335. url: "<?=APP_URL?>register",
  1336. type: "post",
  1337. dataType:"text",
  1338. data:{
  1339. "register_lpr": $("#register_lpr").val(),
  1340. "register_barcode": $("#register_barcode").val()
  1341. },
  1342. success: function(result)
  1343. {
  1344. if(!is_valid_result(result)){ return false; }
  1345. if(!is_json_result(result)){ return false; }
  1346. var jdata = JSON.parse(result);
  1347. if(jdata.result_code == "OK")
  1348. {
  1349. alertify_success([
  1350. jdata.result_msg, "<br/><br/>",
  1351. "[歐Pa卡, 記名處理完成]", "<br/>",
  1352. "* 車牌號碼 : ", jdata.register_lpr, "<br/>",
  1353. "* 卡片號碼 : ", jdata.register_barcode, "<br/>"
  1354. ].join(''));
  1355. }else{
  1356. alertify_error([
  1357. "綁定失敗..<br/><br/>",
  1358. "[代碼] : ", jdata.result_code, "<br/>",
  1359. "[訊息] : ", jdata.result_msg, "<br/>"
  1360. ].join(''));
  1361. }
  1362. },
  1363. error: function (xhr, ajaxOptions, thrownError)
  1364. {
  1365. alertify_error("發生未知錯誤, 請稍候再試");
  1366. }
  1367. })
  1368. }
  1369. */
  1370. $(document).ready(function()
  1371. {
  1372. <?php /* validate 設定start */ ?>
  1373. $.validate(
  1374. {
  1375. modules : 'security',
  1376. }
  1377. );
  1378. <?php /* validate 設定end */ ?>
  1379. // 如果畫面沒動作, 自動更新頁面
  1380. var reloadTimeMillis = 600000; // 每 10 min 自動重新載入頁面
  1381. var checkReloadTimeMillis = 10000; // 每 10 sec 判斷一次
  1382. // 如果畫面沒動作, 每10分鐘自動重新載入頁面
  1383. var aliveTime = moment();
  1384. $(document.body).bind("mousemove keypress", function(e) {
  1385. aliveTime = moment();
  1386. });
  1387. function refresh() {
  1388. if(moment() - aliveTime >= reloadTimeMillis)
  1389. window.location.reload(true);
  1390. else
  1391. setTimeout(refresh, checkReloadTimeMillis);
  1392. }
  1393. setTimeout(refresh, checkReloadTimeMillis);
  1394. });
  1395. </script>