碼上快樂

相關內容    簡體    繁體

[轉]微信小程序之購物車 —— 微信小程序實戰商城系列（5）

本文轉載自   查看原文   2017-11-21 10:02   1408    微信小程序/ 微信/ Z騰訊/ 微信公眾平台小程序/ 電商

本文轉自：http://blog.csdn.net/michael_ouyang/article/details/70755892

續上一篇的文章：微信小程序之商品屬性分類  —— 微信小程序實戰商城系列（4）

 

自從認識某人后，我收獲了兩個成功。登錄成功、付款成功，而且還擁有了自己的一輛車：

購物車

也發現了自己的不足之處：

余額不足。

為大家介紹的就是購物車

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

下面先做商品列表頁。如下圖：

 

 

布局分析：

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

 

 

index.wxml：

[html] view plain copy print?
  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>  
<!--主盒子-->
<view class="container">
  <!--head-->
  <view class="tit">
    <view class="title_val">商品列表</view>
    <view class="more">更多</view>
  </view>
  <!--list-->
  <view class="goodslist">
    <!--item-->
    <block wx:for="{{goodslist}}">
      <view class="goods">
        <!--左側圖片盒子-->
        <view>
          <image src="{{item.imgUrl}}" class="good-img" />
        </view>
        <!--右側說明部分-->
        <view class="good-cont">
          <!--上--文字說明-->
          <view class="goods-navigator">
            <text class="good-name">{{item.name}}</text>
          </view>
          <!--下--價格部分-->
          <view class="good-price">
            <text>￥{{item.price}}</text>
            <image id="{{item.id}}" class="cart" src="/images/new_73.jpg" bindtap="addcart" />
          </view>
        </view>
      </view>
    </block>
  </view>
</view>

index.wxss：

[css] view plain copy print?
  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.wxss**/
page{
    height: 100%;
}
.container{
    background: #f5f5f5;
}

.tit{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 30px;
    position: relative;
}
.tit::before{
    content:'';
    background: #ffcc00;
    width:5px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.title_val{
    padding: 0 15px;
    font-size: 14px;
    color: #555;
    line-height: 30px;
}
.more{
    font-size: 12px;
    line-height: 30px;
    color: #999;
    padding: 0 5px 0 0 ;
}
.goodslist{
    background: #fff;
    display: flex;
    flex-direction: column;
}
.goods{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #ddd;
}
.good-img{
    padding: 5px;
    width: 80px;
    height: 80px;
}
.good-cont{
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: 14px;
}
.goods-navigator{
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
}
.good-name{
    display: flex;
    flex: 1;
    flex-direction: column;
    color: #555;
    justify-content: center;
}
.good-price{
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    color:#e4393c;
    font-weight: 600;
}
.cart{
    width: 40px;
    height: 40px;
    padding-right: 10px;
}

 

index.js：

數據部分，一般情況都是訪問接口獲取數據的，這里並沒有使用網絡訪問，為了簡化demo，直接把一組數據放在data對象中。同學們可以根據其數據結構自己編寫后台接口

[javascript] view plain copy print?
  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. })  
