小程序全套购物车（全选，单选，反选，删除，价格计算）

<!-- 最外层视图pages -->
<view class="pages">
 
  <view wx:if="{{hasList}}">
    <!-- 编辑 -->
      <view class='cartHeader'>
        <view class='logo'>
            <image src='http://192.168.3.30/images/imageTu/logo.png'></image>
            <text>天兰茶府自营</text>
        </view>
        <view class='edit'>
          <label class='edit_btn' bindtap='btn_edit'>{{edit_name}}</label>
      </view>
      </view>
      <!-- 列表 -->
      <view class="list" wx:for="{{list}}" wx:key="{{index}}">
      
        <image class='dele_edit' bindtap='deletes' data-index='{{index}}' style='display:{{edit_show}}' src='http://192.168.3.30/images/imageTu/enshrine.png'></image>
        <!-- radio选择IOCN -->
        <icon wx:if="{{item.selected}}"   type="success" color="#405A8F;" data-index="{{index}}" size='18' class="radio_chek" bindtap="selectList" />
        <icon wx:else type="circle" class="radio_chek" data-index="{{index}}"  size='18' bindtap="selectList" />
 
        <!-- 列表标题 -->
        <text class="list_name">{{item.title}}</text>
        <!-- 列表商品图片 -->
        <image class="list_img" src="{{item.image}}"></image>
        <!-- 规格 -->
        <text class="cart_g_name">规格 : {{item.pro_name}}</text>
    
        <!-- 价格 -->
        <text class="list_price">￥{{item.price}}</text>
        <!-- 商品数量加减  style='display:{{show_edit}}'-->
        <view style='display:{{show_edit}}'>
        <view class="carts-num">
          <!--减按钮  -->
          <lable class="minus" bindtap="btn_minus" data-obj="{{obj}}" data-index="{{index}}">-</lable>
          <!-- 文本框值 -->
   
          <label class="view_text_center"  bindinput='input_num' data-index="{{index}}">{{item.num}}</label>
          <!-- 加按钮-->
          <lable class="plus" bindtap="btn_add" data-index="{{index}}">+</lable>
        </view></view>
     </view>
     
   </view>
   
  <view wx:else>
    <view class="list_none">购物车是空的哦~</view>
  </view>
 
</view>


  <!-- 固定底部 -->
  <view class="cont_bot">
       <!-- 全选ICON -->
      <icon wx:if="{{selectAllStatus}}"   type="success" color="#405A8F;" size='20' class="total-select" bindtap="selectAll" />
      <!-- else -->
      <icon wx:else type="circle" color="#999" class="total-select" size='20' bindtap="selectAll" />
         <!-- 全选标题 -->
      <text class='sel_count_name'>全选</text>
      <!-- 合计金额 -->
      <lable class="count_price">
        <view> <text>不含运费</text></view>
        <view>
           合计：<text>￥{{totalPrice}}</text>
        </view>
      </lable>
      <!-- 提交订单 -->
      <label class='submit' bindtap='btn_submit_order'>去结算（1）</label>
 </view>

