wip

public/build/beike/shop/default/css/app.css

@@ -203,10 +203,25 @@ header .header-content .right-btn .nav-link {
   color: #333;
   padding-right: 0.7rem;
   padding-left: 0.7rem;
+  position: relative;
 }
 header .header-content .right-btn .nav-link i {
   font-size: 1.1rem;
 }
+header .navbar-icon-link-badge {
+  position: absolute;
+  display: none;
+  top: 0;
+  right: 0;
+  width: 19px;
+  height: 19px;
+  text-align: center;
+  color: #fff;
+  border-radius: 50%;
+  background: #fd560f;
+  font-size: 0.6rem;
+  line-height: 19px;
+}
 
 #offcanvas-right-cart .offcanvas-right-products .product-list {
   padding: 1rem 0;

public/build/beike/shop/default/js/app.js

@@ -2494,6 +2494,8 @@ $(document).ready(function ($) {
     $('.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.carts.length);
       var html = '';
       res.data.carts.forEach(function (e) {
         html += '<div class="product-list d-flex align-items-center">';

resources/beike/shop/default/css/header.scss

@@ -66,12 +66,28 @@ header {
         color: #333;
         padding-right: 0.7rem;
         padding-left: 0.7rem;
+        position: relative;
         i {
           font-size: 1.1rem;
         }
       }
     }
   }
+
+  .navbar-icon-link-badge {
+    position: absolute;
+    display: none;
+    top: 0;
+    right: 0;
+    width: 19px;
+    height: 19px;
+    text-align: center;
+    color: #fff;
+    border-radius: 50%;
+    background: $primary;
+    font-size: .6rem;
+    line-height: 19px;
+  }
 }
 
 #offcanvas-right-cart {

resources/beike/shop/default/js/app.js

@@ -12,6 +12,9 @@ $(document).ready(function ($) {
     $('.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.carts.length);
+
       let html = '';
       res.data.carts.forEach(e => {
         html += '<div class="product-list d-flex align-items-center">';

themes/default/layout/header.blade.php

@@ -1,7 +1,3 @@
-@push('header')
-  {{-- <script src="{{ asset('vendor/vue/2.6.14/vue.js') }}"></script> --}}
-@endpush
-
 <header>
   <div class="top-wrap">
     <div class="container d-flex justify-content-between align-items-center">
@@ -84,6 +80,7 @@
             {{-- <a href="javascript:vido(0)" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-right-cart" aria-controls="offcanvas-right-cart" class="nav-link"><i class="iconfont">&#xe634;</i></a> --}}
             <a class="nav-link" data-bs-toggle="offcanvas" href="#offcanvas-right-cart" role="button" aria-controls="offcanvasExample">
               <i class="iconfont">&#xe634;</i>
+              <div class="navbar-icon-link-badge"></div>
             </a>
           </li>
         </ul>
@@ -116,7 +113,7 @@
   </div>
   <div class="offcanvas-footer">
     <div class="d-flex justify-content-between align-items-center mb-2 p-4 bg-light">
-      <strong>小计</strong>
+      <strong>小计（<span class="offcanvas-right-cart-count"></span>）</strong>
       <strong class="ms-auto offcanvas-right-cart-amount"></strong>
     </div>
     <div class="p-4">