2022-09-27 10:19:49

实现简易购物车功能

静态页面展示

商品详情页

在这里插入图片描述

购物车页面

在这里插入图片描述

购物车功能的实现

将商品添加至购物车

首先我们要在商品详情页为每一个商品的添加购物车按钮绑定一个点击事件，参数是该商品对象（将商品的所有属性包装成对象的形式进行传递），再新建一个空的购物车数组，点击某一个商品，将该商品对象导入该购物车数组，再在购物车页面对购物车数组进行遍历即可。

//加入购物车页面addCar(phone){if(this.carList==''){this.carList.push(phone)}else{if(this.carList.includes(phone)){var index=this.carList.indexOf(phone)this.carList[index].num++}else{this.carList.push(phone)}}},

删除单项商品/删除全部的已勾选商品

删除单项商品和删除全部的已勾选商品代码逻辑相同，但我两者采用的不同的js数组方法去实现，前者是先拿到要删除商品的id，再根据id采用splice方法删除；后者是根据数组的filter方法去筛选出没有被勾选的商品并返回。

//删除购物车中单项商品deleteA(phone){var isDelete=confirm("确认删除吗？")if(isDelete){var index=this.carList.indexOf(phone)this.carList.splice(index,1)}},//删除全部勾选商品deleteAllGoods(){var isDeleteAll=confirm("确认删除全部已勾选商品吗？")if(isDeleteAll){this.carList=this.carList.filter((item)=>{return item.isSelect!=true})}}

购物车数量变化

主要是点击数量+1按钮、点击数量-1按钮以及输入任意数量的按钮，功能逻辑比较简单

//增加商品数量addPhone(phone){
            phone.num++},//减少商品数量jianPhone(phone){if(phone.num>1){
                phone.num--}else{
                phone.num=1}},

购物车中勾选框状态变化

首先先明确各个勾选框的作用
全选按钮需求：
选中全选按钮，上面的所有的按钮都会被选中
取消选中按钮，下面的所有按钮也会被取消选中
除全选按钮之外的其他按钮需求：
其他按钮全部被选中，全选按钮也跟着被选中
其他按钮只要有一个没有被选中，全选按钮也不会被选中

//全选按钮需求selectAllGoods(){for(iinthis.carList){this.carList[i].isSelect=this.selectAll}},//除全选按钮之外的其他按钮需求selectGood(){var res=truefor(iinthis.carList){if(this.carList[i].isSelect==false){
                    res=falsebreak}}this.selectAll=res},

勾选商品的总价

通过新建一个为0的变量，对购物车数组进行遍历，如果是已勾选的商品，则将商品价格累加至该变量

//价格总数totalPrice(){var total=0for(iinthis.carList){if(this.carList[i].isSelect==true){
                    total+=this.carList[i].price*this.carList[i].num}}return total},

对购物车采用的Vue技术总结

使用了了v-if、v-for、v-model等Vue基础语法；同时还对JS的一些数组方法进行了使用。
整体代码逻辑较为简单，主要是通过此次练习熟悉Vue的基本操作
在实现这个案例的开始，我们需要先将购物车的功能进行细分，先通过注释的方式来区分功能模块，再进行逐一实现。这个思想可以运用到以后的开发过程中去。

代码块

