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

优化购物车 优化menu

This commit is contained in:
pushuo 2022-08-15 15:43:28 +08:00
parent 3ecea9db53
commit 14e6055bf9
9 changed files with 70 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@ class CartController extends Controller
$data = [
'data' => CartService::reloadData()
];
return view("cart", $data);
return view("cart/cart", $data);
}
/**
@ -74,10 +74,11 @@ class CartController extends Controller
* 右上角购物车
* @return array
*/
public function miniCart(): array
public function miniCart()
{
$data = CartService::reloadData();
return json_success('获取成功', $data);
// return json_success('获取成功', $data);
return view('cart/mini', $data);
}

6
public/build/beike/shop/default/css/app.css vendored
View File

@ -505,16 +505,16 @@ header .top-wrap {
background: #F7F8FA;
display: flex;
}
header .top-wrap .dropdown:hover {
header .top-wrap .dropdown:hover, header .header-content .dropdown:hover {
background-color: #fff;
}
header .top-wrap .dropdown:hover .dropdown-menu {
header .top-wrap .dropdown:hover .dropdown-menu, header .header-content .dropdown:hover .dropdown-menu {
margin: 0;
display: block;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
border: none;
}
header .top-wrap .dropdown:hover .dropdown-menu.dropdown-menu-end {
header .top-wrap .dropdown:hover .dropdown-menu.dropdown-menu-end, header .header-content .dropdown:hover .dropdown-menu.dropdown-menu-end {
right: 0;
}
header .header-content {

41
public/build/beike/shop/default/js/app.js vendored
View File

@ -2081,26 +2081,7 @@ __webpack_require__.r(__webpack_exports__);
$http.get('carts/mini', null, {
hload: true
}).then(function (res) {
$('.offcanvas-right-cart-amount').html(res.data.amount_format);
if (res.data.carts.length) {
$('.navbar-icon-link-badge').html(res.data.carts.length > 99 ? '99+' : res.data.carts.length).show();
$('.offcanvas-right-cart-count').html(res.data.quantity);
var html = '';
res.data.carts.forEach(function (e) {
html += '<div class="product-list d-flex align-items-center">';
html += "<div class=\"left\"><img src=\"".concat(e.image, "\" calss=\"img-fluid\"></div>");
html += '<div class="right flex-grow-1">';
html += "<div class=\"name fs-sm fw-bold mb-2\">".concat(e.name, "</div>");
html += '<div class="product-bottom d-flex justify-content-between align-items-center">';
html += "<div class=\"price\">".concat(e.price_format, " <span class=\"text-muted\">x ").concat(e.quantity, "<span></div>");
html += "<span class=\"offcanvas-products-delete\" data-id=\"".concat(e.cart_id, "\"><i class=\"bi bi-x-lg\"></i> \u5220\u9664</span>");
html += '</div>';
html += '</div>';
html += '</div>';
});
$('.offcanvas-right-products').html(html);
}
$('#offcanvas-right-cart').html(res);
});
},
@ -2712,17 +2693,15 @@ var base = document.querySelector('base').href;
$(document).ready(function ($) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': token
},
// beforeSend: function() { layer.load(2, {shade: [0.3,'#fff'] }); },
// complete: function() { layer.closeAll('loading'); },
error: function error(xhr, ajaxOptions, thrownError) {
if (xhr.responseJSON.message) {
layer.msg(xhr.responseJSON.message, function () {});
}
}
$(document).on('click', '.offcanvas-products-delete', function () {
var _this = this;
var id = $(this).data('id');
$http["delete"]("carts/".concat(id)).then(function (res) {
$(_this).parents('.product-list').remove();
$('.offcanvas-right-cart-count').text(res.data.quantity);
$('.offcanvas-right-cart-amount').text(res.data.amount_format);
});
});
});
bk.getCarts(); // 页面初始加载购物车数据

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

@ -15,7 +15,9 @@ header {
// max-height: 50px;
background: #F7F8FA;
display: flex;
}
.top-wrap, .header-content {
.dropdown {
&:hover {
background-color: #fff;
@ -23,7 +25,6 @@ header {
.dropdown-menu {
margin: 0;
display: block;
// box-shadow: 0 6px 6px 0 rgb(0, 0, 0, .08);
box-shadow: 0 0 15px rgb(0, 0, 0, .1);
border: none;

19
resources/beike/shop/default/js/app.js vendored
View File

@ -10,16 +10,15 @@ import './product';
import './header'
$(document).ready(function ($) {
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': token},
// beforeSend: function() { layer.load(2, {shade: [0.3,'#fff'] }); },
// complete: function() { layer.closeAll('loading'); },
error: function(xhr, ajaxOptions, thrownError) {
if (xhr.responseJSON.message) {
layer.msg(xhr.responseJSON.message,() => {})
}
},
});
$(document).on('click', '.offcanvas-products-delete', function () {
const id = $(this).data('id');
$http.delete(`carts/${id}`).then((res) => {
$(this).parents('.product-list').remove();
$('.offcanvas-right-cart-count').text(res.data.quantity);
$('.offcanvas-right-cart-amount').text(res.data.amount_format);
})
})
});
bk.getCarts(); // 页面初始加载购物车数据

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

@ -12,28 +12,7 @@ export default {
*/
getCarts() {
$http.get('carts/mini', null, {hload: true}).then((res) => {
$('.offcanvas-right-cart-amount').html(res.data.amount_format);
if (res.data.carts.length) {
$('.navbar-icon-link-badge').html(res.data.carts.length > 99 ? '99+' : res.data.carts.length).show();
$('.offcanvas-right-cart-count').html(res.data.quantity);
let html = '';
res.data.carts.forEach(e => {
html += '<div class="product-list d-flex align-items-center">';
html += `<div class="left"><img src="${e.image}" calss="img-fluid"></div>`;
html += '<div class="right flex-grow-1">';
html += `<div class="name fs-sm fw-bold mb-2">${e.name}</div>`;
html += '<div class="product-bottom d-flex justify-content-between align-items-center">';
html += `<div class="price">${e.price_format} <span class="text-muted">x ${e.quantity}<span></div>`;
html += `<span class="offcanvas-products-delete" data-id="${e.cart_id}"><i class="bi bi-x-lg"></i> 删除</span>`;
html += '</div>';
html += '</div>';
html += '</div>';
})
$('.offcanvas-right-products').html(html)
}
$('#offcanvas-right-cart').html(res);
})
},

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

@ -56,8 +56,10 @@
</td>
<td>@{{ product.subtotal_format }}</td>
<td class="text-end">
<button type="button" class="btn btn-link btn-sm" @click.stop="checkedBtnDelete(product.cart_id)">删除</button><br>
<button type="button" class="btn btn-link btn-sm">加入收藏</button>
<button type="button" class="btn text-danger btn-sm px-0" @click.stop="checkedBtnDelete(product.cart_id)">
<i class="bi bi-x-lg"></i> 删除
</button><br>
<button type="button" class="btn text-secondary btn-link btn-sm px-0">加入收藏</button>
</td>
</tr>
</tbody>

30
themes/default/cart/mini.blade.php Normal file
View File

@ -0,0 +1,30 @@
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel" class="mx-auto mb-0">您的购物车</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-right-products">
@foreach ($carts as $cart)
<div class="product-list d-flex align-items-center">
<div class="left"><img src="{{ $cart['image_url'] }}" calss="img-fluid"></div>
<div class="right flex-grow-1">
<div class="name fs-sm fw-bold mb-2">{{ $cart['name'] }}</div>
<div class="product-bottom d-flex justify-content-between align-items-center">
<div class="price">{{ $cart['price_format'] }} <span class="text-muted">x {{ $cart['quantity'] }}<span></div>
<span class="offcanvas-products-delete" data-id="{{ $cart['cart_id'] }}"><i class="bi bi-x-lg"></i> 删除</span>
</div>
</div>
</div>
@endforeach
</div>
</div>
<div class="offcanvas-footer">
<div class="d-flex justify-content-between align-items-center mb-2 p-4 bg-light">
<strong>小计（<span class="offcanvas-right-cart-count">{{ $quantity }}</span>）</strong>
<strong class="ms-auto offcanvas-right-cart-amount">{{ $amount_format }}</strong>
</div>
<div class="p-4">
<a href="{{ shop_route('checkout.index') }}" class="btn w-100 btn-dark">去结账</a>
<a href="{{ shop_route('carts.index') }}" class="btn w-100 btn-outline-dark mt-2">查看购物车</a>
</div>
</div>

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

@ -51,24 +51,23 @@
<ul class="navbar-nav mx-auto">
@foreach ($menu_content as $menu)
<li
class="nav-item {{ $menu['childrenGroup'] ? 'dropdown' : '' }} {{ $menu['isFull'] ? 'position-static' : '' }}">
<a class="nav-link fw-bold {{ $menu['childrenGroup'] ? 'dropdown-toggle' : '' }}" href="{{ $menu['link']['link'] }}">
{{-- {{ $menu['link']['text'] }} --}}
class="nav-item {{ isset($menu['children_group']) ? 'dropdown' : '' }} {{ isset($menu['isFull']) && $menu['isFull'] ? 'position-static' : '' }}">
<a class="nav-link fw-bold {{ isset($menu['children_group']) ? 'dropdown-toggle' : '' }}" href="{{ $menu['link'] ?? '' }}">
{{ $menu['name'] }}
@if ($menu['badge']['name'])
@if (isset($menu['badge']) && $menu['badge']['name'])
<span class="badge"
style="background-color: {{ $menu['badge']['bg_color'] }}; color: {{ $menu['badge']['text_color'] }}; border-color: {{ $menu['badge']['bg_color'] }}">
{{ $menu['badge']['name'] }}
</span>
@endif
</a>
@if ($menu['childrenGroup'])
<div class="dropdown-menu {{ $menu['isFull'] ? 'w-100' : '' }}" style="min-width: {{ count($menu['childrenGroup']) * 200 }}px">
@if (isset($menu['children_group']) && $menu['children_group'])
<div class="dropdown-menu {{ $menu['isFull'] ? 'w-100' : '' }}" style="min-width: {{ count($menu['children_group']) * 200 }}px">
<div class="card card-lg">
<div class="card-body">
<div class="container">
<div class="row">
@forelse ($menu['childrenGroup'] as $group)
@forelse ($menu['children_group'] as $group)
<div class="col-6 col-md">
@if ($group['name'])
<div class="mb-3 fw-bold group-name">{{ $group['name'] }}</div>
@ -165,26 +164,7 @@
</div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-right-cart"
aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel" class="mx-auto mb-0">您的购物车</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-right-products">
</div>
</div>
<div class="offcanvas-footer">
<div class="d-flex justify-content-between align-items-center mb-2 p-4 bg-light">
<strong>小计（<span class="offcanvas-right-cart-count"></span>）</strong>
<strong class="ms-auto offcanvas-right-cart-amount"></strong>
</div>
<div class="p-4">
<a href="{{ shop_route('checkout.index') }}" class="btn w-100 btn-dark">去结账</a>
<a href="{{ shop_route('carts.index') }}" class="btn w-100 btn-outline-dark mt-2">查看购物车</a>
</div>
</div>
</div>
aria-labelledby="offcanvasRightLabel"></div>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvas-search-top" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">