优化收藏等

beike/Repositories/CustomerRepo.php

@@ -139,10 +139,10 @@ class CustomerRepo
         }
 
         if (!$customer->wishlists()->where('product_id', $productId)->first()) {
-            $customer->wishlists()->save(new CustomerWishlist(['product_id' => $productId]));
+            $wishlist = $customer->wishlists()->save(new CustomerWishlist(['product_id' => $productId]));
         }
 
-        return $customer;
+        return $wishlist;
     }
 
     /**

beike/Shop/Http/Controllers/Account/WishlistController.php

@@ -31,11 +31,9 @@ class WishlistController extends Controller
     public function add(Request $request): array
     {
         $productId = $request->get('product_id');
-        CustomerRepo::addToWishlist(current_customer(), $productId);
+        $wishlist = CustomerRepo::addToWishlist(current_customer(), $productId);
 
-        $wishlists = CustomerRepo::wishlists(current_customer());
+        return json_success('加入收藏成功', $wishlist);
-
-        return json_success('加入收藏成功', $wishlists);
     }
 
     public function remove(Request $request): array
@@ -43,9 +41,7 @@ class WishlistController extends Controller
         $id = $request->id;
         CustomerRepo::removeFromWishlist(current_customer(), $id);
 
-        $wishlists = CustomerRepo::wishlists(current_customer());
+        return json_success('移除收藏成功');
-
-        return json_success('移除收藏成功', $wishlists);
     }
 
 }

public/build/beike/admin/js/app.js

@@ -2064,13 +2064,15 @@ module.exports = {
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _js_http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../js/http */ "./resources/js/http.js");
 /* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./common */ "./resources/beike/admin/js/common.js");
+/* harmony import */ var _autocomplete__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./autocomplete */ "./resources/beike/admin/js/autocomplete.js");
+/* harmony import */ var _autocomplete__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_autocomplete__WEBPACK_IMPORTED_MODULE_2__);
 var _document$querySelect;
 
 
 window.$http = _js_http__WEBPACK_IMPORTED_MODULE_0__["default"];
 
 window.bk = _common__WEBPACK_IMPORTED_MODULE_1__["default"];
-_common__WEBPACK_IMPORTED_MODULE_1__["default"].autocomplete();
+
 var base = document.querySelector('base').href;
 var asset = document.querySelector('meta[name="asset"]').content;
 var editor_language = ((_document$querySelect = document.querySelector('meta[name="editor_language"]')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.content) || 'zh_cn';
@@ -2164,6 +2166,133 @@ var tinymceInit = function tinymceInit() {
 
 /***/ }),
 
