From e45e72b4a2a246e81d7c5424b1757b41dc8a3659 Mon Sep 17 00:00:00 2001 From: pushuo <229102104@qq.com> Date: Tue, 28 Jun 2022 16:30:17 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=86=B2=E7=AA=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/build/beike/shop/default/css/app.css | 64 ++++++++++--------- public/build/beike/shop/default/js/app.js | 14 ++++ resources/beike/shop/default/css/cart.scss | 34 ---------- resources/beike/shop/default/css/global.scss | 34 ++++++++++ resources/beike/shop/default/css/product.scss | 6 +- resources/beike/shop/default/js/app.js | 15 +++++ themes/default/pages/cart.blade.php | 8 +-- themes/default/product.blade.php | 12 ++-- 8 files changed, 111 insertions(+), 76 deletions(-) diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css index fd441dea..d77df8fa 100644 --- a/public/build/beike/shop/default/css/app.css +++ b/public/build/beike/shop/default/css/app.css @@ -78,6 +78,36 @@ color: #848484; } +.quantity-wrap { + width: 80px; + height: 37px; + display: flex; + align-content: space-between; + border: 1px solid #ced4da; +} +.quantity-wrap input { + border: none; + padding: 0.5rem; +} +.quantity-wrap > .right { + display: flex; + flex-direction: column; + border-left: 1px solid #ced4da; +} +.quantity-wrap > .right i { + flex: 1; + width: 20px; + height: 17px; + text-align: center; + cursor: pointer; +} +.quantity-wrap > .right i:last-of-type { + border-top: 1px solid #ced4da; +} +.quantity-wrap > .right i:hover { + background-color: #eee; +} + header { background: #fff; } @@ -354,10 +384,13 @@ body.page-product .peoduct-info .price-wrap .new-price { body.page-product .peoduct-info .attribute-wrap { margin-bottom: 2rem; } -body.page-product .peoduct-info .quantity-wrap .quantity-input { +body.page-product .peoduct-info .quantity-btns .quantity-input { max-width: 5rem; text-align: center; } +body.page-product .peoduct-info .quantity-btns .quantity-wrap { + height: 43px; +} body.page-product .product-description .nav-tabs .nav-link { border: none; } @@ -397,35 +430,6 @@ body.page-cart .cart-products-wrap .table .p-image img { max-width: 80px; margin-left: 10px; } -body.page-cart .cart-products-wrap .table .quantity-wrap { - width: 80px; - height: 37px; - display: flex; - align-content: space-between; - border: 1px solid #ced4da; -} -body.page-cart .cart-products-wrap .table .quantity-wrap input { - border: none; - padding: 0.5rem; -} -body.page-cart .cart-products-wrap .table .quantity-wrap > .right { - display: flex; - flex-direction: column; - border-left: 1px solid #ced4da; -} -body.page-cart .cart-products-wrap .table .quantity-wrap > .right i { - flex: 1; - width: 20px; - height: 17px; - text-align: center; - cursor: pointer; -} -body.page-cart .cart-products-wrap .table .quantity-wrap > .right i:last-of-type { - border-top: 1px solid #ced4da; -} -body.page-cart .cart-products-wrap .table .quantity-wrap > .right i:hover { - background-color: #eee; -} body.page-cart .total-wrap { border: none; background-color: #F8F9FA; diff --git a/public/build/beike/shop/default/js/app.js b/public/build/beike/shop/default/js/app.js index 548950f2..45cedf29 100644 --- a/public/build/beike/shop/default/js/app.js +++ b/public/build/beike/shop/default/js/app.js @@ -13,6 +13,20 @@ $(document).ready(function ($) { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); + $('.quantity-wrap .right i').on('click', function (event) { + var input = $(this).parent().siblings('input'); + + if ($(this).hasClass('bi-chevron-up')) { + input.val(input.val() * 1 + 1); + return; + } + + if (input.val() * 1 <= input.attr('minimum') * 1) { + return; + } + + input.val(input.val() * 1 - 1); + }); }); /***/ }), diff --git a/resources/beike/shop/default/css/cart.scss b/resources/beike/shop/default/css/cart.scss index 7b972d7e..35031887 100644 --- a/resources/beike/shop/default/css/cart.scss +++ b/resources/beike/shop/default/css/cart.scss @@ -31,40 +31,6 @@ body.page-cart { margin-left: 10px; } } - - .quantity-wrap { - width: 80px; - height: 37px; - display: flex; - align-content: space-between; - border: 1px solid #ced4da; - input { - border: none; - padding: 0.5rem; - } - - > .right { - display: flex; - flex-direction: column; - // align-items: center; - border-left: 1px solid #ced4da; - - i { - flex: 1; - width: 20px; - height: 17px; - text-align: center; - cursor: pointer; - &:last-of-type { - border-top: 1px solid #ced4da; - } - - &:hover { - background-color: #eee; - } - } - } - } } } diff --git a/resources/beike/shop/default/css/global.scss b/resources/beike/shop/default/css/global.scss index 3a05bfdb..e827bf98 100644 --- a/resources/beike/shop/default/css/global.scss +++ b/resources/beike/shop/default/css/global.scss @@ -72,4 +72,38 @@ color: #848484; } } +} + +.quantity-wrap { + width: 80px; + height: 37px; + display: flex; + align-content: space-between; + border: 1px solid #ced4da; + input { + border: none; + padding: 0.5rem; + } + + > .right { + display: flex; + flex-direction: column; + // align-items: center; + border-left: 1px solid #ced4da; + + i { + flex: 1; + width: 20px; + height: 17px; + text-align: center; + cursor: pointer; + &:last-of-type { + border-top: 1px solid #ced4da; + } + + &:hover { + background-color: #eee; + } + } + } } \ No newline at end of file diff --git a/resources/beike/shop/default/css/product.scss b/resources/beike/shop/default/css/product.scss index 103fb5ec..bad10638 100644 --- a/resources/beike/shop/default/css/product.scss +++ b/resources/beike/shop/default/css/product.scss @@ -41,11 +41,15 @@ body.page-product { } } - .quantity-wrap { + .quantity-btns { .quantity-input { max-width: 5rem; text-align: center; } + + .quantity-wrap { + height: 43px; + } } } diff --git a/resources/beike/shop/default/js/app.js b/resources/beike/shop/default/js/app.js index cb08c365..e08f63ba 100644 --- a/resources/beike/shop/default/js/app.js +++ b/resources/beike/shop/default/js/app.js @@ -1,3 +1,18 @@ $(document).ready(function ($) { $.ajaxSetup({ headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')} }); + + $('.quantity-wrap .right i').on('click', function(event) { + let input = $(this).parent().siblings('input') + + if ($(this).hasClass('bi-chevron-up')) { + input.val(input.val() * 1 + 1) + return; + } + + if (input.val() * 1 <= input.attr('minimum') * 1) { + return; + } + + input.val(input.val() * 1 - 1) + }); }); diff --git a/themes/default/pages/cart.blade.php b/themes/default/pages/cart.blade.php index 9bbe6f77..6e5bcc89 100644 --- a/themes/default/pages/cart.blade.php +++ b/themes/default/pages/cart.blade.php @@ -47,13 +47,7 @@
$1156.00
-
- -
- - -
-
+ @include('shared.quantity', ['quantity'=>'2']) $1156.00 diff --git a/themes/default/product.blade.php b/themes/default/product.blade.php index 15adc77d..dfe770ce 100644 --- a/themes/default/product.blade.php +++ b/themes/default/product.blade.php @@ -54,10 +54,11 @@ -
-
+
+ @include('shared.quantity', ['quantity' => '1']) +{{--
-
+
--}}
@@ -92,8 +93,11 @@ $('.add-cart').on('click', function(event) { $.ajax({ url: '/carts', - data: {sku_id: '{{ $product->master_sku->id }}', quantity: 1}, type: 'POST', + data: { + sku_id: '{{ $product->master_sku->id }}', + quantity: $('input[name="quantity"]').val() + }, }) .done(function(e) { console.log(e);