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

优化右侧弹出购物车 Ui 等交互

This commit is contained in:
pushuo 2022-11-07 16:12:49 +08:00 committed by Edward Yang
parent d766dfbe36
commit 3e6d1db82a
11 changed files with 46 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
beike/Shop/Http/Controllers/CartController.php
View File

@ -110,6 +110,7 @@ class CartController extends Controller
$data['html'] = view('cart/mini', $reloadData)->render();
$data['quantity'] = $reloadData['quantity'];
$data['quantity_all'] = $reloadData['quantity_all'];
return json_success(trans('common.success'), $data);
}

11
beike/Shop/Services/CartService.php
View File

@ -137,25 +137,24 @@ class CartService
* 获取购物车相关数据
*
* @param array $carts
* @param bool $showAll
* @return array
*/
public static function reloadData(array $carts = [], bool $showAll = false): array
public static function reloadData(array $carts = []): array
{
if (empty($carts)) {
$carts = CartService::list(current_customer());
}
$cartList = collect($carts);
if (!$showAll) {
$cartList = collect($carts)->where('selected', 1);
}
$cartList = collect($carts)->where('selected', 1);
$quantity = $cartList->sum('quantity');
$quantityAll = collect($carts)->sum('quantity');
$amount = $cartList->sum('subtotal');
$data = [
'carts' => $carts,
'quantity' => $quantity,
'quantity_all' => $quantityAll,
'amount' => $amount,
'amount_format' => currency_format($amount),
];

13
resources/beike/shop/default/css/footer.scss vendored
View File

@ -77,10 +77,21 @@ footer {
}
.footer-bottom {
height: 60px;
display: flex;
align-items: center;
background: #EFEFF4;
color: #666;
@media (min-width:768px) {
height: 60px;
}
@media (max-width:768px) {
padding: 10px 0;
}
.right-img {
max-height: 42px;
}
}
}

16
resources/beike/shop/default/css/global.scss vendored
View File

@ -106,6 +106,10 @@ body[class^="page-account-"] {
padding-bottom: 10px;
margin-bottom: 2rem;
@media (max-width: 992px) {
font-size: 1rem;
}
&:after {
position: absolute;
bottom: 0;
@ -275,4 +279,16 @@ body[class^="page-account-"] {
table.table thead th, .fw-bold, h1,h2,h3, h4, h5, h6, b, strong, .card .card-header {
font-family: 'Poppins-Medium', sans-serif;
}
.text-size-min {
font-size: 12px;
}
.text-truncate-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

9
resources/beike/shop/default/css/header.scss vendored
View File

@ -274,7 +274,6 @@ header {
padding: 1rem 0;
border-top: 1px solid #eee;
.left {
width: 80px;
flex: 0 0 80px;
@ -288,14 +287,6 @@ header {
}
.right {
.name {
overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.price {
input {
margin-left: 10px;

6
resources/beike/shop/default/js/common.js vendored
View File

@ -3,7 +3,7 @@
* @link https://beikeshop.com
* @Author pu shuo <pushuo@guangda.work>
* @Date 2022-09-09 19:16:39
* @LastEditTime 2022-09-28 17:23:48
* @LastEditTime 2022-11-07 09:29:34
*/
export default {
@ -15,10 +15,10 @@ export default {
$(document).ready(() => {
$http.get('carts/mini', null, {hload: true}).then((res) => {
$('#offcanvas-right-cart').html(res.data.html);
if (!res.data.quantity) {
if (!res.data.quantity_all) {
$('.cart-badge-quantity').hide();
} else {
$('.cart-badge-quantity').show().html(res.data.quantity > 99 ? '99+' : res.data.quantity);
$('.cart-badge-quantity').show().html(res.data.quantity_all > 99 ? '99+' : res.data.quantity_all);
}
})
})

4
resources/lang/en/shop/steps.php
View File

@ -12,7 +12,7 @@
return [
'index' => 'Steps',
'cart' => 'Cart',
'checkout' => 'Checkouts',
'submitted_successfully' => 'Submitted Successfully',
'checkout' => 'Checkout',
'submitted_successfully' => 'Placed Order',
'payment' => 'Payment',
];

4
themes/default/cart/cart.blade.php
View File

@ -48,8 +48,8 @@
</div>
</td>
<td>
<div class="name mb-1 fw-bold" v-text="product.name"></div>
<div class="attr text-muted">@{{ product.variant_labels }}</div>
<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>

6
themes/default/cart/mini.blade.php
View File

@ -2,7 +2,7 @@
<h5 id="offcanvasRightLabel" class="mx-auto mb-0">{{ __('shop/carts.mini') }}</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="offcanvas-body pt-0">
@php $check = 0 @endphp
@if ($carts)
@ -16,8 +16,8 @@
<div class="product-info d-flex align-items-center">
<div class="left"><a href="{{ shop_route('products.show', $cart['product_id']) }}" class="d-flex justify-content-between align-items-center h-100"><img src="{{ $cart['image'] }}" class="img-fluid"></a></div>
<div class="right flex-grow-1">
<a href="{{ shop_route('products.show', $cart['product_id']) }}" class="name fs-sm fw-bold mb-2 text-dark" title="{{ $cart['name'] }}">{{ $cart['name'] }}</a>
<div class="attr text-muted">{{ $cart['variant_labels'] }}</div>
<a href="{{ shop_route('products.show', $cart['product_id']) }}" class="name fs-sm fw-bold mb-2 text-dark text-truncate-2" title="{{ $cart['name'] }}">{{ $cart['name'] }}</a>
<div class="text-muted mb-1 text-size-min">{{ $cart['variant_labels'] }}</div>
<div class="product-bottom d-flex justify-content-between align-items-center">
<div class="price d-flex align-items-center">
{{ $cart['price_format'] }} x

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

@ -157,9 +157,7 @@
<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">
<span v-text="cart.name"></span>
</div>
<div class="name text-truncate-2" :title="cart.name" v-text="cart.name"></div>
</div>
<div class="price text-end">
<div>@{{ cart.price_format }}</div>

2
themes/default/layout/footer.blade.php
View File

@ -73,7 +73,7 @@
{!! $footer_content['bottom']['copyright'][$locale] ?? '' !!}
</div>
@if (isset($footer_content['bottom']['image']))
<div class="col-auto">
<div class="col-auto right-img">
<img src="{{ image_origin($footer_content['bottom']['image']) }}" class="img-fluid">
</div>
@endif