解决冲突

This commit is contained in:
pushuo 2022-06-28 16:30:17 +08:00
parent 5ccc4f89fe
commit e45e72b4a2
8 changed files with 111 additions and 76 deletions

View File

@ -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;

View File

@ -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);
});
});
/***/ }),

View File

@ -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;
}
}
}
}
}
}

View File

@ -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;
}
}
}
}

View File

@ -41,11 +41,15 @@ body.page-product {
}
}
.quantity-wrap {
.quantity-btns {
.quantity-input {
max-width: 5rem;
text-align: center;
}
.quantity-wrap {
height: 43px;
}
}
}

View File

@ -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)
});
});

View File

@ -47,13 +47,7 @@
<div class="price">$1156.00</div>
</td>
<td>
<div class="quantity-wrap">
<input type="text" class="form-control" value="1">
<div class="right">
<i class="bi bi-chevron-up"></i>
<i class="bi bi-chevron-down"></i>
</div>
</div>
@include('shared.quantity', ['quantity'=>'2'])
</td>
<td>$1156.00</td>
<td>

View File

@ -54,10 +54,11 @@
</table>
</div>
<div class="quantity-wrap d-flex">
<div class="quantity-wrap">
<div class="quantity-btns d-flex">
@include('shared.quantity', ['quantity' => '1'])
{{-- <div class="quantity-wrap">
<input class="form-control quantity-input" type="number" value="1">
</div>
</div> --}}
<button class="btn btn-outline-secondary ms-3 add-cart"><i class="bi bi-cart-fill me-1"></i>加入购物车</button>
<button class="btn btn-dark ms-3"><i class="bi bi-bag-fill me-1"></i>立即购买</button>
</div>
@ -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);