Page({
    data: {
        goodslist: [
            {
                id:"001",
                imgUrl:"http://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&fm=23&gp=0.jpg",
                name:"女裝T恤中長款大碼擺裙春夏新款",
                price:"65.00"
            },
            {
                id:"002",
                imgUrl:"http://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&fm=23&gp=0.jpg",
                name:"火亮春秋季 男青年修身款圓領男士T恤",
                price:"68.00"
            },
            {
                id:"003",
                imgUrl:"http://img1.imgtn.bdimg.com/it/u=2305064940,3470659889&fm=23&gp=0.jpg",
                name:"新款立體掛脖t恤女短袖大碼寬松條紋V領上衣顯瘦休閑春夏",
                price:"86.00"
            },
            {
                id:"004",
                imgUrl:"http://img4.imgtn.bdimg.com/it/u=3986819380,1610061022&fm=23&gp=0.jpg",
                name:"男運動上衣春季上新品 上衣流行裝青年",
                price:"119.00"
            },
            {
                id:"005",
                imgUrl:"http://img1.imgtn.bdimg.com/it/u=3583238552,3525141111&fm=23&gp=0.jpg",
                name:"時尚字母三角露胸t恤女裝亮絲大碼寬松不規則春夏潮",
                price:"69.00"
            },
            {
                id:"006",
                imgUrl:"http://img2.imgtn.bdimg.com/it/u=1167272381,3361826143&fm=23&gp=0.jpg",
                name:"新款立體掛脖t恤短袖大碼寬松條紋V領上衣顯瘦休閑春夏",
                price:"86.00"
            },
            {
                id:"007",
                imgUrl:"http://img0.imgtn.bdimg.com/it/u=789486313,2033571593&fm=23&gp=0.jpg",
                name:"時尚字母三角露胸t恤女裝亮絲大碼寬松不規則春夏潮",
                price:"119.00"
            },
            {
                id:"008",
                imgUrl:"http://img2.imgtn.bdimg.com/it/u=3314044863,3966877419&fm=23&gp=0.jpg",
                name:"男運動上衣春季上新品 上衣流行裝青年",
                price:"69.00"
            },
        ]
    },
    // 加入購物車
    addcart:function(e){
        this.setData({
            toastHidden:false
        });
        // 遍歷列表 與 購物車列表
        for (var i in this.data.goodslist){
            // 列表中某一項item的id == 點擊事件傳遞過來的id。則是被點擊的項
            if(this.data.goodslist[i].id == e.target.id){
                // 給goodsList數組的當前項添加count元素，值為1，用於記錄添加到購物車的數量
                this.data.goodslist[i].count = 1;
                // 獲取購物車的緩存數組（沒有數據，則賦予一個空數組）
                var arr = wx.getStorageSync('cart') || [];
                // 如果購物車有數據
                if(arr.length>0){
                    // 遍歷購物車數組
                    for(var j in arr){
                        // 判斷購物車內的item的id，和事件傳遞過來的id，是否相等
                        if(arr[j].id == e.target.id){
                            // 相等的話，給count+1（即再次添加入購物車，數量+1）
                            arr[j].count = arr[j].count + 1;
                            // 最后，把購物車數據，存放入緩存（此處不用再給購物車數組push元素進去，因為這個是購物車有的，直接更新當前數組即可）
                            try {
                                wx.setStorageSync('cart', arr)
                            } catch (e) {
                                console.log(e)
                            }
                            // 返回（在if內使用return，跳出循環節約運算，節約性能）
                            return;
                        }
                    }
                    // 遍歷完購物車后，沒有對應的item項，把goodslist的當前項放入購物車數組
                    arr.push(this.data.goodslist[i]);
                }
                // 購物車沒有數據，把item項push放入當前數據（第一次存放時）
                else{
                    arr.push(this.data.goodslist[i]);
                }
                // 最后，把購物車數據，存放入緩存
                try {
                    wx.setStorageSync('cart', arr)
                    // 返回（在if內使用return，跳出循環節約運算，節約性能）
                    return;
                } catch (e) {
                    console.log(e)
                }
            }
        }
    }
})

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

 

 

布局分析：

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

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

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

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

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

 

 

cart.wxml：

[html] view plain copy print?
  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>  
<!--要是夠車內沒有數據，就行顯示沒有數據-->
<view class="cart" hidden="{{iscart}}">
    <image src="/images/cart.png"/>
    <view>購物車什么都沒有，趕快去購物吧</view>
</view>
<!--要是有數據，就顯示數據-->
<view class="cartList" hidden="{{!iscart}}">
    <!--header-->
    <view class="baoyou"></view>
    <!--list item-->
    <block wx:for="{{cart}}">
        <view class="goods">
            <!--左側圖片-->
            <view>
                <image src="{{item.imgUrl}}" class="good-img"/>
            </view>
            <!--右側說明部分-->
            <view class="good-cont">
                <!--文字說明-->
                <view class="goods-navigator">
                    <text class="good-name">{{item.name}}</text>
                </view>
                <!--價錢和購物加減的父盒子-->
                <view class="good-price">
                    <text class="price">￥{{item.price}}</text>
                    <view class="btn-box">
                        <view class="btn">
                            <button id="del{{index}}" type="default" size="mini" bindtap="delCount">-</button>
                            <input  value="{{item.count}}"/>
                            <button id="add{{index}}" type="default" size="mini" bindtap="addCount">+</button>
                        </view>
                        <image id="img{{index}}" src="/images/del2.png" bindtap="delGoods"/>
                    </view>
                </view>
            </view>
        </view>
    </block>
    <!--footer-->
    <view class="total">
        <view class="total_text">合計：<text>￥{{total}}</text></view>
        <button class="total_js" size="mini">去結算({{goodsCount}})</button>
    </view>
