账单地址
This commit is contained in:
parent
fcc95039f9
commit
2e8d9b4083
|
|
@ -1062,20 +1062,10 @@ body.page-checkout .checkout-title, body.page-bk-stripe .checkout-title {
|
|||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
body.page-checkout .checkout-title:before, body.page-bk-stripe .checkout-title:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
background-color: #fd560f;
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
}
|
||||
body.page-checkout .checkout-title .btn, body.page-bk-stripe .checkout-title .btn {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,20 +84,20 @@ body.page-checkout, body.page-bk-stripe {
|
|||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
// padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center; // flex-start | center
|
||||
justify-content: space-between; // flex-end | center | space-between
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
background-color: $primary;
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
}
|
||||
// &:before {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// top: 2px;
|
||||
// left: 0;
|
||||
// background-color: $primary;
|
||||
// width: 3px;
|
||||
// height: 16px;
|
||||
// }
|
||||
|
||||
.btn {
|
||||
margin-bottom: -10px;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
return [
|
||||
'index' => 'Checkouts',
|
||||
'address' => 'Address',
|
||||
'payment_address' => 'Payment Address',
|
||||
'same_as_shipping_address' => 'Same As Shipping Address',
|
||||
'chosen' => 'Chosen',
|
||||
'edit' => 'Edit',
|
||||
'choose_another_address' => 'Choose Another Address',
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@
|
|||
|
||||
return [
|
||||
'index' => '结账',
|
||||
'address' => '地址',
|
||||
'address' => '配送地址',
|
||||
'payment_address' => '账单地址',
|
||||
'same_as_shipping_address' => '账单地址同收货地址',
|
||||
'chosen' => '已选择',
|
||||
'edit' => '编辑',
|
||||
'choose_another_address' => '选择其他地址',
|
||||
|
|
|
|||
|
|
@ -18,10 +18,13 @@
|
|||
</div>
|
||||
|
||||
<div class="row mt-5">
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="col-12 col-md-8 left-column">
|
||||
<div class="checkout-black">
|
||||
<div class="checkout-title">
|
||||
<h5 class="mb-0">{{ __('shop/checkout.address') }}</h5>
|
||||
<div class="d-flex">
|
||||
<h5 class="mb-0 me-4">{{ __('shop/checkout.address') }}</h5>
|
||||
<el-checkbox v-model="form.same_as_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">
|
||||
|
|
@ -37,16 +40,50 @@
|
|||
<div class="address-bottom">
|
||||
<div>
|
||||
<span class="badge bg-success" v-if="form.shipping_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
|
||||
{{-- <span class="badge bg-info" v-if="address.default">{{ __('shop/account.addresses.default_address') }}</span> --}}
|
||||
</div>
|
||||
<a class="" @click.stop="editAddress(index)">{{ __('shop/checkout.edit') }}</a>
|
||||
<a 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"><i class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkout-black" v-if='!form.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">
|
||||
<div class="col-6" v-for="address, index in source.addresses" :key="index" v-if="source.addresses.length &&( 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="" @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>
|
||||
</div>
|
||||
|
|
@ -134,9 +171,11 @@
|
|||
payment_address_id: @json($current['payment_address_id']),
|
||||
payment_method_code: @json($current['payment_method_code']),
|
||||
shipping_method_code: @json($current['shipping_method_code']),
|
||||
same_as_shipping_address: @json($current['same_as_shipping_address'] ?? true) ,
|
||||
},
|
||||
|
||||
isAllAddress: false,
|
||||
isAllAddressPayment: false,
|
||||
|
||||
source: {
|
||||
addresses: @json($addresses ?? []),
|
||||
|
|
@ -150,6 +189,7 @@
|
|||
dialogAddress: {
|
||||
show: false,
|
||||
index: null,
|
||||
type: 'shipping_address_id',
|
||||
form: {
|
||||
name: '',
|
||||
phone: '',
|
||||
|
|
@ -188,7 +228,7 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
editAddress(index) {
|
||||
editAddress(index, type) {
|
||||
if (typeof index == 'number') {
|
||||
this.dialogAddress.index = index;
|
||||
|
||||
|
|
@ -197,6 +237,7 @@
|
|||
})
|
||||
}
|
||||
|
||||
this.dialogAddress.type = type
|
||||
this.dialogAddress.show = true
|
||||
},
|
||||
|
||||
|
|
@ -215,8 +256,8 @@
|
|||
$http[type](url, this.dialogAddress.form).then((res) => {
|
||||
if (type == 'post') {
|
||||
this.source.addresses.push(res.data)
|
||||
this.updateCheckout(res.data.id, 'shipping_address_id')
|
||||
this.form.shipping_address_id = res.data.id
|
||||
this.updateCheckout(res.data.id, this.dialogAddress.form.type)
|
||||
this.form[this.dialogAddress.form.type] = res.data.id
|
||||
|
||||
} else {
|
||||
this.source.addresses[this.dialogAddress.index] = res.data
|
||||
|
|
|
|||
Loading…
Reference in New Issue