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 = [
'data' => CartService::reloadData() 'data' => CartService::reloadData()
]; ];
return view("cart", $data); return view("cart/cart", $data);
} }
/** /**
@ -74,10 +74,11 @@ class CartController extends Controller
* 右上角购物车 * 右上角购物车
* @return array * @return array
*/ */
public function miniCart(): array public function miniCart()
{ {
$data = CartService::reloadData(); $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; background: #F7F8FA;
display: flex; display: flex;
} }
header .top-wrap .dropdown:hover { header .top-wrap .dropdown:hover, header .header-content .dropdown:hover {
background-color: #fff; 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; margin: 0;
display: block; display: block;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
border: none; 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; right: 0;
} }
header .header-content { 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, { $http.get('carts/mini', null, {
hload: true hload: true
}).then(function (res) { }).then(function (res) {
$('.offcanvas-right-cart-amount').html(res.data.amount_format); $('#offcanvas-right-cart').html(res);
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);
}
}); });
}, },
@ -2712,17 +2693,15 @@ var base = document.querySelector('base').href;
$(document).ready(function ($) { $(document).ready(function ($) {
$.ajaxSetup({ $(document).on('click', '.offcanvas-products-delete', function () {
headers: { var _this = this;
'X-CSRF-TOKEN': token
}, var id = $(this).data('id');
// beforeSend: function() { layer.load(2, {shade: [0.3,'#fff'] }); }, $http["delete"]("carts/".concat(id)).then(function (res) {
// complete: function() { layer.closeAll('loading'); }, $(_this).parents('.product-list').remove();
error: function error(xhr, ajaxOptions, thrownError) { $('.offcanvas-right-cart-count').text(res.data.quantity);
if (xhr.responseJSON.message) { $('.offcanvas-right-cart-amount').text(res.data.amount_format);
layer.msg(xhr.responseJSON.message, function () {}); });
}
}
}); });
}); });
bk.getCarts(); // 页面初始加载购物车数据 bk.getCarts(); // 页面初始加载购物车数据

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

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

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

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

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

@ -12,28 +12,7 @@ export default {
*/ */
getCarts() { getCarts() {
$http.get('carts/mini', null, {hload: true}).then((res) => { $http.get('carts/mini', null, {hload: true}).then((res) => {
$('.offcanvas-right-cart-amount').html(res.data.amount_format); $('#offcanvas-right-cart').html(res);
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)
}
}) })
}, },

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

@ -56,8 +56,10 @@
</td> </td>
<td>@{{ product.subtotal_format }}</td> <td>@{{ product.subtotal_format }}</td>
<td class="text-end"> <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 text-danger btn-sm px-0" @click.stop="checkedBtnDelete(product.cart_id)">
<button type="button" class="btn btn-link btn-sm">加入收藏</button> <i class="bi bi-x-lg"></i> 删除
</button><br>
<button type="button" class="btn text-secondary btn-link btn-sm px-0">加入收藏</button>
</td> </td>
</tr> </tr>
</tbody> </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"> <ul class="navbar-nav mx-auto">
@foreach ($menu_content as $menu) @foreach ($menu_content as $menu)
<li <li
class="nav-item {{ $menu['childrenGroup'] ? 'dropdown' : '' }} {{ $menu['isFull'] ? 'position-static' : '' }}"> class="nav-item {{ isset($menu['children_group']) ? 'dropdown' : '' }} {{ isset($menu['isFull']) && $menu['isFull'] ? 'position-static' : '' }}">
<a class="nav-link fw-bold {{ $menu['childrenGroup'] ? 'dropdown-toggle' : '' }}" href="{{ $menu['link']['link'] }}"> <a class="nav-link fw-bold {{ isset($menu['children_group']) ? 'dropdown-toggle' : '' }}" href="{{ $menu['link'] ?? '' }}">
{{-- {{ $menu['link']['text'] }} --}}
{{ $menu['name'] }} {{ $menu['name'] }}
@if ($menu['badge']['name']) @if (isset($menu['badge']) && $menu['badge']['name'])
<span class="badge" <span class="badge"
style="background-color: {{ $menu['badge']['bg_color'] }}; color: {{ $menu['badge']['text_color'] }}; border-color: {{ $menu['badge']['bg_color'] }}"> style="background-color: {{ $menu['badge']['bg_color'] }}; color: {{ $menu['badge']['text_color'] }}; border-color: {{ $menu['badge']['bg_color'] }}">
{{ $menu['badge']['name'] }} {{ $menu['badge']['name'] }}
</span> </span>
@endif @endif
</a> </a>
@if ($menu['childrenGroup']) @if (isset($menu['children_group']) && $menu['children_group'])
<div class="dropdown-menu {{ $menu['isFull'] ? 'w-100' : '' }}" style="min-width: {{ count($menu['childrenGroup']) * 200 }}px"> <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 card-lg">
<div class="card-body"> <div class="card-body">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@forelse ($menu['childrenGroup'] as $group) @forelse ($menu['children_group'] as $group)
<div class="col-6 col-md"> <div class="col-6 col-md">
@if ($group['name']) @if ($group['name'])
<div class="mb-3 fw-bold group-name">{{ $group['name'] }}</div> <div class="mb-3 fw-bold group-name">{{ $group['name'] }}</div>
@ -165,26 +164,7 @@
</div> </div>
</div> </div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-right-cart" <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-right-cart"
aria-labelledby="offcanvasRightLabel"> aria-labelledby="offcanvasRightLabel"></div>
<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>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvas-search-top" aria-labelledby="offcanvasTopLabel"> <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvas-search-top" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header"> <div class="offcanvas-header">