微信小程序之購物車

這裏演示從商品列表中添加到購物車

下面先作商品列表頁。以下圖：

佈局分析：

首先一個list的主盒子，接着是item盒子，這是必須的。
而後把item分紅左側的圖片部分，和右側的說明部分（item盒子使用橫向彈性盒）
右側的說明部分又分上下2部分（右側說明部分盒子使用縱向彈性盒）
下面價錢購物車部分（下面價錢購物車部分也使用橫向彈性盒，中間使用justify-content: space-between;填充空白）

 

index.wxml：

 1 <!--主盒子-->
 2 <view class="container">
 3   <!--head-->
 4   <view class="tit">
 5     <view class="title_val">商品列表</view>
 6     <view class="more">更多</view>
 7   </view>
 8   <!--list-->
 9   <view class="goodslist">
10     <!--item-->
11     <block wx:for="{{goodslist}}">
12       <view class="goods">
13         <!--左側圖片盒子-->
14         <view>
15           <image src="{{item.imgUrl}}" class="good-img" />
16         </view>
17         <!--右側說明部分-->
18         <view class="good-cont">
19           <!--上--文字說明-->
20           <view class="goods-navigator">
21             <text class="good-name">{{item.name}}</text>
22           </view>
23           <!--下--價格部分-->
24           <view class="good-price">
25             <text>￥{{item.price}}</text>
26             <image id="{{item.id}}" class="cart" src="/images/new_73.jpg" bindtap="addcart" />
27           </view>
28         </view>
29       </view>
30     </block>
31   </view>
32 </view>

index.wxss：

 1 /**index.wxss**/
 2 page{
 3     height: 100%;
 4 }
 5 .container{
 6     background: #f5f5f5;
 7 }
 8 
 9 .tit{
10     display: flex;
11     flex-direction: row;
12     justify-content: space-between;
13     height: 30px;
14     position: relative;
15 }
16 .tit::before{
17     content:'';
18     background: #ffcc00;
19     width:5px;
20     height: 100%;
21     position: absolute;
22     left: 0;
23     top: 0;
24 }
25 
26 .title_val{
27     padding: 0 15px;
28     font-size: 14px;
29     color: #555;
30     line-height: 30px;
31 }
32 .more{
33     font-size: 12px;
34     line-height: 30px;
35     color: #999;
36     padding: 0 5px 0 0 ;
37 }
38 .goodslist{
39     background: #fff;
40     display: flex;
41     flex-direction: column;
42 }
43 .goods{
44     display: flex;
45     flex-direction: row;
46     border-bottom: 1px solid #ddd;
47 }
48 .good-img{
49     padding: 5px;
50     width: 80px;
51     height: 80px;
52 }
53 .good-cont{
54     display: flex;
55     flex: 1;
56     flex-direction: column;
57     font-size: 14px;
58 }
59 .goods-navigator{
60     display: flex;
61     flex: 1;
62     flex-direction: column;
63     justify-content: center;
64 }
65 .good-name{
66     display: flex;
67     flex: 1;
68     flex-direction: column;
69     color: #555;
70     justify-content: center;
71 }
72 .good-price{
73     display: flex;
74     flex: 1;
75     flex-direction: row;
76     justify-content: space-between;
77     color:#e4393c;
78     font-weight: 600;
79 }
80 .cart{
81     width: 40px;
82     height: 40px;
83     padding-right: 10px;
84 }

index.js：