page{
  height:100%;
}
.pages{
  background:#f3f3f3;
  width:100%;
  min-height:100%;
  border:1px solid transparent;
}
.pages>view{
  width:90%;
  margin: 30rpx auto;
  background: #fff;
  border-radius:25rpx;
  border:1px solid transparent;
  padding-bottom:30rpx;
}
/* 列表 */
.list{
    position: relative;
    width: 100%;
    height: 185rpx;
    /* border-bottom: 1rpx solid #e9e9e9; */
    background: #FAFAFA;
    margin-top:20rpx;
}
/* 编辑 */
.cartHeader{
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding:10rpx 30rpx;
  border:1px solid transparent;
  position: relative;
}
.cartHeader .logo image{
  width:30rpx;
  height:30rpx;
  display: inline-block;
  vertical-align: middle;
}
.cartHeader .logo text{
  display: inline-block;
  vertical-align: middle;
  font-size:28rpx;
  font-family:NotoSansHans-Regular;
  font-weight:400;
  color:rgba(48,48,48,1);
  margin-left:15rpx;
}
.edit{
  height:60rpx;
  line-height:70rpx;
  font-size:24rpx;
}
/* 删除 */
.dele_edit{
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  right: 30rpx;
  bottom: 25rpx;
}
/* 编辑标题 */
.edit_btn{
    position: absolute;
    font-size: 24rpx;
    color: #36A661;
    right: 30rpx;
}
/* 单选状态 */
.radio_chek{
    position: absolute;
    left: 30rpx;
    top: 70rpx;
    width:37rpx;
    height: 37rpx;
}
/* 列表商品图片 */
.list_img{
    position: absolute;
    top: 38rpx;
    left: 100rpx;
    width:118rpx;
    height:118rpx;

}
/* 列表规格 */
.cart_g_name{
    position: absolute;
    left: 280rpx;
    font-size: 26rpx;
    color: #aaa;
    top: 75rpx;
}
/* 收藏 */
.collert{
    position: absolute;
    font-size: 28rpx;
    right: 40rpx;
    top: 30rpx;
}
/* 收藏图标 */
.collert_img{
    position: relative;
    top: 2rpx;
    width: 28rpx;
    height: 28rpx;
}
/* 列表商品名称 */
.list_name{
    position: absolute;
    left: 280rpx;
    top: 30rpx;
    width: 350rpx;
    /* background-color: red; */
    font-size: 30rpx;
    overflow: hidden;    
    text-overflow:ellipsis;    
    white-space: nowrap;
}
/* 列表商品价格 */
.list_price{
    position: absolute;
    font-size: 30rpx;
    color:  #3CA65E;
    left: 280rpx;
    bottom: 20rpx;
}
 
/* 列表商品删除 */
.list_del{
    position: absolute;
    right: 220rpx;
    bottom: 20rpx;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    font-size: 44rpx;
}
/* 固定底部 */
.cont_bot{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 104rpx;
    line-height:104rpx;
    background: #fff;
    border-top: 2rpx solid #ebebeb;
}
/* 全选ICON */
.total-select{
    position: absolute;
    left: 30rpx;
    top: 30rpx;
    width: 40rpx;
    height: 40rpx;
}
/* 全选标题 */
.sel_count_name{
    position: absolute;
    left: 90rpx;
    top: 6rpx;
    font-size: 30rpx;
    color: #333;
}
 
/* 合计金额 */
.count_price{
    position: absolute;
    font-size:28rpx;
    left: 230rpx;
    color: #aaa;
}
.count_price > view{
    height:50rpx;
    line-height:50rpx;
    color:#231D1E;
}
.count_price > view:first-child text{
  float:right;
  font-size:24rpx;
  color:#5D5D5D;
}
.count_price  view:last-child text{
    font-size: 30rpx;
    color: #3CA65E;
}
/* 购物车为空 */
.list_none{
    padding:40rpx 0;
    color: #999;
    text-align: center;
}
/* 提交 */
.submit{
    position: absolute;
    width: 274rpx;
    height: 104rpx;
    line-height: 104rpx;
    right: 0rpx;
    font-size: 30rpx;
    text-align: center;
    color:#fff;
    background:linear-gradient(90deg,rgba(123,202,110,1) 0%,rgba(47,163,93,1) 100%);
}
.navigator-hover{
    background: none;
}
 
 
 
 
/*数量加减*/
.carts-num{
    position: absolute;
    right: 30rpx;
    bottom: 23rpx;
    /* background-color: red; */
    display: flex; 
    align-items: center; 
    text-align: center;
      height: 50rpx;
}
.view_text_center{
    border: 1rpx solid #ebebeb;
    font-size: 30rpx;  
    display: inline-block;
    color: #333;
    height: 50rpx;
    line-height: 50rpx;width: 76rpx;
}
.carts-num .minus, .carts-num .plus{
    margin: 10rpx; 
    border: 1rpx solid #ebebeb;
    color: #000;
    text-align: center;
    height: 50rpx; 
    line-height: 50rpx;
    width: 40rpx;
}
.carts-num .minus{font-size: 34rpx;}
/* .carts-num .minus.disabled{color: red;} */
.carts-num .plus{font-size: 34rpx;}

