游客结账登录
This commit is contained in:
parent
4cb3bfda91
commit
7d48a7e140
|
|
@ -8,6 +8,26 @@
|
|||
* @LastEditTime 2022-09-16 20:47:16
|
||||
*/
|
||||
|
||||
body.page-checkout, body.page-cart {
|
||||
background-color: #f6f8fa;
|
||||
|
||||
.left-column {
|
||||
@media (min-width: 992px) {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.right-column {
|
||||
@media (min-width: 992px) {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.page-cart {
|
||||
.cart-products-wrap {
|
||||
.table {
|
||||
|
|
@ -18,11 +38,11 @@ body.page-cart {
|
|||
border-color: #f0f2f4;
|
||||
}
|
||||
|
||||
tr {
|
||||
&.active {
|
||||
background-color: #fff6f1;
|
||||
}
|
||||
}
|
||||
// tr {
|
||||
// &.active {
|
||||
// background-color: #fff6f1;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
thead {
|
||||
|
|
@ -45,9 +65,6 @@ body.page-cart {
|
|||
}
|
||||
|
||||
.total-wrap {
|
||||
border: none;
|
||||
background-color: #F8F9FA;
|
||||
|
||||
&.total-wrap-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -165,7 +165,6 @@ body[class^="page-account-"] {
|
|||
}
|
||||
|
||||
.number-wrap {
|
||||
background-color: #fff;
|
||||
padding: 0 4px;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
*/
|
||||
|
||||
body.page-checkout {
|
||||
background-color: #f6f8fa;
|
||||
|
||||
.radio-line-wrap {
|
||||
.radio-line-item {
|
||||
display: flex;
|
||||
|
|
@ -95,18 +97,6 @@ body.page-checkout {
|
|||
border: none;
|
||||
}
|
||||
}
|
||||
// .add-addres {
|
||||
// display: flex;
|
||||
// align-items: center; // flex-start | center
|
||||
// justify-content: center; // flex-end | center | space-between
|
||||
// flex-direction: column;
|
||||
// font-size: 1rem;
|
||||
// color: #666;
|
||||
|
||||
// i {
|
||||
// font-size: 2rem;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -115,33 +105,15 @@ body.page-checkout, body.page-bk-stripe {
|
|||
margin-bottom: 2.6rem;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
position: relative;
|
||||
@media (min-width: 992px) {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-title {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
// 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;
|
||||
// }
|
||||
|
||||
.btn {
|
||||
margin-bottom: -10px;
|
||||
&.icon {
|
||||
|
|
@ -151,18 +123,21 @@ body.page-checkout, body.page-bk-stripe {
|
|||
}
|
||||
|
||||
.total-wrap {
|
||||
padding: 1.4rem;
|
||||
border: 3px solid #efefef;
|
||||
|
||||
.card-body {
|
||||
padding: 0;
|
||||
@media (min-width: 768px) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: #fff;
|
||||
padding: 0 0 .8rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding: 0 0 .8rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -222,7 +197,6 @@ body.page-checkout, body.page-bk-stripe {
|
|||
align-items: center; // flex-start | center
|
||||
justify-content: space-between; // flex-end | center | space-between
|
||||
margin-bottom: 14px;
|
||||
// flex-wrap: wrap;
|
||||
&:last-of-type {
|
||||
font-weight: bold;
|
||||
|
||||
|
|
@ -232,16 +206,10 @@ body.page-checkout, body.page-bk-stripe {
|
|||
}
|
||||
}
|
||||
}
|
||||
> span {
|
||||
// font-weight: bold;
|
||||
|
||||
> span {
|
||||
&:first-of-type {
|
||||
font-size: .8rem;
|
||||
// color: #3f3f3f;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
// color: #dc3545;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,69 +22,77 @@
|
|||
@endif
|
||||
|
||||
<div class="row mt-5" v-if="products.length">
|
||||
<div class="col-12 col-md-9">
|
||||
<div class="cart-products-wrap table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="130">
|
||||
<input class="form-check-input" type="checkbox" value="" id="check-all" v-model="allSelected">
|
||||
<label class="form-check-label ms-1" for="check-all">
|
||||
{{ __('shop/carts.select_all') }}
|
||||
</label>
|
||||
</th>
|
||||
<th width="40%">{{ __('shop/carts.index') }}</th>
|
||||
<th width="170">{{ __('shop/carts.commodity') }}</th>
|
||||
<th width="170">{{ __('shop/carts.subtotal') }}</th>
|
||||
<th width="100" class="text-end">{{ __('common.action') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="product, index in products" :key="index" :class="product.selected ? 'active' : ''">
|
||||
<td>
|
||||
<div class="d-flex align-items-center p-image">
|
||||
<input class="form-check-input" type="checkbox" @change="checkedCartTr(index)" v-model="product.selected">
|
||||
<div class="border d-flex align-items-center justify-content-between wh-80 ms-3"><img :src="product.image" class="img-fluid"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="name text-truncate-2 mb-1 fw-bold" v-text="product.name"></div>
|
||||
<div class="text-size-min text-muted mb-1">@{{ product.variant_labels }}</div>
|
||||
<div class="price text-muted">@{{ product.price_format }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="quantity-wrap">
|
||||
<input type="text" class="form-control" @input="quantityChange(product.quantity, product.cart_id, product.sku_id)" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model.number="product.quantity" name="quantity" minimum="1">
|
||||
<div class="right">
|
||||
<i class="bi bi-chevron-up"></i>
|
||||
<i class="bi bi-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>@{{ product.subtotal_format }}</td>
|
||||
<td class="text-end">
|
||||
<button type="button" class="btn text-danger btn-sm px-0" @click.stop="checkedBtnDelete(product.cart_id)">
|
||||
<i class="bi bi-x-lg"></i> {{ __('common.delete') }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="col-12 col-md-9 left-column">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-lg-4">
|
||||
<div class="p-lg-0"><h5 class="mb-3">{{ __('shop/carts.commodity') }}</h5></div>
|
||||
<div class="cart-products-wrap table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="130">
|
||||
<input class="form-check-input" type="checkbox" value="" id="check-all" v-model="allSelected">
|
||||
<label class="form-check-label ms-1" for="check-all">
|
||||
{{ __('shop/carts.select_all') }}
|
||||
</label>
|
||||
</th>
|
||||
<th width="40%">{{ __('shop/carts.index') }}</th>
|
||||
<th width="170">{{ __('shop/carts.commodity') }}</th>
|
||||
<th width="170">{{ __('shop/carts.subtotal') }}</th>
|
||||
<th width="100" class="text-end">{{ __('common.action') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="product, index in products" :key="index" :class="product.selected ? 'active' : ''">
|
||||
<td>
|
||||
<div class="d-flex align-items-center p-image">
|
||||
<input class="form-check-input" type="checkbox" @change="checkedCartTr(index)" v-model="product.selected">
|
||||
<div class="border d-flex align-items-center justify-content-between wh-80 ms-3"><img :src="product.image" class="img-fluid"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="name text-truncate-2 mb-1 fw-bold" v-text="product.name"></div>
|
||||
<div class="text-size-min text-muted mb-1">@{{ product.variant_labels }}</div>
|
||||
<div class="price text-muted">@{{ product.price_format }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="quantity-wrap">
|
||||
<input type="text" class="form-control" @input="quantityChange(product.quantity, product.cart_id, product.sku_id)" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model.number="product.quantity" name="quantity" minimum="1">
|
||||
<div class="right">
|
||||
<i class="bi bi-chevron-up"></i>
|
||||
<i class="bi bi-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>@{{ product.subtotal_format }}</td>
|
||||
<td class="text-end">
|
||||
<button type="button" class="btn text-danger btn-sm px-0" @click.stop="checkedBtnDelete(product.cart_id)">
|
||||
<i class="bi bi-x-lg"></i> {{ __('common.delete') }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-3">
|
||||
<div class="card total-wrap fixed-top-line">
|
||||
<div class="card-header"><h5 class="mb-0">{{ __('shop/carts.product_total') }}</h5></div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item"><span>{{ __('shop/carts.all') }}</span><span>@{{ allProduct }}</span></li>
|
||||
<li class="list-group-item"><span>{{ __('shop/carts.selected') }}</span><span>@{{ total_quantity }}</span></li>
|
||||
<li class="list-group-item border-bottom-0"><span>{{ __('shop/carts.product_total') }}</span><span class="total-price">@{{ amount_format }}</span></li>
|
||||
<li class="list-group-item d-grid gap-2 mt-3 border-bottom-0">
|
||||
{{-- <a href="{{ shop_route('checkout.index', 'checkout') }}" class="btn btn-primary">去结账</a> --}}
|
||||
<button type="button" class="btn btn-primary" @click="checkedBtnToCheckout">{{ __('shop/carts.to_checkout') }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="col-12 col-md-3 right-column">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-lg-4">
|
||||
<div class="card total-wrap fixed-top-line">
|
||||
<div class="p-lg-0"><h5 class="mb-3">{{ __('shop/carts.product_total') }}</h5></div>
|
||||
<div class="card-body p-lg-0">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item"><span>{{ __('shop/carts.all') }}</span><span>@{{ allProduct }}</span></li>
|
||||
<li class="list-group-item"><span>{{ __('shop/carts.selected') }}</span><span>@{{ total_quantity }}</span></li>
|
||||
<li class="list-group-item border-bottom-0"><span>{{ __('shop/carts.product_total') }}</span><span class="total-price">@{{ amount_format }}</span></li>
|
||||
<li class="list-group-item d-grid gap-2 mt-3 border-bottom-0">
|
||||
<button type="button" class="btn btn-primary fw-bold" @click="checkedBtnToCheckout">{{ __('shop/carts.to_checkout') }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,199 +19,214 @@
|
|||
|
||||
<div class="row mt-5">
|
||||
<div class="col-12 col-md-8 left-column">
|
||||
<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>
|
||||
<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 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">{{ __('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>
|
||||
<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 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>
|
||||
<a class="javascript:void(0)"
|
||||
@click.stop="editAddress(null, 'guest_shipping_address')">{{ __('shop/checkout.edit') }}</a>
|
||||
</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 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>
|
||||
|
||||
<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 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>
|
||||
<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 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>
|
||||
<a class="javascript:void(0)"
|
||||
@click.stop="editAddress(null, 'guest_payment_address')">{{ __('shop/checkout.edit') }}</a>
|
||||
</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 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>
|
||||
</div>
|
||||
|
||||
<div class="checkout-black">
|
||||
<h5 class="checkout-title">{{ __('shop/checkout.payment_method') }}</h5>
|
||||
<div class="radio-line-wrap">
|
||||
@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 class="checkout-black">
|
||||
<h5 class="checkout-title">{{ __('shop/checkout.payment_method') }}</h5>
|
||||
<div class="radio-line-wrap">
|
||||
@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>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkout-black">
|
||||
<h5 class="checkout-title">{{ __('shop/checkout.delivery_method') }}</h5>
|
||||
<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" {{ $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">{!! $shipping['description'] !!}</div>
|
||||
<div class="mt-2">{!! $shipping['html'] ?? '' !!}</div>
|
||||
</div>
|
||||
<div class="checkout-black">
|
||||
<h5 class="checkout-title">{{ __('shop/checkout.delivery_method') }}</h5>
|
||||
<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" {{ $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">{!! $shipping['description'] !!}</div>
|
||||
<div class="mt-2">{!! $shipping['html'] ?? '' !!}</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-4 right-column">
|
||||
<div class="card total-wrap fixed-top-line">
|
||||
@if (!current_customer())
|
||||
<div class="card total-wrap mb-4 fixed-top-line p-lg-4 shadow-sm">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">{{ __('shop/login.login_and_sign') }}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button class="btn btn-outline-dark guest-checkout-login"><i class="bi bi-box-arrow-in-right me-2"></i>{{ __('shop/login.login_and_sign') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="card total-wrap fixed-top-line p-lg-4 shadow-sm">
|
||||
<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">{{ $carts['quantity'] }}</span>
|
||||
|
|
@ -242,7 +257,7 @@
|
|||
@endforeach
|
||||
</ul>
|
||||
<div class="d-grid gap-2 mt-3">
|
||||
<button class="btn btn-primary" type="button" id="submit-checkout">{{ __('shop/checkout.submit_order') }}</button>
|
||||
<button class="btn btn-primary fw-bold" type="button" id="submit-checkout">{{ __('shop/checkout.submit_order') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -269,6 +284,10 @@
|
|||
$('#submit-checkout').click(function(event) {
|
||||
app.checkedBtnCheckoutConfirm();
|
||||
});
|
||||
|
||||
$('.guest-checkout-login').click(function(event) {
|
||||
bk.openLogin();
|
||||
});
|
||||
});
|
||||
|
||||
var app = new Vue({
|
||||
|
|
|
|||
Loading…
Reference in New Issue