</view>

cart.wxss：

[css] view plain copy print?
  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. }  
page {
  background: #f2ebe3;
}

.cart {
  padding: 100px 0 0 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: #999;
}

.cart image {
  width: 66px;
  height: 66px;
  margin-bottom: 20px;
}

.baoyou {
  font-size: 18px;
  color: #db2929;
  padding: 10px;
}

.goods {
  background: #fff;
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  padding: 10px 10px 0 10px;
  display: flex;
}

.goods image {
  width: 80px;
  height: 80px;
  border: 1px solid #ddd;
}

.goods .good-cont {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: #555;
  font-size: 14px;
  padding: 5px;
  height: 100px;
}

.goods .good-cont .goods-navigator {
  display: flex;
  flex: 2;
}

.goods .good-cont .good-price {
  display: flex;
  flex-direction: column;
  flex: 3;
}

.goods .good-cont .good-price .price {
  font-size: 16px;
  color: #ec5151;
}

.goods .good-cont .good-price .btn-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.goods .good-cont .good-price .btn-box image {
  width: 23px;
  height: 23px;
  border: 0;
  margin: 0;
}

.goods .good-cont .good-price .btn {
  display: flex;
  flex-direction: row;
}

.goods .good-cont .good-price .btn input {
  margin: 0;
  width: 40px;
  text-align: center;
  border: 1px solid #eee;
  font-size: 16px;
  height: 28px;
}

.goods .good-cont .good-price .btn button {
  margin: 0;
}

.total {
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 20px;
}

.total .total_text {
  display: flex;
  color: #777;
}

.total .total_text text {
  color: #ec5151;
}

.total .total_js {
  color: #fff;
  background: #ec5151;
  height: 30px;
  margin: 0;
}

cart.js：

[html] view plain copy print?
  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. })  
Page({
    data: {
        iscart: false,
        cart: [], //數據
        count: 1,   //商品數量默認是1
        total: 0,    //總金額
        goodsCount: 0 //數量
    },
    onLoad: function (options) {
       
    },
    onShow: function () {
        var that = this;
        // 獲取產品展示頁保存的緩存數據（購物車的緩存數組，沒有數據，則賦予一個空數組）
        var arr = wx.getStorageSync('cart') || [];
        // 有數據的話，就遍歷數據，計算總金額 和 總數量
        if (arr.length > 0) {
            for (var i in arr) {
                that.data.total += Number(arr[i].price) * Number(arr[i].count);
                that.data.goodsCount += Number(arr[i].count);
            }
            // 更新數據
            this.setData({
                iscart: true,
                cart: arr,
                total: that.data.total,
                goodsCount: that.data.goodsCount
            });
        }
    },
    onHide: function(){
        // 清除數據
        this.setData({
            iscart: false,
            cart: [], //數據
            total: 0,    //總金額
            goodsCount: 0 //數量
        });
    },
    /* 減數 */
    delCount: function (e) {
        console.log(e)
        // 獲取購物車該商品的數量
        // [獲取設置在該btn的id,即list的index值]
        if (this.data.cart[e.target.id.substring(3)].count <= 1) {
            return;
        }
        // 商品總數量-1
        this.data.goodsCount -= 1;
        // 總價錢 減去 對應項的價錢單價
        this.data.total -= Number(this.data.cart[e.target.id.substring(3)].price);
        // 購物車主體數據對應的項的數量-1  並賦給主體數據對應的項內
        this.data.cart[e.target.id.substring(3)].count = --this.data.cart[e.target.id.substring(3)].count;
        // 更新data數據對象
        this.setData({
            cart: this.data.cart,
            total: this.data.total,
            goodsCount: this.data.goodsCount
        })
        // 主體數據重新賦入緩存內
        try {
            wx.setStorageSync('cart', this.data.cart)
        } catch (e) {
            console.log(e)
        }
    },
    /* 加數 */
    addCount: function (e) {
        // 商品總數量+1
        this.data.goodsCount += 1;
        // 總價錢 加上 對應項的價錢單價
        this.data.total += Number(this.data.cart[e.target.id.substring(3)].price);
        // 購物車主體數據對應的項的數量+1  並賦給主體數據對應的項內
        this.data.cart[e.target.id.substring(3)].count = ++this.data.cart[e.target.id.substring(3)].count;
        // 更新data數據對象
        this.setData({
            cart: this.data.cart,
            total: this.data.total,
            goodsCount: this.data.goodsCount
        })
        // 主體數據重新賦入緩存內
        try {
            wx.setStorageSync('cart', this.data.cart)
        } catch (e) {
            console.log(e)
        }
    },
    /* 刪除item */
    delGoods: function (e) {
        // 商品總數量  減去  對應刪除項的數量
        this.data.goodsCount = this.data.goodsCount - this.data.cart[e.target.id.substring(3)].count;
        // 總價錢  減去  對應刪除項的單價*數量
        this.data.total -= this.data.cart[e.target.id.substring(3)].price * this.data.cart[e.target.id.substring(3)].count;
        // 主體數據的數組移除該項
        this.data.cart.splice(e.target.id.substring(3), 1);
        // 更新data數據對象
        this.setData({
            cart: this.data.cart,
            total: this.data.total,
            goodsCount: this.data.goodsCount
        })
        // 主體數據重新賦入緩存內
        try {
            wx.setStorageSync('cart', this.data.cart)
        } catch (e) {
            console.log(e)
        }
    }
})

 

