微信小程序简单实现购物车功能_微信小程序购物车页面

微信小程序简单实现购物车结算和购物车列表展示功能

实现在微信小程序中对每一个购物车界面的商品订单，进行勾选结算和取消结算的功能，相关界面截图如下：

具体实现示例代码为：
1、js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    checked: false,
    checkAll: false,
    dataList: [{
        id: '000',
        img: 'https://img-blog.csdnimg.cn/img_convert/0e449547f8e5354646f76af0d1b4800a.png',
        content: '生活百般滋味，编写不易，关注博主，分享更多内容呦',
        price: 3289,
        showPrice: '32.89',
        number: 1
      },
      {
        id: '111',
        img: 'https://img2.baidu.com/it/u=2681955314,221996905&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300',
        content: '努力学习，天天向上，进我主也查看更多内容',
        price: 2456,
        showPrice: '24.56',
        number: 2
      }, {
        id: '222',
        img: 'https://img-blog.csdnimg.cn/img_convert/0e449547f8e5354646f76af0d1b4800a.png',
        content: '关注博主，分享更多内容，欢迎批评指导',
        price: 3289,
        showPrice: '89.89',
        number: 5
      },
    ],
    totalMoney: '0.00',
    selectDatas: []
  },
  // 查看详情
  detailClick(e) {
    let data = e.currentTarget.dataset.item;
    wx.showToast({
      title: '点击了查看详情',
      icon: 'none'
    })
    console.log('详情数据：', data)
  },
  // 单选
  checkboxChange(e) {
    let money = 0,
      str = [];
    let attr = e.detail.value;
    let list = this.data.dataList;
    for (let i = 0; i < list.length; i++) {
      for (let k = 0; k < attr.length; k++) {
        if (list[i].id === attr[k]) {
          money += list[i].price * list[i].number;
          str.push(list[i]);
        }
      }
    }
    this.setData({
      selectDatas: str,
      totalMoney: (money / 100).toFixed(2),
      checkAll: (list.length == attr.length && list.length > 0) ? true : false
    })
  },
  // 全选
  checkboxChangeAll(e) {
    let money = 0,
      str = [];
    let val = e.detail.value;
    let list = this.data.dataList;
    if (val.length > 0) {
      for (let i = 0; i < list.length; i++) {
        money += list[i].price * list[i].number;
        str.push(list[i]);
      }
      this.setData({
        checked: true,
        selectDatas: str,
        totalMoney: (money / 100).toFixed(2)
      })
    } else {
      this.setData({
        checked: false,
        selectDatas: [],
        totalMoney: '0.00'
      })
    }
  },
  // 结算
  totalClick() {
    let list = this.data.selectDatas;
    if (list.length < 1) {
      wx.showToast({
        title: '无结算订单',
        icon: 'error'
      })
      return false;
    }
    wx.showModal({
      title: '提示',
      content: '确定结算当前订单吗？',
      complete: (res) => {
        if (res.confirm) {
          wx.showToast({
            title: '结算完成',
          })
        }
      }
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

2、wxml代码：

<view class="bg-color"></view>
<view class="car-box">
  <checkbox-group bindchange="checkboxChange">
    <view class="row-data" wx:for="{{dataList}}" wx:for-index="index" wx:key="item">
      <view class="row-btn">
        <checkbox value="{{item.id}}" checked="{{checked}}" />
      </view>
      <view class="row-list" bind:tap="detailClick" data-item="{{item}}">
        <view class="row-img">
          <image src="{{item.img}}" mode="aspectFill" />
        </view>
        <view class="row-info">
          <view class="row-text">{{item.content}}</view>
          <view class="row-price">
            <view>
              <text class="row-icon">￥</text>
              <text class="row-money">{{item.showPrice}}</text>
            </view>
            <view>
              <text class="btn">x{{item.number}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </checkbox-group>
</view>
<!-- 结算 -->
<view class="footer-box">
  <view>
    <checkbox-group bindchange="checkboxChangeAll">
      <label class="level">
        <checkbox value="all" checked="{{checkAll}}" />全选
      </label>
    </checkbox-group>
  </view>
  <view class="level">
    <view>
      <text>合计：</text>
      <text class="total-btn row-icon">￥</text>
      <text class="total-btn row-money">{{totalMoney}}</text>
    </view>
    <view class="total-end" bind:tap="totalClick">结 算</view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

3、wxss代码：

page {
  font-size: 32rpx;
  background-color: #f1f1f1;
}

.bg-color {
  background-color: #008B8B;
  height: 200rpx;
  width: 100%;
}

.car-box {
  min-height: 300rpx;
  border-radius: 20rpx;
  background-color: white;
  margin: -190rpx 20rpx 20rpx 20rpx;
  padding: 20rpx 10rpx;
}

.row-data {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20rpx;
}

.row-btn {
  width: 10%;
  text-align: center;
}

.row-list {
  width: 90%;
  display: flex;
  flex-direction: row;
}

.row-img {
  width: 30%;
  background-color: #f1f1f1;
}

.row-info {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20rpx;
}

.row-img image {
  width: 100%;
  height: 200rpx;
}

.row-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 30rpx;
}

.row-price {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.row-price view:first-child {
  color: #FA5422;
}

.row-icon {
  font-size: 26rpx;
}

.row-money {
  font-weight: bold;
}

.btn {
  padding: 5rpx 20rpx;
  font-size: 28rpx;
  color: gray;
}

checkbox {
  zoom: .8;
}

.footer-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 0 20rpx;
}

.level {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.total-btn {
  color: #FA5422;
}

.total-end {
  background-color: #008B8B;
  margin-left: 20rpx;
  padding: 15rpx 50rpx;
  border-radius: 50rpx;
  font-size: 30rpx;
  color: white;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

本示例代码较为简单，适合初学的友友们借鉴，编写不易，关注博主，分享更多实用好用示例代码给大家，谢谢大家的支持和指导。