Development function

Shopping cart template
Product quantity addition and subtraction
Commodity price settlement
Product delete
Select all products

1. Shopping cart page template implementation

　　1. Use cnd to introduce bootstrap

　　　In public / index.html, use the link tag to introduce bootstrap

　　2. Use the bootstrap panel component to build the page

　　　The shopping cart template is as follows:

　　　　code show as below:

1 <div class = "hello">
 2      <template v- if = "goods.length! == 0">
 3        <div class = "row">
 4          <!-The panel component of bootstrap includes a panel with a title, Panel light with table->
 5          <div class = "panel panel-default">
 6            <div class = "panel-heading">
 7              <h3 class = "panel-title"> My shopping cart </ h3>
 8            </ div>
 9            <div class = "panel-body">
 10              <!-Panel with table table-hover: mouse over the highlighted table->
 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 ">
           <p> No products yet ~~~ </ p>
6566         </div>
67       </div>
68     </template>
69   </div>

2. Shopping cart page template implementation

　　1. Simulated shopping cart data

 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 }