CardForm component add cards list styling..
This commit is contained in:
Cüneyt Şentürk
parent
68bf544ba3
commit
633fc0e2fc
@ -1,164 +1,179 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="row align-items-center" v-if="Object.keys(cards).length">
|
<div class="row align-items-center" v-if="Object.keys(cards).length">
|
||||||
<div class="row align-items-center">
|
<div class="col-md-12">
|
||||||
<div class="col-md-12">
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<label for="item_name" class="form-control-label">Cards</label>
|
||||||
<label for="item_name" class="form-control-label">Cards</label>
|
<div class="input-group-invoice-text" v-for="(name, key, id) in cards">
|
||||||
<div class="input-group-invoice-text" v-for="(name, key, id) in cards">
|
<div class="custom-radio mb-2">
|
||||||
<div class="custom-control custom-radio mb-2">
|
<button type="button"
|
||||||
<input
|
:id="'card-'+ key + '-' + id"
|
||||||
type="radio"
|
class="btn btn-outline-default w-100"
|
||||||
:name="'card-' + key"
|
@click="onSelectedCard(key)"
|
||||||
:id="'card-'+ key + '-' + id"
|
:disabled="loading">
|
||||||
:value="key"
|
<div v-if="loading" class="aka-loader-frame">
|
||||||
v-model="card_id"
|
<div class="aka-loader"></div>
|
||||||
class="custom-control-input">
|
</div>
|
||||||
<label :for="'card-'+ key + '-' + id" class="custom-control-label">
|
{{ name }}
|
||||||
{{ name }}
|
</button>
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group-invoice-text">
|
</div>
|
||||||
<div class="custom-control custom-radio mb-2">
|
|
||||||
<input
|
<div class="input-group-invoice-text">
|
||||||
type="radio"
|
<div class="custom-radio mb-2">
|
||||||
name="card-new"
|
<button type="button"
|
||||||
id="card-new-card"
|
id="card-new-card"
|
||||||
value="new_card"
|
class="btn btn-outline-default w-100"
|
||||||
v-model="card_id"
|
data-toggle="collapse"
|
||||||
class="custom-control-input">
|
data-target="#collapseNewCard"
|
||||||
<label for="card-new-card" class="custom-control-label">
|
aria-expanded="false"
|
||||||
New Card
|
aria-controls="collapseNewCard"
|
||||||
</label>
|
:disabled="loading">New Card</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6 p-5">
|
<div class="collapse w-100" id="collapseNewCard">
|
||||||
<div class="form-group">
|
<div class="row">
|
||||||
<label for="cardName" class="form-control-label">{{ textCardName }}</label>
|
<div class="col-md-6 p-5">
|
||||||
<div class="input-group input-group-merge">
|
<div class="form-group">
|
||||||
<div class="input-group-prepend">
|
<label for="cardName" class="form-control-label">{{ textCardName }}</label>
|
||||||
<span class="input-group-text">
|
<div class="input-group input-group-merge">
|
||||||
<i class="fas fa-font"></i>
|
<div class="input-group-prepend">
|
||||||
</span>
|
<span class="input-group-text">
|
||||||
</div>
|
<i class="fas fa-font"></i>
|
||||||
<input
|
</span>
|
||||||
type="text"
|
</div>
|
||||||
:id="fields.cardName"
|
<input
|
||||||
v-letter-only
|
type="text"
|
||||||
@input="changeName"
|
:id="fields.cardName"
|
||||||
class="form-control"
|
v-letter-only
|
||||||
:placeholder="placeholderCardName"
|
@input="changeName"
|
||||||
:value="formData.cardName"
|
class="form-control"
|
||||||
data-card-field
|
:placeholder="placeholderCardName"
|
||||||
autocomplete="off"
|
:value="formData.cardName"
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="cardNumber" class="form-control-label">{{ textCardNumber }}</label>
|
|
||||||
<div class="input-group input-group-merge">
|
|
||||||
<div class="input-group-prepend">
|
|
||||||
<span class="input-group-text">
|
|
||||||
<i class="fas fa-credit-card"></i>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
:id="fields.cardNumber"
|
|
||||||
@input="changeNumber"
|
|
||||||
@focus="focusCardNumber"
|
|
||||||
@blur="blurCardNumber"
|
|
||||||
class="form-control"
|
|
||||||
:placeholder="placeholderCardNumber"
|
|
||||||
:value="formData.cardNumber"
|
|
||||||
:maxlength="cardNumberMaxLength"
|
|
||||||
data-card-field
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-7">
|
|
||||||
<label for="cardMonth" class="form-control-label">{{ textExpirationDate }}</label>
|
|
||||||
<div class="card-form__group">
|
|
||||||
<select
|
|
||||||
class="card-input__input -select"
|
|
||||||
:id="fields.cardMonth"
|
|
||||||
v-model="formData.cardMonth"
|
|
||||||
@change="changeMonth"
|
|
||||||
data-card-field
|
data-card-field
|
||||||
>
|
autocomplete="off"
|
||||||
<option value disabled selected>{{ textMonth }}</option>
|
/>
|
||||||
<option
|
|
||||||
v-bind:value="n < 10 ? '0' + n : n"
|
|
||||||
v-for="n in 12"
|
|
||||||
v-bind:disabled="n < minCardMonth"
|
|
||||||
v-bind:key="n"
|
|
||||||
>{{generateMonthValue(n)}}</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<select
|
|
||||||
class="card-input__input -select"
|
|
||||||
:id="fields.cardYear"
|
|
||||||
v-model="formData.cardYear"
|
|
||||||
@change="changeYear"
|
|
||||||
data-card-field
|
|
||||||
>
|
|
||||||
<option value disabled selected>{{ textYear }}</option>
|
|
||||||
<option
|
|
||||||
v-bind:value="$index + minCardYear"
|
|
||||||
v-for="(n, $index) in 12"
|
|
||||||
v-bind:key="n"
|
|
||||||
>{{$index + minCardYear}}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-5">
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<label for="cardNumber" class="form-control-label">{{ textCardNumber }}</label>
|
||||||
<label for="cardCvv" class="form-control-label">{{ textCvv }}</label>
|
<div class="input-group input-group-merge">
|
||||||
<div class="input-group input-group-merge">
|
<div class="input-group-prepend">
|
||||||
<div class="input-group-prepend">
|
<span class="input-group-text">
|
||||||
<span class="input-group-text">
|
<i class="fas fa-credit-card"></i>
|
||||||
<i class="fas fa-key"></i>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<input
|
||||||
<input
|
type="tel"
|
||||||
type="tel"
|
:id="fields.cardNumber"
|
||||||
class="form-control"
|
@input="changeNumber"
|
||||||
:placeholder="placeholderCvv"
|
@focus="focusCardNumber"
|
||||||
v-number-only
|
@blur="blurCardNumber"
|
||||||
:id="fields.cardCvv"
|
class="form-control"
|
||||||
maxlength="4"
|
:placeholder="placeholderCardNumber"
|
||||||
:value="formData.cardCvv"
|
:value="formData.cardNumber"
|
||||||
@input="changeCvv"
|
:maxlength="cardNumberMaxLength"
|
||||||
|
data-card-field
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-7">
|
||||||
|
<label for="cardMonth" class="form-control-label">{{ textExpirationDate }}</label>
|
||||||
|
<div class="card-form__group">
|
||||||
|
<select
|
||||||
|
class="card-input__input -select"
|
||||||
|
:id="fields.cardMonth"
|
||||||
|
v-model="formData.cardMonth"
|
||||||
|
@change="changeMonth"
|
||||||
data-card-field
|
data-card-field
|
||||||
autocomplete="off"
|
>
|
||||||
/>
|
<option value disabled selected>{{ textMonth }}</option>
|
||||||
|
<option
|
||||||
|
v-bind:value="n < 10 ? '0' + n : n"
|
||||||
|
v-for="n in 12"
|
||||||
|
v-bind:disabled="n < minCardMonth"
|
||||||
|
v-bind:key="n"
|
||||||
|
>{{generateMonthValue(n)}}</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select
|
||||||
|
class="card-input__input -select"
|
||||||
|
:id="fields.cardYear"
|
||||||
|
v-model="formData.cardYear"
|
||||||
|
@change="changeYear"
|
||||||
|
data-card-field
|
||||||
|
>
|
||||||
|
<option value disabled selected>{{ textYear }}</option>
|
||||||
|
<option
|
||||||
|
v-bind:value="$index + minCardYear"
|
||||||
|
v-for="(n, $index) in 12"
|
||||||
|
v-bind:key="n"
|
||||||
|
>{{$index + minCardYear}}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-5">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="cardCvv" class="form-control-label">{{ textCvv }}</label>
|
||||||
|
<div class="input-group input-group-merge">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<span class="input-group-text">
|
||||||
|
<i class="fas fa-key"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
class="form-control"
|
||||||
|
:placeholder="placeholderCvv"
|
||||||
|
v-number-only
|
||||||
|
:id="fields.cardCvv"
|
||||||
|
maxlength="4"
|
||||||
|
:value="formData.cardCvv"
|
||||||
|
@input="changeCvv"
|
||||||
|
data-card-field
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group" v-if="storeCard">
|
||||||
|
<div class="custom-control custom-checkbox">
|
||||||
|
<input @input="changeStoreCard" id="store_card" name="store_card" type="checkbox" value="true" class="custom-control-input">
|
||||||
|
<label for="store_card" class="custom-control-label">
|
||||||
|
<strong>{{ textStoreCard }}</strong>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<button class="btn btn-icon btn-success" v-on:click="invaildCard" :disabled="loading">
|
||||||
|
<div v-if="loading" class="aka-loader-frame">
|
||||||
|
<div class="aka-loader"></div>
|
||||||
|
</div>
|
||||||
|
<span v-if="!loading" class="btn-inner--text">{{ textButton }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="btn btn-icon btn-success" v-on:click="invaildCard">
|
<div class="col-md-6 mt-6">
|
||||||
<span class="btn-inner--text">{{ textButton }}</span>
|
<Card
|
||||||
</button>
|
:fields="fields"
|
||||||
</div>
|
:labels="formData"
|
||||||
|
:isCardNumberMasked="isCardNumberMasked"
|
||||||
<div class="col-md-6 mt--3">
|
:randomBackgrounds="randomBackgrounds"
|
||||||
<Card
|
:backgroundImage="backgroundImage"
|
||||||
:fields="fields"
|
/>
|
||||||
:labels="formData"
|
</div>
|
||||||
:isCardNumberMasked="isCardNumberMasked"
|
|
||||||
:randomBackgrounds="randomBackgrounds"
|
|
||||||
:backgroundImage="backgroundImage"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -516,6 +531,13 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
onSelectedCard(card_id) {
|
||||||
|
this.card_id = card_id;
|
||||||
|
this.formData.card_id = card_id;
|
||||||
|
|
||||||
|
this.invaildCard();
|
||||||
|
},
|
||||||
|
|
||||||
changeStoreCard(e) {
|
changeStoreCard(e) {
|
||||||
this.formData.storeCard = false;
|
this.formData.storeCard = false;
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user