數據部分，通常狀況都是訪問接口獲取數據的，這裏並無使用網絡訪問，爲了簡化demo，直接把一組數據放在data對象中。同窗們能夠根據其數據結構本身編寫後臺接口

  1 Page({
  2     data: {
  3         goodslist: [
  4             {
  5                 id:"001",
  6                 imgUrl:"http://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&fm=23&gp=0.jpg",
  7                 name:"女裝T恤中長款大碼擺裙春夏新款",
  8                 price:"65.00"
  9             },
 10             {
 11                 id:"002",
 12                 imgUrl:"http://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&fm=23&gp=0.jpg",
 13                 name:"火亮春秋季 男青年修身款圓領男士T恤",
 14                 price:"68.00"
 15             },
 16             {
 17                 id:"003",
 18                 imgUrl:"http://img1.imgtn.bdimg.com/it/u=2305064940,3470659889&fm=23&gp=0.jpg",
 19                 name:"新款立體掛脖t恤女短袖大碼寬鬆條紋V領上衣顯瘦休閒春夏",
 20                 price:"86.00"
 21             },
 22             {
 23                 id:"004",
 24                 imgUrl:"http://img4.imgtn.bdimg.com/it/u=3986819380,1610061022&fm=23&gp=0.jpg",
 25                 name:"男運動上衣春季上新品 上衣流行裝青年",
 26                 price:"119.00"
 27             },
 28             {
 29                 id:"005",
 30                 imgUrl:"http://img1.imgtn.bdimg.com/it/u=3583238552,3525141111&fm=23&gp=0.jpg",
 31                 name:"時尚字母三角露胸t恤女裝亮絲大碼寬鬆不規則春夏潮",
 32                 price:"69.00"
 33             },
 34             {
 35                 id:"006",
 36                 imgUrl:"http://img2.imgtn.bdimg.com/it/u=1167272381,3361826143&fm=23&gp=0.jpg",
 37                 name:"新款立體掛脖t恤短袖大碼寬鬆條紋V領上衣顯瘦休閒春夏",
 38                 price:"86.00"
 39             },
 40             {
 41                 id:"007",
 42                 imgUrl:"http://img0.imgtn.bdimg.com/it/u=789486313,2033571593&fm=23&gp=0.jpg",
 43                 name:"時尚字母三角露胸t恤女裝亮絲大碼寬鬆不規則春夏潮",
 44                 price:"119.00"
 45             },
 46             {
 47                 id:"008",
 48                 imgUrl:"http://img2.imgtn.bdimg.com/it/u=3314044863,3966877419&fm=23&gp=0.jpg",
 49                 name:"男運動上衣春季上新品 上衣流行裝青年",
 50                 price:"69.00"
 51             },
 52         ]
 53     },
 54     // 加入購物車
 55     addcart:function(e){
 56         this.setData({
 57             toastHidden:false
 58         });
 59         // 遍歷列表 與 購物車列表
 60         for (var i in this.data.goodslist){
 61             // 列表中某一項item的id == 點擊事件傳遞過來的id。則是被點擊的項
 62             if(this.data.goodslist[i].id == e.target.id){
 63                 // 給goodsList數組的當前項添加count元素，值爲1，用於記錄添加到購物車的數量
 64                 this.data.goodslist[i].count = 1;
 65                 // 獲取購物車的緩存數組（沒有數據，則賦予一個空數組）
 66                 var arr = wx.getStorageSync('cart') || [];
 67                 // 若是購物車有數據
 68                 if(arr.length>0){
 69                     // 遍歷購物車數組
 70                     for(var j in arr){
 71                         // 判斷購物車內的item的id，和事件傳遞過來的id，是否相等
 72                         if(arr[j].id == e.target.id){
 73                             // 相等的話，給count+1（即再次添加入購物車，數量+1）
 74                             arr[j].count = arr[j].count + 1;
 75                             // 最後，把購物車數據，存放入緩存（此處不用再給購物車數組push元素進去，由於這個是購物車有的，直接更新當前數組便可）
 76                             try {
 77                                 wx.setStorageSync('cart', arr)
 78                             } catch (e) {
 79                                 console.log(e)
 80                             }
 81                             // 返回（在if內使用return，跳出循環節約運算，節約性能）
 82                             return;
 83                         }
 84                     }
 85                     // 遍歷完購物車後，沒有對應的item項，把goodslist的當前項放入購物車數組
 86                     arr.push(this.data.goodslist[i]);
 87                 }
 88                 // 購物車沒有數據，把item項push放入當前數據（第一次存放時）
 89                 else{
 90                     arr.push(this.data.goodslist[i]);
 91                 }
 92                 // 最後，把購物車數據，存放入緩存
 93                 try {
 94                     wx.setStorageSync('cart', arr)
 95                     // 返回（在if內使用return，跳出循環節約運算，節約性能）
 96                     return;
 97                 } catch (e) {
 98                     console.log(e)
 99                 }
100             }
101         }
102     }
103 })

編寫購物車部分，以下圖所示：

佈局分析：

首先一個list的主盒子，接着是item盒子，這是必須的。

而後把item分紅左側的圖片部分，和右側的說明部分（item盒子使用橫向彈性盒）

右側的說明部分又分上下2部分（右側說明部分盒子使用縱向彈性盒）

下面價錢、購物加減、購物車部分（使用縱向彈性盒）

 最下面的購物加減、購物車部分（使用橫向彈性盒，中間使用justify-content: space-between;填充空白）

