Merge pull request #1773 from CihanSenturk/master
card component select card future
This commit is contained in:
Cüneyt Şentürk
GitHub
commit
31fdc9f1b0
@ -1,7 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="card" v-if="card">
|
||||
<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="form-group">
|
||||
<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="custom-control custom-radio mb-2">
|
||||
<input
|
||||
type="radio"
|
||||
:name="'card-' + key"
|
||||
:id="'card-'+ key + '-' + id"
|
||||
:value="key"
|
||||
v-model="card_id"
|
||||
class="custom-control-input">
|
||||
<label :for="'card-'+ key + '-' + id" class="custom-control-label">
|
||||
{{ name }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group-invoice-text">
|
||||
<div class="custom-control custom-radio mb-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="card-new"
|
||||
id="card-new-card"
|
||||
value="new_card"
|
||||
v-model="card_id"
|
||||
class="custom-control-input">
|
||||
<label for="card-new-card" class="custom-control-label">
|
||||
New Card
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 p-5">
|
||||
<div class="form-group">
|
||||
<label for="cardName" class="form-control-label">{{ textCardName }}</label>
|
||||
@ -129,7 +163,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center" v-if="!card">
|
||||
<div class="row align-items-center" v-if="!Object.keys(cards).length">
|
||||
<div class="col-md-6 p-5">
|
||||
<div class="form-group">
|
||||
<label for="cardNumber" class="form-control-label">{{ textCardNumber }}</label>
|
||||
@ -202,7 +236,6 @@
|
||||
v-for="n in 12"
|
||||
v-bind:disabled="n < minCardMonth"
|
||||
v-bind:key="n"
|
||||
:selected="selected == value"
|
||||
>{{generateMonthValue(n)}}</option>
|
||||
</select>
|
||||
</div>
|
||||
@ -224,7 +257,6 @@
|
||||
v-bind:value="$index + minCardYear"
|
||||
v-for="(n, $index) in 12"
|
||||
v-bind:key="n"
|
||||
:selected="selected == value"
|
||||
>{{$index + minCardYear}}</option>
|
||||
</select>
|
||||
</div>
|
||||
@ -267,7 +299,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<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>
|
||||
@ -277,7 +309,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mt--3">
|
||||
<div class="col-md-6 mt--6">
|
||||
<Card
|
||||
:fields="fields"
|
||||
:labels="formData"
|
||||
@ -331,10 +363,9 @@ export default {
|
||||
},
|
||||
|
||||
props: {
|
||||
card: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
icon: '',
|
||||
cards: {
|
||||
type: [Array, Object],
|
||||
default: [],
|
||||
description: "Add Card Style"
|
||||
},
|
||||
|
||||
@ -427,6 +458,7 @@ export default {
|
||||
cardYear: '',
|
||||
cardCvv: '',
|
||||
storeCard: false,
|
||||
card_id: 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -456,7 +488,8 @@ export default {
|
||||
minCardYear: new Date().getFullYear(),
|
||||
isCardNumberMasked: true,
|
||||
mainCardNumber: this.cardNumber,
|
||||
cardNumberMaxLength: 19
|
||||
cardNumberMaxLength: 19,
|
||||
card_id: 0,
|
||||
}
|
||||
},
|
||||
|
||||
@ -562,6 +595,8 @@ export default {
|
||||
isOdd = !isOdd;
|
||||
}*/
|
||||
|
||||
this.formData.card_id = this.card_id;
|
||||
|
||||
if (sum % 10 !== 0) {
|
||||
alert('invaild card number');
|
||||
this.loading = false;
|
||||
|
||||
3
resources/assets/js/views/portal/invoices.js
vendored
3
resources/assets/js/views/portal/invoices.js
vendored
@ -42,6 +42,7 @@ const app = new Vue({
|
||||
cardYear: '',
|
||||
cardCvv: '',
|
||||
storeCard: false,
|
||||
card_id: 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -97,6 +98,7 @@ const app = new Vue({
|
||||
cardYear: '',
|
||||
cardCvv: '',
|
||||
storeCard: false,
|
||||
card_id: 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -187,6 +189,7 @@ const app = new Vue({
|
||||
cardYear: '',
|
||||
cardCvv: '',
|
||||
storeCard: false,
|
||||
card_id: 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<card-form
|
||||
:card="false"
|
||||
:path="'{{ $confirm_url }}'"
|
||||
placeholder-card-number="{{ trans('general.form.enter', ['field' => trans('general.card.number')]) }}"
|
||||
placeholder-card-name="{{ trans('general.form.enter', ['field' => trans('general.card.name')]) }}"
|
||||
@ -12,6 +11,7 @@
|
||||
text-cvv="{{ trans('general.card.cvv') }}"
|
||||
textButton="{{ trans('general.confirm') }}"
|
||||
textStoreCard="{{ trans('general.card.store') }} "
|
||||
:store-card="true"
|
||||
:store-card="{{ !empty($store_card) ? 'true' : 'false' }}"
|
||||
:cards="{{ !empty($cards) ? json_encode($cards) : json_encode([]) }}"
|
||||
:form-data="formData"
|
||||
/>
|
||||
|
||||
@ -66,16 +66,9 @@
|
||||
<div class="card-body">
|
||||
<div class="tab-content" id="myTabContent">
|
||||
@php $is_active = true; @endphp
|
||||
|
||||
@foreach ($payment_methods as $key => $name)
|
||||
@stack('invoice_{{ $key }}_content_start')
|
||||
<div class="tab-pane fade{{ ($is_active) ? ' show active': '' }}" id="tabs-payment-method-{{ $key }}" role="tabpanel" aria-labelledby="tabs-payment-method-{{ $key }}-tab">
|
||||
<component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
|
||||
</div>
|
||||
@stack('invoice_{{ $key }}_content_end')
|
||||
|
||||
@php $is_active = false; @endphp
|
||||
@endforeach
|
||||
<div class="tab-pane fade{{ ($is_active) ? ' show active': '' }}" id="tabs-payment-method" role="tabpanel" aria-labelledby="tabs-payment-method">
|
||||
<component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user