右上角购物车
This commit is contained in:
pushuo
parent
8c80026876
commit
f69f295fd8
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
||||
|
|
|
|||
|
|
@ -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,17 +111,17 @@
|
|||
</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>
|
||||
<a href="{{ shop_route('carts.index') }}" class="btn w-100 btn-outline-dark mt-2">查看购物车</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue