1，购物车的主体内容布局尽量用表格的布局模式

2，判断用户是否登录

代码如下，可以根据自己头部的布局来具体修改

// 判断用户是否登录
var username = getCookie("username");
//如果登录成功就执行这段代码
if(username){var vip = $(`<a href='javascript:;'>欢迎<b>${username}</b>来到天猫超市</a>`)var loginout = $(`<a href='javascript:;' class="loginout">退出</a>`)$(".hLeft").empty()$(".hLeft").append(vip)$(".hLeft").append(loginout)$(".hLeft>a").css({"color":"#666","lineHeight":"32px","marginLeft":"10px"})$(".hLeft>a>b").css({"color":"red","fontWeight":"800",})$(".loginout").click(function(){removeCookie("username")$(".hLeft").empty()$(".hLeft").html(` <a href="home.html">天猫首页</a><a href="javascript:;">喵，欢迎来到天猫</a><a href="login.html">请登录</a><a href="register-test.html">免费注册</a>`)})
}else{alert("请先登录");location.assign("./login.html");
}

3，判断从详情页是否有数据传过来

在这里我数据是保存到本地存储里面的，你可以根据自己存储的地方来获取数据
代码如下：

// 接收详情页传过来的数据
// 先判断本地存储中有没有商品
var data = localStorage.getItem("cart");
if(!data){$(".page-con").empty();var str = "";str +=`<h2>购物车空空如也！！！</h2><p>请快点移步到列表页选择商品把<p><a href="./list.html">进入列表页</a>`$(".page-con").html(str);$(".page-con").css({width:"900px",margin:"40px auto 0"});$(".page-con h2").css({fontSize:"50px",color:"blue",lineHeight:"80px"})$(".page-con p").css({fontSize:"20px",lineHeight:"26px"});$(".page-con a").css({width:"100px",height:"40px",background:"skyblue",marginTop:"20px",display:"block"})
}else{// 再判断是否有当前用户的购物车是数据// 将数据转成数组类型data = JSON.parse(data);// 查看数据是否存在for(var j=0;j<data.length;j++){}var res = data.some(v=>{return v.username == username;})if(!res){$(".page-con").empty();var str = "";str +=`<h2>购物车空空如也！！！</h2><p>请快点移步到列表页选择商品把<p><a href="./list.html">进入列表页</a>`$(".page-con").html(str);$(".page-con").css({width:"900px",margin:"40px auto 0"});$(".page-con h2").css({fontSize:"50px",color:"blue",lineHeight:"80px"})$(".page-con p").css({fontSize:"20px",lineHeight:"26px"});$(".page-con a").css({width:"100px",height:"40px",background:"skyblue",marginTop:"20px",display:"block"})}else{// 有数据 且有自己的数据// 先把自己的数据找出来var arr = data.filter(v=>v.username == username);// 遍历获取的数据 // 在数组中没有想要的商品数据，需要从数据库中获取一下 通过id在数据库中查找数据var ids = arr.map(v=>v.goodsid);ids = ids.join(",")

4，查询有详情页传送过来的数据时 ，我们可以通过传过来的id到数据库中查找我们想要的数据

发送ajax到数据库中查找商品的信息

$.ajax({url:"./server/cart.php",dataType:"json",data:{ids:ids},type:"get",success:res=>{var str = '';for(var i=0;i<res.length;i++){// 根据res[i] 每一条商品，从arr中找出number数量var number = arr.find(v=>v.goodsid==res[i].id).number;str +=`<div class="pageMtop"><input type="checkbox" name="onetop"><i></i><span>店铺：${res[i].name}</span><em></em></div><div class="pageMcontent"><h3><img src="images/cat10.png">8.6 0点开享,每满300减30</h3><ul><li><input type="checkbox" name="one"></li><li><a href="#"><img src="${res[i].imgpath}"></a></li><li><p><a href="#">${res[i].introduce}</a></p><img src="images/cat03.png" alt=""><a href="javascript:;"><img src="images/cat04.png" alt=""></a></li><li><p>尺码：M</p><p>主要颜色：6685白色+6691雾霾蓝（M码预售8月8号发出</p><a href="#">修改</a></li><li><span>${res[i].price}</span></li><li class="data-name" data-id = "${res[i].id}"><input type="button" class="reduce" value="-"><input class="numberone"  type="number" name="number" data-stock="${res[i].stock}" value="${number}"><input type="button" class="add" value="+"></li><li class="subtotal">${res[i].price*number}</li><li><p>移入文件夹</p><p class="btn">删除</p><p>宝贝</p></li></ul></div>`}$(".page-middle").html(str)//在这里添加全选功能// 在这里写的话 代码嵌套太深 - 将功能写在外面，然后在这边调用函数//调用全选的功能selectAll()//调用单选功能selectone()// 计算总价和总数量priceAndNumberAll()// 数量加减addAndReduce()// 点击删除键removebtn()}})}

在这里商品列的布局和内容渲染我们需要动态加载，然后添加到放主体内容的大盒子里

5，实现购物车页面的功能

因功能代码比较多，都放在ajax中会显得冗余，我们把每个功能封装成函数，在ajax完成后的回调函数中直接调用

6，全选功能

代码如下：

// 全选功能
function selectAll(){// 给上下两个全选都绑定事件$("[name='topAll']")[0].onclick = $("[name='footAll']")[0].onclick = function(){// 设置单选的状态$("[name='one']").prop("checked",$(this).prop("checked"))$("[name='onetop']").prop("checked",$(this).prop("checked"))// 给两个复选框添加全选$("[name='topAll']").prop("checked",$(this).prop("checked"))$("[name='footAll']").prop("checked",$(this).prop("checked"))priceAndNumberAll()}
}

7，单选功能

代码如下：

// 单选功能
function selectone(){$("[name='one']").click(function(){// 判断是否所有的都选中//$("[name='one']")是一个伪数组，不能调用数组方法 先把它转成数组$("[name='onetop']").prop("checked",$(this).prop("checked"))var arr = Array.prototype.slice.call($("[name='one']"))// 调用every方法 如果有一个没选中就返回falsevar res = arr.every(v=>$(v).prop("checked"));if(res){$("[name='topAll']").prop("checked","checked");$("[name='onetop']").prop("checked","checked");$("[name='footAll']").prop("checked","checked");}else{$("[name='topAll']").prop("checked",false);$("[name='footAll']").prop("checked",false)}priceAndNumberAll()})
}

8，计算数量的总计和价格的总价

代码如下：

// 计算总价和总数量
function priceAndNumberAll(){// 根据选中的框来计算// 选择被选中的那个数量numbervar allNumInput = $("[name='one']:checked").parent().siblings(".data-name").find("[name='number']")var allNum = 0;allNumInput.each(function(k,v){allNum += v.value-0;})$(".allnumber").text(allNum);var allPriceEle = $("[name=one]:checked").parent().siblings(".subtotal")var allPrice = 0;allPriceEle.each(function(k,v){allPrice += allPriceEle.text()-0;})$(".allprice").text(allPrice);
}

9，点击加减按钮让数量和金额进行加减

代码如下：

// 点击加减让数量进行加减
function addAndReduce(){// 点击加的按钮 $(".add").click(function(){// 先获取input框里面的数值var num = $(this).prev().val()-0;// 每点击一次就让input里面的值++num ++// 数据是不能无线加的 要进行判断 如果加到最大值 就不让他加了if(num>=$(this).prev().attr("data-stock")-0){num=$(this).prev().attr("data-stock")-0$(this).prop("disabled",true);$(this).addClass("bgadd");$(this).prev().prev().prop("disabled",false);}else{$(this).prop("disabled",false);$(this).prev().prev().removeClass("bgreduce");}$(this).prev().val(num)// 计算小计里面的价格// 找到放单价的那个标签和值var price = $(this).parent().prev().find("span").text()-0;// 重新计算小计var subtotal = price*num;// 计算好小计之后放到存放那个td中$(this).parent().next().text(subtotal);// 重新设置本地存储// 获取本地存储的数据var data = localStorage.getItem("cart");// 转换成数组data = JSON.parse(data);// 遍历数组 查找数组中满足条件的数据var obj = data.find(v=>v.username==username && v.goodsid==$(this).parent().attr("data-id"));obj.number = num;localStorage.setItem("cart",JSON.stringify(data))priceAndNumberAll()})$(".reduce").click(function(){// 先获取input框里面的数值var num = $(this).next().val()-0;// 每点击一次就让input里面的值++num --// 数据是不能无线加的 要进行判断 如果加到最大值 就不让他加了if(num<1){num=1;$(this).prop("disabled",true);$(this).addClass("bgreduce");$(this).next().next().prop("disabled",false)}else{$(this).prop("disabled",false);$(this).next().next().removeClass("bgadd");}$(this).next().val(num)var price = $(this).parent().prev().find("span").text()-0;// 重新计算小计var subtotal = price*num;// 计算好小计之后放到存放那个td中$(this).parent().next().text(subtotal);// 将数据重新存储到本地存储var data =  localStorage.getItem("cart");data = JSON.parse(data);// 查找满足添加的数据var obj = data.find(v=>{return v.username==username&&v.goodsid==$(this).parent().attr("data-id");})obj.number = num;localStorage.setItem("cart",JSON.stringify(data));priceAndNumberAll()})
}

10，点击删除按钮功能

代码如下：

// 点击删除的函数
function removebtn(){// 点击事件$(".btn").click(function(){// 提示是否要删除if(!confirm("你确定要删除吗")){return false;}// 将本地存储的这条数据删除var data = localStorage.getItem("cart");data = JSON.parse(data);var index = data.findIndex(function(v){v.username==username&&v.goodsid==$(this).parent().siblings(".data-name").attr("data-id")});data.splice(index,1);localStorage.setItem("cart",JSON.stringify(data))var tr = $(this).parent().parent();tr.remove()if(!data.filter(v=>v.username==username).length){// 如果数据没了就不显示表格$(".page-middle").empty();// 让页面显示自定义的内容var str = "";str += `<h2>购物车空空如也！！！</h2><p>请快点移步到列表页选择商品把<p><a href="./list.html">进入列表页</a>`$(".page-middle").html(str);$(".page-middle").css({width:"1200px",margin:"40px auto 0"});$(".page-middle h2").css({fontSize:"50px",lineHeight:"80px",color:"blue"})}})
}