paypaga.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Payment</title>
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <meta name="full-screen" content="yes" />
  8. <meta name="x5-fullscreen" content="true" />
  9. <meta
  10. name="viewport"
  11. content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
  12. />
  13. <link rel="stylesheet" href="../css/element-ui.css" />
  14. <link rel="stylesheet" href="../css/element@2.12.2.css" />
  15. <link rel="stylesheet" href="../css/pay.css" />
  16. <link
  17. rel="stylesheet"
  18. href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  19. />
  20. <style>
  21. .alert-warning{
  22. margin: 5px;
  23. font-size: 14px;
  24. }
  25. .return-block{
  26. display: flex;
  27. justify-content: center;
  28. padding-bottom: 30px;
  29. border-bottom: 1px dashed #333;
  30. }
  31. ul{
  32. padding: 0;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div class="container" id="pay">
  38. <nav class="navbar header">
  39. <div class="container-fluid">
  40. <div class="navbar-header">
  41. <h1>
  42. <span class="navbar-brand logo"
  43. ><img
  44. src="data:image/png;base64,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"
  45. /></span>
  46. </h1>
  47. </div>
  48. <!-- <div
  49. class="navbar-form visible-md-block visible-lg-block navbar-right"
  50. >
  51. <div style="display: flex; justify-content: flex-end">
  52. <div class="menu-logo chooseLang">
  53. <img
  54. v-if="langList[language] == 'ENGLISH'"
  55. style="width: 17px; height: 12px; margin: 0 4px"
  56. src="../img/EN.jpg"
  57. alt=""
  58. />
  59. <img
  60. v-if="langList[language] == '中文简体'"
  61. style="width: 17px; height: 12px; margin: 0 4px"
  62. src="../img/CN.jpg"
  63. alt=""
  64. />
  65. <el-dropdown trigger="click" @command="chooseLang">
  66. <span class="menu">
  67. {{langList[language]}}
  68. <i class="el-icon-arrow-down el-icon--right"></i>
  69. </span>
  70. <el-dropdown-menu slot="dropdown">
  71. <el-dropdown-item command="en">English</el-dropdown-item>
  72. <el-dropdown-item command="cn">中文简体</el-dropdown-item>
  73. </el-dropdown-menu>
  74. </el-dropdown>
  75. </div>
  76. </div>
  77. </div> -->
  78. </div>
  79. </nav>
  80. <div class="container-fluid">
  81. <div class="panel" style="border-color: #e4e7ed;">
  82. <div class="panel-body" style="padding-top: 40px;">
  83. <!-- <div
  84. style="
  85. display: flex;
  86. justify-content: center;
  87. margin-bottom: 10px;
  88. "
  89. class="form-group lang-mobile text-center hidden-lg hidden-md"
  90. >
  91. <div class="menu-logo chooseLang">
  92. <img
  93. v-if="langList[language] == 'ENGLISH'"
  94. style="width: 17px; height: 12px; margin: 0 4px"
  95. src="../img/EN.jpg"
  96. alt=""
  97. />
  98. <img
  99. v-if="langList[language] == '中文简体'"
  100. style="width: 17px; height: 12px; margin: 0 4px"
  101. src="../img/CN.jpg"
  102. alt=""
  103. />
  104. <el-dropdown trigger="click" @command="chooseLang">
  105. <span class="menu">
  106. {{langList[language]}}
  107. <i class="el-icon-arrow-down el-icon--right"></i>
  108. </span>
  109. <el-dropdown-menu slot="dropdown">
  110. <el-dropdown-item command="en">English</el-dropdown-item>
  111. <el-dropdown-item command="cn">中文简体</el-dropdown-item>
  112. </el-dropdown-menu>
  113. </el-dropdown>
  114. </div>
  115. </div> -->
  116. <div class="row">
  117. <!-- <div class="col-xs-12 col-sm-4 col-lg-3 text-center">
  118. <p class=""><strong>总计</strong>: {{amount}} {{currency}}</p>
  119. <div id="qrcode" style="width: 250px; height: 250px;margin: auto;"></div>
  120. </div> -->
  121. <div class="col-xs-12 col-sm-8 col-lg-9">
  122. <div class="row">
  123. <div class="col-xs-12 col-sm-12">
  124. <el-form ref="form" label-width="120px">
  125. <el-form-item label="CLABE:">
  126. <el-input readonly v-model="CLABE"></el-input>
  127. </el-form-item>
  128. <el-form-item label="CONCEPTO:">
  129. <el-input readonly v-model="CONCEPTO"></el-input>
  130. </el-form-item>
  131. <el-form-item label="BENEFICIARIO:">
  132. <el-input readonly v-model="BENEFICIARIO"></el-input>
  133. </el-form-item>
  134. <el-form-item label="MONTO:">
  135. <el-input readonly v-model="MONTO"></el-input>
  136. </el-form-item>
  137. <!-- <el-form-item label="CENTROCOSTO:">
  138. <el-input readonly v-model="CENTROCOSTO"></el-input>
  139. </el-form-item> -->
  140. </el-form>
  141. <!-- <ul style="list-style: none;">
  142. <li>CLABE:{{CLABE}}</li>
  143. <li>CONCEPTO:{{CONCEPTO}}</li>
  144. <li>BENEFICIARIO:{{BENEFICIARIO}}</li>
  145. <li>MONTO:{{MONTO}}</li>
  146. <li>CENTROCOSTO:{{CENTROCOSTO}}</li>
  147. </ul> -->
  148. </div>
  149. </div>
  150. <p class="return-block" style="">
  151. <el-button
  152. size="medium"
  153. type="primary"
  154. class="s-btn"
  155. @click="Pay"
  156. >Paid</el-button
  157. >
  158. <el-button
  159. size="medium"
  160. type="warning"
  161. class="s-btn"
  162. @click="Cancle"
  163. >Cancle</el-button
  164. >
  165. </p>
  166. <!-- <div class="alert alert-warning">
  167. 1.Realiza el pago a través de tu aplicación móvil de banca o por medio de la banca en línea. dispones de un período máximo de 4 horas para completar tu transacción. Reconocemos que algunos bancos pueden requerir tiempo para registrar una nueva cuenta, por lo que te recomendamos realizar el pago en este momento. Es importante señalar que el nombre del banco destino puede variar según la entidad bancaria desde la cual estés realizando la transferencia.
  168. </div>
  169. <div class="alert alert-warning">
  170. 2.Ingresa a tu banca en línea.
  171. </div>
  172. <div class="alert alert-warning">
  173. 3.Selecciona alta de nueva cuenta.
  174. </div>
  175. <div class="alert alert-warning">
  176. 4.Selecciona como banco receptor: asp – spei.
  177. </div>
  178. <div class="alert alert-warning">
  179. 5.Captura los 18 dígitos de la clabe que te proporcionamos arriba.
  180. </div>
  181. <div class="alert alert-warning">
  182. 6.Espera que el banco valide la cuenta.
  183. </div>
  184. <div class="alert alert-warning">
  185. 7.Captura el monto a pagar.
  186. </div>
  187. <div class="alert alert-warning">
  188. 8.En concepto ingresa tu número de pedido.
  189. </div>
  190. <div class="alert alert-warning">
  191. 9.Confirma el pago.
  192. </div> -->
  193. <div class="block">
  194. <el-timeline>
  195. <el-timeline-item color="#EB3F57">
  196. <p>Realiza el pago a través de tu aplicación móvil de banca o por medio de la banca en línea. dispones de un período máximo de 4 horas para completar tu transacción. Reconocemos que algunos bancos pueden requerir tiempo para registrar una nueva cuenta, por lo que te recomendamos realizar el pago en este momento. Es importante señalar que el nombre del banco destino puede variar según la entidad bancaria desde la cual estés realizando la transferencia.</p>
  197. </el-timeline-item>
  198. <el-timeline-item color="#EB3F57">
  199. <p>Ingresa a tu banca en línea.</p>
  200. </el-timeline-item>
  201. <el-timeline-item color="#EB3F57">
  202. <p>Selecciona alta de nueva cuenta.</p>
  203. </el-timeline-item>
  204. <el-timeline-item color="#EB3F57">
  205. <p>Selecciona como banco receptor: asp – spei.</p>
  206. </el-timeline-item>
  207. <el-timeline-item color="#EB3F57">
  208. <p>Captura los 18 dígitos de la clabe que te proporcionamos arriba.</p>
  209. </el-timeline-item>
  210. <el-timeline-item color="#EB3F57">
  211. <p>Espera que el banco valide la cuenta.</p>
  212. </el-timeline-item>
  213. <el-timeline-item color="#EB3F57">
  214. <p>Captura el monto a pagar.</p>
  215. </el-timeline-item>
  216. <el-timeline-item color="#EB3F57">
  217. <p>En concepto ingresa tu número de pedido.</p>
  218. </el-timeline-item>
  219. <el-timeline-item color="#EB3F57">
  220. <p>Confirma el pago.</p>
  221. </el-timeline-item>
  222. </el-timeline>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. </div>
  228. </div>
  229. <!-- <p class="text-center footer-text">&copy;B2BinPAY</p> -->
  230. </div>
  231. <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
  232.   <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
  233. <script src="../js/vue.min.js"></script>
  234. <script src="../js/axios.min.js"></script>
  235. <script src="../js/element-ui.js"></script>
  236. <script src="../js/element@2.12.2.js"></script>
  237. <script src="../js/paypaga.js"></script>
  238. </body>
  239. </html>