小程序全套購物車（全選，單選，反選，刪除，價格計算）

<!-- 最外層視圖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: 30 rpx auto;

background: #fff;

border-radius: 25 rpx;

border: 1px solid transparent;

padding-bottom: 30 rpx;

}

/* 列表 */

.list{

position: relative;

width: 100%;

height: 185 rpx;

/* border-bottom: 1rpx solid #e9e9e9; */

background: #FAFAFA;

margin-top: 20 rpx;

}

/* 編輯 */

.cartHeader{

display: flex;

justify-content: space-between;

align-items: center;

padding: 10 rpx 30 rpx;

border: 1px solid transparent;

position: relative;

}

.cartHeader .logo image{

width: 30 rpx;

height: 30 rpx;

display: inline-block;

vertical-align: middle;

}

.cartHeader .logo text{

display: inline-block;

vertical-align: middle;

font-size: 28 rpx;

font-family: NotoSansHans-Regular;

font-weight: 400;

color: rgba( 48, 48, 48, 1 );

margin-left: 15 rpx;

}

.edit{

height: 60 rpx;

line-height: 70 rpx;

font-size: 24 rpx;

}

/* 刪除 */

.dele_edit{

position: absolute;

width: 40 rpx;

height: 40 rpx;

right: 30 rpx;

bottom: 25 rpx;

}

/* 編輯標題 */

.edit_btn{

position: absolute;

font-size: 24 rpx;

color: #36A661;

right: 30 rpx;

}

/* 單選狀態 */

.radio_chek{

position: absolute;

left: 30 rpx;

top: 70 rpx;

width: 37 rpx;

height: 37 rpx;

}

/* 列表商品圖片 */

.list_img{

position: absolute;

top: 38 rpx;

left: 100 rpx;

width: 118 rpx;

height: 118 rpx;

}

/* 列表規格 */

.cart_g_name{

position: absolute;

left: 280 rpx;

font-size: 26 rpx;

color: #aaa;

top: 75 rpx;

}

/* 收藏 */

.collert{

position: absolute;

font-size: 28 rpx;

right: 40 rpx;

top: 30 rpx;

}

/* 收藏圖標 */

.collert_img{

position: relative;

top: 2 rpx;

width: 28 rpx;

height: 28 rpx;

}

/* 列表商品名稱 */

.list_name{

position: absolute;

left: 280 rpx;

top: 30 rpx;

width: 350 rpx;

/* background-color: red; */

font-size: 30 rpx;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

/* 列表商品價格 */

.list_price{

position: absolute;

font-size: 30 rpx;

color: #3CA65E;

left: 280 rpx;

bottom: 20 rpx;

}

 

/* 列表商品刪除 */

.list_del{

position: absolute;

right: 220 rpx;

bottom: 20 rpx;

width: 40 rpx;

height: 40 rpx;

line-height: 40 rpx;

text-align: center;

font-size: 44 rpx;

}

/* 固定底部 */

.cont_bot{

position: fixed;

bottom: 0;

width: 100%;

height: 104 rpx;

line-height: 104 rpx;

background: #fff;

border-top: 2 rpx solid #ebebeb;

}

/* 全選ICON */

.total-select{

position: absolute;

left: 30 rpx;

top: 30 rpx;

width: 40 rpx;

height: 40 rpx;

}

/* 全選標題 */

.sel_count_name{

position: absolute;

left: 90 rpx;

top: 6 rpx;

font-size: 30 rpx;

color: #333;

}

 

/* 合計金額 */

.count_price{

position: absolute;

font-size: 28 rpx;

left: 230 rpx;

color: #aaa;

}

.count_price > view{

height: 50 rpx;

line-height: 50 rpx;

color: #231D1E;

}

.count_price > view:first-child text{

float: right;

font-size: 24 rpx;

color: #5D5D5D;

}

.count_price view:last-child text{

font-size: 30 rpx;

color: #3CA65E;

}

/* 購物車為空 */

.list_none{

padding: 40 rpx 0;

color: #999;

text-align: center;

}

/* 提交 */

.submit{

position: absolute;

width: 274 rpx;

height: 104 rpx;

line-height: 104 rpx;

right: 0 rpx;

font-size: 30 rpx;

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: 30 rpx;

bottom: 23 rpx;

/* background-color: red; */

display: flex;

align-items: center;

text-align: center;

height: 50 rpx;

}

.view_text_center{

border: 1 rpx solid #ebebeb;

font-size: 30 rpx;

display: inline-block;

color: #333;

height: 50 rpx;

line-height: 50 rpx; width: 76 rpx;

}

.carts-num .minus, .carts-num .plus{

margin: 10 rpx;

border: 1 rpx solid #ebebeb;

color: #000;

text-align: center;

height: 50 rpx;

line-height: 50 rpx;

width: 40 rpx;

}

.carts-num .minus{ font-size: 34 rpx;}

/* .carts-num .minus.disabled{color: red;} */

.carts-num .plus{ font-size: 34 rpx;}