<div style="width: 100%;">
<div style="width: 1200px;background: #fff;border-radius: 12px;margin: auto;margin-top: 20px;">
<div style="display: flex;border-bottom: 1px solid #eee;line-height: 44px;">
<div style="display: flex;justify-content: center;align-items: center;">
<input type="checkbox" name="全选" id="checkboxAll" onchange="getCheckAll(this)" value="true">
</div>
<div style="width: 80px;" class="goods">商品</div>
<div style="flex: 1;" class="goods">标题</div>
<div style="width: 150px;" class="goods">单价</div>
<div style="width: 150px;" class="goods">数量</div>
<div style="width: 150px;" class="goods">金额</div>
<div style="width: 150px;" class="goods">编辑</div>
</div>
<div id="box"></div>
<div id="picBox">
<span>总价:</span>
<span id="picplas"></span>
</div>
</div>
</div>
#checkboxAll,#checkboxBo{
margin: 0 10px;
}
.goods{
text-align: center;font-size: 14px;color: #333;
}
#picplas{
font-size: 20px;
font-weight: 800;
color: #f40;
margin-left: 12px;
}
#picBox{
display: flex;justify-content: flex-end;line-height: 60px;padding: 0 40px;
}
#picBox span:nth-child(1){
font-size: 13px;color: #999;
}
#goodsBottom{
display: flex;border-bottom:1px solid #eee;
}
#goodsBottom div:nth-child(1){
display: flex;justify-content: center;align-items: center;
}
window.addEventListener('beforeunload', function (event) {
// 在这里执行你想要的操作,例如确认提示或者清理工作
const message = '您确定要离开吗?';
event.returnValue = message; // 标准浏览器需要此行来显示提示信息
sessionStorage.setItem('shoppingCart',JSON.stringify(arr))
return message; // 兼容某些旧版本浏览器
});
var str=''
var arr = [
{id:0,img:'./image/1.jpg',title:'永诺(YONGNUO) YN433直播相机可更换镜头M43直播相机 标配-无镜头',pic:'19.00',quantity:1,checkbox:true},
{id:1,img:'./image/2.jpg',title:'永诺(YONGNUO) YN433直播相机可更换镜头M43直播相机 标配-无镜头',pic:'19.00',quantity:2,checkbox:true},
{id:2,img:'./image/3.jpg',title:'永诺(YONGNUO) YN433直播相机可更换镜头M43直播相机 标配-无镜头',pic:'19.00',quantity:1,checkbox:true}
]
var obj = JSON.parse(JSON.stringify(arr))
var picplas = 0
function DomRender(){
arr.forEach((temp,i)=>{
temp.checkbox ? picplas+=(Number(temp.pic)*temp.quantity) : ''
str+=`
<div id="goodsBottom">
<div>
<input type="checkbox" name="" id="checkboxBo" onchange="getCheck(this,${i})" checkbox="${temp.checkbox}">
</div>
<div style="width: 80px;"><img style="width: 100%;" src="${temp.img}" alt=""></div>
<div style="margin: 20px;flex:1;font-size:13px;color:#666;">
<span>${temp.title}</span>
</div>
<span style="width:150px;text-align: center;line-height:84px;color:#999;font-size:12px;">¥${temp.pic}</span>
<div style="width:150px;display: flex;align-items: center;justify-content: center;">
<button style="width: 26px;height: 20px;font-size:14px;" onclick="getReduce(${i})">-</button>
<div style="overflow: hidden;width: 32px;height: 20px;font-size:14px;">
<input style="width: 28px;height: 22px;margin:-2px;font-size:14px;text-align: center;background:#eee;" id="Quantity${i}" type="text" value="${temp.quantity}">
</div>
<button style="width: 26px;height: 20px;" onclick="getIncrease(${i})">+</button>
</div>
<span style="width:150px;text-align: center;line-height:84px;color:#f40;font-weight: 700;font-size:12px;">¥${(Number(temp.pic)*temp.quantity).toFixed(2)}</span>
<div style="width:150px;display: flex;align-items: center;justify-content: center;text-decoration: underline;color:#999;">
<span style="font-size:12px;margin-right:10px;cursor: pointer;" onclick="update(${i})">删除</span>
<span style="font-size:12px;cursor: pointer;">加入收藏夹</span>
</div>
</div>
`
})
document.getElementById('picplas').innerHTML = `${picplas.toFixed(2)}`
document.getElementById('box').innerHTML = str
str=''
var input = document.querySelectorAll('#checkboxBo')
arr.forEach((temp,i)=>{
input[i].checked = temp.checkbox
})
document.getElementById('checkboxAll').checked = Array.from(document.querySelectorAll('#checkboxBo')).every(element => element.checked === true);
}
DomRender()
function getCheck(temp,i){
if(!temp.checked){
picplas = picplas-(Number(arr[i].pic)*arr[i].quantity)
document.getElementById('picplas').innerHTML = picplas.toFixed(2)
console.log(obj,temp.checked,picplas,Number(arr[i].pic)*arr[i].quantity)
document.getElementById('checkboxAll').checked = false
}else{
picplas = picplas+(Number(arr[i].pic)*arr[i].quantity)
document.getElementById('picplas').innerHTML = picplas.toFixed(2)
const result = Array.from(document.querySelectorAll('#checkboxBo')).every(element => element.checked === true);
document.getElementById('checkboxAll').checked = result
console.log(result,'2424234')
}
}
function update(e){
picplas = 0
arr.splice(e,1)
console.log(arr)
DomRender()
}
function getReduce(temp){
if(arr[temp].quantity!=1){
arr[temp].quantity--
picplas = picplas- Number(arr[temp].pic)
document.getElementById(`Quantity${temp}`).value = arr[temp].quantity
document.getElementById('picplas').innerHTML = picplas.toFixed(2)
}else{
return console.log('----');
}
}
function getIncrease(temp){
console.log('++++');
arr[temp].quantity++
picplas = picplas + Number(arr[temp].pic)
document.getElementById(`Quantity${temp}`).value = arr[temp].quantity
document.getElementById('picplas').innerHTML = picplas.toFixed(2)
}
function getCheckAll(e){
if(e.checked){
picplas=0
document.querySelectorAll('#checkboxBo').forEach((temp,i)=>{
temp.checked = true
picplas = picplas+(Number(arr[i].pic)*arr[i].quantity)
})
document.getElementById('picplas').innerHTML = picplas.toFixed(2)
}else{
document.querySelectorAll('#checkboxBo').forEach(temp=>{
temp.checked = false
picplas=0
document.getElementById('picplas').innerHTML = picplas.toFixed(2)
})
}
}