API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 5th, 2018
199
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 49.95 KB | None | 0 0
raw download clone embed print report
  1. <template>
  2. <v-flex xs12>
  3. <v-stepper class="elevation-0 bg-gray-one" v-model="e1">
  4. <v-stepper-header class="px-5 stepper-width-head elevation-0 align-elements-reservation">
  5. <v-stepper-step step="1" :complete="e1 > 1" class="stepper-control"></v-stepper-step>
  6. <v-divider></v-divider>
  7. <v-stepper-step step="2" :complete="e1 > 2" class="stepper-control"></v-stepper-step>
  8. <v-divider></v-divider>
  9. <v-stepper-step step="3" :complete="e1 > 3" class="stepper-control"></v-stepper-step>
  10. <v-divider></v-divider>
  11. <v-stepper-step step="4" class="stepper-control"></v-stepper-step>
  12. </v-stepper-header>
  13. <v-stepper-items>
  14. <v-stepper-content step="1">
  15. <v-flex xs12 class="font-light text-center section-one-stepper">
  16. <h2 class="font-medium">Porque el tamaño sí importa</h2>
  17. <span class="">Escoge uno de nuestros tres tamaños de locker, y presiona SIGUIENTE.</span>
  18. <div class="info-stepper" style="display:none">
  19. <img :src="infoIcon.url" :alt="infoIcon.alt">
  20. <a>Saber más</a>
  21. </div>
  22. </v-flex>
  23. <v-container class="nopadding-w390">
  24. <v-layout xs12 row wrap>
  25. <v-flex
  26. v-for="(item, i) in sizeElockers"
  27. :key="i"
  28. xs12 sm12 md4
  29. class="text-center py-5 size-lockers-container"
  30. :class="{lockerActive: lockerActive(item.slug)}"
  31. @click="setLockerActive(item)">
  32. <div>
  33. <v-icon class="locker-checked" v-if="lockerActive(item.name)">check</v-icon>
  34. <div class="size-lockers-title">
  35. <h3 class="font-bold color-pink">{{item.name}}</h3>
  36.  
  37. </div>
  38. <div class="imagen-container-stepper">
  39. <img :src="item.url" :alt="item.alt">
  40. </div>
  41. </div>
  42. </v-flex>
  43. <v-flex xs12 class="text-center pt-4">
  44. <small class="small-text clearfix size-lockers__leyenda">*Recuerda: (a) ancho, (h) altura, (p) profundidad</small>
  45. <v-btn v-if="isEmptyActiveLocker" round outline class="btn-next-small" @click.native="e1 = 2">siguiente</v-btn>
  46. <v-btn v-else round outline disabled class="btn-next-small">siguiente</v-btn>
  47.  
  48.  
  49. </v-flex>
  50. </v-layout>
  51. </v-container>
  52. </v-stepper-content>
  53.  
  54. <v-stepper-content step="2">
  55. <v-flex xs12 class="font-light text-center section-one-stepper lock-step-3">
  56. <h2 class="font-medium mb-3">Elige tu locker</h2>
  57. <div class="wrapper-step-tree mb-4">
  58. <v-icon style="font-size:16px;margin-bottom:.3rem">place</v-icon>
  59. <label v-text="dir_selected"></label>
  60. <!--<GmapAutocomplete :options="{
  61. componentRestrictions: {'country': ['pe']}
  62. }"
  63. style="outline:none;" placeholder="Ingresa un distrito, avenida o calle" @place_changed="setPlace" id="autocompleteInput"></GmapAutocomplete>
  64. -->
  65. </div>
  66.  
  67. <div>
  68.  
  69. <div class="mapaylista">
  70. <div class="listalockers-w">
  71. <v-card>
  72.  
  73. <v-list two-line color="cyan" dark>
  74. <template v-for="(el, index) in lockersListItems">
  75.  
  76. <v-list-tile :key="el.nombre" @click="selecListLocker(el)" :class="{'lockerSelected':lockerIDSelected==el.id}">
  77.  
  78. <v-list-tile-content>
  79. <v-list-tile-title v-html="el.nombre"></v-list-tile-title>
  80. </v-list-tile-content>
  81. </v-list-tile>
  82. </template>
  83. </v-list>
  84. </v-card>
  85. </div>
  86.  
  87. <div class="mapalockers-w">
  88. <gmap-map
  89. v-if="e1==2"
  90. :center="currentLocation"
  91. :zoom="14"
  92. map-type-id="roadmap"
  93. class="px-4"
  94. style="width: 100%; height: 100%;min-height: 16rem;"
  95. >
  96. <gmap-marker
  97. :key="index"
  98. v-for="(m, index) in markers"
  99. :position="m.position"
  100. :clickable="true"
  101. :draggable="false"
  102. :icon_="'/images/mapa.png'"
  103.  
  104. @click="clickOnLocker(m.id)">
  105. <gmap-info-window>
  106. <strong>{{m.direccion}}</strong>
  107. </gmap-info-window>
  108. </gmap-marker>
  109.  
  110. </gmap-map>
  111. </div>
  112.  
  113. </div>
  114.  
  115.  
  116.  
  117. <input type="hidden" v-model="searchLocation" name="" value="">
  118. </div>
  119.  
  120. </v-flex>
  121. <v-container class="nopadding-w390">
  122. <v-layout xs12 row wrap>
  123. <v-flex xs12>
  124. <div class="text-center">
  125. <span class=" red--text" v-if="noLockerSelectedAlert!=''" v-text="noLockerSelectedAlert"></span>
  126. </div>
  127. </v-flex>
  128. <v-flex xs12 class="text-center pt-4">
  129. <v-btn round outline class="btn-send-next" @click.native="e1 = 1">ATRAS</v-btn>
  130. <v-btn round outline class="btn-send-next" :disabled="lockerDisponiblePass" @click.native="pasarAParaQuienEs">Siguiente</v-btn>
  131. </v-flex>
  132. </v-layout>
  133. </v-container>
  134. <!-- <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
  135. <v-btn color="primary" @click.native="e1 = 1">Continue</v-btn>
  136. <v-btn flat>Cancel</v-btn> -->
  137. </v-stepper-content>
  138.  
  139.  
  140. <v-stepper-content step="3">
  141. <v-flex xs12 class="font-light text-center section-one-stepper">
  142. <h2 class="font-medium">¿Para quién es?</h2>
  143. <span class="">Cuéntanos quién recogerá el paquete</span>
  144. </v-flex>
  145. <v-container class="nopadding-w390">
  146. <v-layout xs12 row wrap>
  147. <v-flex xs12 class="text-justify">
  148. <div class="wrapper-step-two">
  149. <div class="font-regular min-width-step-two">
  150. <div class="text-step-two">
  151. <input type="text" placeholder="Nombres y apellidos" v-model="friendName"><br>
  152. <input style="width:100%;" v-validate="'required|email'" name="email" type="email" placeholder="Correo electrónico" v-model="friendEmail"><br>
  153. <input type="number" min="0" v-model="friendDni" name="dni" placeholder="DNI"><br>
  154. <input type="number" min="0" placeholder="Celular" name="celular" v-model="friendPhone"><br>
  155. <input type="text" min="0" placeholder="¿Qué vas a dejar en el locker?" v-model="queArticulo"><br>
  156. <span class="error-msg-email" v-show="!emailValid && friendEmail!==''" >ingresa un correo válido</span>
  157. <span class="error-msg-email" v-show="!dniValid && friendDni!==''" >ingresa un DNI válido</span>
  158. </div>
  159. <img class="img-step-two" :src="bgsteptwo.url" :alt="bgsteptwo.alt">
  160. </div>
  161.  
  162. </div>
  163. </v-flex>
  164. <v-flex xs12 class="text-center pt-4">
  165. <v-btn round outline class="btn-send-next" @click.native="e1 = 2">ATRAS</v-btn>
  166. <v-btn v-if="isEmptyStepTwo" :disabled="btnListoLoading" :loading="btnListoLoading" round outline class="btn-send-next" @click.native="goStep4">Listo</v-btn>
  167. <v-btn v-else round outline disabled class="btn-send-next" >Listo</v-btn>
  168. </v-flex>
  169. </v-layout>
  170. </v-container>
  171. <!-- <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
  172. <v-btn color="primary" @click.native="e1 = 3">Continue</v-btn>
  173. <v-btn flat>Cancel</v-btn> -->
  174. </v-stepper-content>
  175.  
  176. <!--asdasd-->
  177. <v-stepper-content step="4" class="regular-step1 regular-step1m3">
  178. <v-flex xs12 class="font-light text-center section-one-stepper">
  179. <h2 class="font-medium mb-2">Resumen de reserva</h2>
  180. </v-flex>
  181. <v-container class="nopadding-w390 enviar-container regular-block">
  182. <v-layout xs12 row wrap>
  183. <div class="white-bg xs12 row wrap layout">
  184. <v-flex xs12 sm6 md6>
  185. <div class="font-regular min-width-step-two ep-form-package">
  186. <div class="text-step-two text-step-one line-bottom_em">
  187. <strong class="primary--color">DIRECCIÓN DEl LOCKER</strong>
  188. <p>{{dir_selected}}</p>
  189. </div>
  190. </div>
  191. </v-flex>
  192. <!--<v-flex xs12 sm6 md6>
  193. <div class="font-regular min-width-step-two ep-form-package">
  194. <div class="text-step-two text-step-one line-left">
  195. <strong class="green--text">DESTINO</strong>
  196. <p></p>
  197. </div>
  198. </div>
  199. </v-flex>-->
  200. </div>
  201.  
  202. <div class="white-bg xs12 row wrap layout">
  203. <v-flex xs12 sm12 md12>
  204. <div class="font-regular min-width-step-two ep-form-package">
  205. <div class="text-step-two text-step-one line-bottom_em">
  206. <strong class="">SOBRE TU ENVÍO</strong>
  207. </div>
  208.  
  209. <v-layout row>
  210. <v-flex xs6 justify-space-between class="layout re-">
  211. <span>Tamaño: {{activeLock}}</span>
  212. </v-flex>
  213. </v-layout>
  214. </div>
  215. </v-flex>
  216. </div>
  217.  
  218. <div class="white-bg xs12 row wrap layout">
  219. <v-flex xs12 sm12 md12>
  220. <div class="font-regular min-width-step-two ep-form-package">
  221. <div class="text-step-two text-step-one line-bottom_em">
  222. <v-layout row wrap justify-space-between>
  223. <v-flex xs12 md6 class="cupon-box">
  224. <div v-if="tiene_cupon">
  225. <div class="text-step-two text-step-one line-bottom_em">
  226. <strong>CUPÓN DE DESCUENTO</strong>
  227. </div>
  228. <div class="cupon-elementos">
  229. <div class="cupon-input-w">
  230. <input type="text" :disabled="se_aplico_cupon" name="" class="input-cupon" value="" v-model="cupon_descuento">
  231. <i class="material-icons" v-if="cupon_descuento!=''" @click="resetearCupon" >
  232. close
  233. </i>
  234. </div>
  235. <v-btn round outline class="btn-aplicar-cupon" :disabled="se_aplico_cupon" @click.native="aplicarCupon">Aplicar cupón</v-btn>
  236.  
  237.  
  238. <transition name="fade">
  239. <span v-if="cupon_mensaje!='' && !se_aplico_cupon" v-text="cupon_mensaje"></span>
  240. </transition>
  241. <span v-if="se_aplico_cupon">
  242. <i class="material-icons">
  243. check
  244. </i>
  245. </span>
  246. </div>
  247. </div>
  248. <!-- asd ruc-->
  249. <div class="block-factura">
  250. <v-checkbox
  251. class="input-create check"
  252. label="¿Desea factura?"
  253. v-model="checkboxFactura"
  254. ></v-checkbox>
  255. <div class="input-factura" v-if="checkboxFactura">
  256. <input type="number" :class="{facturacion_error:facturacion_error_ruc}" placeholder="RUC" v-model="facturacion_ruc">
  257. <input type="text" :class="{facturacion_error:facturacion_error_razonsocial}" placeholder="Razón social" v-model="facturacion_razonsocial">
  258. <div class="text--red" v-if="facturacion_notice!=''" v-text="facturacion_notice"></div>
  259. </div>
  260. </div>
  261. <!-- asd -->
  262. </v-flex>
  263.  
  264. <!-- <v-flex text-md-right xs12 :md6="tiene_cupon" :md12="!tiene_cupon" class="text-md-right"> -->
  265. <v-flex text-md-right xs12 md6 class="text-md-right">
  266. <span class="subheading bold">Subtotal <span class="montos-labels">s/.{{formatoCosto(total_pagado)}}</span></span>
  267. <div class="" v-if="promocion_id!=-1">
  268.  
  269. <span v-if="descuento!=0" class="subheading bold">{{promocion_promo_label}} <span class="montos-labels">s/.-{{formatoCosto(descuento)}}</span></span>
  270. <!-- <span class="subheading bold">Concepto(IGV): </span> -->
  271. </div>
  272. <div class="" v-if="cupon_id!=-1">
  273.  
  274. <span v-if="descuento_cupon!=0" class="subheading bold">{{promocion_cupon_label}} <span class="montos-labels">s/.-{{formatoCosto(descuento_cupon)}}</span></span>
  275. <!-- <span class="subheading bold">Concepto(IGV): </span> -->
  276. </div>
  277. <span class="display-1 bold">Total <span class="montos-labels"> s/.{{total_pagado_final}}</span></span>
  278. </v-flex>
  279. </v-layout>
  280. </div>
  281. </div>
  282. </v-flex>
  283. </div>
  284.  
  285. <v-flex xs12 class="text-center pt-4">
  286. <v-btn round outline class="btn-send-next" @click.native="e1 = 3">ATRAS</v-btn>
  287. <v-btn :disabled="btnListoLoading" :loading="btnListoLoading" round outline class="btn-send-next" @click.native="abrirPanelPagar">Listo</v-btn>
  288. <!-- <v-btn v-else round outline disabled class="btn-send-next" >Listo</v-btn> -->
  289. </v-flex>
  290. </v-layout>
  291. </v-container>
  292. </v-stepper-content>
  293. <!---->
  294. </v-stepper-items>
  295. </v-stepper>
  296. <v-dialog
  297. v-model="modalComplete"
  298. fullscreen
  299. transition="dialog-bottom-transition">
  300. <div class="modal-open-login">
  301. <v-card class="wrapper-info-finish">
  302. <div class="font-regular">
  303. <img class="icon-close-modal" src="../../img/close_icon.png" alt="">
  304. <h3 class="font-bold pb-2">Gracias por tu reserva</h3>
  305. <p>Estamos procesando tu solicitud, cuando tu reserva esté confirmada te enviaremos un correo con un código para que puedas dejar tu paquete en el locker que reservaste. </p>
  306. <img src="../../img/qrmail.png" alt="">
  307. <p class="mt-2">
  308. Recuerda que tienes 24 horas para dejar tu paquete en el locker y luego 24 horas para que sea retirado.</p>
  309. </div>
  310. </v-card>
  311. <div class="back-modal-active" @click.stop="createReservation()">_</div>
  312. </div>
  313. </v-dialog>
  314.  
  315.  
  316.  
  317. <v-navigation-drawer
  318. temporary
  319. v-model="drawerRight"
  320. disable-route-watcher
  321. disable-resize-watcher
  322. hide-overlay
  323. stateless
  324. touchless
  325. right
  326. light
  327. fixed
  328. class=" pb-3 drawer-admin-border d-flex justify-center" style="padding-top:103px;">
  329. <div class="text-center font-regular">
  330.  
  331.  
  332. <h3 class="font-bold">Total:</h3>
  333. <h2 class="font-bold monto-info mb-2 px-4 ">S./{{total_pagado_final}}</h2>
  334. <p style="" class="px-4 ">Recuerda que tienes 24 horas para dejar tu paquete en el locker y luego 24 horas para que sea retirado.</p>
  335.  
  336.  
  337.  
  338.  
  339. <metodos-pagos :propAdminPanel="'locker'">
  340. </metodos-pagos>
  341.  
  342. <div class="pb-2">
  343. <v-btn v-if="!cardSelected" round disabled large class="cover btn-active elevation-0">Pagar</v-btn>
  344. <v-btn v-else round :disabled="pagarBtnLoading" :loading="pagarBtnLoading" large class="cover btn-active elevation-0" @click="guardarReservacionApi()">Pagar</v-btn>
  345. </div>
  346. <div class="text--red" v-if="errorGenerarPedido!=''" v-html="errorGenerarPedido"></div>
  347. </div>
  348. </v-navigation-drawer>
  349. <div v-if="drawerRight" class="back-modal-active-admin" style="position:fixed;" @click.stop="drawerRight = false">_</div>
  350.  
  351.  
  352. </v-flex>
  353. </template>
  354.  
  355. <script>
  356. var querystring = require('querystring');
  357. import axios from 'axios'
  358. import { EventBus } from '../config/ebus.js'
  359. import * as apiRutas from '../config/apiRutas';
  360. //import tarjetasLista from './cTarjetasLista'
  361. import metodosPagos from './cMetodosPagos'
  362.  
  363. var config_axios = {
  364. headers: {
  365. 'Content-Type': 'application/x-www-form-urlencoded'
  366. }
  367. }
  368.  
  369. export default {
  370. data () {
  371. return {
  372. enableNextStepPay: false,
  373. isEmptyStepTwo: false,
  374. menu: false,
  375. dateFormatted: null,
  376. monto: '50.00',
  377. date: null,
  378. direccion: 'Guillermo Prescott, Miraflores,',
  379. drawerRight: false,
  380. e1: 0,
  381. infoIcon: { url: '/images/info-min.png' , alt: 'icon info'},
  382. sizeElockers: [
  383. {name: 'Pequeño', slug:"pequeño", url: '/images/locker_smallcn.png', alt: 'elocker pequeño', costo: '20.00',
  384. h:'13cm',a:'31cm',p:'52cm'},
  385. {name: 'Mediano', slug:"mediano", url: '/images/locker_medianocn.png', alt: 'elocker mediano', costo: '50.00',
  386. h:'28cm',a:'31cm',p:'52cm'},
  387. {name: 'Grande', slug:"grande", url: '/images/locker_grandecn.png', alt: 'elocker grande', costo: '100.00',
  388. h:'43cm',a:'31cm',p:'52cm'}
  389. ],
  390. cupon_descuento: '',
  391. bgsteptwo: {url: '/images/shadow_box.png', alt: 'fondo paso dos'},
  392. activeLock: '',
  393. isEmptyActiveLocker: false,
  394. windowWidth: null,
  395. friendName: '',
  396. friendDni: '',
  397. friendEmail: '',
  398. friendPhone: null,
  399. emailValid: false,
  400. dniValid: false,
  401. // friend: {
  402. // name: '', dni: null, email:'', phone: null,
  403. // },
  404. currentLocation: {lat:-12.061844, lng: -76.99153409999997},
  405. center: {lat: -12.061844, lng: -76.99153409999997},
  406. markers: [
  407. ],
  408. searchLocation: '',
  409. modalComplete: false,
  410. queArticulo:'',
  411. //showCardForm:0,
  412. //cardSelected:0,
  413. addedCards:[
  414.  
  415. ],
  416. modalDetalles:false,
  417. iconPay: [
  418. { url: '/images/visa.png', name: 'visa'},
  419. { url: '/images/american_express.png', name: 'american_express'},
  420. { url: '/images/master_card.png', name: 'master_card'},
  421. { url: '/images/diners_club.png', name: 'diners_club'},
  422. ],
  423.  
  424. user_id:'',
  425. total_pagado:'',
  426. tarjeta_id:'2',
  427. amountPayable:0,
  428.  
  429.  
  430. tarjeta_numero: '',
  431. monthCard: '',
  432. yearCard: '',
  433. cvvCard: '',
  434. errorAddCard:'',
  435. addCardResult:{result:'',message:''},
  436. //addCardBtnLoading:false,
  437. userEmailAccount:'',
  438.  
  439.  
  440. lockerIDSelected:0,
  441. noLockerSelectedAlert:'',
  442.  
  443.  
  444.  
  445.  
  446. lockersListItems: [
  447. ],
  448.  
  449. pagarBtnLoading:false,
  450. avisoPaso2:'',
  451.  
  452. dir_selected:'Selecciona el locker mas cercano',
  453. btnListoLoading:false,
  454. expiry_origen:'',
  455. errorGenerarPedido:'',
  456. dataPromociones:null,
  457. tiene_cupon:false,
  458. promocion_id:-1,
  459. promocion_cupon_id:-1,
  460. soloPromocion:false,
  461. promocion_promo_label:'',
  462. promocion_cupon_label:'',
  463. descuento:0,
  464. descuento_cupon:0,
  465. //total_pagado_final:0,
  466. timeoutLlenandoCupon:false,
  467. datarescupon:null,
  468. promo_cuantos_usos_van:null,
  469. cupon_id:null,
  470. se_aplico_cupon:false,
  471. cupon_mensaje:'',
  472. checkboxFactura: false,
  473.  
  474.  
  475. facturacion_ruc:'',
  476. facturacion_razonsocial:'',
  477. facturacion_notice:'',
  478. facturacion_ruc_aux:'',
  479. facturacion_razonsocial_aux:'',
  480. lockerDisponibleConfirma:0
  481. }
  482. },
  483. computed:{
  484. lockerDisponiblePass:function(){
  485. if(this.lockerDisponibleConfirma==1){
  486. return this.lockerIDSelected==0;
  487. }else{
  488. return false;
  489. }
  490.  
  491. },
  492. facturacion_error_ruc:function(){
  493. if(this.checkboxFactura){
  494. if(this.facturacion_notice!=''&&(this.facturacion_ruc.length!=11)){
  495. return true;
  496. }
  497. }
  498. return false;
  499. },
  500. facturacion_error_razonsocial:function(){
  501. if(this.checkboxFactura){
  502. if(this.facturacion_notice!=''&&this.facturacion_razonsocial==''){
  503. return true;
  504. }
  505. }
  506. return false;
  507. },
  508. total_pagado_final(){
  509. return this.formatoCosto(parseFloat(this.total_pagado) - parseFloat(this.descuento) - parseFloat(this.descuento_cupon));
  510. },
  511. tarjeta_numero_formated () {
  512. return this.tarjeta_numero.replace(/\s+/g, '');
  513. },
  514. expiry_formated () {
  515. return this.monthCard + this.yearCard;
  516. },
  517. addCardBtnLoading(){
  518. return this.$store.getters.loadStateAddCardBtnLoading;
  519. },
  520. showCardForm(){
  521. return this.$store.getters.loadStateShowCardForm;
  522. },
  523. addCardQueFue(){
  524. return this.$store.getters.loadStateAddCardQueFue;
  525. },
  526. cardSelected:function(){
  527. let a = this.$store.getters.loadStateTarjetaPredeterminada;
  528. if(a==null||a==''||a==-1){
  529. return false
  530. }
  531. return a;
  532. },
  533. },
  534. watch:{
  535. facturacion_ruc:function(el){
  536. if(el.length==0||el.length==11){
  537. this.facturacion_notice = '';
  538. }
  539. },
  540. facturacion_razonsocial:function(el){
  541. if(el){
  542. this.facturacion_notice = '';
  543. }
  544. },
  545. expiry_origen: function (el) {
  546. let a = el.replace(/\s+/g, '');
  547. if(a.indexOf('/') !== -1){
  548. var a_ar = a.split("/");
  549. this.monthCard = a_ar[0];
  550. if((''+a_ar[1]).length<=2){
  551. this.yearCard = '20'+a_ar[1];
  552. }else{
  553. this.yearCard = a_ar[1];
  554. }
  555.  
  556.  
  557. }else{
  558. this.monthCard = '';
  559. this.yearCard = '';
  560. }
  561. },
  562. windowWidth: function (el) {
  563. if(el<460){
  564. // this.showMaps = false
  565. } else {
  566. // this.showMaps = true
  567. }
  568. },
  569.  
  570. date: function (el) {
  571. if(el != null){
  572. this.enableNextStepPay = true
  573. }
  574. },
  575. activeLock: function (el) {
  576. if(el != null){
  577. this.isEmptyActiveLocker = true
  578. } else {
  579. this.isEmptyActiveLocker = false
  580. }
  581. },
  582. friendName: function (el) {
  583. if(el != null){
  584. this.validateStepTwo()
  585. }
  586. },
  587. friendEmail: function (el) {
  588. var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  589. if(re.test(el.toLowerCase())){
  590. this.emailValid = true;
  591. this.validateStepTwo();
  592. }else{
  593. this.emailValid = false;
  594. this.validateStepTwo();
  595. }
  596. },
  597. friendPhone: function (el) {
  598. if(el != null){
  599. this.validateStepTwo()
  600. }
  601. },
  602. friendDni: function (el) {
  603. if(el != null){
  604. if(el.length==8){
  605. this.dniValid = true;
  606. }else{
  607. this.dniValid = false;
  608. }
  609. this.validateStepTwo()
  610. }
  611. }
  612. },
  613. mounted () {
  614. this.$nextTick(function() {
  615. window.addEventListener('resize', this.getWindowWidth);
  616. })
  617. this.getWindowWidth();
  618. this.geolocate();
  619. //this.listarTarjetasApi();
  620. //this.loadLockers();
  621. this.loadLockersApi();
  622.  
  623.  
  624. var pro = localStorage.getItem("user_p_info");
  625. pro = JSON.parse(pro);
  626.  
  627. var vm = this;
  628.  
  629. vm.user_id = pro.id;
  630. vm.userEmailAccount = pro.usuario_email;
  631.  
  632. window.$ = window.jQuery = require('jquery');
  633. $('#autocompleteInput').on('keyup',function(e){
  634. //console.log($('#autocompleteInput').val());
  635. var code = e.which;
  636.  
  637. vm.searchLocation = $('#autocompleteInput').val();
  638. if(code==13){
  639. console.log("enter");
  640. vm.searchTheLocation('user',$('#autocompleteInput').val());
  641. }
  642. });
  643.  
  644.  
  645.  
  646. var pro = this.getLocalUser();
  647.  
  648. this.facturacion_ruc = pro.usuario_ruc?pro.usuario_ruc:'';
  649. this.facturacion_razonsocial = pro.usuario_razonsocial?pro.usuario_razonsocial:'';
  650. this.facturacion_ruc_aux = pro.usuario_ruc?pro.usuario_ruc:'';
  651. this.facturacion_razonsocial_aux = pro.usuario_razonsocial?pro.usuario_razonsocial:'';
  652.  
  653.  
  654.  
  655.  
  656.  
  657.  
  658. },
  659. methods: {
  660. verificarLocker:function(){
  661. this.noLockerSelectedAlert = "buscando";
  662. alert(333);
  663. var querystring = require('querystring');
  664.  
  665. var requestBody = querystring.stringify({
  666. 'cuenta': '01160551',
  667. 'id_elocker': '151',
  668. 'id_locker_size': 1
  669. })
  670.  
  671. var url = apiRutas.asmx_DisponibilidadLocker;
  672. var pres = '';
  673. axios.post(url, requestBody, config_axios)
  674. .then((result) => {
  675. let res = result.data;
  676. var xmlres = this.procesaXml(res);
  677. // <Response>
  678. // <codigo>1</codigo>
  679. // <mensaje>Ok</mensaje>
  680. // <contenido />
  681. // </Response>
  682. pres = xmlres.getElementsByTagName("codigo")[0].childNodes[0].nodeValue;
  683. // alert(pres);
  684. // alert("aun no pasa");
  685. if(pres==1){
  686. this.lockerDisponibleConfirma = 1;
  687. // alert("ya pasa");
  688. this.noLockerSelectedAlert = "Encontrado";
  689. }else{
  690. this.lockerDisponibleConfirma = 2;
  691. this.noLockerSelectedAlert = "No hay lockers disponibles en esa ubicación";
  692. // alert("no pasa");
  693. }
  694. })
  695. .catch((err) => {
  696. // Do somthing
  697. })
  698.  
  699.  
  700. },
  701. pasarAParaQuienEs:function(){
  702. this.lockerIDSelected>0?this.e1=3:(this.noLockerSelectedAlert="Elige un Locker del mapa para continuar")
  703. },
  704. abrirPanelPagar:function(){
  705. if(this.checkboxFactura && (this.facturacion_ruc.length!=11 || this.facturacion_razonsocial=='')){
  706. if(this.facturacion_ruc.length!=11&& this.facturacion_razonsocial!=''){
  707. this.facturacion_notice = "Ingresa un RUC válido";
  708. }else{
  709. this.facturacion_notice = "Ingresa tus detalles de facturación";
  710. }
  711. return false;
  712. }
  713. this.drawerRight = true;
  714. this.errorGenerarPedido='';
  715. },
  716. resetearCupon:function(){
  717. this.se_aplico_cupon = false;
  718. this.cupon_descuento='';
  719. //this.promocion_id = -1;
  720. this.cupon_id = null;
  721. this.promocion_cupon_id = null;
  722. // alert(this.total_pagado_final);
  723. //this.total_pagado_final = parseFloat(this.total_pagado_final) + parseFloat(this.descuento);
  724. // alert(this.total_pagado_final);
  725. // alert(this.descuento);
  726. this.descuento_cupon = 0;
  727.  
  728. },
  729. loadTarifaReservaApi:function(_callback){
  730. // return new Promise(
  731. // function (resolve, reject) {
  732. // setTimeout(()=>{
  733. // var message = 'Hey friend, I have a new phone';
  734. // console.log(message);
  735. // resolve(message);
  736. // },5000);
  737. //
  738. // }
  739. // );
  740. console.log("vamos a ver tarifa");
  741. this.btnListoLoading = true;
  742. var vm = this;
  743. var pro = localStorage.getItem("user_p_info");
  744. pro = JSON.parse(pro);
  745. var token = pro.token;
  746.  
  747.  
  748.  
  749. axios({
  750. method:'get',
  751. url:apiRutas.locker_tarifa,
  752. params: {
  753. token:token,
  754. size:vm.activeLock,
  755. cupon:vm.cupon_descuento,
  756. promo_id:vm.promocion_id
  757. },
  758. auth : {
  759. username: 'admin@pickapp.com',
  760. password: 'PickJanaq18',
  761. }
  762. }).then(function(response){
  763.  
  764. vm.total_pagado = response.data.data.precio;
  765. //vm.total_pagado_final = vm.total_pagado;
  766. vm.datarescupon = response.data.data.cupon_comoes;
  767. vm.promo_cuantos_usos_van = response.data.data.promo_cuantos_usos_van;
  768. console.log(vm.total_pagado);
  769. vm.btnListoLoading = false;
  770. //vm.drawerRight = true;
  771. vm.e1 = 4;
  772. if(_callback!=null){
  773. _callback();
  774. }
  775. }).catch(function (error) {
  776. console.log(error);
  777. vm.btnListoLoading = false;
  778. });
  779. },
  780. actualizarDelCupon:function(){
  781. this.loadTarifaReservaApi(()=>{
  782.  
  783. if(this.datarescupon=='no-cupon'){
  784. this.cupon_mensaje = 'Cupón incorrecto';
  785. setTimeout(()=>{
  786. this.cupon_mensaje = '';
  787. },3000);
  788. }else if(this.datarescupon=='limite-alcanzado'){
  789. this.descuento_cupon = 0;
  790. this.promocion_cupon_label = '';
  791. this.cupon_id = this.datarescupon.cupon_id;
  792. this.promocion_cupon_id = -1;
  793. this.cupon_mensaje = 'Ya usaste este cupón';
  794. setTimeout(()=>{
  795. this.cupon_mensaje = '';
  796. },3000);
  797. }else if(this.datarescupon){
  798. var descuento_aux = 0;
  799. if(this.datarescupon.promocion_descuento_tipo =='porcentaje'){
  800. descuento_aux = this.total_pagado*(this.datarescupon.promocion_descuento/100);
  801. }else if(this.datarescupon.promocion_descuento_tipo =='flat'){
  802. descuento_aux = this.datarescupon.promocion_descuento;
  803. }
  804.  
  805. // if(descuento_aux<=this.total_pagado){
  806. this.descuento_cupon = this.formatoCosto(descuento_aux);
  807.  
  808. //this.promocion_descuento = promo_item.promocion_descuento;
  809. //this.tipo_descuento = promo_item.promocion_descuento_tipo;
  810.  
  811. //this.total_pagado_final = this.formatoCosto(this.total_pagado - this.descuento);
  812. this.promocion_cupon_label = this.datarescupon.promocion_nombre;
  813. this.cupon_id = this.datarescupon.cupon_id;
  814. this.promocion_cupon_id = this.datarescupon.promocion_id;
  815. //alert("a llegado");
  816.  
  817. //console.log(this.total_pagado_final)
  818. console.log('this.total_pagado_final')
  819. this.se_aplico_cupon = true;
  820. // }else{
  821. // this.cupon_id=0;
  822. // this.descuento_cupon = 0;
  823. // this.promocion_cupon_label = "Cupón(error)";
  824. // }
  825. }
  826. });
  827. },
  828. goStep4:function(){
  829.  
  830. this.calculaPromocion();
  831.  
  832. },
  833. calculaPromocion:function(){
  834.  
  835. var sihubocalculodepromo = false;
  836. var dataPromociones = this.$store.getters.loadStatePromociones;
  837. //var cuanto = dataPromociones.promo_cuantos_usos_van['scharff-stop'];
  838.  
  839. if(dataPromociones&&dataPromociones.hay_promo==1){
  840. var arrayPromos = dataPromociones.promo_servicios['scharff-stop'];
  841.  
  842. if(arrayPromos && arrayPromos.length>0){
  843.  
  844. //se va elegir el que tenga mayor prioridad
  845. var promo_item = null;
  846. var hay_cupon = false;
  847.  
  848.  
  849. arrayPromos = arrayPromos.sort(function compare(a,b) {
  850. if (a.promocion_prioridad < b.promocion_prioridad)
  851. return -1;
  852. if (a.promocion_prioridad > b.promocion_prioridad)
  853. return 1;
  854. return 0;
  855. });
  856.  
  857.  
  858.  
  859. sihubocalculodepromo = true;
  860. // if(!this.tiene_cupon){
  861.  
  862. this.loadTarifaReservaApi(() => {
  863. var descuento_aux = 0;
  864.  
  865. var aux_ar_promos_total = [];
  866. this.promo_cuantos_usos_van.forEach((el)=>{
  867. aux_ar_promos_total[el.promocion_id] = el.total;
  868. });
  869.  
  870.  
  871. for (let el of arrayPromos) {
  872. let total_promos_user = aux_ar_promos_total[el.promocion_id];
  873. if(total_promos_user==null){
  874. total_promos_user=0;
  875. }
  876. console.log("fuera");
  877. console.log(total_promos_user);
  878. console.log(el.promocion_transacciones);
  879. console.log(el.promocion_id);
  880. console.log(el.tiene_cupon);
  881. if(el.tiene_cupon!=1){
  882. if(total_promos_user<el.promocion_transacciones||el.promocion_transacciones==null){
  883. console.log("paso");
  884. console.log(el.promocion_transacciones);
  885. console.log(el.promocion_id);
  886. console.log(el.tiene_cupon);
  887. console.log(el);
  888.  
  889. promo_item = el;
  890. break;
  891. }
  892. }else{
  893. hay_cupon = true;
  894. }
  895. }
  896.  
  897.  
  898. if(promo_item!=null){
  899.  
  900.  
  901. console.log(promo_item.promocion_id);
  902. console.log("PromoTRANSACCIONES: "+promo_item.promocion_transacciones);
  903.  
  904. var promo_cuantos_usos_van_val = aux_ar_promos_total[promo_item.promocion_id];
  905.  
  906. console.log("PromoUSOS: "+promo_cuantos_usos_van_val);
  907. console.log("PromoUSOSESTEPROMO: "+promo_item.promocion_id);
  908.  
  909.  
  910. this.promocion_id = promo_item.promocion_id;
  911. if(promo_item.promocion_descuento_tipo =='porcentaje'){
  912. descuento_aux = this.total_pagado*(promo_item.promocion_descuento/100);
  913. }else if(promo_item.promocion_descuento_tipo =='flat'){
  914. descuento_aux = promo_item.promocion_descuento;
  915. }
  916. if(promo_item.promocion_transacciones!=null){
  917.  
  918. if(promo_cuantos_usos_van_val>=promo_item.promocion_transacciones){
  919.  
  920. this.promocion_id = -1;
  921. this.descuento = 0;
  922. descuento_aux = 0;
  923. }
  924. }
  925.  
  926. console.log('promo_item');
  927. console.log(promo_item);
  928. console.log(this.total_pagado);
  929. console.log(this.descuento);
  930. console.log(descuento_aux);
  931. if(descuento_aux<=this.total_pagado){
  932. this.descuento = this.formatoCosto(descuento_aux);
  933.  
  934. //this.promocion_descuento = promo_item.promocion_descuento;
  935. //this.tipo_descuento = promo_item.promocion_descuento_tipo;
  936. //this.total_pagado_final = this.formatoCosto(this.total_pagado-this.descuento);
  937. this.promocion_promo_label = "Promoción: "+promo_item.promocion_nombre;
  938. }else{
  939.  
  940. this.descuento = 0;
  941. this.promocion_promo_label = "Promoción(error)";
  942. }
  943. this.tiene_cupon = hay_cupon;
  944. //alert("este");
  945. }
  946. //else{
  947. //alert(hay_cupon);
  948. if(!hay_cupon){
  949. this.tiene_cupon = false;
  950. }else{
  951. //alert("y este");
  952. //alert(this.cupon_descuento);
  953. this.tiene_cupon = true;
  954. if(this.cupon_descuento!=''){
  955. //alert("si pasa");
  956. this.actualizarDelCupon();
  957. }
  958. }
  959. //}
  960.  
  961.  
  962.  
  963.  
  964.  
  965.  
  966.  
  967.  
  968.  
  969.  
  970.  
  971.  
  972.  
  973.  
  974.  
  975.  
  976.  
  977.  
  978.  
  979. });
  980.  
  981. // }else{
  982. // this.actualizarDelCupon();
  983. // }
  984. //}
  985. }
  986. }
  987. if(!sihubocalculodepromo){
  988. this.loadTarifaReservaApi();
  989. }
  990.  
  991. },
  992. aplicarCupon:function(){
  993. // clearTimeout(this.timeoutLlenandoCupon);
  994. // console.log('llenandoCupon');
  995. // if(this.cupon_descuento.length>6){
  996. // this.timeoutLlenandoCupon = setTimeout(()=>{
  997. // console.log('revisandoCupones');
  998. this.actualizarDelCupon();
  999. // },3000)
  1000. // }
  1001. },
  1002.  
  1003. loadLockersApi:function(){
  1004.  
  1005. var vm = this;
  1006. var pro = localStorage.getItem("user_p_info");
  1007. pro = JSON.parse(pro);
  1008. var token = pro.token;
  1009. axios({
  1010. method:'get',
  1011. url:apiRutas.locker_lista,
  1012. params: {
  1013. token:token
  1014. },
  1015. auth : {
  1016. username: 'admin@pickapp.com',
  1017. password: 'PickJanaq18',
  1018. }
  1019. }).then(function(response){
  1020. let res = response.data;
  1021.  
  1022. res.data.forEach(function(el){
  1023. vm.markers.push({
  1024. position:{
  1025. lat: parseFloat(el.ubicacion_lat),
  1026. lng: parseFloat(el.ubicacion_lng),
  1027.  
  1028. },id: el.id,
  1029. direccion: el.direccion,
  1030. })
  1031. vm.lockersListItems.push({
  1032. nombre:el.nombre,
  1033. id:el.id,
  1034. lat: parseFloat(el.ubicacion_lat),
  1035. lng: parseFloat(el.ubicacion_lng),
  1036. direccion: (el.direccion),
  1037. })
  1038. });
  1039.  
  1040. });
  1041. },
  1042. searchTheLocation: function(value, dir) {
  1043. console.log("search");
  1044. let geocoder = new google.maps.Geocoder()
  1045. geocoder.geocode({'address': dir,
  1046. componentRestrictions: {
  1047. country: 'pe'
  1048. }}, (results, status) => {
  1049. if (status === 'OK') {
  1050. switch(value){
  1051. case 'user':
  1052. this.currentLocation.lat = results[0].geometry.location.lat()
  1053. this.currentLocation.lng = results[0].geometry.location.lng()
  1054. //this.markers[0].position = {lat: this.currentLocation.lat, lng: this.currentLocation.lng};
  1055. break
  1056. case 'client':
  1057. this.currentLocationClient.lat = results[0].geometry.location.lat();
  1058. this.currentLocationClient.lng = results[0].geometry.location.lng();
  1059. }
  1060.  
  1061. }
  1062. })
  1063. },
  1064. geolocate: function () {
  1065. if ("geolocation" in navigator) {
  1066. /* geolocation is available */
  1067. //console.log('si')
  1068. //console.log('aqui!')
  1069. navigator.geolocation.getCurrentPosition((position) => {
  1070. this.currentLocation = {
  1071. lat: position.coords.latitude,
  1072. lng: position.coords.longitude
  1073. }
  1074. //this.markers[0].position = {lat: position.coords.latitude, lng: position.coords.longitude};
  1075. })
  1076. } else {
  1077. //console.log('no')
  1078. /* geolocaiton IS NOT available */
  1079. }
  1080.  
  1081. },
  1082. validateStepTwo: function () {
  1083. if( this.friendName != '' &&
  1084. this.friendDni != null &&
  1085. this.friendDni.length == 8 &&
  1086. this.emailValid === true &&
  1087. this.friendPhone != null){
  1088. this.isEmptyStepTwo = true
  1089. } else {
  1090. this.isEmptyStepTwo = false
  1091. }
  1092.  
  1093. },
  1094. // isEmptyActiveLocker(item) {
  1095. // if(item != null) {
  1096. // return false
  1097. // } else {
  1098. // return true
  1099. // }
  1100.  
  1101. // },
  1102. isEmptyDate: function (el) {
  1103. if (el != null){
  1104. return true
  1105. } else {
  1106. return false
  1107. }
  1108. },
  1109. parseDate (date) {
  1110. if (!date) {
  1111. return null
  1112. }
  1113.  
  1114. const [month, day, year] = date.split('/')
  1115. return `${day.padStart(2, '0')}-${month.padStart(2, '0')}-${year}`
  1116. },
  1117. formatDate (date) {
  1118. if (!date) {
  1119. return null
  1120. }
  1121.  
  1122. const [year, month, day] = date.split('-')
  1123. return `${day}-${month}-${year}`
  1124. },
  1125. // loadActualDate: function () {
  1126. // var hoy = new Date();
  1127. // var dd = hoy.getDate();
  1128. // var mm = hoy.getMonth()+1; //hoy es 0!
  1129. // var yyyy = hoy.getFullYear();
  1130. // // return `${dd}-${mm}-${yyyy}`
  1131. // this.date = `${dd}-${mm}-${yyyy}`
  1132. // },
  1133. openResumen: function () {
  1134. this.drawerRight = false
  1135. this.modalComplete = true
  1136. },
  1137. createReservation: function (){
  1138. //this.modalComplete = false
  1139. //this.$emit('createReservation', false)
  1140. this.$router.push({name: 'historial', params: { panel: 'reservas' }})
  1141. // this.e1 = 1
  1142. },
  1143. getWindowWidth(event) {
  1144. this.windowWidth = document.documentElement.clientWidth
  1145. },
  1146. setLockerActive (item){
  1147. this.activeLock = item.slug
  1148. //this.amountPayable = item.costo
  1149. //console.log(this.activeLock);
  1150. },
  1151. lockerActive: function (item) {
  1152. return this.activeLock == item
  1153. },
  1154. searchMyLocation: function() {
  1155. var geocoder = new google.maps.Geocoder();
  1156. geocoder.geocode({'address': this.searchLocation}, (results, status) => {
  1157. if (status === 'OK') {
  1158. this.currentLocation.lat = results[0].geometry.location.lat();
  1159. this.currentLocation.lng = results[0].geometry.location.lng();
  1160. console.log("por ok");
  1161.  
  1162. this.markers[0].position = {lat: this.currentLocation.lat, lng: this.currentLocation.lng};
  1163. }
  1164. });
  1165. },
  1166. // vaidMethodPay: function() {
  1167. // if( this.tarjeta_numero.length >= 16 &&
  1168. // this.monthCard.length < 3 &&
  1169. // this.yearCard.length == 4 &&
  1170. // this.cvvCard.length >= 3) {
  1171. // console.log(this.tarjeta_numero.length)
  1172. // console.log(this.monthCard.length)
  1173. // console.log(this.yearCard.length)
  1174. // console.log(this.cvvCard.length)
  1175. //
  1176. // return false
  1177. // } else {
  1178. // return true
  1179. // }
  1180. //
  1181. // },
  1182. guardarReservacionApi:function(){
  1183. if(this.total_pagado_final<0){
  1184. this.errorGenerarPedido='Error en el monto a pagar.';
  1185. return false;
  1186. }
  1187.  
  1188.  
  1189. this.pagarBtnLoading = true;
  1190. this.errorGenerarPedido='';
  1191. var vm = this;
  1192.  
  1193. var pro = localStorage.getItem("user_p_info");
  1194. pro = JSON.parse(pro);
  1195. var token = pro.token;
  1196. var usuario_email = pro.usuario_email;
  1197.  
  1198.  
  1199. var update_rucrazonsocial = 0;
  1200. if(this.facturacion_ruc_aux != this.facturacion_ruc){
  1201. update_rucrazonsocial = 1;
  1202. }
  1203. if(this.facturacion_razonsocial_aux != this.facturacion_razonsocial){
  1204. if(update_rucrazonsocial==1){
  1205. update_rucrazonsocial = 3;
  1206. }else{
  1207. update_rucrazonsocial = 2;
  1208. }
  1209. }
  1210.  
  1211. var datacodigopedidos = this.$store.getters.loadStateCodigoPedidos;
  1212. console.log('datacodigopedidos');
  1213. console.log(datacodigopedidos);
  1214. axios({
  1215. method:'post',
  1216. url:apiRutas.reserva_agregar+'?token='+token,
  1217. data: {
  1218. estado:'1',
  1219. //fecha_entrega:fecha_entrega,
  1220. contacto:vm.friendName,
  1221. dni:vm.friendDni,
  1222. correo:vm.friendEmail,
  1223. celular:vm.friendPhone,
  1224. //fecha_recojo:'1999-05-00 07:12:00',
  1225. //fecha_recojo:fecha_recojo,
  1226. total_pagado:vm.total_pagado_final,
  1227. size:this.activeLock,
  1228. articulo:vm.queArticulo,
  1229. tarjeta_id:vm.cardSelected,
  1230. locker_id:vm.lockerIDSelected,
  1231. usuario_email,
  1232. promocion_id:vm.promocion_id,
  1233. promocion_cupon_id:vm.promocion_cupon_id,
  1234. cupon_descuento:vm.cupon_descuento,
  1235. tiene_cupon:vm.tiene_cupon?1:0,
  1236. descuento:vm.descuento,
  1237. descuento_cupon:vm.descuento_cupon,
  1238. cupon_id:vm.cupon_id,
  1239. reserva_ruc:vm.facturacion_ruc,
  1240. reserva_razonsocial:vm.facturacion_razonsocial,
  1241. emitir_factura:vm.checkboxFactura?1:0,
  1242. update_rucrazonsocial,
  1243. datacodigopedidos
  1244. //direccion:vm.searchLocation,
  1245. //user_id:vm.user_id,
  1246. },
  1247. auth : {
  1248. username: 'admin@pickapp.com',
  1249. password: 'PickJanaq18',
  1250. }
  1251. }).then(function(response){
  1252. console.log(response);
  1253. if(response.data.tipo==1){
  1254. vm.modalComplete=true;
  1255. vm.drawerRight=false;
  1256. if(response.data.updated_rucrazonsocial){
  1257. var pro = vm.getLocalUser();
  1258. pro.usuario_ruc = vm.facturacion_ruc;
  1259. pro.usuario_razonsocial = vm.facturacion_razonsocial;
  1260. vm.setLocalUser(pro);
  1261. }
  1262. vm.$store.commit('setStateCodigoPedidos', 2);
  1263. }else{
  1264. vm.addCardBtnLoading = false;
  1265. vm.errorGenerarPedido='No se pudo realizar el pago.<br />Inténtalo nuevamente';
  1266. vm.reportarLog('registrar_pago',"Error durante pago - locker");
  1267. }
  1268. vm.pagarBtnLoading=false;
  1269. }).catch(function(error){
  1270. console.log(error);
  1271.  
  1272. vm.pagarBtnLoading=false;
  1273. if(vm.total_pagado_final<3){
  1274. vm.errorGenerarPedido='El pago debe ser mayor o igual que 3 soles.<br />';
  1275. vm.reportarLog('registrar_pago',"Pago menor a 3 soles - locker");
  1276. }else{
  1277. vm.errorGenerarPedido='No se pudo realizar el pago.<br />Inténtalo nuevamente';
  1278. vm.reportarLog('registrar_pago',"Error consumo api - locker");
  1279. }
  1280. });
  1281. },
  1282.  
  1283.  
  1284. clickOnLocker:function(id){
  1285. console.log("clic en ");
  1286. console.log(id);
  1287. this.lockerIDSelected = id;
  1288. this.noLockerSelectedAlert = "";
  1289. },
  1290. selecListLocker:function(el){
  1291. console.log(el);
  1292. this.lockerIDSelected = el.id;
  1293. this.currentLocation= {lat:parseFloat(el.lat), lng: parseFloat(el.lng)};
  1294. console.log('el.direccion');
  1295. console.log(el.direccion);
  1296. this.dir_selected = el.direccion;
  1297.  
  1298. this.lockerDisponibleConfirma = 0;
  1299. this.verificarLocker();
  1300. },
  1301.  
  1302.  
  1303.  
  1304.  
  1305.  
  1306.  
  1307.  
  1308. },
  1309. components:{
  1310. //'tarjetas-lista':tarjetasLista,
  1311. 'metodos-pagos':metodosPagos
  1312. }
  1313. }
  1314. </script>
  1315.  
  1316. <style lang="scss">
  1317. @import "../../scss/vars.scss";
  1318. .primary--color {
  1319. color: $primary-color
  1320. }
  1321. .lock-step-3{
  1322. width: 999px;
  1323. margin: auto;
  1324.  
  1325. }
  1326. .mapaylista{
  1327. display: flex;
  1328. }
  1329. .listalockers-w{
  1330. width: 300px;
  1331. height: 330px;
  1332. overflow-y: auto;
  1333. background: #424242;
  1334. }
  1335. .mapalockers-w{
  1336. width: calc(100% - 300px)
  1337. }
  1338. .listalockers-w .list--two-line .list__tile {
  1339. height: 64px;
  1340. }
  1341. .lockerSelected{
  1342. border-right: 3px solid $primary-color;
  1343. background: #272727;
  1344. }
  1345. .wrapper-step-tree{
  1346. width: 31rem;
  1347. max-width: 100%;
  1348. text-align: center;
  1349. border-bottom: none
  1350. }
  1351. .wrapper-step-tree label {
  1352. display: inline;
  1353. width: auto;
  1354. }
  1355. .size-lockers__leyenda{
  1356. clear: both;
  1357. display: block;
  1358. text-align: center;
  1359. margin-top: -11px;
  1360. margin-bottom: 17px;
  1361. font-weight: 500;
  1362. font-family: Carnas-light;
  1363. }
  1364. @media screen and (max-width: 600px) {
  1365. .listalockers-w{
  1366. width: auto;
  1367. .list__tile--link {
  1368. font-size: 10px;
  1369. height: 44px !important;
  1370. }
  1371. }
  1372. .mapalockers-w {
  1373. width: calc(100% - 170px);
  1374. }
  1375. .min-width-step-two {
  1376. padding: 2.5rem 2rem;
  1377. }
  1378. .cupon-box{
  1379. margin-bottom: 20px;
  1380. }
  1381. .regular-step1 .min-width-step-two {
  1382. padding-left: 1.5rem;
  1383. padding-right: 1.5rem;
  1384. }
  1385. .regular-step1m3 .line-bottom_em:before {
  1386. left: 23px;
  1387. width: calc(100% - 45px);
  1388. }
  1389. }
  1390. span.montos-labels {
  1391. display: inline-block;
  1392. min-width: 109px;
  1393. }
  1394. .btn-aplicar-cupon {
  1395. border-color: gray !important;
  1396. }
  1397. .btn-aplicar-cupon .btn__content{
  1398. font-family: Carnas-Regular;
  1399. color: gray;
  1400. text-transform: initial;
  1401. }
  1402. .regular-step1m3 .line-bottom_em input.input-cupon{
  1403. width: 162px;
  1404. max-width: 100%;
  1405. margin-right: 18px;
  1406. }
  1407. .btn-aplicar-cupon+span{
  1408. display: inline-block;
  1409. vertical-align: middle;
  1410. }
  1411. .cupon-input-w i{
  1412. display: none;
  1413. }
  1414. .cupon-input-w:hover i{
  1415. display: block;
  1416. }
  1417. .fade-leave-active {
  1418. transition: opacity .5s;
  1419. }
  1420. .fade-leave-to{
  1421. opacity: 0;
  1422. }
  1423. .text--red {
  1424. color: #ff5e65;
  1425. }
  1426. .block-factura .input-factura input.facturacion_error {
  1427. border-bottom: 1px solid red;
  1428. }
  1429. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!