From 8b072bbb3ccf91a94eccab198475e8c85b48f9f7 Mon Sep 17 00:00:00 2001
From: pushuo <229102104@qq.com>
Date: Wed, 6 Jul 2022 21:42:15 +0800
Subject: [PATCH] wip

---
 public/build/beike/shop/default/css/app.css  | 15 +++++++++++++++
 public/build/beike/shop/default/js/app.js    |  2 ++
 resources/beike/shop/default/css/header.scss | 16 ++++++++++++++++
 resources/beike/shop/default/js/app.js       |  3 +++
 themes/default/layout/header.blade.php       |  7 ++-----
 5 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css
index 3f2c1876..80f19435 100644
--- a/public/build/beike/shop/default/css/app.css
+++ b/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;
diff --git a/public/build/beike/shop/default/js/app.js b/public/build/beike/shop/default/js/app.js
index eb1d7288..b068165b 100644
--- a/public/build/beike/shop/default/js/app.js
+++ b/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">';
diff --git a/resources/beike/shop/default/css/header.scss b/resources/beike/shop/default/css/header.scss
index ca9fadc5..dd1a7ed4 100644
--- a/resources/beike/shop/default/css/header.scss
+++ b/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 {
diff --git a/resources/beike/shop/default/js/app.js b/resources/beike/shop/default/js/app.js
index b9a52215..57321e4d 100644
--- a/resources/beike/shop/default/js/app.js
+++ b/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">';
diff --git a/themes/default/layout/header.blade.php b/themes/default/layout/header.blade.php
index 62ebe58e..d63ee03e 100644
--- a/themes/default/layout/header.blade.php
+++ b/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">