+/***/ "./resources/beike/admin/js/autocomplete.js":
+/*!**************************************************!*\
+  !*** ./resources/beike/admin/js/autocomplete.js ***!
+  \**************************************************/
+/***/ (() => {
+
+$(function () {
+  $.fn.autocomplete = function (option) {
+    return this.each(function () {
+      this.timer = null;
+      this.items = new Array();
+      $.extend(this, option);
+      $(this).attr('autocomplete', 'off'); // Focus
+
+      $(this).on('focus', function () {
+        this.request();
+      }); // Blur
+
+      $(this).on('blur', function () {
+        setTimeout(function (object) {
+          object.hide();
+        }, 200, this);
+      }); // Keydown
+
+      $(this).on('keydown', function (event) {
+        switch (event.keyCode) {
+          case 27:
+            // escape
+            this.hide();
+            break;
+
+          default:
+            this.request();
+            break;
+        }
+      }); // Click
+
+      this.click = function (event) {
+        event.preventDefault();
+        var value = $(event.target).parent().attr('data-value');
+
+        if (value && this.items[value]) {
+          this.select(this.items[value]);
+        }
+      }; // Show
+
+
+      this.show = function () {
+        var pos = $(this).position();
+        $(this).siblings('ul.dropdown-menu').css({
+          top: pos.top + $(this).outerHeight(),
+          left: pos.left
+        });
+        $(this).siblings('ul.dropdown-menu').show();
+      }; // Hide
+
+
+      this.hide = function () {
+        $(this).siblings('ul.dropdown-menu').hide();
+      }; // Request
+
+
+      this.request = function () {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(function (object) {
+          object.source($(object).val(), $.proxy(object.response, object));
+        }, 200, this);
+      }; // Response
+
+
+      this.response = function (json) {
+        var hasFocus = $(this).is(':focus');
+        if (!hasFocus) return;
+        var html = '';
+
+        if (json.length) {
+          for (var i = 0; i < json.length; i++) {
+            this.items[json[i]['value']] = json[i];
+          }
+
+          for (var i = 0; i < json.length; i++) {
+            if (!json[i]['category']) {
+              html += '<li data-value="' + json[i]['value'] + '"><a href="#" class="dropdown-item">' + json[i]['label'] + '</a></li>';
+            }
+          } // Get all the ones with a categories
+
+
+          var category = new Array();
+
+          for (var i = 0; i < json.length; i++) {
+            if (json[i]['category']) {
+              if (!category[json[i]['category']]) {
+                category[json[i]['category']] = new Array();
+                category[json[i]['category']]['name'] = json[i]['category'];
+                category[json[i]['category']]['item'] = new Array();
+              }
+
+              category[json[i]['category']]['item'].push(json[i]);
+            }
+          }
+
+          for (var i in category) {
+            html += '<li class="dropdown-header">' + category[i]['name'] + '</li>';
+
+            for (j = 0; j < category[i]['item'].length; j++) {
+              html += '<li data-value="' + category[i]['item'][j]['value'] + '"><a href="#">&nbsp;&nbsp;&nbsp;' + category[i]['item'][j]['label'] + '</a></li>';
+            }
+          }
+        }
+
+        if (html) {
+          this.show();
+        } else {
+          this.hide();
+        }
+
+        $(this).siblings('ul.dropdown-menu').html(html);
+      };
+
+      $(this).after('<ul class="dropdown-menu"></ul>');
+      $(this).siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this));
+    });
+  };
+});
+
+/***/ }),
+
 /***/ "./resources/beike/admin/js/common.js":
 /*!********************************************!*\
   !*** ./resources/beike/admin/js/common.js ***!
@@ -2211,124 +2340,7 @@ __webpack_require__.r(__webpack_exports__);
       }, delay);
     };
   },
-  autocomplete: function autocomplete() {
+  listDelete: function listDelete() {}
-    $.fn.autocomplete = function (option) {
-      return this.each(function () {
-        this.timer = null;
-        this.items = new Array();
-        $.extend(this, option);
-        $(this).attr('autocomplete', 'off'); // Focus
-
-        $(this).on('focus', function () {
-          this.request();
-        }); // Blur
-
-        $(this).on('blur', function () {
-          setTimeout(function (object) {
-            object.hide();
-          }, 200, this);
-        }); // Keydown
-
-        $(this).on('keydown', function (event) {
-          switch (event.keyCode) {
-            case 27:
-              // escape
-              this.hide();
-              break;
-
-            default:
-              this.request();
-              break;
-          }
-        }); // Click
-
-        this.click = function (event) {
-          event.preventDefault();
-          var value = $(event.target).parent().attr('data-value');
-
-          if (value && this.items[value]) {
-            this.select(this.items[value]);
-          }
-        }; // Show
-
-
-        this.show = function () {
-          var pos = $(this).position();
-          $(this).siblings('ul.dropdown-menu').css({
-            top: pos.top + $(this).outerHeight(),
-            left: pos.left
-          });
-          $(this).siblings('ul.dropdown-menu').show();
-        }; // Hide
-
-
-        this.hide = function () {
-          $(this).siblings('ul.dropdown-menu').hide();
-        }; // Request
-
-
-        this.request = function () {
-          clearTimeout(this.timer);
-          this.timer = setTimeout(function (object) {
-            object.source($(object).val(), $.proxy(object.response, object));
-          }, 200, this);
-        }; // Response
-
-
-        this.response = function (json) {
-          var hasFocus = $(this).is(':focus');
-          if (!hasFocus) return;
-          var html = '';
-
-          if (json.length) {
-            for (var i = 0; i < json.length; i++) {
-              this.items[json[i]['value']] = json[i];
-            }
-
-            for (var i = 0; i < json.length; i++) {
-              if (!json[i]['category']) {
-                html += '<li data-value="' + json[i]['value'] + '"><a href="#" class="dropdown-item">' + json[i]['label'] + '</a></li>';
-              }
-            } // Get all the ones with a categories
-
-
-            var category = new Array();
-
-            for (var i = 0; i < json.length; i++) {
-              if (json[i]['category']) {
-                if (!category[json[i]['category']]) {
-                  category[json[i]['category']] = new Array();
-                  category[json[i]['category']]['name'] = json[i]['category'];
-                  category[json[i]['category']]['item'] = new Array();
-                }
-
-                category[json[i]['category']]['item'].push(json[i]);
-              }
-            }
-
-            for (var i in category) {
-              html += '<li class="dropdown-header">' + category[i]['name'] + '</li>';
-
-              for (j = 0; j < category[i]['item'].length; j++) {
-                html += '<li data-value="' + category[i]['item'][j]['value'] + '"><a href="#">&nbsp;&nbsp;&nbsp;' + category[i]['item'][j]['label'] + '</a></li>';
-              }
-            }
-          }
-
-          if (html) {
-            this.show();
-          } else {
-            this.hide();
-          }
-
-          $(this).siblings('ul.dropdown-menu').html(html);
-        };
-
-        $(this).after('<ul class="dropdown-menu"></ul>');
-        $(this).siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this));
-      });
-    };
-  }
 });
 
 /***/ }),
