右上角购物车

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

@@ -213,12 +213,17 @@ header .header-content .right-btn .nav-link i {
   border-top: 1px solid #eee;
 }
 #offcanvas-right-cart .offcanvas-right-products .product-list .left {
-  width: 100px;
+  width: 90px;
   margin-right: 10px;
 }
 #offcanvas-right-cart .offcanvas-right-products .product-list .left img {
-  max-height: 100px;
+  max-height: 90px;
 }
+#offcanvas-right-cart .offcanvas-right-products .product-list .right .offcanvas-products-delete {
+  cursor: pointer;
+  color: #999;
+}
+
 footer {
   background: #fafafa;
   margin-top: 5rem;

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

@@ -2488,7 +2488,36 @@ $(document).ready(function ($) {
       layer.closeAll('loading');
     }
   });
-  $('.quantity-wrap .right i').on('click', function (event) {
+  $http.get('/carts/mini', null, {
+    hload: true
+  }).then(function (res) {
+    $('.offcanvas-right-cart-amount').html(res.data.amount_format);
+
+    if (res.data.carts.length) {
+      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, "</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);
+    }
+  });
+  $(document).on('click', '.offcanvas-products-delete', function (event) {
+    var $this = $(this);
+    var cartId = $(this).data('id');
+    $http["delete"]("/carts/".concat(cartId)).then(function (res) {
+      $this.parents('.product-list').remove();
+    });
+  });
+  $(document).on('click', '.quantity-wrap .right i', function (event) {
     event.stopPropagation();
     var input = $(this).parent().siblings('input');
 

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

@@ -81,17 +81,18 @@ header {
       border-top: 1px solid #eee;
 
       .left {
-        width: 100px;
+        width: 90px;
         margin-right: 10px;
 
         img {
-          max-height: 100px;
+          max-height: 90px;
         }
       }
 
       .right {
-        .name {
+        .offcanvas-products-delete {
-
+          cursor: pointer;
+          color: #999;
         }
       }
     }

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

@@ -8,7 +8,38 @@ $(document).ready(function ($) {
     complete: function() { layer.closeAll('loading'); },
   });
 
-  $('.quantity-wrap .right i').on('click', function(event) {
+  $http.get('/carts/mini', null, {hload: true}).then((res) => {
+    $('.offcanvas-right-cart-amount').html(res.data.amount_format);
+
+    if (res.data.carts.length) {
+      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}</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)
+    }
+  })
+
+  $(document).on('click', '.offcanvas-products-delete', function(event) {
+    const $this = $(this)
+    const cartId = $(this).data('id')
+
+    $http.delete(`/carts/${cartId}`).then((res) => {
+      $this.parents('.product-list').remove()
+    })
+  })
+
+  $(document).on('click', '.quantity-wrap .right i', function(event) {
     event.stopPropagation();
     let input = $(this).parent().siblings('input')
 

themes/default/layout/header.blade.php

@@ -1,3 +1,7 @@
+@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">
@@ -95,7 +99,7 @@
   </div>
   <div class="offcanvas-body">
     <div class="offcanvas-right-products">
-      @for ($i = 0; $i < 20; $i++)
+{{--       @for ($i = 0; $i < 20; $i++)
         <div class="product-list d-flex align-items-center">
           <div class="left"><img src="https://via.placeholder.com/140x140.png/eeeeee" calss="img-fluid"></div>
           <div class="right flex-grow-1">
@@ -107,13 +111,13 @@
             </div>
           </div>
         </div>
-      @endfor
+      @endfor --}}
     </div>
   </div>
   <div class="offcanvas-footer">
     <div class="d-flex justify-content-between align-items-center mb-2 p-4 bg-light">
       <strong>小计</strong>
-      <strong class="ms-auto">2222</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>