運行結果：

 

demo：http://download.csdn.net/detail/michael_ouyang/9825344

 

更多小程序的教程

 

 

微信開發者工具的快捷鍵

微信小程序的文件結構 —— 微信小程序教程系列（1）

微信小程序的生命周期實例演示 —— 微信小程序教程系列（2）

微信小程序的動態修改視圖層的數據 —— 微信小程序教程系列（3）

微信小程序的新建頁面 —— 微信小程序教程系列（4）

微信小程序的如何使用全局屬性 —— 微信小程序教程系列（5）

微信小程序的頁面跳轉 —— 微信小程序教程系列（6）

微信小程序標題欄和導航欄的設置 —— 微信小程序教程系列（7）

微信小程序的作用域和模塊化 —— 微信小程序教程系列（8）

微信小程序視圖層的數據綁定 —— 微信小程序教程系列（9）

微信小程序視圖層的條件渲染 —— 微信小程序教程系列（10）

微信小程序視圖層的列表渲染 —— 微信小程序教程系列（11）

微信小程序視圖層的模板 —— 微信小程序教程系列（12）

微信小程序wxss的尺寸單位rpx —— 微信小程序教程系列（13）

微信小程序的網絡請求 —— 微信小程序教程系列（14）

微信小程序的百度地圖獲取地理位置 —— 微信小程序教程系列（15）

微信小程序使用百度api獲取天氣信息 —— 微信小程序教程系列（16）

微信小程序獲取系統日期和時間 —— 微信小程序教程系列（17）

微信小程序之頂部導航欄實例 —— 微信小程序實戰系列（1）

微信小程序之上拉加載（分頁加載）實例 —— 微信小程序實戰系列（2）

微信小程序之輪播圖實例 —— 微信小程序實戰系列（3）

微信小程序之仿android fragment之可滑動的底部導航欄實例  —— 微信小程序實戰系列（4）

 

微信小程序之登錄頁實例 —— 微信小程序實戰系列（5）

微信小程序之自定義toast實例 —— 微信小程序實戰系列（6）

微信小程序之自定義抽屜菜單（從下拉出）實例 —— 微信小程序實戰系列（7）

微信小程序之自定義模態彈窗（帶動畫）實例 —— 微信小程序實戰系列（8）

微信小程序之側欄分類 —— 微信小程序實戰商城系列（1）

微信小程序之仿淘寶分類入口 —— 微信小程序實戰商城系列（2）

微信小程序之購物數量加減 —— 微信小程序實戰商城系列（3）

微信小程序之商品屬性分類 —— 微信小程序實戰商城系列（4）

 

更多小程序的教程請查看：http://blog.csdn.net/michael_ouyang/article/details/54700871

謝謝觀看，不足之處，敬請指導

 

        版權聲明：本文為博主原創文章，轉載務必注明出處，http://blog.csdn.net/michael_ouyang。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 微信小程序之購物車 微信小程序實戰 購物車功能 [轉]微信小程序之購物數量加減 —— 微信小程序實戰商城系列（3） 微信小程序 “萬利商城”實戰之十： 商品列表頁加入購物車功能的實現 微信小程序加入購物車功能 微信小程序之購物車功能 微信小程序 - 實現購物車結算 微信小程序——加入購物車彈層 微信小程序之購物車功能 微信小程序——購物車結算
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM