pagina impresion

components/Login.vue

@@ -27,6 +27,29 @@
           password-reveal
         />
       </b-field>
+
+      <b-field>
+        <b-radio-button
+          v-model="selector"
+          native-value="impresiones"
+          type="is-primary is-light is-outlined"
+          expanded
+        >
+          <b-icon icon="close"></b-icon>
+          <span>Impresiones</span>
+        </b-radio-button>
+
+        <b-radio-button
+          v-model="selector"
+          native-value="inscripciones"
+          type="is-primary is-light is-outlined"
+          expanded
+        >
+          <b-icon icon="check"></b-icon>
+          <span>Inscripciones</span>
+        </b-radio-button>
+      </b-field>
+
       <p class="font" :class="colorSize">
         Si no recuerdas tu NIP de escolares, ingresa:
         <a href="https://sistemas.acatlan.unam.mx/recuperanip/" target="_blanc"
@@ -61,6 +84,7 @@ export default {
     return {
       numeroCuenta: '',
       password: '',
+      selector: '',
       error: '',
     }
   },

components/impresion/datosTicket.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="px-2">
+    <p class="subtitle is-4">
+      <b
+        >Captura la siguiente información tal cual se muestra en tu ticket de
+        CEDETEC que se te entrego en cajas.</b
+      >
+    </p>
+
+    <div class="columns">
+      <b-image
+        class="column mx-2"
+        :src="require('@/assets/ticket.jpeg')"
+        alt="Ticket Acatlán"
+        ratio="16by10"
+      ></b-image>
+
+      <div class="column pr-5">
+        <b-field label="Monto">
+          <b-input v-model="monto" type="number"></b-input>
+        </b-field>
+
+        <b-field label="Fecha">
+          <b-datepicker
+            v-model="fechaTicket"
+            placeholder="Selecciona la fecha"
+            icon="calendar-today"
+            :min-date="minDate"
+            :max-date="maxDate"
+          >
+          </b-datepicker>
+        </b-field>
+
+        <b-field label="Ticket">
+          <b-input maxlength="6" v-model="folio"></b-input>
+        </b-field>
+      </div>
+    </div>
+
+    <div class="has-text-centered pb-5 pt-3">
+      <b-button
+        :disabled="!(folio && monto && fechaTicket)"
+        @click="
+          imprimirWarning(
+            '¿Los datos para la inscripción a CEDETEC son correctos?',
+            cargarCredito
+          )
+        "
+        type="is-success"
+        >Cargar crédito</b-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    const today = new Date()
+    return {
+      folio: '',
+      monto: '',
+      fechaTicket: null,
+
+      minDate: this.diaMin(today),
+      maxDate: new Date(),
+    }
+  },
+  methods: {
+    diaMin(today) {
+      return new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() - today.getDate() + 1
+      )
+    },
+    cargarCredito() {
+      console.log('hola')
+    },
+  },
+}
+</script>

components/registro/CapturaDatos.vue

@@ -42,6 +42,7 @@
         <b-field label="Monto">
           <b-input v-model="monto" type="number"></b-input>
         </b-field>
+
         <b-field label="Fecha">
           <b-datepicker
             v-model="fechaTicket"
@@ -52,6 +53,7 @@
           >
           </b-datepicker>
         </b-field>
+
         <b-field label="Ticket">
           <b-input maxlength="6" v-model="folio"></b-input>
         </b-field>

nuxt.config.js

@@ -22,9 +22,9 @@ export default {
   axios: {},
   build: {},
   env: {
-    // api: 'http://localhost:3000',
+    api: 'http://localhost:3000',
     // api: "https://890af9d598a4.ngrok.io"
     // api: 'https://venus.acatlan.unam.mx/inscripciones_test',
-    api: 'https://venus.acatlan.unam.mx/inscripciones',
+    // api: 'https://venus.acatlan.unam.mx/inscripciones',
   },
 }

pages/impresion/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="container">
+    <DatosTicket />
+  </div>
+</template>
+
+<script>
+import DatosTicket from '../../components/impresion/datosTicket.vue'
+
+export default {
+  components: {
+    DatosTicket,
+  },
+}
+</script>