小程式:購物車專案案例(加減商品數量、全選與全不選、價格彙總、刪除提示)

小程式:購物車專案案例(加減商品數量、全選與全不選、價格彙總、刪除提示)

最近由於專案需要,就利用小程式做了個購物車功能的小demo,大家可以參考下。

功能點:
加減商品數量(可自定義商品數量)、彙總價格、全選與全不選、刪除商品彈窗提示

主思路:
一、本地模擬Json資料格式的陣列(1.購物車商品id:cid   2.標題title   3.圖片地址   4.數量num   5.價格price   6.小計   7.是否選中selected)
二、點選核取方塊操作 如已經選中的,經點選變成未選中,反之而反之 點選依據index作為標識,而不用cid,方便遍歷
三、全選操作 首次點選即為全部選中,再次點選為全不選。
四、bindCartNum加減運算函式,加減運算都使用這一個函式控制,同樣依據index作為標識,點完寫回num值。
五、刪除購物車商品:carts.splice(index, 1); 同樣依據index作為標識

shopCart.wxml佈局頁面:

<!-- 小程式購物車demo -->
<view class="body">
<!-- <>購物車列表 -->
<view class="carts-list">
<view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
<!-- //核取方塊 -->
<view class="carts-radio">
<icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" />
<icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" />
</view>
<!-- //商品資訊 -->
<view class="carts-cnt">
<image class="carts-image" src="{{item.image}}" mode="aspectFill" />
<view class="carts-info">
<view class="carts-title clamp2">{{item.title}}</view>
<view class="carts-subtitle">
<text class="carts-price c--f60">¥{{item.price}}</text>
</view>
</view>
</view>
<!-- //數量加減 -->
<view class="carts-num">
<text class="minus {{minusStatuses[index]}}" data-index="{{index}}" data-type="-" bindtap="bindCartNum">-</text>
<input type="number" data-index="{{index}}" bindinput="bindIptCartNum" value="{{item.num}}" />
<text class="plus normal" data-index="{{index}}" data-type=" " bindtap="bindCartNum"> </text>
</view>
<!-- //刪除 -->
<icon class="carts-del" type="clear" size="16" color="#ccc" data-index="{{index}}" bindtap="bindCartsDel" />
</view>
</view>
<!-- //載入提示 -->
<block wx:if="{{showLoading}}">
<view class="page-loading">
<text class="weui-loading" />
<text class="loading-text">載入中</text>
</view>
</block>
<view class="carts-footer">
<view class="bottomfixed">
<view class="inner">
<view class="chkAll" bindtap="bindSelectAll">
<icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20" />
<icon wx:else type="circle" size="20" />
<text>全選</text>
</view>
<view class="total">合計:¥{{totalPrice}}</view>
<view wx:if="{{selectedNum != 0}}" class="btn-pay">去結算({{selectedNum}})</view>
<view wx:else class="btn-pay disabled">去結算({{selectedNum}})</view>
</view>
</view>
</view>
</view>

shopCart.wxss樣式:

/* …… 小程式購物車 {{{ …… */
.c--f60{color: #f60;}
.clamp1, .clamp2, .clamp3{display: -webkit-box!important; overflow: hidden; -webkit-box-orient: vertical;}
.clamp1{-webkit-line-clamp:1;}
.clamp2{-webkit-line-clamp:2;}
.clamp3{-webkit-line-clamp:3;}
.carts-list{padding: 0 20rpx;}
.carts-list .carts-item{border-top: 1rpx solid #e3e3e3; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 20rpx 10rpx; width: 100%; position: relative;}
.carts-list .carts-item:nth-child(1){border-top: 0;}
.carts-item .carts-cnt{flex: 1; padding: 0 20rpx;}
.carts-cnt .carts-image{float:left; margin-right: 20rpx; height: 150rpx; width: 150rpx;}
.carts-cnt .carts-info{display: flex; flex-direction: column; justify-content: space-between; min-height: 150rpx;}
.carts-cnt .carts-title{font-size: 28rpx;}
.carts-cnt .carts-subtitle{display: flex; flex-direction: row; font-size: 28rpx;}
.carts-list .carts-item .carts-del{position: absolute; top: 20rpx; right: 10rpx;}
/*數量加減*/
.carts-num{border: 1rpx solid #aaa; border-radius: 5rpx; display: flex; align-items: center; align-self: flex-end; text-align: center; height: 50rpx;}
.carts-num input{border-left: 1rpx solid #aaa; border-right: 1rpx solid #aaa; font-size: 30rpx; font-family: arial; height: 50rpx; line-height: 50rpx; width: 80rpx;}
.carts-num .minus, .carts-num .plus{color: #000; text-align: center; line-height: 50rpx; width: 40rpx;}
.carts-num .minus{font-size: 30rpx;}
.carts-num .minus.disabled{color: #ccc;}
.carts-num .plus{font-size: 34rpx;}

繫結全選與全不選事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
//繫結單選
  bindCheckbox: function(e){
    var idx = e.currentTarget.dataset.index;
    var carts = this.data.carts;
    var selected = carts[idx].selected;
    carts[idx].selected = !selected;
 
    this.setData({
      carts: carts
    });
 
    this.bindTotalPrice();
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//繫結多選
  bindSelectAll: function(e){
    var selectedAllStatus = this.data.selectedAllStatus;
    var carts = this.data.carts;
 
    selectedAllStatus = !selectedAllStatus;
    for(var i = 0; i < carts.length; i++){
      carts[i].selected = selectedAllStatus;
    }
    this.setData({
      carts: carts,
      selectedAllStatus: selectedAllStatus
    });
 
    this.bindTotalPrice();
  },

繫結文字框輸入數量:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//繫結文字框數量
  bindIptCartNum: function(e){
    var idx = e.currentTarget.dataset.index;
    var carts = this.data.carts;
    var num = e.detail.value;
 
    if(num <= 1){
      num = 1;
    }
 
    var status = num <= 1 ? 'disabled' 'normal';
    carts[idx].num = num;
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[idx] = status;
 
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
 
    this.bindTotalPrice();
  },