微信小程序---购物车模块

电玩女神 2022-04-13 11:25 956阅读 0赞

本文章以一个购物车页面为例，介绍购物车页面的实现逻辑。如商品加减，商品数量显示，商品删除、商品选择、商品总价计算等。先上图：（文章结尾附上完整源码）![这是购物车里面有商品的时候][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTgxNTAwMQ_size_16_color_FFFFFF_t_70]

![购物车为空时][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTgxNTAwMQ_size_16_color_FFFFFF_t_70 1]  
页面排版不多说，看个人喜好决定。主要讲讲js部分。  
1.商品数量＋

/** * 绑定加数量事件 */
      addCount(e) { 
        const index = e.currentTarget.dataset.index;
        let car = this.data.cars;
        car[index].num = ++car[index].num;
        this.setData({ 
          cars: car
        });
        this.getTotalPrice();
      },

1.1，购物车页面的数据是使用wx:for循环出来的，所以首先要拿到你想操作的那条数据的键

const index = e.currentTarget.dataset.index;

1.2，获取整个数组。

let car = this.data.cars;

1.3 将数组里对应那条数据中的商品数量加一

car[index].num = ++car[index].num;

1.4 改变数据

this.setData({ 
      cars: car
    });

1.5 调用计算总价方法，改变购物车总价。

this.getTotalPrice();

2.计算购物车总价

/** * 计算总价 */
      getTotalPrice() { 
        let car = this.data.cars;                  // 获取购物车列表
        let total = 0;
        for (let i = 0; i < car.length; i++) {          // 循环列表得到每个数据
          if (car[i].selected) {                      // 判断选中才会计算价格
            total += car[i].num * car[i].price;   // 所有价格加起来
          }
        }
        this.setData({                                 // 最后赋值到data中渲染到页面
          cars: car,
          totalPrice: total.toFixed(2)
        });
      }

完整代码：

JS部分

// page/component/new-pages/cart/cart.js
    Page({ 
      data: { 
        cars: [],               // 购物车列表
        hasList: false,          // 列表是否有数据
        totalPrice: 0,           // 总价，初始为0
        selectAllStatus: true,    // 全选状态，默认全选
        obj: { 
          name: "hello"
        }
      },
      onShow() { 
        this.setData({ 
          hasList: true,
          cars: [
            {  id: 1, name: '黄金香蕉', image: '/img/xiangjiao1.jpg', num: 4, price: 122.50, selected: true },
            {  id: 2, name: '红玛瑙草莓', image: '/img/caomei1.jpg', num: 1, price: 10.08, selected: true }
          ]
        }),
        this.getTotalPrice();
      },
      // 点击商品图片进图商品详情
      details: function () { 
        wx.navigateTo({ 
          url: '/pages/details/details'
        });
      },
    
      // 选中当前商品
      selectThis(e) { 
        const index = e.currentTarget.dataset.index;
        let car = this.data.cars;
        // const selected = car[index].selected;
        car[index].selected = !car[index].selected;
        this.setData({ 
          cars: car
        });
        this.getTotalPrice();
      },
      // 全选商品事件
      selectAll(e) { 
        const selectAllStatus = !this.data.selectAllStatus;
        console.log(selectAllStatus);
        let car = this.data.cars;
        for(let i = 0;i<car.length;i++){ 
            car[i].selected = selectAllStatus;
        }
        this.setData({ 
          cars:car,
          selectAllStatus:selectAllStatus
        })
        this.getTotalPrice();
      },
    
      /** * 绑定加数量事件 */
      addCount(e) { 
        const index = e.currentTarget.dataset.index;
        let car = this.data.cars;
        car[index].num = ++car[index].num;
        this.setData({ 
          cars: car
        });
        this.getTotalPrice();
      },  
      
    /** * 绑定商品数量减少事件 * */ 
      jian(e){ 
        const index = e.currentTarget.dataset.index;
        let car = this.data.cars;
        if (car[index].num <= 1) { 
          return false;
        }
        car[index].num = --car[index].num;
        this.setData({ 
          cars: car
        });
        this.getTotalPrice();
      },
      // 删除商品事件
      del(e){ 
        const index = e.currentTarget.dataset.index;
        let car = this.data.cars;
        car.splice(index,1);
        this.setData({ 
          cars: car
        });
        this.getTotalPrice();
        if(!car.length){ 
          this.setData({ 
            hasList: false
          })
        }
      },
    
      /** * 计算总价 */
      getTotalPrice() { 
        let car = this.data.cars;                  // 获取购物车列表
        let total = 0;
        for (let i = 0; i < car.length; i++) {          // 循环列表得到每个数据
          if (car[i].selected) {                      // 判断选中才会计算价格
            total += car[i].num * car[i].price;   // 所有价格加起来
          }
        }
        this.setData({                                 // 最后赋值到data中渲染到页面
          cars: car,
          totalPrice: total.toFixed(2)
        });
      }
    
    })

