优化 checkout 结构等
This commit is contained in:
parent
f46ca53bf3
commit
969399525c
|
|
@ -43,6 +43,16 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12">
|
||||
<table class="table table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 20%">{{ __('common.email') }}:</td>
|
||||
<td>{{ $order->email }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,9 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td>{{ __('shop/account.order.order_success.payment_method') }}:<span class="fw-bold">{{ $order['payment_method_name'] }}</span></td>
|
||||
@if (current_customer())
|
||||
<td><a href="{{ shop_route('account.order.show', ['number' => $order->number]) }}">{{ __('shop/account.order.order_success.view_order') }}</a></td>
|
||||
@endif
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="{{ shop_route('orders.pay', [$order['number']]) }}" class="btn btn-primary btn-sm">{{ __('shop/account.order.order_success.pay_now') }}</a></td>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="container" id="checkout-app" v-cloak>
|
||||
<div class="container">
|
||||
|
||||
<x-shop-breadcrumb type="static" value="checkout.index" />
|
||||
|
||||
|
|
@ -21,154 +21,7 @@
|
|||
<div class="col-12 col-md-8 left-column">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-lg-4">
|
||||
<div id="checkout-app" v-cloak>
|
||||
<div class="checkout-black">
|
||||
<div class="checkout-title">
|
||||
<div class="d-flex">
|
||||
<h5 class="mb-0 me-4">{{ __('shop/checkout.address') }}</h5>
|
||||
<el-checkbox v-model="same_as_shipping_address" v-if="source.addresses.length || source.guest_shipping_address">{{ __('shop/checkout.same_as_shipping_address') }}
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<button class="btn btn-sm icon" v-if="isAllAddress" @click="isAllAddress = false"><i
|
||||
class="bi bi-x-lg"></i></button>
|
||||
</div>
|
||||
<div class="addresses-wrap">
|
||||
<div class="row">
|
||||
<template v-if="source.isLogin">
|
||||
<div class="col-6" v-for="address, index in source.addresses" :key="index"
|
||||
v-if="source.addresses.length &&( address.id == form.shipping_address_id || isAllAddress)">
|
||||
<div :class="['item', address.id == form.shipping_address_id ? 'active' : '']"
|
||||
@click="updateCheckout(address.id, 'shipping_address_id')">
|
||||
<div class="name-wrap">
|
||||
<span class="name">@{{ address.name }}</span>
|
||||
<span class="phone">@{{ address.phone }}</span>
|
||||
</div>
|
||||
<div class="zipcode">@{{ address.zipcode }}</div>
|
||||
<div class="address-info">@{{ address.country }} @{{ address.zone }} @{{ address.city }}
|
||||
@{{ address.address_1 }}</div>
|
||||
<div class="address-bottom">
|
||||
<div>
|
||||
<span class="badge bg-success"
|
||||
v-if="form.shipping_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
|
||||
</div>
|
||||
<a href="javascript:void(0)" class=""
|
||||
@click.stop="editAddress(index, 'shipping_address_id')">{{ __('shop/checkout.edit') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6" v-if="!isAllAddress">
|
||||
<div class="item address-right">
|
||||
<button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
|
||||
@click="isAllAddress = true">{{ __('shop/checkout.choose_another_address') }}</button>
|
||||
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'shipping_address_id')"><i
|
||||
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="col-6" v-if="source.guest_shipping_address">
|
||||
<div class="item active">
|
||||
<div class="name-wrap">
|
||||
<span class="name">@{{ source.guest_shipping_address.name }}</span>
|
||||
<span class="phone">@{{ source.guest_shipping_address.phone }}</span>
|
||||
</div>
|
||||
<div class="zipcode">
|
||||
<span>@{{ source.guest_shipping_address.zipcode }}</span>
|
||||
<span class="ms-1">@{{ source.guest_shipping_address.email }}</span>
|
||||
</div>
|
||||
<div class="address-info">@{{ source.guest_shipping_address.country }} @{{ source.guest_shipping_address.zone }} @{{ source.guest_shipping_address.city }}
|
||||
@{{ source.guest_shipping_address.address_1 }}</div>
|
||||
<div class="address-bottom">
|
||||
<div>
|
||||
<span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
|
||||
</div>
|
||||
<a class="javascript:void(0)"
|
||||
@click.stop="editAddress(null, 'guest_shipping_address')">{{ __('shop/checkout.edit') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6" v-if="!source.guest_shipping_address">
|
||||
<div class="item address-right">
|
||||
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_shipping_address')"><i
|
||||
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkout-black" v-if='!same_as_shipping_address'>
|
||||
<div class="checkout-title">
|
||||
<div class="d-flex">
|
||||
<h5 class="mb-0 me-4">{{ __('shop/checkout.payment_address') }}</h5>
|
||||
</div>
|
||||
<button class="btn btn-sm icon" v-if="isAllAddressPayment" @click="isAllAddressPayment = false"><i
|
||||
class="bi bi-x-lg"></i></button>
|
||||
</div>
|
||||
<div class="addresses-wrap">
|
||||
<div class="row">
|
||||
<template v-if="source.isLogin">
|
||||
<div class="col-6" v-for="address, index in source.addresses" :key="index"
|
||||
v-if="source.addresses.length && (form.payment_address_id == '' || address.id == form.payment_address_id || isAllAddressPayment)">
|
||||
<div :class="['item', address.id == form.payment_address_id ? 'active' : '']"
|
||||
@click="updateCheckout(address.id, 'payment_address_id')">
|
||||
<div class="name-wrap">
|
||||
<span class="name">@{{ address.name }}</span>
|
||||
<span class="phone">@{{ address.phone }}</span>
|
||||
</div>
|
||||
<div class="zipcode">@{{ address.zipcode }}</div>
|
||||
<div class="address-info">@{{ address.country }} @{{ address.zone }} @{{ address.city }}
|
||||
@{{ address.address_1 }}</div>
|
||||
<div class="address-bottom">
|
||||
<div>
|
||||
<span class="badge bg-success"
|
||||
v-if="form.payment_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
|
||||
</div>
|
||||
<a class="javascript:void(0)"
|
||||
@click.stop="editAddress(index, 'payment_address_id')">{{ __('shop/checkout.edit') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6" v-if="!isAllAddressPayment">
|
||||
<div class="item address-right">
|
||||
<button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
|
||||
@click="isAllAddressPayment = true">{{ __('shop/checkout.choose_another_address') }}</button>
|
||||
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'payment_address_id')"><i
|
||||
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="col-6" v-if="source.guest_payment_address">
|
||||
<div class="item active">
|
||||
<div class="name-wrap">
|
||||
<span class="name">@{{ source.guest_payment_address.name }}</span>
|
||||
<span class="phone">@{{ source.guest_payment_address.phone }}</span>
|
||||
</div>
|
||||
<div class="zipcode">@{{ source.guest_payment_address.zipcode }}</div>
|
||||
<div class="address-info">@{{ source.guest_payment_address.country }} @{{ source.guest_payment_address.zone }} @{{ source.guest_payment_address.city }}
|
||||
@{{ source.guest_payment_address.address_1 }}</div>
|
||||
<div class="address-bottom">
|
||||
<div>
|
||||
<span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
|
||||
</div>
|
||||
<a class="javascript:void(0)"
|
||||
@click.stop="editAddress(null, 'guest_payment_address')">{{ __('shop/checkout.edit') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6" v-if="!source.guest_payment_address">
|
||||
<div class="item address-right">
|
||||
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_payment_address')"><i
|
||||
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('checkout._address')
|
||||
|
||||
<div class="checkout-black">
|
||||
<h5 class="checkout-title">{{ __('shop/checkout.payment_method') }}</h5>
|
||||
|
|
@ -177,7 +30,6 @@
|
|||
<div class="radio-line-item {{ $payment['code'] == $current['payment_method_code'] ? 'active' : '' }}" data-key="payment_method_code" data-value="{{ $payment['code'] }}">
|
||||
<div class="left">
|
||||
<span class="radio"></span>
|
||||
{{-- <input name="payment" type="radio" {{ $payment['code'] == $current['payment_method_code'] ? 'checked' : '' }} value="{{ $payment['code'] }}" class="form-check-input"> --}}
|
||||
<img src="{{ $payment['icon'] }}" class="img-fluid">
|
||||
</div>
|
||||
<div class="right ms-3">
|
||||
|
|
@ -196,7 +48,6 @@
|
|||
@foreach ($methods['quotes'] as $shipping)
|
||||
<div class="radio-line-item {{ $shipping['code'] == $current['shipping_method_code'] ? 'active':'' }}" data-key="shipping_method_code" data-value="{{ $shipping['code'] }}">
|
||||
<div class="left">
|
||||
{{-- <input name="shipping" {{ $shipping['code'] == $current['shipping_method_code'] ? 'checked' : '' }} type="radio" value="{{ $shipping['code'] }}" class="form-check-input"> --}}
|
||||
<span class="radio"></span>
|
||||
<img src="{{ $shipping['icon'] }}" class="img-fluid">
|
||||
</div>
|
||||
|
|
@ -265,184 +116,46 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<address-dialog ref="address-dialog" @change="onAddressDialogChange"></address-dialog>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('add-scripts')
|
||||
@include('shared.address-form')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.radio-line-item').click(function(event) {
|
||||
const key = $(this).data('key');
|
||||
const value = $(this).data('value');
|
||||
let html = '';
|
||||
|
||||
$http.put('/checkout', {[key]: value}).then((res) => {
|
||||
$(this).addClass('active').siblings().removeClass('active')
|
||||
res.totals.forEach((item) => {
|
||||
html += `<li><span>${item.title}</span><span>${item.amount_format}</span></li>`
|
||||
})
|
||||
|
||||
$('ul.totals').html(html);
|
||||
})
|
||||
});
|
||||
|
||||
$('#submit-checkout').click(function(event) {
|
||||
app.checkedBtnCheckoutConfirm();
|
||||
if (!config.isLogin && checkoutAddressApp.source.guest_shipping_address === null) {
|
||||
layer.msg('{{ __('shop/checkout.error_payment_address') }}', ()=>{})
|
||||
return;
|
||||
}
|
||||
|
||||
if (config.isLogin && !checkoutAddressApp.form.payment_address_id) {
|
||||
layer.msg('{{ __('shop/checkout.error_payment_address') }}', ()=>{})
|
||||
return;
|
||||
}
|
||||
|
||||
$http.post('/checkout/confirm').then((res) => {
|
||||
location = 'orders/' + res.number + '/success?type=create'
|
||||
})
|
||||
});
|
||||
|
||||
$('.guest-checkout-login').click(function(event) {
|
||||
bk.openLogin();
|
||||
});
|
||||
});
|
||||
|
||||
var app = new Vue({
|
||||
el: '#checkout-app',
|
||||
|
||||
data: {
|
||||
form: {
|
||||
shipping_address_id: @json($current['shipping_address_id']),
|
||||
payment_address_id: @json($current['payment_address_id']),
|
||||
},
|
||||
|
||||
isAllAddress: false,
|
||||
isAllAddressPayment: false,
|
||||
|
||||
source: {
|
||||
addresses: @json($addresses ?? []),
|
||||
guest_shipping_address: @json($current['guest_shipping_address'] ?? null),
|
||||
guest_payment_address: @json($current['guest_payment_address'] ?? null),
|
||||
isLogin: config.isLogin,
|
||||
},
|
||||
|
||||
dialogAddress: {
|
||||
index: null,
|
||||
type: 'shipping_address_id',
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
same_as_shipping_address: {
|
||||
get() {
|
||||
if (!this.source.isLogin) {
|
||||
return JSON.stringify(this.source.guest_shipping_address) === JSON.stringify(this.source.guest_payment_address);
|
||||
}
|
||||
|
||||
return this.form.shipping_address_id === this.form.payment_address_id
|
||||
},
|
||||
|
||||
set(e) {
|
||||
if (e) {
|
||||
if (!this.source.isLogin) {
|
||||
$http.put('/checkout', {guest_payment_address: this.source.guest_shipping_address}).then((res) => {
|
||||
this.source.guest_payment_address = res.current.guest_payment_address;
|
||||
})
|
||||
} else {
|
||||
this.form.payment_address_id = this.form.shipping_address_id
|
||||
this.updateCheckout(this.form.payment_address_id, 'same_as_shipping_address')
|
||||
}
|
||||
} else {
|
||||
this.form.payment_address_id = '';
|
||||
this.source.guest_payment_address = null
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
editAddress(index, type) {
|
||||
let addresses = null
|
||||
|
||||
if (typeof index == 'number') {
|
||||
this.dialogAddress.index = index;
|
||||
addresses = JSON.parse(JSON.stringify(this.source.addresses[index]))
|
||||
}
|
||||
|
||||
// 游客结账
|
||||
if ((type == 'guest_shipping_address' || type == 'guest_payment_address') && this.source[type]) {
|
||||
addresses = JSON.parse(JSON.stringify(this.source[type]))
|
||||
}
|
||||
|
||||
this.dialogAddress.type = type
|
||||
this.$refs['address-dialog'].editAddress(addresses, this.dialogAddress.type)
|
||||
},
|
||||
|
||||
onAddressDialogChange(form) {
|
||||
const type = form.id ? 'put' : 'post';
|
||||
const url = `/account/addresses${type == 'put' ? '/' + form.id : ''}`;
|
||||
|
||||
if (!this.source.isLogin) {
|
||||
let data = {[this.dialogAddress.type]: form}
|
||||
|
||||
if (this.source.guest_payment_address === null && this.source.guest_shipping_address === null) {
|
||||
data = {
|
||||
guest_shipping_address: form,
|
||||
guest_payment_address: form
|
||||
}
|
||||
}
|
||||
|
||||
$http.put('/checkout', data).then((res) => {
|
||||
if (this.source.guest_payment_address === null && this.source.guest_shipping_address === null) {
|
||||
this.source.guest_shipping_address = res.current.guest_shipping_address;
|
||||
this.source.guest_payment_address = res.current.guest_payment_address;
|
||||
} else {
|
||||
this.source[this.dialogAddress.type] = res.current[this.dialogAddress.type];
|
||||
}
|
||||
this.$message.success('{{ __('common.edit_success') }}');
|
||||
this.$refs['address-dialog'].closeAddressDialog()
|
||||
})
|
||||
} else {
|
||||
$http[type](url, form).then((res) => {
|
||||
this.$message.success(res.message);
|
||||
if (this.source.addresses.find(e => e.id == res.data.id)) {
|
||||
this.source.addresses[this.dialogAddress.index] = res.data
|
||||
} else {
|
||||
this.source.addresses.push(res.data)
|
||||
this.updateCheckout(res.data.id, this.dialogAddress.type)
|
||||
this.form[this.dialogAddress.type] = res.data.id
|
||||
}
|
||||
|
||||
this.dialogAddress.index = null;
|
||||
this.$forceUpdate()
|
||||
this.$refs['address-dialog'].closeAddressDialog()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
updateCheckout(id, key) {
|
||||
if (this.form[key] === id && key != 'same_as_shipping_address') {
|
||||
return
|
||||
}
|
||||
|
||||
if (key == 'shipping_address_id' && this.same_as_shipping_address) {
|
||||
this.form.payment_address_id = id
|
||||
}
|
||||
|
||||
this.form[key] = id
|
||||
|
||||
$http.put('/checkout', this.form).then((res) => {
|
||||
this.form = res.current
|
||||
this.source.totals = res.totals
|
||||
|
||||
this.isAllAddress = false
|
||||
this.isAllAddressPayment = false
|
||||
})
|
||||
},
|
||||
|
||||
checkedBtnCheckoutConfirm() {
|
||||
if (!this.source.isLogin) {
|
||||
if (this.source.guest_shipping_address === null) {
|
||||
layer.msg('{{ __('shop/checkout.error_payment_address') }}', ()=>{})
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (!this.form.payment_address_id) {
|
||||
layer.msg('{{ __('shop/checkout.error_payment_address') }}', ()=>{})
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
$http.post('/checkout/confirm').then((res) => {
|
||||
location = 'orders/' + res.number + '/success?type=create'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
|
|
|
|||
|
|
@ -0,0 +1,289 @@
|
|||
<div id="checkout-address-app" v-cloak>
|
||||
<div class="checkout-black">
|
||||
<div class="checkout-title">
|
||||
<div class="d-flex">
|
||||
<h5 class="mb-0 me-4">{{ __('shop/checkout.address') }}</h5>
|
||||
<el-checkbox v-model="same_as_shipping_address" v-if="source.addresses.length || source.guest_shipping_address">{{ __('shop/checkout.same_as_shipping_address') }}
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<button class="btn btn-sm icon" v-if="isAllAddress" @click="isAllAddress = false"><i
|
||||
class="bi bi-x-lg"></i></button>
|
||||
</div>
|
||||
<div class="addresses-wrap">
|
||||
<div class="row">
|
||||
<template v-if="source.isLogin">
|
||||
<div class="col-6" v-for="address, index in source.addresses" :key="index"
|
||||
v-if="source.addresses.length &&( address.id == form.shipping_address_id || isAllAddress)">
|
||||
<div :class="['item', address.id == form.shipping_address_id ? 'active' : '']"
|
||||
@click="updateCheckout(address.id, 'shipping_address_id')">
|
||||
<div class="name-wrap">
|
||||
<span class="name">@{{ address.name }}</span>
|
||||
<span class="phone">@{{ address.phone }}</span>
|
||||
</div>
|
||||
<div class="zipcode">@{{ address.zipcode }}</div>
|
||||
<div class="address-info">@{{ address.country }} @{{ address.zone }} @{{ address.city }}
|
||||
@{{ address.address_1 }}</div>
|
||||
<div class="address-bottom">
|
||||
<div>
|
||||
<span class="badge bg-success"
|
||||
v-if="form.shipping_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
|
||||
</div>
|
||||
<a href="javascript:void(0)" class=""
|
||||
@click.stop="editAddress(index, 'shipping_address_id')">{{ __('shop/checkout.edit') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6" v-if="!isAllAddress">
|
||||
<div class="item address-right">
|
||||
<button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
|
||||
@click="isAllAddress = true">{{ __('shop/checkout.choose_another_address') }}</button>
|
||||
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'shipping_address_id')"><i
|
||||
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="col-6" v-if="source.guest_shipping_address">
|
||||
<div class="item active">
|
||||
<div class="name-wrap">
|
||||
<span class="name">@{{ source.guest_shipping_address.name }}</span>
|
||||
<span class="phone">@{{ source.guest_shipping_address.phone }}</span>
|
||||
</div>
|
||||
<div class="zipcode">
|
||||
<span>@{{ source.guest_shipping_address.zipcode }}</span>
|
||||
<span class="ms-1">@{{ source.guest_shipping_address.email }}</span>
|
||||
</div>
|
||||
<div class="address-info">@{{ source.guest_shipping_address.country }} @{{ source.guest_shipping_address.zone }} @{{ source.guest_shipping_address.city }}
|
||||
@{{ source.guest_shipping_address.address_1 }}</div>
|
||||
<div class="address-bottom">
|
||||
<div>
|
||||
<span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
|
||||
</div>
|
||||
<a class="javascript:void(0)"
|
||||
@click.stop="editAddress(null, 'guest_shipping_address')">{{ __('shop/checkout.edit') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6" v-if="!source.guest_shipping_address">
|
||||
<div class="item address-right">
|
||||
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_shipping_address')"><i
|
||||
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkout-black" v-if='!same_as_shipping_address'>
|
||||
<div class="checkout-title">
|
||||
<div class="d-flex">
|
||||
<h5 class="mb-0 me-4">{{ __('shop/checkout.payment_address') }}</h5>
|
||||
</div>
|
||||
<button class="btn btn-sm icon" v-if="isAllAddressPayment" @click="isAllAddressPayment = false"><i
|
||||
class="bi bi-x-lg"></i></button>
|
||||
</div>
|
||||
<div class="addresses-wrap">
|
||||
<div class="row">
|
||||
<template v-if="source.isLogin">
|
||||
<div class="col-6" v-for="address, index in source.addresses" :key="index"
|
||||
v-if="source.addresses.length && (form.payment_address_id == '' || address.id == form.payment_address_id || isAllAddressPayment)">
|
||||
<div :class="['item', address.id == form.payment_address_id ? 'active' : '']"
|
||||
@click="updateCheckout(address.id, 'payment_address_id')">
|
||||
<div class="name-wrap">
|
||||
<span class="name">@{{ address.name }}</span>
|
||||
<span class="phone">@{{ address.phone }}</span>
|
||||
</div>
|
||||
<div class="zipcode">@{{ address.zipcode }}</div>
|
||||
<div class="address-info">@{{ address.country }} @{{ address.zone }} @{{ address.city }}
|
||||
@{{ address.address_1 }}</div>
|
||||
<div class="address-bottom">
|
||||
<div>
|
||||
<span class="badge bg-success"
|
||||
v-if="form.payment_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
|
||||
</div>
|
||||
<a class="javascript:void(0)"
|
||||
@click.stop="editAddress(index, 'payment_address_id')">{{ __('shop/checkout.edit') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6" v-if="!isAllAddressPayment">
|
||||
<div class="item address-right">
|
||||
<button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
|
||||
@click="isAllAddressPayment = true">{{ __('shop/checkout.choose_another_address') }}</button>
|
||||
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'payment_address_id')"><i
|
||||
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="col-6" v-if="source.guest_payment_address">
|
||||
<div class="item active">
|
||||
<div class="name-wrap">
|
||||
<span class="name">@{{ source.guest_payment_address.name }}</span>
|
||||
<span class="phone">@{{ source.guest_payment_address.phone }}</span>
|
||||
</div>
|
||||
<div class="zipcode">@{{ source.guest_payment_address.zipcode }}</div>
|
||||
<div class="address-info">@{{ source.guest_payment_address.country }} @{{ source.guest_payment_address.zone }} @{{ source.guest_payment_address.city }}
|
||||
@{{ source.guest_payment_address.address_1 }}</div>
|
||||
<div class="address-bottom">
|
||||
<div>
|
||||
<span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
|
||||
</div>
|
||||
<a class="javascript:void(0)"
|
||||
@click.stop="editAddress(null, 'guest_payment_address')">{{ __('shop/checkout.edit') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6" v-if="!source.guest_payment_address">
|
||||
<div class="item address-right">
|
||||
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_payment_address')"><i
|
||||
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<address-dialog ref="address-dialog" @change="onAddressDialogChange"></address-dialog>
|
||||
</div>
|
||||
@push('add-scripts')
|
||||
@include('shared.address-form')
|
||||
<script>
|
||||
var checkoutAddressApp = new Vue({
|
||||
el: '#checkout-address-app',
|
||||
|
||||
data: {
|
||||
form: {
|
||||
shipping_address_id: @json($current['shipping_address_id']),
|
||||
payment_address_id: @json($current['payment_address_id']),
|
||||
},
|
||||
|
||||
isAllAddress: false,
|
||||
isAllAddressPayment: false,
|
||||
|
||||
source: {
|
||||
addresses: @json($addresses ?? []),
|
||||
guest_shipping_address: @json($current['guest_shipping_address'] ?? null),
|
||||
guest_payment_address: @json($current['guest_payment_address'] ?? null),
|
||||
isLogin: config.isLogin,
|
||||
},
|
||||
|
||||
dialogAddress: {
|
||||
index: null,
|
||||
type: 'shipping_address_id',
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
same_as_shipping_address: {
|
||||
get() {
|
||||
if (!this.source.isLogin) {
|
||||
return JSON.stringify(this.source.guest_shipping_address) === JSON.stringify(this.source.guest_payment_address);
|
||||
}
|
||||
|
||||
return this.form.shipping_address_id === this.form.payment_address_id
|
||||
},
|
||||
|
||||
set(e) {
|
||||
if (e) {
|
||||
if (!this.source.isLogin) {
|
||||
$http.put('/checkout', {guest_payment_address: this.source.guest_shipping_address}).then((res) => {
|
||||
this.source.guest_payment_address = res.current.guest_payment_address;
|
||||
})
|
||||
} else {
|
||||
this.form.payment_address_id = this.form.shipping_address_id
|
||||
this.updateCheckout(this.form.payment_address_id, 'same_as_shipping_address')
|
||||
}
|
||||
} else {
|
||||
this.form.payment_address_id = '';
|
||||
this.source.guest_payment_address = null
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
editAddress(index, type) {
|
||||
let addresses = null
|
||||
|
||||
if (typeof index == 'number') {
|
||||
this.dialogAddress.index = index;
|
||||
addresses = JSON.parse(JSON.stringify(this.source.addresses[index]))
|
||||
}
|
||||
|
||||
// 游客结账
|
||||
if ((type == 'guest_shipping_address' || type == 'guest_payment_address') && this.source[type]) {
|
||||
addresses = JSON.parse(JSON.stringify(this.source[type]))
|
||||
}
|
||||
|
||||
this.dialogAddress.type = type
|
||||
this.$refs['address-dialog'].editAddress(addresses, this.dialogAddress.type)
|
||||
},
|
||||
|
||||
onAddressDialogChange(form) {
|
||||
const type = form.id ? 'put' : 'post';
|
||||
const url = `/account/addresses${type == 'put' ? '/' + form.id : ''}`;
|
||||
|
||||
if (!this.source.isLogin) {
|
||||
let data = {[this.dialogAddress.type]: form}
|
||||
|
||||
if (this.source.guest_payment_address === null && this.source.guest_shipping_address === null) {
|
||||
data = {
|
||||
guest_shipping_address: form,
|
||||
guest_payment_address: form
|
||||
}
|
||||
}
|
||||
|
||||
$http.put('/checkout', data).then((res) => {
|
||||
if (this.source.guest_payment_address === null && this.source.guest_shipping_address === null) {
|
||||
this.source.guest_shipping_address = res.current.guest_shipping_address;
|
||||
this.source.guest_payment_address = res.current.guest_payment_address;
|
||||
} else {
|
||||
this.source[this.dialogAddress.type] = res.current[this.dialogAddress.type];
|
||||
}
|
||||
this.$message.success('{{ __('common.edit_success') }}');
|
||||
this.$refs['address-dialog'].closeAddressDialog()
|
||||
})
|
||||
} else {
|
||||
$http[type](url, form).then((res) => {
|
||||
this.$message.success(res.message);
|
||||
if (this.source.addresses.find(e => e.id == res.data.id)) {
|
||||
this.source.addresses[this.dialogAddress.index] = res.data
|
||||
} else {
|
||||
this.source.addresses.push(res.data)
|
||||
this.updateCheckout(res.data.id, this.dialogAddress.type)
|
||||
this.form[this.dialogAddress.type] = res.data.id
|
||||
}
|
||||
|
||||
this.dialogAddress.index = null;
|
||||
this.$forceUpdate()
|
||||
this.$refs['address-dialog'].closeAddressDialog()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
updateCheckout(id, key) {
|
||||
if (this.form[key] === id && key != 'same_as_shipping_address') {
|
||||
return
|
||||
}
|
||||
|
||||
if (key == 'shipping_address_id' && this.same_as_shipping_address) {
|
||||
this.form.payment_address_id = id
|
||||
}
|
||||
|
||||
this.form[key] = id
|
||||
|
||||
$http.put('/checkout', this.form).then((res) => {
|
||||
this.form = res.current
|
||||
this.source.totals = res.totals
|
||||
|
||||
this.isAllAddress = false
|
||||
this.isAllAddressPayment = false
|
||||
})
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
Loading…
Reference in New Issue