账单地址

This commit is contained in:
pushuo 2022-08-29 11:53:02 +08:00
parent fcc95039f9
commit 2e8d9b4083
5 changed files with 64 additions and 29 deletions

View File

@ -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;
}

View File

@ -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;

View File

@ -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',

View File

@ -11,7 +11,9 @@
return [
'index' => '结账',
'address' => '地址',
'address' => '配送地址',
'payment_address' => '账单地址',
'same_as_shipping_address' => '账单地址同收货地址',
'chosen' => '已选择',
'edit' => '编辑',
'choose_another_address' => '选择其他地址',

View File

@ -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