| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <title>Payment</title>
- <meta http-equiv="X-UA-Compatible" content="ie=edge" />
- <meta name="full-screen" content="yes" />
- <meta name="x5-fullscreen" content="true" />
- <meta
- name="viewport"
- content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
- />
- <link rel="stylesheet" href="../css/element-ui.css" />
- <link rel="stylesheet" href="../css/element@2.12.2.css" />
- <link rel="stylesheet" href="../css/pay.css" />
- <link
- rel="stylesheet"
- href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
- />
- <style>
- .alert-warning{
- margin: 5px;
- font-size: 14px;
- }
- .return-block{
- display: flex;
- justify-content: center;
- padding-bottom: 30px;
- border-bottom: 1px dashed #333;
- }
- ul{
- padding: 0;
- }
- </style>
- </head>
- <body>
- <div class="container" id="pay">
- <nav class="navbar header">
- <div class="container-fluid">
- <div class="navbar-header">
- <h1>
- <span class="navbar-brand logo"
- ><img
- src="data:image/png;base64,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"
- /></span>
- </h1>
- </div>
- <!-- <div
- class="navbar-form visible-md-block visible-lg-block navbar-right"
- >
- <div style="display: flex; justify-content: flex-end">
- <div class="menu-logo chooseLang">
- <img
- v-if="langList[language] == 'ENGLISH'"
- style="width: 17px; height: 12px; margin: 0 4px"
- src="../img/EN.jpg"
- alt=""
- />
- <img
- v-if="langList[language] == '中文简体'"
- style="width: 17px; height: 12px; margin: 0 4px"
- src="../img/CN.jpg"
- alt=""
- />
- <el-dropdown trigger="click" @command="chooseLang">
- <span class="menu">
- {{langList[language]}}
- <i class="el-icon-arrow-down el-icon--right"></i>
- </span>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item command="en">English</el-dropdown-item>
- <el-dropdown-item command="cn">中文简体</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </div>
- </div>
- </div> -->
- </div>
- </nav>
- <div class="container-fluid">
- <div class="panel" style="border-color: #e4e7ed;">
- <div class="panel-body" style="padding-top: 40px;">
- <!-- <div
- style="
- display: flex;
- justify-content: center;
- margin-bottom: 10px;
- "
- class="form-group lang-mobile text-center hidden-lg hidden-md"
- >
- <div class="menu-logo chooseLang">
- <img
- v-if="langList[language] == 'ENGLISH'"
- style="width: 17px; height: 12px; margin: 0 4px"
- src="../img/EN.jpg"
- alt=""
- />
- <img
- v-if="langList[language] == '中文简体'"
- style="width: 17px; height: 12px; margin: 0 4px"
- src="../img/CN.jpg"
- alt=""
- />
- <el-dropdown trigger="click" @command="chooseLang">
- <span class="menu">
- {{langList[language]}}
- <i class="el-icon-arrow-down el-icon--right"></i>
- </span>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item command="en">English</el-dropdown-item>
- <el-dropdown-item command="cn">中文简体</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </div>
- </div> -->
- <div class="row">
- <!-- <div class="col-xs-12 col-sm-4 col-lg-3 text-center">
- <p class=""><strong>总计</strong>: {{amount}} {{currency}}</p>
- <div id="qrcode" style="width: 250px; height: 250px;margin: auto;"></div>
- </div> -->
- <div class="col-xs-12 col-sm-8 col-lg-9">
- <div class="row">
- <div class="col-xs-12 col-sm-12">
- <el-form ref="form" label-width="120px">
- <el-form-item label="CLABE:">
- <el-input readonly v-model="CLABE"></el-input>
- </el-form-item>
- <el-form-item label="CONCEPTO:">
- <el-input readonly v-model="CONCEPTO"></el-input>
- </el-form-item>
- <el-form-item label="BENEFICIARIO:">
- <el-input readonly v-model="BENEFICIARIO"></el-input>
- </el-form-item>
- <el-form-item label="MONTO:">
- <el-input readonly v-model="MONTO"></el-input>
- </el-form-item>
- <!-- <el-form-item label="CENTROCOSTO:">
- <el-input readonly v-model="CENTROCOSTO"></el-input>
- </el-form-item> -->
- </el-form>
- <!-- <ul style="list-style: none;">
- <li>CLABE:{{CLABE}}</li>
- <li>CONCEPTO:{{CONCEPTO}}</li>
- <li>BENEFICIARIO:{{BENEFICIARIO}}</li>
- <li>MONTO:{{MONTO}}</li>
- <li>CENTROCOSTO:{{CENTROCOSTO}}</li>
- </ul> -->
- </div>
- </div>
- <p class="return-block" style="">
- <el-button
- size="medium"
- type="primary"
- class="s-btn"
- @click="Pay"
- >Paid</el-button
- >
- <el-button
- size="medium"
- type="warning"
- class="s-btn"
- @click="Cancle"
- >Cancle</el-button
- >
- </p>
- <!-- <div class="alert alert-warning">
-
- 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.
- </div>
- <div class="alert alert-warning">
- 2.Ingresa a tu banca en línea.
- </div>
- <div class="alert alert-warning">
- 3.Selecciona alta de nueva cuenta.
- </div>
- <div class="alert alert-warning">
- 4.Selecciona como banco receptor: asp – spei.
- </div>
- <div class="alert alert-warning">
- 5.Captura los 18 dígitos de la clabe que te proporcionamos arriba.
- </div>
- <div class="alert alert-warning">
- 6.Espera que el banco valide la cuenta.
- </div>
- <div class="alert alert-warning">
- 7.Captura el monto a pagar.
- </div>
- <div class="alert alert-warning">
- 8.En concepto ingresa tu número de pedido.
- </div>
- <div class="alert alert-warning">
- 9.Confirma el pago.
- </div> -->
- <div class="block">
- <el-timeline>
- <el-timeline-item color="#EB3F57">
- <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>
- </el-timeline-item>
- <el-timeline-item color="#EB3F57">
- <p>Ingresa a tu banca en línea.</p>
- </el-timeline-item>
- <el-timeline-item color="#EB3F57">
- <p>Selecciona alta de nueva cuenta.</p>
- </el-timeline-item>
- <el-timeline-item color="#EB3F57">
- <p>Selecciona como banco receptor: asp – spei.</p>
- </el-timeline-item>
- <el-timeline-item color="#EB3F57">
- <p>Captura los 18 dígitos de la clabe que te proporcionamos arriba.</p>
- </el-timeline-item>
- <el-timeline-item color="#EB3F57">
- <p>Espera que el banco valide la cuenta.</p>
- </el-timeline-item>
- <el-timeline-item color="#EB3F57">
- <p>Captura el monto a pagar.</p>
- </el-timeline-item>
- <el-timeline-item color="#EB3F57">
- <p>En concepto ingresa tu número de pedido.</p>
- </el-timeline-item>
- <el-timeline-item color="#EB3F57">
- <p>Confirma el pago.</p>
- </el-timeline-item>
- </el-timeline>
- </div>
-
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- <p class="text-center footer-text">©B2BinPAY</p> -->
- </div>
- <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
- <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
- <script src="../js/vue.min.js"></script>
- <script src="../js/axios.min.js"></script>
- <script src="../js/element-ui.js"></script>
- <script src="../js/element@2.12.2.js"></script>
- <script src="../js/paypaga.js"></script>
- </body>
- </html>
|