HTML代码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>商品详情页</title><scriptsrc="../vue.js"></script><linkrel="stylesheet"href="./shoppingCar.css"></head><body><divid="app"><!--商品详情页--><divclass="container"v-if="!isDisplayCar"><divclass="phone"v-for="i in phoneList":key="i.id"><img:src="i.imgSrc"alt="手机"><divclass="price"><p>${{i.price}}</p></div><divclass="name"><p>{{i.name}}</p></div><button@click="addCar(i)">加入购物车</button></div></div><!--购物车图标--><divclass="shoppingCar"><button@click="displayCar">{{isDisplayCar==true?"返回":"购物车"}}</button></div><!--购物车页面--><divclass="car"v-if="isDisplayCar"><h1>购物车</h1><divclass="phoneCarTitle"><divclass="check">勾选状态</div><divclass="phoneImg">手机图片</div><divclass="phoneName">手机名称</div><divclass="phonePrice">手机价格</div><divclass="phoneNum">手机数量</div><divclass="action">操作</div></div><divclass="phoneCar"v-for="i in carList":key="i.id"><inputtype="checkbox"id="checkbox"v-model="i.isSelect"@change="selectGood"><img:src="i.imgSrc"alt="手机"><divclass="carName"><p>{{i.name}}</p></div><divclass="carPrice"><p>${{i.price*i.num}}</p></div><divclass="btnGroup"><button@click="addPhone(i)">+</button><inputtype="text"v-model.number="i.num"><button@click="jianPhone(i)">-</button></div><buttonclass="delete"@click="deleteA(i)">删除</button></div><divclass="total"><inputtype="checkbox"v-model="selectAll"@change="selectAllGoods">全选<buttonclass="deleteAll"@click="deleteAllGoods()">全部删除</button><divclass="totalPrice">
                    总计：{{totalPrice}}元<button>立即购买</button></div></div></div></div><scriptsrc="./shoppingCar.js"></script></body></html>

CSS代码

.container{width: 1000px;height: 900px;margin: 0 auto;display: flex;justify-content: space-around;flex-wrap: wrap;background-color: #D9F7F2;}.phone{width: 300px;height: 450px;background-color: #D9F7F2;}.phone img{width: 280px;height: 300px;margin-top: 10px;margin-left: 10px;}.price{margin-left: 50px;height: 30px;line-height: 30px;}.price p{font-size: 18px;color: red;margin: 0;font-weight: 600;text-align: left;}.name{width: 100%;height: 30px;line-height: 30px;}.name p{text-align: center;font-weight: 600;margin: 10px 0;}.phone button{width: 200px;height: 40px;border-radius: 15px;margin-top: 10px;margin-left: 50px;background-color: #00C8A6;border: 1px solid #00C8A6;color: #FFF;font-size: 18px;}.shoppingCar{position: fixed;top: 600px;left: 1700px;width: 80px;height: 80px;}.shoppingCar button{width: 80px;height: 80px;background-color: #00C8A6;border: 1px solid #00C8A6;border-radius: 50%;font-size: 16px;color: #FFF;}.car{width: 1000px;margin: 0 auto;margin-top: 50px;background-color: #D9F7F2;position: absolute;top: 0;left: 452px;}.car h1{padding: 0;margin: 0;width: 1000px;height: 80px;text-align: center;line-height: 80px;color: #00C8A6;font-size: 25px;font-weight: 600;}.phoneCarTitle{width: 950px;height: 80px;line-height: 80px;margin: 10px auto;display: flex;justify-content: space-between;}.phoneCar{width: 950px;height: 80px;line-height: 80px;margin: 10px auto;}#checkbox{width: 30px;height: 30px;margin: 0 10px;margin-top: 25px;float: left;}.phoneCar img{width: 80px;height: 80px;margin-left: 120px;float: left;}.carName{width: 100px;height: 80px;line-height: 80px;margin-left: 100px;float: left;}.carName p{text-align: center;font-size: 16px;height: 80px;line-height: 80px;margin: 0;}.carPrice{width: 100px;height: 80px;line-height: 80px;margin-left: 80px;float: left;}.carPrice p{text-align: center;font-size: 16px;height: 80px;line-height: 80px;margin: 0;}.btnGroup{width: 200px;height: 80px;line-height: 80px;text-align: center;margin-left: 40px;float: left;}.btnGroup button{width: 30px;height: 30px;font-size: 18px;text-align: center;}.btnGroup input{width: 30px;height: 30px;line-height: 30px;text-align: center;padding: 0;}.delete{float: left;width: 80px;height: 40px;background-color: red;border: 1px solid red;border-radius: 10px;color: #FFF;margin-top: 20px;}.total{width: 950px;height: 80px;line-height: 80px;margin: 0 auto;}.total input{width: 30px;height: 30px;margin: 0 10px;margin-top: 25px;float: left;}.deleteAll{width: 80px;height: 40px;background-color: red;border: 1px solid red;border-radius: 10px