cart.wxml：

 1 <!--要是夠車內沒有數據，就行顯示沒有數據-->
 2 <view class="cart" hidden="{{iscart}}">
 3     <image src="/images/cart.png"/>
 4     <view>購物車什麼都沒有，趕快去購物吧</view>
 5 </view>
 6 <!--要是有數據，就顯示數據-->
 7 <view class="cartList" hidden="{{!iscart}}">
 8     <!--header-->
 9     <view class="baoyou"></view>
10     <!--list item-->
11     <block wx:for="{{cart}}">
12         <view class="goods">
13             <!--左側圖片-->
14             <view>
15                 <image src="{{item.imgUrl}}" class="good-img"/>
16             </view>
17             <!--右側說明部分-->
18             <view class="good-cont">
19                 <!--文字說明-->
20                 <view class="goods-navigator">
21                     <text class="good-name">{{item.name}}</text>
22                 </view>
23                 <!--價錢和購物加減的父盒子-->
24                 <view class="good-price">
25                     <text class="price">￥{{item.price}}</text>
26                     <view class="btn-box">
27                         <view class="btn">
28                             <button id="del{{index}}" type="default" size="mini" bindtap="delCount">-</button>
29                             <input  value="{{item.count}}"/>
30                             <button id="add{{index}}" type="default" size="mini" bindtap="addCount">+</button>
31                         </view>
32                         <image id="img{{index}}" src="/images/del2.png" bindtap="delGoods"/>
33                     </view>
34                 </view>
35             </view>
36         </view>
37     </block>
38     <!--footer-->
39     <view class="total">
40         <view class="total_text">合計：<text>￥{{total}}</text></view>
41         <button class="total_js" size="mini">去結算({{goodsCount}})</button>
42     </view>
43 </view>

cart.wxss：

  1 page {
  2   background: #f2ebe3;
  3 }
  4 
  5 .cart {
  6   padding: 100px 0 0 0;
  7   display: flex;
  8   justify-content: center;
  9   flex-direction: column;
 10   align-items: center;
 11   color: #999;
 12 }
 13 
 14 .cart image {
 15   width: 66px;
 16   height: 66px;
 17   margin-bottom: 20px;
 18 }
 19 
 20 .baoyou {
 21   font-size: 18px;
 22   color: #db2929;
 23   padding: 10px;
 24 }
 25 
 26 .goods {
 27   background: #fff;
 28   border-top: 1px solid #ddd;
 29   margin-bottom: 10px;
 30   padding: 10px 10px 0 10px;
 31   display: flex;
 32 }
 33 
 34 .goods image {
 35   width: 80px;
 36   height: 80px;
 37   border: 1px solid #ddd;
 38 }
 39 
 40 .goods .good-cont {
 41   display: flex;
 42   flex: 1;
 43   flex-direction: column;
 44   color: #555;
 45   font-size: 14px;
 46   padding: 5px;
 47   height: 100px;
 48 }
 49 
 50 .goods .good-cont .goods-navigator {
 51   display: flex;
 52   flex: 2;
 53 }
 54 
 55 .goods .good-cont .good-price {
 56   display: flex;
 57   flex-direction: column;
 58   flex: 3;
 59 }
 60 
 61 .goods .good-cont .good-price .price {
 62   font-size: 16px;
 63   color: #ec5151;
 64 }
 65 
 66 .goods .good-cont .good-price .btn-box {
 67   display: flex;
 68   flex-direction: row;
 69   justify-content: space-between;
 70 }
 71 
 72 .goods .good-cont .good-price .btn-box image {
 73   width: 23px;
 74   height: 23px;
 75   border: 0;
 76   margin: 0;
 77 }
 78 
 79 .goods .good-cont .good-price .btn {
 80   display: flex;
 81   flex-direction: row;
 82 }
 83 
 84 .goods .good-cont .good-price .btn input {
 85   margin: 0;
 86   width: 40px;
 87   text-align: center;
 88   border: 1px solid #eee;
 89   font-size: 16px;
 90   height: 28px;
 91 }
 92 
 93 .goods .good-cont .good-price .btn button {
 94   margin: 0;
 95 }
 96 
 97 .total {
 98   height: 40px;
 99   display: flex;
100   flex-direction: row;
101   justify-content: space-between;
102   padding: 0 20px;
103 }
104 
105 .total .total_text {
106   display: flex;
107   color: #777;
108 }
109 
110 .total .total_text text {
111   color: #ec5151;
112 }
113 
114 .total .total_js {
115   color: #fff;
116   background: #ec5151;
117   height: 30px;
118   margin: 0;
119 }

