vue商城购物车功能开发(含动图)

购物车不管实在众多的电商网站还是手机APP中都很常见，它的实现逻辑也是相对复杂的。购物车作为组件开发，在其他应用或者页面也可以拿来直接使用。包含如下功能：

• 购物车模板
• 商品数量加减
• 商品总价结算
• 商品删除
• 商品全选反选

实现效果如下：

1.购物车页面模板实现

1. 引入bootstrap
   购物车的页面不再使用html一点点的写，这里使用bootstrap，比较节省时间。所以要引入bootstrap，可以在BootCDN复制链接，如下：
   
   

2. 使用bootstrap的面板组件构建页面
   选择带标题的面板和带表格的面板及有脚注的面板结合，因为购物车页面需要有标题的表格，也需要有总价结算这样一个脚注栏。
   使用bootstrap一个优点就是只需要填写对应的class即可。如面板类.panel ，面板标题类.panel-heading.panel-title和主体.panel-body。具体使用可以参考bootstrap官网。

   写的购物车模板如下图：
   
   代码如下：

   <div class="container" id="app">
   	<div class="row">
   		<!-- bootstrap的面板组件包含带标题的面板、带表格的面板灯 -->
   		<div class="panel panel-default">
   			<div class="panel-heading">
   				<h3 class="panel-title">我的购物车</h3>
   			</div>
   			<div class="panel-body">
   				<!-- 带表格的面板 table-hover:鼠标悬停高亮的表格-->
   				<table class="table table-hover">
   					<thead>
   						<tr>
   							<th><input type="checkbox"></th>
   							<th>商品名称</th>
   							<th>商品单价</th>
   							<th>购买数量</th>
   							<th>小计</th>
   							<th>商品操作</th>
   						</tr>
   					</thead>
   					<tbody>
   						<tr>
   							<td>
   								<input type="checkbox">
   							</td>
   							<td>1</td>
   							<td>1</td>
   							<td>1</td>
   							<td>1</td>
   							<td>
   								<div class="btn-group btn-group-sm">
   									<button class="btn btn-danger" type="button">删除</button>
   								</div>
   							</td>
   						</tr>
   
   					</tbody>
   				</table>
   			</div>
   			<!-- 带脚注的面板 -->
   			<div class="panel-footer" style="text-align: right;">
   				共计<span>100元</span>
   			</div>
   		</div>
   	</div>
   </div>
   

2.购物车页面模板实现

1. 模拟购物车数据
   前端先自己模拟数据，如下：

   data: {
   	//模拟购物车数据
   	goods: [
   		{id:1,name:'极米 （XGIMI ）Play特别版 投影机 投影仪 家用 便携（单手可握 侧投 HDR10解码哈曼卡顿音响内置电池）',price:2499,num:1},
   		{id:2,name:'荣耀MagicBook 2019 14英寸轻薄窄边框笔记本电脑（AMD锐龙7 3700U 8G 512G FHD IPS 指纹解锁）冰河银',price:4985,num:1},
   		{id:3,name:'盼盼 手撕面包 饼干蛋糕整箱大礼包箱装 奶香味2000g',price:52.5,num:2},
   		{id:4,name:'洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶',price:56,num:3},
   		{id:5,name:'联想 K5 Note 4GB+64GB 6英寸全面屏双摄手机 全网通 移动4G+ 双卡双待 极地黑',price:999,num:1},
   		{id:6,name:'小米MIX2 全面屏游戏手机 6GB+64GB 黑色 全网通4G手机 双卡双待 5.99"大屏',price:1299,num:1},
   		{id:7,name:'Apple MacBook Pro 15.4英寸笔记本电脑 银色（2017款Multi-Touch Bar/Core',price:15888,num:1},
   		{id:8,name:'OPPO R15 全面屏双摄拍照手机 4G+128G 幻色粉 全网通 移动联通电信',price:2799,num:1},
   	]
   }
   

2. 数据循环渲染到页面中
   在每一行处，即标签处使用v-for指令循环读取数据。然后使用item取商品信息。如下：
   
   渲染后的结果为：
   

3.购物车数量加减删除及总价实现

• 3.1 商品数量的增加
  商品数量增加是给加号+绑定点击事件，每点击+一次即商品的数量num加1，通过v-model绑定商品的数量num，点击加号+一次，框中数字就会加1。这就实现了数据的双向绑定。如下：
  
  实现方法：
  

• 3.2 商品数量的减少
  商品的减少与商品的增加实现类似，即是对减号-绑定点击事件，事件的方式是商品数量num的自减，input框中数字已通过v-model双向绑定。
  不同点是当数量小于1件时，删除商品信息。因此要做一个判断。当商品全部删除完以后，商品购物车列表不需要再呈现出来，因此也要进行一次判断。如下：
  
  

• 3.3 商品的删除
  商品的删除最为简单，只需要给删除按钮绑定点击事件，如下：
  
  实现方法：
  
  【splice方法】：
  splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。
  splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

• 3.4 商品的总价计算
  总价就是商品数量与商品价格的乘积，总价的计算使用vue的计算属性，如下：
  
  调用总价计算函数：
  

经过上面几步实现功能如下：

4.购物车全选反选实现

判断全选的方法是新建一个数组，点击选中一个商品时，这个商品的id就会push进新建的数组，当所有商品的id都在数组中时，说明全选了，反之，数组是空时说明没有商品被选中。
综上分析需要对全选框绑定selectAll全选事件，对每个商品前的选择框绑定单选事件select。如下：

方法如下：

购物车内商品选中状态影响总价，因为只需要计算选中商品的价格。所以需要修改总价函数，如下：

4.完善，添加商品图片

可以根据需求添加上商品的图片，只需要在模拟的数据中加上图片选项，如下：

绑定商品名称时绑定上商品图片，如下：

得到结果为：

至此，购物车算是基本功能完成了，可以再根据需求及美化页面做一些复杂的处理。

本项目源码：vue商城项目源码

每天进步一点点、充实一点点、加油！！！