@@ -2822,6 +2834,18 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P
 /******/ 		};
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports

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

@@ -2129,13 +2129,37 @@ __webpack_require__.r(__webpack_exports__);
       }
     });
   },
-  addWishlist: function addWishlist(id) {
+  addWishlist: function addWishlist(id, e) {
-    var isWishlist = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var $btn = $(e);
-    $http.post('account/wishlist', {
+    var isWishlist = $btn.attr('data-in-wishlist') * 1;
-      product_id: id
+    var btnHtml = $btn.html();
-    }).then(function (res) {
+    var loadHtml = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
-      layer.msg(res.message);
+
-    });
+    if (isWishlist) {
+      $btn.html(loadHtml).prop('disabled', true);
+      $http["delete"]("account/wishlist/".concat(isWishlist), null, {
+        hload: true
+      }).then(function (res) {
+        layer.msg(res.message);
+        $btn.attr('data-in-wishlist', '0');
+        $btn.find('i.bi').prop('class', 'bi bi-heart me-1');
+      })["finally"](function () {
+        $btn.html(btnHtml).prop('disabled', false);
+      });
+    } else {
+      $btn.html(loadHtml).prop('disabled', true);
+      $http.post('account/wishlist', {
+        product_id: id
+      }, {
+        hload: true
+      }).then(function (res) {
+        layer.msg(res.message);
+        $btn.attr('data-in-wishlist', res.data.id);
+        $btn.find('i.bi').prop('class', 'bi bi-heart-fill me-1');
+      })["finally"](function () {
+        $btn.html(btnHtml).prop('disabled', false);
+      });
+    }
   },
 
   /**

resources/beike/admin/js/app.js

@@ -2,7 +2,7 @@ import http from "../../../js/http";
 window.$http = http;
 import common from "./common";
 window.bk = common;
-common.autocomplete();
+import "./autocomplete";
 
 const base = document.querySelector('base').href;
 const asset = document.querySelector('meta[name="asset"]').content;

resources/beike/admin/js/autocomplete.js

@@ -0,0 +1,127 @@
+$(function() {
+  $.fn.autocomplete = function(option) {
+    return this.each(function() {
+      this.timer = null;
+      this.items = new Array();
+
+      $.extend(this, option);
+
+      $(this).attr('autocomplete', 'off');
+
+      // Focus
+      $(this).on('focus', function() {
+        this.request();
+      });
+
+      // Blur
+      $(this).on('blur', function() {
+        setTimeout(function(object) {
+          object.hide();
+        }, 200, this);
+      });
+
+      // Keydown
+      $(this).on('keydown', function(event) {
+        switch(event.keyCode) {
+          case 27: // escape
+            this.hide();
+            break;
+          default:
+            this.request();
+            break;
+        }
+      });
+
+      // Click
+      this.click = function(event) {
+        event.preventDefault();
+
+        let value = $(event.target).parent().attr('data-value');
+
+        if (value && this.items[value]) {
+          this.select(this.items[value]);
+        }
+      }
+
+      // Show
+      this.show = function() {
+        var pos = $(this).position();
+
+        $(this).siblings('ul.dropdown-menu').css({
+          top: pos.top + $(this).outerHeight(),
+          left: pos.left
+        });
+
+        $(this).siblings('ul.dropdown-menu').show();
+      }
+
+      // Hide
+      this.hide = function() {
+        $(this).siblings('ul.dropdown-menu').hide();
+      }
+
+      // Request
+      this.request = function() {
+        clearTimeout(this.timer);
+
+        this.timer = setTimeout(function(object) {
+          object.source($(object).val(), $.proxy(object.response, object));
+        }, 200, this);
+      }
+
+      // Response
+      this.response = function(json) {
+        let hasFocus = $(this).is(':focus');
+        if (!hasFocus) return;
+
+        var html = '';
+
+        if (json.length) {
+          for (var i = 0; i < json.length; i++) {
+            this.items[json[i]['value']] = json[i];
+          }
+
+          for (var i = 0; i < json.length; i++) {
+            if (!json[i]['category']) {
+              html += '<li data-value="' + json[i]['value'] + '"><a href="#" class="dropdown-item">' + json[i]['label'] + '</a></li>';
+            }
+          }
+
+          // Get all the ones with a categories
+          var category = new Array();
+
+          for (var i = 0; i < json.length; i++) {
+            if (json[i]['category']) {
+              if (!category[json[i]['category']]) {
+                category[json[i]['category']] = new Array();
+                category[json[i]['category']]['name'] = json[i]['category'];
+                category[json[i]['category']]['item'] = new Array();
+              }
+
+              category[json[i]['category']]['item'].push(json[i]);
+            }
+          }
+
+          for (var i in category) {
+            html += '<li class="dropdown-header">' + category[i]['name'] + '</li>';
+
+            for (j = 0; j < category[i]['item'].length; j++) {
+              html += '<li data-value="' + category[i]['item'][j]['value'] + '"><a href="#">&nbsp;&nbsp;&nbsp;' + category[i]['item'][j]['label'] + '</a></li>';
+            }
+          }
+        }
+
+        if (html) {
+          this.show();
+        } else {
+          this.hide();
+        }
+
+        $(this).siblings('ul.dropdown-menu').html(html);
+      }
+
+      $(this).after('<ul class="dropdown-menu"></ul>');
+      $(this).siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this));
+    });
+  }
+});

resources/beike/admin/js/common.js

@@ -33,131 +33,7 @@ export default {
     }
   },
 
-  autocomplete() {
+  listDelete() {
-    $.fn.autocomplete = function(option) {
-      return this.each(function() {
-        this.timer = null;
-        this.items = new Array();
 
-        $.extend(this, option);
-
-        $(this).attr('autocomplete', 'off');
-
-        // Focus
-        $(this).on('focus', function() {
-          this.request();
-        });
-
-        // Blur
-        $(this).on('blur', function() {
-          setTimeout(function(object) {
-            object.hide();
-          }, 200, this);
-        });
-
-        // Keydown
-        $(this).on('keydown', function(event) {
-          switch(event.keyCode) {
-            case 27: // escape
-              this.hide();
-              break;
-            default:
-              this.request();
-              break;
-          }
-        });
-
-        // Click
-        this.click = function(event) {
-          event.preventDefault();
-
-          let value = $(event.target).parent().attr('data-value');
-
-          if (value && this.items[value]) {
-            this.select(this.items[value]);
-          }
-        }
-
-        // Show
-        this.show = function() {
-          var pos = $(this).position();
-
-          $(this).siblings('ul.dropdown-menu').css({
-            top: pos.top + $(this).outerHeight(),
-            left: pos.left
-          });
-
-          $(this).siblings('ul.dropdown-menu').show();
-        }
-
-        // Hide
-        this.hide = function() {
-          $(this).siblings('ul.dropdown-menu').hide();
-        }
-
-        // Request
-        this.request = function() {
-          clearTimeout(this.timer);
-
-          this.timer = setTimeout(function(object) {
-            object.source($(object).val(), $.proxy(object.response, object));
-          }, 200, this);
-        }
-
-        // Response
-        this.response = function(json) {
-          let hasFocus = $(this).is(':focus');
-          if (!hasFocus) return;
-
-          var html = '';
-
-          if (json.length) {
-            for (var i = 0; i < json.length; i++) {
-              this.items[json[i]['value']] = json[i];
-            }
-
-            for (var i = 0; i < json.length; i++) {
-              if (!json[i]['category']) {
-                html += '<li data-value="' + json[i]['value'] + '"><a href="#" class="dropdown-item">' + json[i]['label'] + '</a></li>';
-              }
-            }
-
-            // Get all the ones with a categories
-            var category = new Array();
-
-            for (var i = 0; i < json.length; i++) {
-              if (json[i]['category']) {
-                if (!category[json[i]['category']]) {
-                  category[json[i]['category']] = new Array();
-                  category[json[i]['category']]['name'] = json[i]['category'];
-                  category[json[i]['category']]['item'] = new Array();
-                }
-
-                category[json[i]['category']]['item'].push(json[i]);
-              }
-            }
-
-            for (var i in category) {
-              html += '<li class="dropdown-header">' + category[i]['name'] + '</li>';
-
-              for (j = 0; j < category[i]['item'].length; j++) {
-                html += '<li data-value="' + category[i]['item'][j]['value'] + '"><a href="#">&nbsp;&nbsp;&nbsp;' + category[i]['item'][j]['label'] + '</a></li>';
-              }
-            }
-          }
-
-          if (html) {
-            this.show();
-          } else {
-            this.hide();
-          }
-
-          $(this).siblings('ul.dropdown-menu').html(html);
-        }
-
-        $(this).after('<ul class="dropdown-menu"></ul>');
-        $(this).siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this));
-      });
-    }
   },
 }

resources/beike/shop/default/js/common.js

@@ -54,6 +54,29 @@ export default {
     })
   },
 
+  addWishlist(id, e) {
+    const $btn = $(e);
+    let isWishlist = $btn.attr('data-in-wishlist') * 1;
+    const btnHtml = $btn.html();
+    const loadHtml = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
+
+    if (isWishlist) {
+      $btn.html(loadHtml).prop('disabled', true);
+      $http.delete(`account/wishlist/${isWishlist}`, null, {hload: true}).then((res) => {
+        layer.msg(res.message)
+        $btn.attr('data-in-wishlist', '0');
+        $btn.find('i.bi').prop('class', 'bi bi-heart me-1')
+      }).finally(() => {$btn.html(btnHtml).prop('disabled', false)})
+    } else {
+      $btn.html(loadHtml).prop('disabled', true);
+      $http.post('account/wishlist', {product_id: id}, {hload: true}).then((res) => {
+        layer.msg(res.message)
+        $btn.attr('data-in-wishlist', res.data.id);
+        $btn.find('i.bi').prop('class', 'bi bi-heart-fill me-1')
+      }).finally(() => {$btn.html(btnHtml).prop('disabled', false)})
+    }
+  },
+
   /**
    * @description: 滑动固定顶部
    * @return {*}

themes/default/product.blade.php

@@ -12,7 +12,6 @@
 @endpush
 
 @section('content')
-
   <div class="container" id="product-app" v-cloak>
 
     {{ Diglactic\Breadcrumbs\Breadcrumbs::render('product', $product) }}
@@ -40,7 +39,6 @@
           <div class="right" id="zoom">
             <img :src="images[0]?.preview || '{{ asset('image/placeholder.png') }}'" class="img-fluid">
           </div>
-
         </div>
       </div>
 
@@ -104,7 +102,9 @@
             </button>
           </div>
           <div class="add-wishlist">
-            <button class="btn btn-link ps-0 text-dark" @click="addWishlist"><i class="bi bi-suit-heart-fill me-1"></i>加入收藏夹</button>
+            <button class="btn btn-link ps-0 text-dark" data-in-wishlist="{{ $product['in_wishlist'] }}" onclick="bk.addWishlist('{{ $product['id'] }}', this)">
+              <i class="bi bi-heart{{ $product['in_wishlist'] ? '-fill' : '' }} me-1"></i> 加入收藏夹
+            </button>
           </div>
         </div>
       </div>
@@ -241,12 +241,6 @@
             })
           });
         },
-
-        addWishlist() {
-          $http.post('account/wishlist', {product_id: '{{ $product['id'] }}'}).then((res) => {
-            layer.msg(res.message)
-          })
-        },
       }
     });
 

themes/default/shared/product.blade.php

@@ -9,8 +9,9 @@
       </div>
     </a>
     <div class="button-wrap">
-      <button class="btn btn-dark text-light mx-1 rounded-3">
+      <button class="btn btn-dark text-light mx-1 rounded-3" data-in-wishlist="{{ $product['in_wishlist'] }}" onclick="bk.addWishlist('{{ $product['id'] }}', this)">
-        <i class="iconfont">&#xe77f;</i>
+        {{-- <i class="iconfont">&#xe77f;</i> --}}
+        <i class="bi bi-heart{{ $product['in_wishlist'] ? '-fill' : '' }}"></i>
         <span>加入收藏</span>
       </button>
       <button class="btn btn-dark text-light mx-1 rounded-3" onclick="bk.addCart({{ $product['sku_id'] }})">