cart.js：

  1 Page({
  2     data: {
  3         iscart: false,
  4         cart: [], //數據
  5         count: 1,   //商品數量默認是1
  6         total: 0,    //總金額
  7         goodsCount: 0 //數量
  8     },
  9     onLoad: function (options) {
 10        
 11     },
 12     onShow: function () {
 13         var that = this;
 14         // 獲取產品展現頁保存的緩存數據（購物車的緩存數組，沒有數據，則賦予一個空數組）
 15         var arr = wx.getStorageSync('cart') || [];
 16         // 有數據的話，就遍歷數據，計算總金額 和 總數量
 17         if (arr.length > 0) {
 18             for (var i in arr) {
 19                 that.data.total += Number(arr[i].price) * Number(arr[i].count);
 20                 that.data.goodsCount += Number(arr[i].count);
 21             }
 22             // 更新數據
 23             this.setData({
 24                 iscart: true,
 25                 cart: arr,
 26                 total: that.data.total,
 27                 goodsCount: that.data.goodsCount
 28             });
 29         }
 30     },
 31     onHide: function(){
 32         // 清除數據
 33         this.setData({
 34             iscart: false,
 35             cart: [], //數據
 36             total: 0,    //總金額
 37             goodsCount: 0 //數量
 38         });
 39     },
 40     /* 減數 */
 41     delCount: function (e) {
 42         console.log(e)
 43         // 獲取購物車該商品的數量
 44         // [獲取設置在該btn的id,即list的index值]
 45         if (this.data.cart[e.target.id.substring(3)].count <= 1) {
 46             return;
 47         }
 48         // 商品總數量-1
 49         this.data.goodsCount -= 1;
 50         // 總價錢 減去 對應項的價錢單價
 51         this.data.total -= Number(this.data.cart[e.target.id.substring(3)].price);
 52         // 購物車主體數據對應的項的數量-1  並賦給主體數據對應的項內
 53         this.data.cart[e.target.id.substring(3)].count = --this.data.cart[e.target.id.substring(3)].count;
 54         // 更新data數據對象
 55         this.setData({
 56             cart: this.data.cart,
 57             total: this.data.total,
 58             goodsCount: this.data.goodsCount
 59         })
 60         // 主體數據從新賦入緩存內
 61         try {
 62             wx.setStorageSync('cart', this.data.cart)
 63         } catch (e) {
 64             console.log(e)
 65         }
 66     },
 67     /* 加數 */
 68     addCount: function (e) {
 69         // 商品總數量+1
 70         this.data.goodsCount += 1;
 71         // 總價錢 加上 對應項的價錢單價
 72         this.data.total += Number(this.data.cart[e.target.id.substring(3)].price);
 73         // 購物車主體數據對應的項的數量+1  並賦給主體數據對應的項內
 74         this.data.cart[e.target.id.substring(3)].count = ++this.data.cart[e.target.id.substring(3)].count;
 75         // 更新data數據對象
 76         this.setData({
 77             cart: this.data.cart,
 78             total: this.data.total,
 79             goodsCount: this.data.goodsCount
 80         })
 81         // 主體數據從新賦入緩存內
 82         try {
 83             wx.setStorageSync('cart', this.data.cart)
 84         } catch (e) {
 85             console.log(e)
 86         }
 87     },
 88     /* 刪除item */
 89     delGoods: function (e) {
 90         // 商品總數量  減去  對應刪除項的數量
 91         this.data.goodsCount = this.data.goodsCount - this.data.cart[e.target.id.substring(3)].count;
 92         // 總價錢  減去  對應刪除項的單價*數量
 93         this.data.total -= this.data.cart[e.target.id.substring(3)].price * this.data.cart[e.target.id.substring(3)].count;
 94         // 主體數據的數組移除該項
 95         this.data.cart.splice(e.target.id.substring(3), 1);
 96         // 更新data數據對象
 97         this.setData({
 98             cart: this.data.cart,
 99             total: this.data.total,
100             goodsCount: this.data.goodsCount
101         })
102         // 主體數據從新賦入緩存內
103         try {
104             wx.setStorageSync('cart', this.data.cart)
105         } catch (e) {
106             console.log(e)
107         }
108     }
109 })

運行結果：