购物车

最新推荐文章于 2023-05-26 14:36:40 发布

微笑、不失礼471

最新推荐文章于 2023-05-26 14:36:40 发布

阅读量244

点赞数

文章标签： servlet mybatis java

本文链接：https://blog.csdn.net/weixin_55711841/article/details/126002915

版权

html:

</div>
<div class="shop_footer clearfix">
<div class="selected">
<i class="icon checkbox" id="i2"></i>
<label>全选</label>
</div>
<div class="links">
<a href="javascript:void(0);" id="btnDelete">删除</a>
<a href="javascript:void(0);">移入收藏加</a>
<a href="javascript:void(0);">分享</a>
</div>

<div class="sum">
<span>
已选商品<span id="count">0</span>件不含运费:
</span>
<span class="amount-box">
0.00
</span>
<span>
<a href="#">结算</a>
</span>
</div>
</div>
</div>

css:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
-moz-user-select: none;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #3c3c3c;
}

a {
text-decoration: none;
color: #3c3c3c;
}

a:hover {
text-decoration: underline;
color: #f40;
}

.clearfix::after {
content: "";
clear: both;
display: block;
visibility: hidden;
height: 0;
font-size: 0;
}

.icon {
background-image: url(imgs/icons.png);
background-repeat: no-repeat;
}

.carts {
width: 990px;
margin: 10px auto;
/* border: 1px solid #3c3c3c; */
}

.carts .top {
height: 50px;
line-height: 50px;
}

.selected, .carts .top .title {
float: left;
width: 120px;
padding-left: 10px;
}

.selected {
width: 85px;
cursor: pointer;
}

.selected .checkbox {
display: inline-block;
width: 15px;
height: 15px;
line-height: 15px;
background-position: 0 0;
position: relative;
top: 4px;
cursor: pointer;
}

/* i选中的时候的类修改背景图片的位置 */

.selected .checkbox.active {
background-position: 0 -20px;
}

.carts .top .product {
/* cacl() 计算函数 */
width: calc(100% - 85px - 85px - (120px*3));
}

.carts .top .operate {
width: 85px;
}

.carts .top .selected label {
cursor: pointer;
}

.carts input[type='checkbox'] {
display: none;
}

.shop-icon {
background-position: -20px -105px;
width: 16px;
height: 16px;
display: inline-block;
/* visibility: hidden */
}

.carts .shop_box .shop {
margin-bottom: 20px;
/* border: 1px solid #3c3c3c; */
}

.carts .shop_box .shop-info {
height: 40px;
line-height: 40px;
}

.carts .shop_box .shop-info .selected {
width: 40px;
}

.carts .shop_box .shop-info .shop-name .shop-icon {
display: inline-block;
width: 16px;
height: 16px;
background-position: -20px -105px;
}

.carts .shop_box .shop-info .shop-name span {
margin-left: 15px;
}

.shop .shop-item .item {
background-color: #fff;
border: 1px solid #3c3c3c;
padding: 20px 0;
}

.shop .shop-item .item>div {
float: left;
width: 120px;
padding-left: 10px;
}

.shop .shop-item .item .selected {
width: 30px;
}

.shop .shop-item .item .operator {
width: 85px;
}

.shop .shop-item .item .product {
width: calc(100% - 30px - 85px - (120px*3) - 150px);
}

.shop .shop-item .item .product .img {
float: left;
}

.shop .shop-item .item .product .img img {
width: 80px;
height: 80px;
}

.shop .shop-item .item .product .info {
/* float: right; */
width: 260px;
padding-left: 100px;
}

.shop .shop-item .item .product .info>div {
margin-bottom: 5px;
}

.shop .shop-item .item .spec {
color: #d3cece;
width: 150px;
}

.shop .shop-item .item .count {
font-size: 0;
color: #444;
}

.shop .shop-item .item .count span {
font-size: 12px;
color: #444;
text-align: center;
/* float: left; */
/* margin-right: 5px; */
background-color: lightslategray;
width: 20px;
display: inline-block;
line-height: 20px;
}

.shop .shop-item .item .count span:nth-child(2) {
display: inline-block;
width: 50px;
background-color: transparent;
position: relative;
top: 1px;
}