WXML部分

<view class="main"> <swiper indicator-dots="true" autoplay="true" interval="{ { interval}}" duration="{ { duration}}" circular="true" class='swiper-box'> <block wx:for="{ { imgs}}" wx:key="{ { index}}"> <swiper-item> <image src="{ { item}}" class="slide-image" width="100%"/> </swiper-item> </block> </swiper> <view> <text class='name'>进口香蕉（份）（约1kg）</text> <text class='describe'>商品描述，我很黄，但不暴力</text> </view> <view class='price'> <text id='icon'>￥<text id='jiage'>8.99</text></text> </view> <view class='xiangqing'> <text class='fenge'></text> </view> <view class="goods-tab-box"> <view class="goods-nav { { curIndex === 0 ?'on':''}}" bindtap="bindTap" data-index="0">商品详情</view> <view class="goods-nav { { curIndex === 1 ?'on':''}}" bindtap="bindTap" data-index="1">产品参数</view> <view class="goods-nav { { curIndex === 2 ?'on':''}}" bindtap="bindTap" data-index="2">售后保障</view> <view class="goods-content"> <view wx:if="{ { curIndex === 0}}">{ { goods.detail}}</view> <view wx:if="{ { curIndex === 1}}">{ { goods.parameter}}</view> <view wx:if="{ { curIndex === 2}}">{ { goods.service}}</view>
            </view>
        </view>
    
        <view class='add'>
          <image src='/img/tab33.png'></image>
          <button>加入购物车</button>
        </view>
    </view>

WXSS部分

.goods{ 
      width: 100%;
      height: 230rpx;
      /* background: red; */
      position: relative;
      border: 1rpx solid silver;
    }
    .icon{ 
       position: absolute;
        left: 14rpx;
        top: 80rpx;
        width: 45rpx;
        height: 45rpx;
    }
    .goods-img{ 
       width: 180rpx;
      height: 180rpx;
      /* border-radius: 200rpx; */
      margin-top: 12rpx;
      margin-left: 74rpx;
    }
    .goods-name{ 
        display: inline-block;
        line-height: 50rpx;
        overflow: hidden;
        position: fixed;
        margin: 40rpx 0 0 30rpx;
    }
    .price{ 
      display: inline-block;
      float: right;
      margin: 40rpx 30rpx 0 0;
    }
    .btn-box button{ 
      width: 60rpx;
      height: 60rpx;
      line-height: 66rpx;
      display: inline-block;
        /* border-radius: 20rpx; */
    }
    .goods-num{ 
      display:inline-block;
      border:1rpx;
      width:80rpx;
      height:60rpx;
      line-height:60rpx;
      text-align:center;
      vertical-align:top;
    
    }
    .btn-box{ 
      width: 410rpx;
      position: absolute;
      left: 280rpx;
      bottom: 20rpx;
    }
    .del{ 
      float: right;
    }
    
    
    /* 底部footer相关 */
    .footer{ 
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        padding:0 0 0 10rpx;
        box-sizing: border-box;
        background: rgb(233, 233, 233);
        font-size: 32rpx;
    }
    .footer-left{ 
      width: 133rpx;
      float: left;
      margin-left:10rpx; 
    }
    .footer-left icon{ 
      vertical-align:top;
      padding: 20rpx 0;
    }
    .footer-left text{ 
      float: right;
    }
    
    .footer-right{ 
      width: 340rpx;
      float: right;
      margin-left:10rpx; 
    }
    /* .footer-right button{ float: right; width: 100rpx; } */
    .jiesuan{ 
      width: 120rpx;
      background: #CD2626;
      float: right;
    
      text-align:center;
    }
    
    
    
    /* 没有数据时显示 */
    .no-data{ 
      padding: 40rpx 0;
      color: #999;
      text-align: center;
    }

最后附上我的小程序demo源码地址:https://github.com/Yxiaogg/vioShop  
大家一起学习小程序呀\_，欢迎讨论哦

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTgxNTAwMQ_size_16_color_FFFFFF_t_70]: /images/20220413/e5cf619f22c04450835d25b994a94e69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTgxNTAwMQ_size_16_color_FFFFFF_t_70 1]: /images/20220413/e6e88125165446f098669dac2b55fbe3.png