115 lines
3.8 KiB
PHP
115 lines
3.8 KiB
PHP
<script src="{{ asset('vendor/vue/2.7/vue' . (!config('app.debug') ? '.min' : '') . '.js') }}"></script>
|
|
<script src="{{ asset('vendor/element-ui/index.js') }}"></script>
|
|
<link rel="stylesheet" href="{{ asset('vendor/element-ui/index.css') }}">
|
|
|
|
<script src="{{ asset('plugin/stripe/js/demo.js') }}"></script>
|
|
<link rel="stylesheet" href="{{ asset('plugin/stripe/css/demo.css') }}">
|
|
<div class="mt-5" id="bk-stripe-app" v-cloak>
|
|
<hr class="mb-4">
|
|
<div class="checkout-black">
|
|
<h5 class="checkout-title">{{ __('Stripe::common.title_info') }}</h5>
|
|
<div class="">
|
|
<div class="mb-2">
|
|
<img src="{{ plugin_origin('stripe','/image/pay-image.png') }}" class="img-fluid">
|
|
</div>
|
|
<el-form ref="form" label-position="top" :rules="rules" :model="form" class="form-wrap w-max-500">
|
|
<el-form-item label="{{ __('Stripe::common.cardnum') }}" prop="cardnum">
|
|
<el-input v-model="form.cardnum"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="{{ __('Stripe::common.expiration_date') }}" required>
|
|
<div class="d-flex align-items-center">
|
|
<el-form-item prop="year" class="flex-grow-1">
|
|
<el-date-picker class="w-100 me-2" v-model="form.year" format="yyyy" value-format="yyyy"
|
|
type="year" placeholder="{{ __('Stripe::common.year') }}">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item prop="month" class="flex-grow-1 ms-3">
|
|
<el-date-picker v-model="form.month" class="w-100" format="MM" value-format="MM" type="month"
|
|
placeholder="{{ __('Stripe::common.month') }}">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="{{ __('Stripe::common.cvv') }}" prop="cvv">
|
|
<el-input v-model="form.cvv"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-checkbox v-model="form.remenber">{{ __('Stripe::common.remenber') }}</el-checkbox>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<button class="btn btn-primary" type="button" @click="checkedBtnCheckoutConfirm('form')">{{ __('Stripe::common.btn_submit') }}</button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#bk-stripe-app',
|
|
|
|
data: {
|
|
form: {
|
|
order_number: @json($order->number ?? null),
|
|
cardnum: '',
|
|
year: '',
|
|
month: '',
|
|
cvv: '',
|
|
remenber: false,
|
|
},
|
|
|
|
source: {
|
|
order: @json($order ?? null),
|
|
},
|
|
|
|
rules: {
|
|
cardnum: [{
|
|
required: true,
|
|
message: "{{ __('Stripe::common.error_cardnum') }}",
|
|
trigger: 'blur'
|
|
}, ],
|
|
cvv: [{
|
|
required: true,
|
|
message: "{{ __('Stripe::common.error_cvv') }}",
|
|
trigger: 'blur'
|
|
}, ],
|
|
year: [{
|
|
required: true,
|
|
message: "{{ __('Stripe::common.error_year') }}",
|
|
trigger: 'blur'
|
|
}, ],
|
|
month: [{
|
|
required: true,
|
|
message: "{{ __('Stripe::common.error_month') }}",
|
|
trigger: 'blur'
|
|
}, ],
|
|
}
|
|
},
|
|
|
|
beforeMount() {
|
|
// console.log(33)
|
|
},
|
|
|
|
methods: {
|
|
checkedBtnCheckoutConfirm(form) {
|
|
this.$refs[form].validate((valid) => {
|
|
if (!valid) {
|
|
// this.$message.error('请检查表单是否填写正确');
|
|
return;
|
|
}
|
|
|
|
$http.post(`/stripe/capture`, this.form).then((res) => {
|
|
layer.msg(res.message)
|
|
|
|
@if (current_customer())
|
|
location = "{{ shop_route('account.order.show', ['number' => $order->number]) }}"
|
|
@else
|
|
location = "{{ shop_route('checkout.success', ['order_number' => $order->number]) }}"
|
|
@endif
|
|
})
|
|
});
|
|
}
|
|
}
|
|
})
|
|
</script>
|