Vue商城购物车基本功能开发

Posted 2021-02-27 spaortman

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue商城购物车基本功能开发相关的知识，希望对你有一定的参考价值。

开发功能

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

1.购物车页面模板实现

　　1.使用cnd方式，引入bootstrap

　　　在public/index.html中，使用link标签引入bootstrap

技术图片

　　2.使用bootstrap的面板组件构建页面

　　　购物车模板如下图：

技术图片

　　　　代码如下：

 1 <div class="hello">
 2     <template v-if="goods.length !== 0">
 3       <div class="row">
 4         <!-- bootstrap的面板组件包含带标题的面板、带表格的面板灯 -->
 5         <div class="panel panel-default">
 6           <div class="panel-heading">
 7             <h3 class="panel-title">我的购物车</h3>
 8           </div>
 9           <div class="panel-body">
10             <!-- 带表格的面板 table-hover:鼠标悬停高亮的表格-->
11             <table class="table table-hover">
12               <thead>
13                 <tr>
14                   <th>
15                     <input type="checkbox" @click="selectAll()" v-model="allChecked" />
16                   </th>
17                   <th>商品名称</th>
18                   <th>商品单价</th>
19                   <th>购买数量</th>
20                   <th>小计</th>
21                   <th>商品操作</th>
22                 </tr>
23               </thead>
24               <tbody>
25                 <tr v-for="(item,index) in goods" :key="index">
26                   <td>
27                     <input
28                       type="checkbox"
29                       @click="select(item.id)"
30                       :checked="allSelectData.indexOf(item.id) != -1 "
31                     />
32                   </td>
33                   <td>{{ item.name }}</td>
34                   <td>{{ item.price }}</td>
35                   <td>
36                     <button @click="reduce(index)">-</button>
37                     <input
38                       type="text"
39                       v-model="item.num"
40                       style="width:26px;text-align:center;margin:0 2px;"
41                     />
42                     <button @click="add(index)">+</button>
43                   </td>
44                   <td>{{ item.num*item.price }}</td>
45                   <td>
46                     <div class="btn-group btn-group-sm">
47                       <button class="btn btn-danger" type="button" @click="del(index)">删除</button>
48                     </div>
49                   </td>
50                 </tr>
51               </tbody>
52             </table>
53           </div>
54           <!-- 带脚注的面板 -->
55           <div class="panel-footer" style="text-align: right;">
56             共计
57             <span>{{ totalPrice }} 元</span>
58           </div>
59         </div>
60       </div>
61     </template>
62     <template v-else>
63       <div class="panel panel-default">
64         <div class="panel-body">
65           <p>还没有商品哦~~~</p>
66         </div>
67       </div>
68     </template>
69   </div>

2.购物车页面模板实现

　　1.模拟购物车数据

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