微信小程序类似购物车列表效果,计算总共价格数量,加减商品计算,滑动删除

先看下效果图:


一个小demo,记录下。

html:

<!--pages/mycollect/mycollect.wxml-->
<!--最外层大盒子  -->
<view class="collect_big_box">
  <!--列表盒子  -->
  <view class="collect_list_box">
    <scroll-view bindscrolltolower="lower" scroll-y="true" style="height: 990rpx;">

      <!--中部搜索结果列表盒子-->

      <view class="recordList_box">
        <!--外层大盒子  -->
        <view class="content_box" wx:for="{{arr}}" wx:key="{{key}}">
          <!--中部盒子  -->
          <view class="view_ce">
            <view style="{{item.txtStyle}}" class="content_box_center" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}">
              <!--图片盒子  -->
              <view class="ProductIco_box">
                <image class="ProductIco" src="{{item.image}}"></image>
              </view>
              <!--内容  -->
              <view class="view_content">
                <view class='view_title'>{{item.title}}</view>
                <view class="view_fl">
                  <text>{{item.sort}}</text>
                  <text>{{item.color}}</text>
                  <!--价格和按钮  -->

                  <view class="view_btn_box">
                    <text>¥ {{item.price}}</text>
                    <!--产品数量不为 0 -->
                    <view class="view_btn" wx:if="{{item.state == 1}}">
                      <view class="view_img_left" bindtap='numminus' data-index="{{index}}">
                        <image src="../../images/icon_jian@2x.png"></image>
                      </view>
                      <!-- <view class="view_text_center"></view> -->
                      <input class="view_text_center" value="{{item.num}}" bindinput='input_num' data-index="{{index}}"></input>
                      <view class="view_img_right" bindtap='numadd' data-index="{{index}}">
                        <image src="../../images/icon_jia@2x.png"></image>
                      </view>
                    </view>
                    <!--产品数量为0  -->
                    <view class="view_add" wx:if="{{item.state == 0}}">
                      <view class="view_img_add" bindtap='showadd' data-index="{{index}}">
                        <image src="../../images/icon_jia@2x.png"></image>
                      </view>
                    </view>
                  </view>


                </view>
              </view>

            </view>
          </view>

          <!--删除按钮  -->
          <view class="delete_btn" bindtap='delete_btn' data-index="{{index}}">删除</view>
        </view>
      </view>

    </scroll-view>
  </view>
  <view class='buy_btn_box'>
    <view class="collect_bottom">
      <view class="collect_right">
        <text class="collect_one">共计{{add_car_num}}件商品</text>
        <text class="collect_two">¥ {{price}}</text>
      </view>
    </view>
    <view class='buy_btn'>
      <text>马上购买</text>
    </view>
  </view>
</view>

css:

/* pages/mycollect/mycollect.wxss */

page {
  background: #f5f5f5;
  height: 100%;
}

.collect_list_box {
  padding-top: 20rpx;
}

.collect_bottom {
  width: 100%;
  height: 80rpx;
  background: #fff;
  line-height: 80rpx;
}

.recordList_box {
  box-sizing: border-box;
  /* background: #ffffff; */
}

.content_box {
  /* border-top: 1rpx solid #dcdcdc; */
    border-bottom: 1rpx solid #ececec;
  position: relative;
}

.ProductIco_box {
  width: 130rpx;
  height: 130rpx;
  border-radius: 5px;
  border: 1rpx solid #ececec;
  margin-right: 18rpx;
  float: left;
}

