小程序之购物车逻辑

￡神魔★判官ぃ 2021-09-16 00:12 441阅读 0赞

工作之余，写个小程序购物车

Cart.wxml

<view class="main">
        <view wx:if="{
       {hasList}}"> 
    
            <view class="cart-box">
                <view class="cart-list" wx:for="{
       {carts}}" wx:key="{
       {index}}">
                    <icon wx:if="{
       {item.selected}}" type="success" color="red" data-index="{
       {index}}"  class="cart-pro-select" bindtap="selectList"/>
                    <icon wx:else type="circle" class="cart-pro-select" data-index="{
       {index}}" bindtap="selectList"/>
    
    
                    <navigator url="../details/details?id={
       {item.id}}"><image class="cart-thumb" src="{
       {item.image}}"></image></navigator>
                    <text class="cart-pro-name">{
       {item.title}}</text>
                    <text class="cart-pro-price">￥{
       {item.price}}</text>
                    <view class="cart-count-box">
    
                        <text class="cart-count-down" bindtap="minusCount" data-obj="{
       {obj}}" data-index="{
       {index}}">-</text>
                        <text class="cart-count-num">{
       {item.num}}</text>
                        <text class="cart-count-add" bindtap="addCount" data-index="{
       {index}}">+</text>
                    </view>
                    <text class="cart-del" bindtap="deleteList" data-index="{
       {index}}">×</text>
                </view>
            </view>
    
            <view class="cart-footer">
    
                <icon wx:if="{
       {selectAllStatus}}" type="success_circle" color="#fff" class="total-select" bindtap="selectAll"/>
                <icon wx:else type="circle" color="#fff" class="total-select" bindtap="selectAll"/>
    
    
                <view class="order-icon">
                    <navigator url="../orders/orders"><image src="/image/icon3.png"></image></navigator>
                </view>
    
                <text>全选</text>
                <text class="cart-toatl-price">￥{
       {totalPrice}}</text>
            </view>
        </view>
    
        <view wx:else>
            <view class="cart-no-data">购物车是空的哦~</view>
        </view>
    </view>

Cart.wxss

.cart-box{
        padding-bottom: 100rpx;
    }
    .cart-list{
        position: relative;
        padding: 20rpx 20rpx 20rpx 285rpx;
        height: 185rpx;
        border-bottom: 1rpx solid #e9e9e9;
    }
    .cart-list .cart-pro-select{
        position: absolute;
        left: 20rpx;
        top: 90rpx;
        width: 45rpx;
        height: 45rpx;
    }
    
    .cart-list .cart-thumb{
        position: absolute;
        top: 20rpx;
        left: 85rpx;
        width: 185rpx;
        height: 185rpx;
    }
    .cart-list .cart-pro-name{
        display: inline-block;
        width: 300rpx;
        height: 105rpx;
        line-height: 50rpx;
        overflow: hidden;
    }
    .cart-list .cart-pro-price{
        display: inline-block;
        float: right;
        height: 105rpx;
        line-height: 50rpx;
    }
    .cart-list .cart-count-box{
        position: absolute;
        left: 285;
        bottom: 20rpx;
        width: 250rpx;
        height: 80rpx;
    }
    .cart-list .cart-count-box text{
        display: inline-block;
        line-height: 80rpx;
        text-align: center;
    }
    .cart-count-down,.cart-count-add{
        font-size: 44rpx;
        width: 50rpx;
        height: 100%;
    }
    .cart-count-num{
        width: 150rpx;
    }
    .cart-del{
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
        width: 80rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 44rpx;
    }
    .cart-footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        padding:0 100rpx 0 80rpx;
        box-sizing: border-box;
        background: #AB956D;
        color: #fff;
    }
    .total-select{
        position: absolute;
        left: 20rpx;
        top: 25rpx;
        width: 45rpx;
        height: 45rpx;
    }
    .order-icon{
        position: absolute;
        right: 40rpx;
        top: 25rpx;
        width: 45rpx;
        height: 45rpx;
    }
    .order-icon image,.order-icon navigator{
      display: block;
      width: 45rpx;
      height: 45rpx;
    }
    .cart-toatl-price{
        float: right;
        width: 120rpx;
    }
    
    .cart-no-data{
        padding:40rpx 0;
        color: #999;
        text-align: center;
    }

Cart.js

Page({
      data: {
        carts:[],               // 购物车列表
        hasList:false,          // 列表是否有数据
        totalPrice:0,           // 总价，初始为0
        selectAllStatus:true,    // 全选状态，默认全选
        obj:{
            name:"hello"
        }
      },
      onShow() {
        this.setData({
          hasList: true,
          carts:[
            {id:1,title:'新鲜芹菜 半斤',image:'/image/s5.png',num:4,price:0.01,selected:true},
            {id:2,title:'素米 500g',image:'/image/s6.png',num:1,price:0.03,selected:true}
          ]
        });
        this.getTotalPrice();
      },
      /**
       * 当前商品选中事件
       */
      selectList(e) {
        console.log(e)
        const index = e.currentTarget.dataset.index;
        let carts = this.data.carts;
        const selected = carts[index].selected;
        carts[index].selected = !selected;
        this.setData({
          carts: carts
        });
        this.getTotalPrice();
      },
    
      /**
       * 删除购物车当前商品
       */
      deleteList(e) {
        const index = e.currentTarget.dataset.index;
        let carts = this.data.carts;
        carts.splice(index,1);
        this.setData({
          carts: carts
        });
        if(!carts.length){
          this.setData({
            hasList: false
          });
        }else{
          this.getTotalPrice();
        }
      },
    
      /**
       * 购物车全选事件
       */
      selectAll(e) {
        let selectAllStatus = this.data.selectAllStatus;
        selectAllStatus = !selectAllStatus;
        let carts = this.data.carts;
    
        for (let i = 0; i < carts.length; i++) {
          carts[i].selected = selectAllStatus;
        }
        this.setData({
          selectAllStatus: selectAllStatus,
          carts: carts
        });
        this.getTotalPrice();
      },
    
      /**
       * 绑定加数量事件
       */
      addCount(e) {
        const index = e.currentTarget.dataset.index;
        let carts = this.data.carts;
        let num = carts[index].num;
        num = num + 1;
        carts[index].num = num;
        this.setData({
          carts: carts
        });
        this.getTotalPrice();
      },
    
      /**
       * 绑定减数量事件
       */
      minusCount(e) {
        const index = e.currentTarget.dataset.index;
        const obj = e.currentTarget.dataset.obj;
        let carts = this.data.carts;
        let num = carts[index].num;
        if(num <= 1){
          return false;
        }
        num = num - 1;
        carts[index].num = num;
        this.setData({
          carts: carts
        });
        this.getTotalPrice();
      },
    
      /**
       * 计算总价
       */
      getTotalPrice() {
        let carts = this.data.carts;                  // 获取购物车列表
        let total = 0;
        for(let i = 0; i<carts.length; i++) {         // 循环列表得到每个数据
          if(carts[i].selected) {                     // 判断选中才会计算价格
            total += carts[i].num * carts[i].price;   // 所有价格加起来
          }
        }
        this.setData({                                // 最后赋值到data中渲染到页面
          carts: carts,
          totalPrice: total.toFixed(2)
        });
      }
    
    })

![70][]

效果图如上。有需要的朋友直接复制代码，直接可以运行（**图片之类的记得更换**）

欢迎大家一起交流~~~~

[70]: /images/20210908/d4c45205c38b4c9787238d391600fdd2.png