<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
ul,ol{
list-style: none;
margin-left: 20px;
}
li{
float: left;
width: 100px;
height: 20px;
background-color: aqua;
border: 1px solid red;
text-align: center;
line-height: 20px;
}
table{
width: 612px;
height: 100px;
background-color: white;
margin-left: 20px;
}
tbody tr td{
height: 100px;
width: 100px;
border: 1px solid black;
}
.check{
margin-left: 30px;
}
td img{
width: 100px;
height: 100px;
}
td .num{
width: 40px;
}
tr td button:nth-child(1){
margin-left: 20px;
}
.nav{
width: 650px;
}
/* .tab{
width: 612px;
height: 100px;
background-color: blanchedalmond;
margin-left: 20px;
} */
tfoot{
background-color: antiquewhite;
}
.total{
text-align: center;
}
tfoot tr td{
width: 100px;
border: none;
}
h2{
text-align: center;
}
</style>
</head>
<body>
<h1>购物车页面</h1>
<hr/>
<div class="nav">
<ul>
<li>状态</li>
<li>图片</li>
<li>单价</li>
<li>数量</li>
<li>总价</li>
<li>操作</li>
</ul>
<div class="tab">
<table>
<tbody>
</tbody>
<tfoot>
<!-- <tr>
<td><input type="checkbox" class="check" /></td>
<td><button>选中的删除</button></td>
<td><div class="shangpin">商品件数0件</div></td>
<td colspan="2"><div class="total">合计0元</div></td>
<td><button class="pay">支付</button></td>
</tr> -->
</tfoot>
</table>
</div>
</div>
<script src="../code/js/axios.min.js"></script>
<script>
class Cart{
constructor(){
this.list=JSON.parse(localStorage.getItem('cart'))||[]
this.tbody=document.querySelector('table tbody')
this.tfoot=document.querySelector('table tfoot')
this.init()
}
init(){
this.render()
this.check()
}
render(){
console.log(this.list)
var num=0,pricenum=0
if(this.list.length==0){
this.tbody.innerHTML=''
this.tbody.innerHTML+=`
<tr>
<td colspan="6"><h2>还没有商品！！</h2></td>
</tr>
`
}
else{
this.tbody.innerHTML=''
this.list.forEach(item=>{
this.tbody.innerHTML+=`
<tr>
<td><input type="checkbox" class="checked" data-id="${item.id}" ${item.is_select && 'checked'}/></td>
<td><img src="${item.url}"/></td>
<td><div class="price">${item.price}元</div></td>
<td><button data-id="${item.id}" class="del">-</button><input type="text" class="num" value="${item.cart_num}"/><button data-id="${item.id}" class="add">+</button></td>
<td>${item.cart_num*item.price}元</td>
<td><span data-id="${item.id}">删除</span></td>
</tr>
`
if(item.is_select==true){
num+=item.cart_num
pricenum+=item.cart_num*item.price
}
})
}
var res = this.list.every((item)=>{
return item.is_select == true
})
if(this.list.length==0){
res=false
}
this.tfoot.innerHTML=`
<tr>
<td><input type="checkbox" class="check" ${res&&'checked'}/></td>
<td><button class="btn">选中的删除</button></td>
<td><div class="shangpin">商品件数${num}件</div></td>
<td colspan="2"><div class="total">合计${pricenum}元</div></td>
<td><button class="pay">支付</button></td>
</tr>
`
localStorage.setItem('cart',JSON.stringify(this.list))
}
check(){
//全选和取消操作
this.tfoot.οnclick=(e)=>{
var target=e.target
if(target.className=='check'){
this.list.forEach(item=>{
item.is_select=!item.is_select
})
this.render()
}
if(target.className=='btn'){
var res=this.list.filter(item=>item.is_select !== true)
this.list=res
this.render()
}
if(target.className=='pay'){
if(confirm('确认支付吗？')){
var price=0
this.list.forEach(item=>{
if(item.is_select){
price+=item.cart_num*item.price
}
})
alert(`已支付${price}元`)
var res=this.list.filter(item=>item.is_select !== true)
this.list=res
this.render()
}
}
}
//单选
this.tbody.οnclick=(e)=>{
var target=e.target
if(target.className=='checked'){
var id=target.dataset.id-0
this.list.forEach(item=>{
if(item.id==id){
item.is_select=!item.is_select
}
})
this.render()
}
if(target.className=='del'){
// this.num=document.querySelector('.num')
var id=target.dataset.id-0
this.list.forEach(item=>{
if(item.id==id){
item.cart_num--
if(item.cart_num==0){
item.cart_num=1
alert('已经是最小值了')
}
}
})
this.render()
}
if(target.className=='add'){
var id=target.dataset.id-0
this.list.forEach(item=>{
if(item.id==id){
item.cart_num++
if(item.cart_num==11){
item.cart_num=10
alert('已经是最大值了')
}
}
})
this.render()
}
if(target.nodeName=='SPAN'){
var id=target.dataset.id-0
var res=this.list.filter(item=>item.id !== id)
this.list=res
this.render()
}
}
}
}
new Cart()
</script>
</body>
本文转载自: https://blog.csdn.net/qq_52840130/article/details/135255727
版权归原作者 - 瑾♛年 所有， 如有侵权，请联系我们删除。
版权归原作者 - 瑾♛年 所有， 如有侵权，请联系我们删除。