wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加 前后台订单详情页和结账页插件 html 代码插入点、优化地址管理弹窗

This commit is contained in:
pushuo 2022-12-30 15:20:20 +08:00
parent f26cbaf0dd
commit 70b2d83682
9 changed files with 472 additions and 489 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
beike/Shop/Http/Resources/ProductSimple.php
View File

@ -41,7 +41,7 @@ class ProductSimple extends JsonResource
'id' => $this->id,
'sku_id' => $masterSku->id,
'name' => $name,
'name_format' => sub_string($name, 36),
'name_format' => $name,
'url' => shop_route('products.show', ['product' => $this]),
'price' => $masterSku->price,
'origin_price' => $masterSku->origin_price,

4
resources/beike/admin/views/pages/orders/form.blade.php
View File

@ -89,6 +89,10 @@
</div>
</div>
@foreach ($html_items as $item)
{!! $item !!}
@endforeach
@can('orders_update_status')
<div class="card mb-4">
<div class="card-header"><h6 class="card-title">{{ __('order.order_status') }}</h6></div>

30
resources/beike/shop/default/css/page-checkout.scss vendored
View File

@ -15,17 +15,45 @@ body.page-checkout {
align-items: center;
cursor: pointer;
padding: 20px;
border: 1px solid transparent;
&:not(:last-of-type) {
margin-bottom: 1rem;
}
&:hover {
border-color: #e5e5e5;
}
&:active {
background-color: #f7f7f7;
}
&.active {
border: 1px solid #e5e5e5;
border-color: #e5e5e5;
.radio {
border-color: $primary;
&:before {
content: '';
position: absolute;
width: 12px;
height: 12px;
background-color: $primary;
left: 2px;
top: 2px;
border-radius: 50%;
}
}
}
.radio {
position: relative;
width: 18px;
height: 18px;
border: 1px solid #d4d4d4;
border-radius: 50%;
}
.left {

5
resources/beike/shop/default/css/product-style.scss vendored
View File

@ -51,10 +51,12 @@
}
.product-name {
margin-bottom: 6px;
height: 39px;
margin-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
color: #3d3d3d;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
@ -62,6 +64,7 @@
.product-price {
.price-new {
color: $primary;
font-size: 1.1rem;
font-weight: bold;
}

128
themes/default/account/address.blade.php
View File

@ -40,7 +40,7 @@
v-if="address.default">{{ __('shop/account.addresses.default_address') }}</span></div>
<div>
<a class="me-2" @click.stop="deleteAddress(index)">{{ __('shop/account.addresses.delete') }}</a>
<a @click.stop="editAddress(index)">{{ __('shop/account.addresses.edit') }}</a>
<a href="javascript:void(0)" @click.stop="editAddress(index)">{{ __('shop/account.addresses.edit') }}</a>
</div>
</div>
</div>
@ -57,88 +57,35 @@
</div>
</div>
@include('shared.address-form', [
'address_form_key' => 'form',
'address_form_show' => 'editShow',
'address_form_rules' => 'rules',
])
<address-dialog ref="address-dialog" @change="onAddressDialogChange"></address-dialog>
</div>
@endsection
@push('add-scripts')
@include('shared.address-form')
<script>
new Vue({
el: '#address-app',
data: {
editIndex: null,
editShow: false,
form: {
name: '',
phone: '',
country_id: @json((int) system_setting('base.country_id')),
zipcode: '',
zone_id: @json((int) system_setting('base.zone_id')),
city: '',
address_1: '',
address_2: '',
default: false,
},
addresses: @json($addresses ?? []),
source: {
countries: @json($countries ?? []),
zones: []
},
rules: {
name: [{
required: true,
message: '{{ __('shop/account.addresses.enter_name') }}',
trigger: 'blur'
}, ],
phone: [{
required: true,
message: '{{ __('shop/account.addresses.enter_phone') }}',
trigger: 'blur'
}, ],
address_1: [{
required: true,
message: ' {{ __('shop/account.addresses.enter_address') }}',
trigger: 'blur'
}, ],
zone_id: [{
required: true,
message: '{{ __('shop/account.addresses.select_province') }}',
trigger: 'blur'
}, ],
city: [{
required: true,
message: '{{ __('shop/account.addresses.enter_city') }}',
trigger: 'blur'
}, ],
}
},
// 实例被挂载后调用
mounted() {},
beforeMount() {
this.countryChange(this.form.country_id);
},
methods: {
editAddress(index) {
let addresses = null
if (typeof index == 'number') {
this.editIndex = index;
this.form = JSON.parse(JSON.stringify(this.addresses[index]))
addresses = JSON.parse(JSON.stringify(this.addresses[index]))
}
this.countryChange(this.form.country_id);
this.editShow = true
this.$refs['address-dialog'].editAddress(addresses)
},
deleteAddress(index) {
@ -155,57 +102,18 @@
}).catch(() => {})
},
addressFormSubmit(form) {
const self = this;
onAddressDialogChange(form) {
if (form.default) {
this.addresses.map(e => e.default = false)
}
this.$refs[form].validate((valid) => {
if (!valid) {
this.$message.error('{{ __('shop/account.addresses.check_form') }}');
return;
}
const type = this.form.id ? 'put' : 'post';
const url = `/account/addresses${type == 'put' ? '/' + this.form.id : ''}`;
$http[type](url, this.form).then((res) => {
if (res.data.default) {
this.addresses.map(e => e.default = false)
}
if (type == 'post') {
this.addresses.push(res.data)
} else {
this.addresses[this.editIndex] = res.data
}
this.$message.success(res.message);
this.$refs[form].resetFields();
this.editShow = false
this.editIndex = null;
})
});
},
closeAddressDialog(form) {
this.$refs[form].resetFields();
this.editShow = false
if (this.addresses.find(e => e.id == form.id)) {
this.addresses[this.editIndex] = form
} else {
this.addresses.push(form)
}
this.editIndex = null;
Object.keys(this.form).forEach(key => this.form[key] = '')
this.form.country_id = @json((int) system_setting('base.country_id'))
},
countryChange(e) {
const self = this;
$http.get(`/countries/${e}/zones`, null, {
hload: true
}).then((res) => {
this.source.zones = res.data.zones;
if (!res.data.zones.some(e => e.id == this.form.zone_id)) {
this.form.zone_id = '';
}
})
this.$forceUpdate()
},
}
})

6
themes/default/account/order_info.blade.php
View File

@ -139,6 +139,10 @@
</div>
</div>
@foreach ($html_items as $item)
{!! $item !!}
@endforeach
@if (0)
<div class="card mb-4">
<div class="card-header">
@ -150,7 +154,7 @@
</div>
@endif
@if ($order->orderShipments)
@if ($order->orderShipments->count())
<div class="card mb-4">
<div class="card-header"><h6 class="card-title">{{ __('order.order_shipments') }}</h6></div>
<div class="card-body">

539
themes/default/checkout.blade.php
View File

@ -19,88 +19,90 @@
<div class="row mt-5">
<div class="col-12 col-md-8 left-column">
<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">{{ __('shop/checkout.same_as_shipping_address') }}
</el-checkbox>
<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">{{ __('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>
<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">
<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 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.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>
<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(null, 'shipping_address_id')"><i
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
<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>
</div>
</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 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>
<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 && (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 class="addresses-wrap">
<div class="row">
<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=""
@click.stop="editAddress(index, 'payment_address_id')">{{ __('shop/checkout.edit') }}</a>
</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 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>
</div>
@ -110,40 +112,41 @@
<div class="checkout-black">
<h5 class="checkout-title">{{ __('shop/checkout.payment_method') }}</h5>
<div class="radio-line-wrap">
<div :class="['radio-line-item', payment.code == form.payment_method_code ? 'active' : '']"
v-for="payment, index in source.payment_methods" :key="index"
@click="updateCheckout(payment.code, 'payment_method_code')">
<div class="left">
<input name="payment" type="radio" v-model="form.payment_method_code" :value="payment.code"
:id="'payment-method-' + index" class="form-check-input">
<img :src="payment.icon" class="img-fluid">
@foreach ($payment_methods as $payment)
<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">
<div class="title">{{ $payment['name'] }}</div>
<div class="sub-title">{!! $payment['description'] !!}</div>
</div>
</div>
<div class="right ms-3">
<div class="title">@{{ payment.name }}</div>
<div class="sub-title" v-html="payment.description"></div>
</div>
</div>
@endforeach
</div>
</div>
<div class="checkout-black">
<h5 class="checkout-title">{{ __('shop/checkout.delivery_method') }}</h5>
<div class="radio-line-wrap" v-if="source.shipping_methods.length">
<div v-for="methods, index in source.shipping_methods" :key="index">
<div :class="['radio-line-item', shipping.code == form.shipping_method_code ? 'active' : '']"
v-for="shipping, s_index in methods.quotes" :key="index + '-' + s_index"
@click="updateCheckout(shipping.code, 'shipping_method_code')">
<div class="radio-line-wrap">
@foreach ($shipping_methods as $methods)
@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" type="radio" v-model="form.shipping_method_code" :value="shipping.code"
:id="'shipping-method-' + index" class="form-check-input">
<img :src="shipping.icon" class="img-fluid" v-if="shipping.icon">
{{-- <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>
<div class="right ms-3">
<div class="title">@{{ shipping.name }}</div>
<div class="sub-title" v-html="shipping.description"></div>
<div class="title">{{ $shipping['name'] }}</div>
<div class="sub-title">{!! $shipping['description'] !!}</div>
<div class="mt-2">{!! $shipping['html'] ?? '' !!}</div>
</div>
</div>
</div>
@endforeach
@endforeach
</div>
</div>
</div>
@ -152,244 +155,156 @@
<div class="card total-wrap fixed-top-line">
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="mb-0">{{ __('shop/checkout.cart_totals') }}</h5>
<span class="rounded-circle bg-primary">@{{ source.carts.quantity }}</span>
<span class="rounded-circle bg-primary">{{ $carts['quantity'] }}</span>
</div>
<div class="card-body">
<div class="products-wrap">
<div class="item" v-for="cart, index in source.carts.carts" :key="index">
<div class="image">
<img :src="cart.image" class="img-fluid">
<div class="name">
<div :title="cart.name" v-text="cart.name" class="text-truncate-2"></div>
<div v-if="cart.variant_labels" v-text="cart.variant_labels" class="text-muted mt-1"></div>
@foreach ($carts['carts'] as $cart)
<div class="item">
<div class="image">
<img src="{{ $cart['image'] }}" class="img-fluid">
<div class="name">
<div title="{{ $cart['name'] }}" class="text-truncate-2">{{ $cart['name'] }}</div>
@if ($cart['variant_labels'])
<div class="text-muted mt-1">{{ $cart['variant_labels'] }}</div>
@endif
</div>
</div>
<div class="price text-end">
<div>{{ $cart['price_format'] }}</div>
<div class="quantity">x {{ $cart['quantity'] }}</div>
</div>
</div>
<div class="price text-end">
<div>@{{ cart.price_format }}</div>
<div class="quantity">x @{{ cart.quantity }}</div>
</div>
</div>
@endforeach
</div>
<ul class="totals">
<li v-for="total, index in source.totals" :key="index"><span>@{{ total.title }}</span><span>@{{ total.amount_format }}</span></li>
@foreach ($totals as $total)
<li><span>{{ $total['title'] }}</span><span>{{ $total['amount_format'] }}</span></li>
@endforeach
</ul>
<div class="d-grid gap-2 mt-3">
<button class="btn btn-primary" type="button" :disabled="!isSubmit"
@click="checkedBtnCheckoutConfirm">{{ __('shop/checkout.submit_order') }}</button>
<button class="btn btn-primary" type="button" id="submit-checkout">{{ __('shop/checkout.submit_order') }}</button>
</div>
</div>
</div>
</div>
</div>
@include('shared.address-form')
<address-dialog ref="address-dialog" @change="onAddressDialogChange"></address-dialog>
</div>
@endsection
@endsection
@push('add-scripts')
<script>
new Vue({
el: '#checkout-app',
@include('shared.address-form')
<script>
$(document).ready(function() {
$('.radio-line-item').click(function(event) {
const key = $(this).data('key');
const value = $(this).data('value');
data: {
form: {
shipping_address_id: @json($current['shipping_address_id']),
payment_address_id: @json($current['payment_address_id']),
payment_method_code: @json($current['payment_method_code']),
shipping_method_code: @json($current['shipping_method_code']),
},
$http.put('/checkout', {[key]: value}).then((res) => {
$(this).addClass('active').siblings().removeClass('active')
})
});
// same_as_shipping_address: @json($current['same_as_shipping_address'] ?? true),
isAllAddress: false,
isAllAddressPayment: false,
source: {
addresses: @json($addresses ?? []),
countries: @json($countries ?? []),
shipping_methods: @json($shipping_methods ?? []),
payment_methods: @json($payment_methods ?? []),
carts: @json($carts ?? null),
totals: @json($totals ?? []),
zones: []
},
dialogAddress: {
show: false,
index: null,
type: 'shipping_address_id',
form: {
name: '',
phone: '',
country_id: @json($country_id),
zipcode: '',
zone_id: @json((int) system_setting('base.zone_id')),
city: '',
address_1: '',
address_2: '',
default: false,
}
},
addressRules: {
name: [{
required: true,
message: '{{ __('shop/checkout.enter_name') }}',
trigger: 'blur'
}, ],
phone: [{
required: true,
message: '{{ __('shop/checkout.enter_phone') }}',
trigger: 'blur'
}, ],
address_1: [{
required: true,
message: '{{ __('shop/checkout.enter_address') }}',
trigger: 'blur'
}, ],
zone_id: [{
required: true,
message: '{{ __('shop/checkout.select_province') }}',
trigger: 'blur'
}, ],
city: [{
required: true,
message: '{{ __('shop/checkout.enter_city') }}',
trigger: 'blur'
}, ],
}
},
// 计算属性
computed: {
same_as_shipping_address: {
get() {
return this.form.shipping_address_id == this.form.payment_address_id
},
set(e) {
if (e) {
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 = '';
}
}
},
isSubmit() {
// source.addresses.length > 0 && source.payment_methods.length > 0 && source.shipping_methods.length > 0
return this.source.addresses.length > 0 && this.source.payment_methods.length > 0 && this.source
.shipping_methods.length > 0;
},
// isAddress: {
// this.form.shipping_address_id ==
// }
},
beforeMount() {
this.countryChange(this.dialogAddress.form.country_id);
},
methods: {
editAddress(index, type) {
if (typeof index == 'number') {
this.dialogAddress.index = index;
this.$nextTick(() => {
this.dialogAddress.form = JSON.parse(JSON.stringify(this.source.addresses[index]))
this.countryChange(this.dialogAddress.form.country_id);
})
}
this.dialogAddress.type = type
this.dialogAddress.show = true
},
// shippingPaymentAddressChange() {
// },
addressFormSubmit(form) {
const self = this;
this.$refs[form].validate((valid) => {
if (!valid) {
this.$message.error('{{ __('shop/checkout.check_form') }}');
return;
}
const type = this.dialogAddress.form.id ? 'put' : 'post';
const url = `/account/addresses${type == 'put' ? '/' + this.dialogAddress.form.id : ''}`;
$http[type](url, this.dialogAddress.form).then((res) => {
if (type == 'post') {
this.source.addresses.push(res.data)
this.updateCheckout(res.data.id, this.dialogAddress.type)
this.form[this.dialogAddress.type] = res.data.id
} else {
this.source.addresses[this.dialogAddress.index] = res.data
}
this.$message.success(res.message);
this.$refs[form].resetFields();
this.dialogAddress.show = false
this.dialogAddress.index = null;
})
});
},
closeAddressDialog(form) {
this.$refs[form].resetFields();
this.dialogAddress.show = false
this.dialogAddress.index = null;
Object.keys(this.dialogAddress.form).forEach(key => this.dialogAddress.form[key] = '')
this.dialogAddress.form.country_id = @json($country_id)
},
countryChange(e) {
const self = this;
$http.get(`/countries/${e}/zones`).then((res) => {
this.source.zones = res.data.zones;
if (!res.data.zones.some(e => e.id == this.dialogAddress.form.zone_id)) {
this.dialogAddress.form.zone_id = '';
}
})
},
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.form.payment_address_id) {
layer.msg('{{ __('shop/checkout.error_payment_address') }}', ()=>{})
return;
}
$http.post('/checkout/confirm', this.form).then((res) => {
location = 'orders/' + res.number + '/success?type=create'
})
}
$('#submit-checkout').click(function(event) {
if (!app.form.payment_address_id) {
layer.msg('{{ __('shop/checkout.error_payment_address') }}', ()=>{})
return;
}
})
</script>
$http.post('/checkout/confirm').then((res) => {
location = 'orders/' + res.number + '/success?type=create'
})
});
});
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 ?? []),
},
dialogAddress: {
index: null,
type: 'shipping_address_id',
},
},
computed: {
same_as_shipping_address: {
get() {
return this.form.shipping_address_id == this.form.payment_address_id
},
set(e) {
if (e) {
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 = '';
}
}
},
},
methods: {
editAddress(index, type) {
let addresses = null
if (typeof index == 'number') {
this.dialogAddress.index = index;
addresses = JSON.parse(JSON.stringify(this.source.addresses[index]))
}
this.dialogAddress.type = type
this.$refs['address-dialog'].editAddress(addresses)
},
onAddressDialogChange(form) {
if (this.source.addresses.find(e => e.id == form.id)) {
this.source.addresses[this.dialogAddress.index] = form
} else {
this.source.addresses.push(form)
this.updateCheckout(form.id, this.dialogAddress.type)
this.form[this.dialogAddress.type] = form.id
}
this.dialogAddress.index = null;
this.$forceUpdate()
},
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

4
themes/default/layout/header.blade.php
View File

@ -81,7 +81,7 @@
<h6 class="mb-0">{{ current_customer()->name }}</h6>
</li>
<li>
<hr class="dropdown-divider">
<hr class="dropdown-divider opacity-100">
</li>
<li><a href="{{ shop_route('account.index') }}" class="dropdown-item"><i class="bi bi-person me-1"></i>
{{ __('shop/account.index') }}</a></li>
@ -90,7 +90,7 @@
<li><a href="{{ shop_route('account.wishlist.index') }}" class="dropdown-item"><i
class="bi bi-heart me-1"></i> {{ __('shop/account.wishlist.index') }}</a></li>
<li>
<hr class="dropdown-divider">
<hr class="dropdown-divider opacity-100">
</li>
<li><a href="{{ shop_route('logout') }}" class="dropdown-item"><i class="bi bi-box-arrow-left me-1"></i>
{{ __('common.sign_out') }}</a></li>

243
themes/default/shared/address-form.blade.php
View File

@ -1,62 +1,183 @@
@php
$address_form_show = $address_form_show ?? 'dialogAddress.show';
$address_form_key = $address_form_key ?? 'dialogAddress.form';
$address_form_rules = $address_form_rules ?? 'addressRules';
@endphp
<template id="address-dialog">
<div>
<el-dialog custom-class="mobileWidth" title="{{ __('address.index') }}" :visible.sync="editShow" @close="closeAddressDialog('addressForm')" :close-on-click-modal="false">
<el-form ref="addressForm" :rules="rules" :model="form" label-width="100px">
<el-form-item label="{{ __('address.name') }}" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="{{ __('address.phone') }}" prop="phone">
<el-input maxlength="11" v-model="form.phone" type="number"></el-input>
</el-form-item>
<el-form-item label="{{ __('address.address') }}" required>
<div class="row dialog-address">
<div class="col-4">
<el-form-item>
<el-select v-model="form.country_id" filterable placeholder="{{ __('address.country_id') }}" @change="countryChange">
<el-option v-for="item in source.countries" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</div>
<div class="col-4 mt-2 mt-sm-0">
<el-form-item prop="zone_id">
<el-select v-model="form.zone_id" filterable placeholder="{{ __('address.zone') }}">
<el-option v-for="item in source.zones" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</div>
<div class="col-4 mt-2 mt-sm-0">
<el-form-item prop="city">
<el-input v-model="form.city" placeholder="{{ __('shop/account.addresses.enter_city') }}"></el-input>
</el-form-item>
</div>
</div>
</el-form-item>
<el-form-item label="{{ __('address.post_code') }}" prop="zipcode">
<el-input v-model="form.zipcode"></el-input>
</el-form-item>
<el-form-item label="{{ __('address.address_1') }}" prop="address_1">
<el-input v-model="form.address_1"></el-input>
</el-form-item>
<el-form-item label="{{ __('address.address_2') }}">
<el-input v-model="form.address_2"></el-input>
</el-form-item>
<el-form-item label="{{ __('address.default') }}">
<el-switch
v-model="form.default"
>
</el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addressFormSubmit('addressForm')">{{ __('common.save') }}</el-button>
<el-button @click="closeAddressDialog('addressForm')">{{ __('common.cancel') }}</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<el-dialog custom-class="mobileWidth" title="{{ __('address.index') }}" :visible.sync="{{ $address_form_show }}" @close="closeAddressDialog('addressForm')" :close-on-click-modal="false">
<el-form ref="addressForm" :rules="{{ $address_form_rules }}" :model="{{ $address_form_key }}" label-width="100px">
<el-form-item label="{{ __('address.name') }}" prop="name">
<el-input v-model="{{ $address_form_key }}.name"></el-input>
</el-form-item>
<el-form-item label="{{ __('address.phone') }}" prop="phone">
<el-input maxlength="11" v-model="{{ $address_form_key }}.phone" type="number"></el-input>
</el-form-item>
<el-form-item label="{{ __('address.address') }}" required>
<div class="row dialog-address">
<div class="col-4">
<el-form-item>
<el-select v-model="{{ $address_form_key }}.country_id" filterable placeholder="{{ __('address.country_id') }}" @change="countryChange">
<el-option v-for="item in source.countries" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</div>
<div class="col-4 mt-2 mt-sm-0">
<el-form-item prop="zone_id">
<el-select v-model="{{ $address_form_key }}.zone_id" filterable placeholder="{{ __('address.zone') }}">
<el-option v-for="item in source.zones" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</div>
<div class="col-4 mt-2 mt-sm-0">
<el-form-item prop="city">
<el-input v-model="{{ $address_form_key }}.city" placeholder="{{ __('shop/account.addresses.enter_city') }}"></el-input>
</el-form-item>
</div>
</div>
</el-form-item>
<el-form-item label="{{ __('address.post_code') }}" prop="zipcode">
<el-input v-model="{{ $address_form_key }}.zipcode"></el-input>
</el-form-item>
<el-form-item label="{{ __('address.address_1') }}" prop="address_1">
<el-input v-model="{{ $address_form_key }}.address_1"></el-input>
</el-form-item>
<el-form-item label="{{ __('address.address_2') }}">
<el-input v-model="{{ $address_form_key }}.address_2"></el-input>
</el-form-item>
<el-form-item label="{{ __('address.default') }}">
<el-switch
v-model="{{ $address_form_key }}.default"
>
</el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addressFormSubmit('addressForm')">{{ __('common.save') }}</el-button>
<el-button @click="closeAddressDialog('addressForm')">{{ __('common.cancel') }}</el-button>
</el-form-item>
</el-form>
</el-dialog>
<script>
Vue.component('address-dialog', {
template: '#address-dialog',
props: {
value: {
default: null
},
},
data: function () {
return {
editShow: false,
index: null,
type: 'shipping_address_id',
form: {
name: '',
phone: '',
country_id: @json((int) system_setting('base.country_id')),
zipcode: '',
zone_id: @json((int) system_setting('base.zone_id')),
city: '',
address_1: '',
address_2: '',
default: false,
},
rules: {
name: [{
required: true,
message: '{{ __('shop/account.addresses.enter_name') }}',
trigger: 'blur'
}, ],
phone: [{
required: true,
message: '{{ __('shop/account.addresses.enter_phone') }}',
trigger: 'blur'
}, ],
address_1: [{
required: true,
message: ' {{ __('shop/account.addresses.enter_address') }}',
trigger: 'blur'
}, ],
zone_id: [{
required: true,
message: '{{ __('shop/account.addresses.select_province') }}',
trigger: 'blur'
}, ],
city: [{
required: true,
message: '{{ __('shop/account.addresses.enter_city') }}',
trigger: 'blur'
}, ],
},
source: {
countries: @json($countries ?? []),
zones: []
},
}
},
computed: {
},
beforeMount() {
this.countryChange(this.form.country_id);
},
methods: {
editAddress(addresses) {
if (addresses) {
this.form = addresses
}
this.countryChange(this.form.country_id);
this.editShow = true
},
addressFormSubmit(form) {
this.$refs[form].validate((valid) => {
if (!valid) {
this.$message.error('{{ __('shop/checkout.check_form') }}');
return;
}
const type = this.form.id ? 'put' : 'post';
const url = `/account/addresses${type == 'put' ? '/' + this.form.id : ''}`;
$http[type](url, this.form).then((res) => {
this.$message.success(res.message);
this.$emit('change', res.data)
this.editShow = false
})
});
},
closeAddressDialog(form) {
this.$refs[form].resetFields();
this.editShow = false
Object.keys(this.form).forEach(key => this.form[key] = '')
this.form.country_id = @json((int) system_setting('base.country_id'));
this.form.default = false;
},
countryChange(e) {
const self = this;
$http.get(`/countries/${e}/zones`, null, {
hload: true
}).then((res) => {
this.source.zones = res.data.zones;
if (!res.data.zones.some(e => e.id == this.form.zone_id)) {
this.form.zone_id = '';
}
})
},
}
});
</script>