var numbers = 1;
var bool = true;
Page({
  data: {
    show_edit: "block",
    edit_name: "编辑",
    edit_show: "none",
    // list: [],               // 购物车列表
    // hasList: false,          // 列表是否有数据
    // 默认展示数据
    hasList: true,
    // 商品列表数据
    list: [{
      id: 1,
      title: '园艺大师抗皱精华露园艺大师抗皱精华露园艺大师抗皱精华露',
      image: '../../images/cup.png',
      pro_name: "30ml",
      num: 1,
      price: 180,
      selected: true
    },
    {
      id: 2,
      title: '伊芙琳玫瑰护手霜',
      image: '../../images/cup.png',
      pro_name: "25g",
      num: 1,
      price: 62,
      selected: true
    },
    {
      id: 2,
      title: '燕麦山羊乳舒缓护手霜',
      image: '../../images/cup.png',
      pro_name: "75ml",
      num: 1,
      price: 175,
      selected: true
    }
    ],
    // 金额
    totalPrice: 0, // 总价，初始为0
    // 全选状态
    selectAllStatus: true, // 全选状态，默认全选
  },

  onShow() {
    wx.showToast({
      title: '加载中',
      icon: "loading",
      duration: 1000
    })

    // 价格方法
    this.count_price();
  },
  /**
   * 当前商品选中事件
   */
  selectList(e) {
    var that = this;
    // 获取选中的radio索引
    var index = e.currentTarget.dataset.index;
    // 获取到商品列表数据
    var list = that.data.list;
    // 默认全选
    that.data.selectAllStatus = true;
    // 循环数组数据，判断----选中/未选中[selected]
    list[index].selected = !list[index].selected;
    // 如果数组数据全部为selected[true],全选
    for (var i = list.length - 1; i >= 0; i--) {
      if (!list[i].selected) {
        that.data.selectAllStatus = false;
        break;
      }
    }
    // 重新渲染数据
    that.setData({
      list: list,
      selectAllStatus: that.data.selectAllStatus
    })
    // 调用计算金额方法
    that.count_price();
  },
  // 编辑
  btn_edit: function () {
    var that = this;
    if (bool) {
      that.setData({
        edit_show: "block",
        edit_name: "取消",
        show_edit: "none"
      })
      bool = false;
    } else {
      that.setData({
        edit_show: "none",
        edit_name: "编辑",
        show_edit: "block"
      })
      bool = true;
    }

  },
  // 删除
  deletes: function (e) {
    var that = this;
    // 获取索引
    const index = e.currentTarget.dataset.index;
    // 获取商品列表数据
    let list = this.data.list;
    wx.showModal({
      title: '提示',
      content: '确认删除吗',
      success: function (res) {
        if (res.confirm) {
          // 删除索引从1
          list.splice(index, 1);
          // 页面渲染数据
          that.setData({
            list: list
          });
          // 如果数据为空
          if (!list.length) {
            that.setData({
              hasList: false
            });
          } else {
            // 调用金额渲染数据
            that.count_price();
          }
        } else {
          console.log(res);
        }
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },



  /**
   * 购物车全选事件
   */
  selectAll(e) {
    // 全选ICON默认选中
    let selectAllStatus = this.data.selectAllStatus;
    // true  -----   false
    selectAllStatus = !selectAllStatus;
    // 获取商品数据
    let list = this.data.list;
    // 循环遍历判断列表中的数据是否选中
    for (let i = 0; i < list.length; i++) {
      list[i].selected = selectAllStatus;
    }
    // 页面重新渲染
    this.setData({
      selectAllStatus: selectAllStatus,
      list: list
    });
    // 计算金额方法
    this.count_price();
  },

  /**
   * 绑定加数量事件
   */
  btn_add(e) {
    // 获取点击的索引
    const index = e.currentTarget.dataset.index;
    // 获取商品数据
    let list = this.data.list;
    // 获取商品数量
    let num = list[index].num;
    // 点击递增
    num = num + 1;
    list[index].num = num;
    // 重新渲染 ---显示新的数量
    this.setData({
      list: list
    });
    // 计算金额方法
    this.count_price();
  },
  
  /**
   * 绑定减数量事件
   */
  btn_minus(e) {
    //   // 获取点击的索引
    const index = e.currentTarget.dataset.index;
    // const obj = e.currentTarget.dataset.obj;
    // console.log(obj);
    // 获取商品数据
    let list = this.data.list;
    // 获取商品数量
    let num = list[index].num;
    // 判断num小于等于1  return; 点击无效
    if (num <= 1) {
      return false;
    }
    // else  num大于1  点击减按钮  数量--
    num = num - 1;
    list[index].num = num;
    // 渲染页面
    this.setData({
      list: list
    });
    // 调用计算金额方法
    this.count_price();
  },
  // 提交订单
  btn_submit_order: function () {
    var that = this;
    console.log(that.data.totalPrice);

    // 调起支付
    // wx.requestPayment(
    //   {
    //     'timeStamp': '',
    //     'nonceStr': '',
    //     'package': '',
    //     'signType': 'MD5',
    //     'paySign': '',
    //     'success': function (res) { },
    //     'fail': function (res) { },
    //     'complete': function (res) { }
    //   })
    wx.showModal({
      title: '提示',
      content: '合计金额-' + that.data.totalPrice + "暂未开发",
    })
  },
  // 收藏
  btn_collert: function () {
    wx.showToast({
      title: '收藏暂未开发',
      duration: 2000
    })
  },
  /**
   * 计算总价
   */
  count_price() {
    // 获取商品列表数据
    let list = this.data.list;
    // 声明一个变量接收数组列表price
    let total = 0;
    // 循环列表得到每个数据
    for (let i = 0; i < list.length; i++) {
      // 判断选中计算价格
      if (list[i].selected) {
        // 所有价格加起来 count_money
        total += list[i].num * list[i].price;
      }
    }
    // 最后赋值到data中渲染到页面
    this.setData({
      list: list,
      totalPrice: total.toFixed(2)
    });
  },
})

page{
  height:100%;
}
.pages{
  background:#f3f3f3;
  width:100%;
  min-height:100%;
  border:1px solid transparent;
}
.pages>view{
  width:90%;
  margin: 30rpx auto;
  background: #fff;
  border-radius:25rpx;
  border:1px solid transparent;
  padding-bottom:30rpx;
}
/* 列表 */
.list{
    position: relative;
    width: 100%;
    height: 185rpx;
    /* border-bottom: 1rpx solid #e9e9e9; */
    background: #FAFAFA;
    margin-top:20rpx;
}
/* 编辑 */
.cartHeader{
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding:10rpx 30rpx;
  border:1px solid transparent;
  position: relative;
}
.cartHeader .logo image{
  width:30rpx;
  height:30rpx;
  display: inline-block;
  vertical-align: middle;
}
.cartHeader .logo text{
  display: inline-block;
  vertical-align: middle;
  font-size:28rpx;
  font-family:NotoSansHans-Regular;
  font-weight:400;
  color:rgba(48,48,48,1);
  margin-left:15rpx;
}
.edit{
  height:60rpx;
  line-height:70rpx;
  font-size:24rpx;
}
/* 删除 */
.dele_edit{
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  right: 30rpx;
  bottom: 25rpx;
}
/* 编辑标题 */
.edit_btn{
    position: absolute;
    font-size: 24rpx;
    color: #36A661;
    right: 30rpx;
}
/* 单选状态 */
.radio_chek{
    position: absolute;
    left: 30rpx;
    top: 70rpx;
    width:37rpx;
    height: 37rpx;
}
/* 列表商品图片 */
.list_img{
    position: absolute;
    top: 38rpx;
    left: 100rpx;
    width:118rpx;
    height:118rpx;

}
/* 列表规格 */
.cart_g_name{
    position: absolute;
    left: 280rpx;
    font-size: 26rpx;
    color: #aaa;
    top: 75rpx;
}
/* 收藏 */
.collert{
    position: absolute;
    font-size: 28rpx;
    right: 40rpx;
    top: 30rpx;
}
/* 收藏图标 */
.collert_img{
    position: relative;
    top: 2rpx;
    width: 28rpx;
    height: 28rpx;
}
/* 列表商品名称 */
.list_name{
    position: absolute;
    left: 280rpx;
    top: 30rpx;
    width: 350rpx;
    /* background-color: red; */
    font-size: 30rpx;
    overflow: hidden;    
    text-overflow:ellipsis;    
    white-space: nowrap;
}
/* 列表商品价格 */
.list_price{
    position: absolute;
    font-size: 30rpx;
    color:  #3CA65E;
    left: 280rpx;
    bottom: 20rpx;
}
 
/* 列表商品删除 */
.list_del{
    position: absolute;
    right: 220rpx;
    bottom: 20rpx;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    font-size: 44rpx;
}
/* 固定底部 */
.cont_bot{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 104rpx;
    line-height:104rpx;
    background: #fff;
    border-top: 2rpx solid #ebebeb;
}
/* 全选ICON */
.total-select{
    position: absolute;
    left: 30rpx;
    top: 30rpx;
    width: 40rpx;
    height: 40rpx;
}
/* 全选标题 */
.sel_count_name{
    position: absolute;
    left: 90rpx;
    top: 6rpx;
    font-size: 30rpx;
    color: #333;
}
 
/* 合计金额 */
.count_price{
    position: absolute;
    font-size:28rpx;
    left: 230rpx;
    color: #aaa;
}
.count_price > view{
    height:50rpx;
    line-height:50rpx;
    color:#231D1E;
}
.count_price > view:first-child text{
  float:right;
  font-size:24rpx;
  color:#5D5D5D;
}
.count_price  view:last-child text{
    font-size: 30rpx;
    color: #3CA65E;
}
/* 购物车为空 */
.list_none{
    padding:40rpx 0;
    color: #999;
    text-align: center;
}
/* 提交 */
.submit{
    position: absolute;
    width: 274rpx;
    height: 104rpx;
    line-height: 104rpx;
    right: 0rpx;
    font-size: 30rpx;
    text-align: center;
    color:#fff;
    background:linear-gradient(90deg,rgba(123,202,110,1) 0%,rgba(47,163,93,1) 100%);
}
.navigator-hover{
    background: none;
}
 
 
 
 
/*数量加减*/
.carts-num{
    position: absolute;
    right: 30rpx;
    bottom: 23rpx;
    /* background-color: red; */
    display: flex; 
    align-items: center; 
    text-align: center;
      height: 50rpx;
}
.view_text_center{
    border: 1rpx solid #ebebeb;
    font-size: 30rpx;  
    display: inline-block;
    color: #333;
    height: 50rpx;
    line-height: 50rpx;width: 76rpx;
}
.carts-num .minus, .carts-num .plus{
    margin: 10rpx; 
    border: 1rpx solid #ebebeb;
    color: #000;
    text-align: center;
    height: 50rpx; 
    line-height: 50rpx;
    width: 40rpx;
}
.carts-num .minus{font-size: 34rpx;}
/* .carts-num .minus.disabled{color: red;} */
.carts-num .plus{font-size: 34rpx;}

posted @ 2019-04-25 17:50 珺L 阅读(3267) 评论(0) 编辑收藏举报

刷新页面返回顶部

珺L

小程序全套购物车（全选，单选，反选，删除，价格计算）

公告