.shop .shop-item .item .count span input {
text-align: center;
width: 50px;
}

.shop .shop-item .item .amount {
color: red;
}

.shop_footer {
height: 50px;
background-color: lightslategray;
padding: 20px;
}

.shop_footer .selected, .links {
float: left;
}

.shop_footer .sum {
float: right;
position: relative;
top: -20px;
}

.shop_footer .sum span {
margin-right: 2px;
}

.shop_footer .sum span:last-child {
background-color: #f40;
width: 50px;
/* height: 50px; */
display: inline-block;
text-align: center;
line-height: 50px;

}

js:

var shopbox = document.querySelector(".shop_box")
var html = ''
for (let i = 0; i < shopcarts.length; i++) {
const cart = shopcarts[i]
html += `
<div class="shop">
<div class="shop-info">
<div class="selected">
<i class="icon checkbox"></i>
<input type="checkbox">
</div>

<div class="shop-name">
<i class="icon shop-icon"></i>
<span>
店铺:<span>${cart.shopName}</span>
</span>
</div>
</div>
<div class="shop-item">
`
for (let j = 0; j < cart.products.length; j++) {
const product = cart.products[j]
html += `
<div class='item clearfix'>
<div class="selected">
<i class="icon checkbox"></i>
<input type="checkbox">
</div>
<div class="product clearfix">
<div class='img'>
<a>
<img src=${product.topImg}>
</a>
</div>
<div class="info">
<div class='title'>
<a>
${product.productName}
</a>
</div>
<div class='activity'>
<img src="imgs/activity.png" style="visibility: ${product.isActivity?'visible':'hidden'} ">

</div>
<div class="gifts">
<a>
<img src="imgs/xcard.png">
</a>
<a>
<img src="imgs/seven.png">
</a>
<a>
<img src="imgs/flower.png">
</a>
</div>

</div>

</div>
<div class="spec">
${product.spec}
</div>
<div class="price">
￥${product.price}
</div>

<div class='count'>
<span>-</span>
<span>
<input type='text' value=${product.count}>
</span>
<span>+</span>
</div>
<div class="amount">
￥${product.amount}
</div>

<div class=operator>
<a>移入收藏加</a>
<a>删除</a>
</div>
</div>
`
}

html += "</div></div>"
}
shopbox.innerHTML = html
</script>
<script>
// 获取所有的父元素给其绑定事件
var shopbox = document.querySelector(".shop_box")
var i1 = document.querySelector("#i1") // 上面全选
var i2 = document.querySelector("#i2") // 下面全选
shopbox.addEventListener("click",function(e){
console.log(e.target.tagName)
if(e.target.tagName=="I"){
// 证明点击了I标签
var par = e.target.parentElement.parentElement //当前元素的父元素父元素
// console.log(par) // shop_info item
if(par.classList.contains("shop-info")){
// 证明点击店铺的全选
// console.log("点击了shop_info")
// 1点击店铺全选自己高亮：判断是否包含active，如果包含，移除active；
if(e.target.classList.contains('active')){
e.target.classList.remove('active')
}else{
e.target.classList.remove('active') // 添加一个类先把这个类移除掉
e.target.classList.add('active')
}

// 2 点击店铺的全选控制商品单选
var shopItem = par.parentElement.querySelector(".shop-item")
// 找所有商品的单选
var icons = shopItem.querySelectorAll(".shop-item .icon")
// alert(icons.length)
// 把所有单选添加active
icons.forEach(element => {
if(e.target.classList.contains('active')){
element.classList.remove("active")
element.classList.add("active")
}else{
// 店铺的全选没选上
element.classList.remove("active")
}
});

// 3点击店铺的全选控制上下俩个全选
// 店铺全选选中的
var shopActives = shopbox.querySelectorAll(".shop-info .selected .active")
// 获取所有店铺的icon标签
var shopIcons = shopbox.querySelectorAll(".shop-info .selected")
if(shopIcons.length===shopActives.length){
// 上下俩个全选选中
i1.classList.remove("active")
i2.classList.remove("active")
i1.classList.add("active")
i2.classList.add("active")
}else{
i1.classList.remove("active")
i2.classList.remove("active")
}
}else{
// 点击了商品的单选
// 1 点击自己先判断是否有active 有取消掉，没有加上
if(e.target.classList.contains('active')){
e.target.classList.remove('active')
}else{
e.target.classList.remove('active')
e.target.classList.add('active')
}

// 2 点击商品单选控制店铺的全选
var shop = e.target.closest(".shop") // 获取离e.target最近的祖先元素具有.shop类祖先元素也就是店铺的元素
// console.log(shop)
var shopIcon = shop.querySelector(".shop-info .selected .icon")//目的给他添加active 或者取消acitve

// 商品选中的具有active
var goodSelectedIcon = shop.querySelectorAll(".shop-item .selected .active")
// console.log(goodSelectedIcon.length)
// 所有的单选
var goodsAllIcon = shop.querySelectorAll(".shop-item .selected .icon")
// console.log(goodsAllIcon.length)
if(goodSelectedIcon.length==goodsAllIcon.length){
// 店铺的全选高亮
shopIcon.classList.remove("active")
shopIcon.classList.add("active")
}else{
// 店铺的全选取消高亮
shopIcon.classList.remove("active")
}

// 3 点击商品单选控制上下整个全选
var allIcons= shopbox.querySelectorAll(".shop-item .icon") //获取所有单选
// alert(allIcons.length)
//已经选中的个数
var selectedIcons= shopbox.querySelectorAll(".shop-item .active")
if(selectedIcons.length===allIcons.length){
i1.classList.remove("active")
i2.classList.remove("active")
i1.classList.add("active")
i2.classList.add("active")
}else{
i1.classList.remove("active")
i2.classList.remove("active")
}
}
}
else if(e.target.parentElement.classList.contains("count")){
// 判断是否点击了-+input的父元素
var input = e.target.parentElement.querySelector("input[type=text]")
console.log(input.value)
var amount = e.target.parentElement.nextElementSibling //价格
if(e.target.textContent=="-"){ //证明点击减号
if(input.value<=0){
return // input值不能小于1
}
input.value = input.value -1
// 计算价格
calcPrice()
} else if(e.target.textContent=="+"){
input.value = input.value*1 + 1
calcPrice()
}
// ￥1199
var s1 = e.target.parentElement.previousElementSibling.textContent.split("￥")[1]
amount.textContent = "￥"+ input.value*1*s1
}
else if(e.target.parentElement.classList.contains("operator")&&e.target.textContent=="删除"){
//证明点击操作并且点删除
if(confirm("是否要删除？")){
var a = e.target.closest(".shop") // 店铺
var b = e.target.closest(".shop-item")
e.target.closest(".item").remove()
if(b.children.length<=0){
a.remove()
}
calcPrice()
}
}
})
// 计算价格
function calcPrice(){
var totalCount = 0 // 个数
var totalPrice = 0 // 价格
var inputs = document.querySelectorAll(".count input[type=text]") //
var prices = document.querySelectorAll(".price") //单价
inputs.forEach(function(v,i,a){
totalCount += v.value*1
totalPrice += v.value*1*(prices[i].textContent.trim().substr(1))*1
// prices[i].textContent ￥1999
// console.log(prices[i].textContent.trim().substr(1)*1)
})
document.getElementById("count").textContent = totalCount
document.querySelector(".amount-box").textContent = totalPrice
}
calcPrice()

i1.addEventListener('click',function(){
upDownAllSelect()

})
i2.addEventListener('click',function(){
upDownAllSelect()
})
function upDownAllSelect(){
var allIcons = document.querySelectorAll(".checkbox") //找所有的i标签
// 1 先控制自己的样式
if(i1.classList.contains('active')){
i1.classList.remove("active")
i2.classList.remove('active')
}else{
i1.classList.remove("active")
i2.classList.remove('active')
i1.classList.add("active")
i2.classList.add('active')
}

// 2 控制所有单选选上
allIcons.forEach(function(v,i,a){
if(i1.classList.contains('active')){
v.classList.remove('active')
v.classList.add('active')
}else{
v.classList.remove('active')
}
})
}
</script>