.ProductIco {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.view_ce {
  width: 100%;
  height: 130rpx;
  position: relative;
  padding-top: 20rpx;
  padding-bottom: 30rpx;
  /* background: red;  */
  border-bottom: 1rpx solid #ececec;
}

.content_box_center {
  width: 100%;
  padding: 0rpx 20rpx 30rpx 20rpx;
  padding-top: 20rpx;
  /* margin-bottom: 30rpx; */
  height: 182rpx;
  z-index: 2;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-bottom: 1rpx solid #ececec;
}

.view_content {
  float: left;
  width: 556rpx;
}

.view_title {
  display: inline-block;
  float: left;
  width: 556rpx;
  font-size: 28rpx;
  color: #393939;
}

.view_fl>text {
  font-size: 22rpx;
  color: #898989;
  margin-right: 18rpx;
}

.view_btn_box>text {
  font-size: 28rpx;
  color: #f55212;
}

.view_btn {
  width: 150rpx;
  height: 44rpx;
  border: 1px solid #cecece;
  border-radius: 5px;
  float: right;
  font-size: 22rpx;
  color: #898989;
  line-height: 44rpx;
  /* display: none; *//* margin-bottom: 5rpx; */
}

.view_text_center, .view_img_left, .view_img_right {
  float: left;
}

.view_img_left, .view_img_right {
  width: 44rpx;
  height: 44rpx;
}

.view_img_left {
  border-right: 1rpx solid #cecece;
}

.view_img_right {
  border-left: 1rpx solid #cecece;
}

.view_text_center {
  width: 58rpx;
  height: 44rpx;
  text-align: center;
  line-height: 44rpx;
  box-sizing: border-box;
  font-size: 22rpx;
  color: #898989;
}

.view_btn image {
  width: 100%;
  height: 100%;
}

.view_add {
  width: 44rpx;
  height: 44rpx;
  border: 1px solid #cecece;
  border-radius: 5px;
  float: right;
  font-size: 22rpx;
  color: #898989;
  line-height: 44rpx;
  /* margin-bottom: 5rpx; */
}

.view_img_add {
  width: 44rpx;
  height: 44rpx;
}

.view_add image {
  width: 100%;
  height: 100%;
}

.delete_btn {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 32rpx;
  background: #ff3b30;
  width: 134rpx;
  height: 100%;
  text-align: center;
  line-height: 175rpx;
  /* border-bottom: 1px solid #ff3b30; */
  color: #fff;
  z-index: 1;
}
.collect_one {
  font-size: 28rpx;
  color: #393939;
}
.collect_two {
  margin-left: 20rpx;
  font-szie:32rpx;
  color:  #393939;
  margin-right: 20rpx;
}
 .collect_right {
 margin: 0 auto;
} 
.buy_btn_box {
  width: 100%;
  height: auto;
  text-align: center;
  background: #fff;
}
.buy_btn {
  width: 710rpx;
  height: 88rpx;
  background: #1da1f2;
  margin: 0 auto;
  font-size: 30rpx;
  line-height: 88rpx;
  color: #fff;
  text-align: center;
   display: flex;
   border-radius:5px; 
}
.buy_btn:active {
  background: red;
}
.buy_btn>text {
   margin: 0 auto;
}
.collect_big_box {
  width: 100%;
  height: 100%;
   /* position: relative;  */
}
  .buy_btn_box {
  position: fixed;
  left: 0;
   bottom: 0; 
   padding-bottom: 24rpx; 
  z-index: 999;
 }   

js:

// pages/mycollect/mycollect.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr: '',//存储请求回来的数组
    ini: 0,
    uhide: '',
    add_car_num: 0,//控制是否初次进入界面
    delBtnWidth: 134,//删除按钮宽度单位(rpx)
    price:'0.00'//价钱
  },
  // 滚动到底部
  lower:function(){
    console.log("我到了底部")
  },
  //删除
  delete_btn:function(e){
    var that = this;
    var index = e.currentTarget.dataset.index;
    wx.showModal({
      // title: '提示',
      content: '删除后不能恢复,是否删除?',
      confirmColor:'#1da1f2',
      success: function (res) {
        if (res.confirm) {
          console.log(index)
          var list = that.data.arr;
          //移除列表中下标为index的项  
          list.splice(index, 1);
          //更新列表的状态  
          that.setData({
            arr: list
          });
          let carts = that.data.arr;
          // var _this = this;
          var sum = 0;
          for (var i = 0; i < carts.length; i++) {
            var QC = that.data.arr[i].num;
            sum += parseFloat(QC);
          }
          // console.log(sum);
          var price = 0;
          if (sum > 0) {
            for (var i = 0; i < carts.length; i++) {
              var QB = that.data.arr[i].price;
              var QR = that.data.arr[i].num;

              price += parseFloat(QB * QR);
            }
          }
          // console.log(price)

          that.setData({
            add_car_num: sum,
            price: price
          })
          


        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  
  },
  
  //手动输入数量
  input_num: function (e) {
    var _this = this;
    const index = e.currentTarget.dataset.index;
    let input_num = e.detail.value;//手动输入
    let carts = this.data.arr;
    let num = carts[index].num;//数量
    carts[index].num = input_num;
    this.setData({
      arr: carts
    });
    var sum = 0;
    for (var i = 0; i < carts.length; i++) {
      if (_this.data.arr[i].num == "") {
        _this.data.arr[i].num = 0;
      }
      var QC = _this.data.arr[i].num;
      sum += parseFloat(QC);
    }
    if (sum <= 0) {
      this.setData({
        ico_num: 0
      });
    } else {
      this.setData({
        ico_num: 1
      });
    }
    var price = 0;
    if (sum > 0) {
      for (var i = 0; i < carts.length; i++) {
        var QB = _this.data.arr[i].price;
        var QR = _this.data.arr[i].num;

        price += QB * QR;
      }
    } 
    this.setData({
      add_car_num: sum,
      price: price.toFixed(2)
    })

  },
  //数量加函数
  numadd: function (e) {
    var _this = this;
    const index = e.currentTarget.dataset.index;
    let carts = this.data.arr;
    let num = carts[index].num;//数量
    num = num + 1;
    carts[index].num = num;
    this.setData({
      arr: carts
    });
    var sum = 0;
    for (var i = 0; i < carts.length; i++) {
      var QC = _this.data.arr[i].num;
      sum += parseFloat(QC);
    }
    // console.log(sum);
    var price = 0;
    if (sum > 0) {
      for (var i = 0; i < carts.length; i++){
        var QB = _this.data.arr[i].price;
        var QR = _this.data.arr[i].num;
        
        price += QB * QR ;
      }
    } 
    console.log(price.toFixed(2))

    this.setData({
      add_car_num: sum,
      price: price.toFixed(2)
    })
  },
  //数量减函数
  numminus: function (e) {
    const index = e.currentTarget.dataset.index;
    // console.log(index)
    let carts = this.data.arr;
    // console.log(carts[index].num)
    let _this = this;
    let num = carts[index].num;
    if (num <= 1) {
      const index = e.currentTarget.dataset.index;
      let carts = this.data.arr;
      let state = carts[index].state;//是否初次进入状态
      state = 0;
      carts[index].state = state;
      carts[index].num = 0;
      console.log(carts[index].num)
      this.setData({
        arr: carts,
      });
    } else {
      num = num - 1;
      carts[index].num = num;
      this.setData({
        arr: carts,
      });
    }
    var sum = 0;
    for (var i = 0; i < carts.length; i++) {

      var QC = _this.data.arr[i].num;
      sum += parseFloat(QC);
    }
    if (sum <= 0) {
      this.setData({
        ico_num: 0
      });
    } else {
      this.setData({
        ico_num: 1
      });
    }
    var price = 0;
    if (sum > 0) {
      for (var i = 0; i < carts.length; i++) {
        var QB = _this.data.arr[i].price;
        var QR = _this.data.arr[i].num;

        price += QB * QR;
      }
    }

    this.setData({
      add_car_num: sum,
      price: price.toFixed(2)
    });



  },
  // 产品数量为零时方法
  showadd: function (e) {
    var _this = this;
    const index = e.currentTarget.dataset.index;
    // console.log(index)
    let carts = this.data.arr;
    // console.log(carts[index].state)
    let num = carts[index].num;
    let state = carts[index].state;
    state = 1;
    carts[index].state = state;
    carts[index].num = 1;
    var sum = 0;
    for (var i = 0; i < carts.length; i++) {

      var QC = _this.data.arr[i].num;
      sum += parseFloat(QC);
    }
    if (sum <= 0) {
      this.setData({
        ico_num: 0
      });
    } else {
      this.setData({
        ico_num: 1
      });
    }
    var price = 0;
    if (sum > 0) {
      for (var i = 0; i < carts.length; i++) {
        var QB = _this.data.arr[i].price;
        var QR = _this.data.arr[i].num;

        price += QB * QR;
      }
    }

    this.setData({
      arr: carts,
      add_car_num: sum,
      price: price.toFixed(2)
    });

  },
  //手指刚放到屏幕触发
  touchS: function (e) {
    // console.log(e);
    //判断是否只有一个触摸点
    if (e.touches.length == 1) {
      this.setData({
        //记录触摸起始位置的X坐标
        startX: e.touches[0].clientX
      });
    }
  },
  //触摸时触发,手指在屏幕上每移动一次,触发一次
  touchM: function (e) {
    // console.log(e);
    var that = this
    if (e.touches.length == 1) {
      //记录触摸点位置的X坐标
      var moveX = e.touches[0].clientX;
      //计算手指起始点的X坐标与当前触摸点的X坐标的差值
      var disX = that.data.startX - moveX;
      //delBtnWidth 为右侧按钮区域的宽度
      var delBtnWidth = that.data.delBtnWidth;
      var txtStyle = "";
      if (disX == 0 || disX < 0) {//如果移动距离小于等于0,文本层位置不变
        txtStyle = "left:0rpx";
      } else if (disX > 0) {//移动距离大于0,文本层left值等于手指移动距离
        txtStyle = "left:-" + disX + "rpx";
        if (disX >= delBtnWidth) {
          //控制手指移动距离最大值为删除按钮的宽度
          txtStyle = "left:-" + delBtnWidth + "rpx";
        }
      }
      //获取手指触摸的是哪一个item
      var index = e.currentTarget.dataset.index;
      var list = that.data.arr;
      //将拼接好的样式设置到当前item中
      list[index].txtStyle = txtStyle;
      //更新列表的状态
      this.setData({
        arr: list
      });
    }
  },
  touchE: function (e) {
    // console.log(e);
    var that = this
    if (e.changedTouches.length == 1) {
      //手指移动结束后触摸点位置的X坐标
      var endX = e.changedTouches[0].clientX;
      //触摸开始与结束,手指移动的距离
      var disX = that.data.startX - endX;
      var delBtnWidth = that.data.delBtnWidth;
      //如果距离小于删除按钮的1/2,不显示删除按钮
      var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";
      //获取手指触摸的是哪一项
      var index = e.currentTarget.dataset.index;
      var list = that.data.arr;
      list[index].txtStyle = txtStyle;
      //更新列表的状态
      that.setData({
        arr: list
      });
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: '我的收藏'
    })
    var This = this;
    //请求接口
    wx.request({
      url: 'http://192.168.1.222:8081/StaticPage/searchlist.json', //仅为示例,并非真实的接口地址
      method: 'GET',
      data: {},
      success: function (res) {
        console.log(res.data.links)
        This.setData({
          arr: res.data.links
        })
      },
      fail: function (err) {
        console.log(err)
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})


  • 4
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值