<view class="container">
  <!-- 收貨地址 -->
  <view class="address">
    <view class="left">
      <view class="icon">
        <image src="../../images/address.png"></image>
      </view>
      <view class="txt-wrap">
        <view class="txt">北京市朝陽(yáng)區(qū)SOLANA藍(lán)色港灣</view>
      </view>
    </view>
    <view class="right">
      <view class="line"></view>
      <view class="txt">編輯</view>
    </view>
  </view>
  <view class="list">
    <view class="item" wx:for="{{list}}" wx:key="index">
      <!-- 商品頭部信息 -->
      <view class="head">
        <view class="head-icon" bindtap="selectItem" data-index="{{index}}">
          <image src="{{item.flag ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
        </view>
        <view class="from">
          <view class="left">
            <view class="storeImg">
              <image src="../../images/store.png"></image>
            </view>
            <view class="storeName">{{item.storeName}}</view>
            <view class="arrow">
               <image src="../../images/arrow.png"></image>
            </view>
          </view>
          <view class="right">
            <view class="freight">已免運(yùn)費(fèi)</view>
            <view class="coupon">優(yōu)惠券</view>
          </view>
        </view>
      </view>
      <!-- 商品內(nèi)容信息 -->
      <view class="cont">
        <view class="wrap"
           bindtouchstart="touchStart"
           bindtouchmove="touchMove"
           data-index="{{index}}"
           style="left: -{{item.x}}rpx" />
          <view class="cont-icon">
            <view class="img-wrap" bindtap="selectItem" data-index="{{index}}">
              <image src="{{item.flag ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
            </view>
            <view class="img">
              <image src="{{item.imgUrl}}"></image>
            </view>
          </view>
          <view class="info">
            <view class="name">{{item.name}}</view>
            <view class="specs-wrap">
              <view class="specs">{{item.specs}}</view>
            </view>
            <view class="discount-wrap">
              <view class="discount">{{item.discount}}</view>
            </view>
            <view class="price-wrap">
              <view class="price">
                <text>￥</text>{{item.price}}<text>.00</text>
              </view>
              <view class="num">
                <view class="reduce" bindtap="reduce" data-index="{{index}}">-</view>
                <input class="inp" 
                       type="number"
                       value="{{item.num}}"
                       maxlength="4"
                       bindinput="bindNumInput"
                       bindblur="bindNumBlur"
                       data-index="{{index}}"/>
                <view class="add" bindtap="add" data-index="{{index}}">+</view>
              </view>
            </view>
          </view>
          <!-- 商品右滑刪除按鈕 -->
          <view class="del" bindtap="delete" data-index="{{index}}">刪除</view>
        </view>
      </view>
    </view>
  </view>
  <!-- 全選、總計(jì)、結(jié)算 -->
  <view class="total">
    <view class="total-icon" bindtap="allSelect">
      <view class="img">
        <image src="{{selectAll ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
      </view>
      <text style="font-size: 26rpx;">全選</text>
    </view>
    <view class="settle">
      <view class="price">
        總計(jì)
        <text style="margin: 0 4rpx;">:</text>
        <text style="font-size: 30rpx;font-weight: 800;">¥{{totalPrice}}</text>
      </view>
      <view class="btn" wx:if="{{totalNum > 0}}">
        去結(jié)算<text style="margin-left: 4rpx;">({{totalNum}})</text>
      </view>
      <view class="btn" wx:else>
        去結(jié)算<text style="margin-left: 4rpx;">(0)</text>
      </view>
    </view>
  </view>
</view>

Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    list: [
      {
        id: 1, 
        name: 'Apple/蘋果 15.4英寸2.2GHz MacBook Pro 256G四核i7處理器256G手提電腦筆記本電腦商務(wù)辦公學(xué)生學(xué)習(xí)家用電腦',
        imgUrl: '../../images/0.png',
        storeName: '哇塞官方旗艦店',
        specs: '現(xiàn)貨 5788灰 十代i7/16G/1T/6G獨(dú)立顯卡',
        discount: '滿3000享?yè)Q購(gòu)',
        num: 1,
        price: '11999'
      },
      { 
        id: 2, 
        name: 'Apple/蘋果 13 英寸 MacBook Pro 1.4GHz 4 核處理器 (Turbo Boost 最高可達(dá) 3.9GHz) 256GB 存儲(chǔ)容量 觸控欄和觸控 ID',
        imgUrl: '../../images/1.png', 
        storeName: '哇塞官方旗艦店',
        specs: '現(xiàn)貨 5749白 十代i7/16G/1T',
        discount: '滿3000享?yè)Q購(gòu)',
        num: 1,
        price: '11245', 
      },
      { 
        id: 3, 
        name: 'Apple/蘋果 13 英寸 MacBook Air 1.1GHz 雙核 Core i3 處理器，Turbo Boost 最高可達(dá) 3.2GHz 256GB 存儲(chǔ)容量 觸控 ID', 
        imgUrl: '../../images/2.png',
        storeName: '哇塞官方旗艦店',
        specs: '現(xiàn)貨 九代i7/16G/1T/4G獨(dú)立顯卡',
        discount: '滿3000享?yè)Q購(gòu)',
        num: 1,
        price: '9245'
      },
      { 
        id: 4, 
        name: 'Apple/蘋果 13 英寸 MacBook Pro 1.4GHz 4 核處理器 (Turbo Boost 最高可達(dá) 3.9GHz) 512GB 存儲(chǔ)容量 觸控欄和觸控 ID', 
        imgUrl: '../../images/3.png',
        storeName: '哇塞官方旗艦店',
        specs: '現(xiàn)貨 i7/500G/集成顯卡',
        discount: '滿3000享?yè)Q購(gòu)',
        num: 1,
        price: '11499'
      },
      { 
        id: 5, 
        name: '【原封正品】20款 Apple/蘋果 13.3英寸MacBook Pro 512G筆記本電腦帶觸控欄ID 輕薄便攜商務(wù)辦公筆記本電腦', 
        imgUrl: '../../images/4.png',
        storeName: '哇塞官方旗艦店',
        specs: '現(xiàn)貨 5746白 i5/8G/500G/集成顯卡',
        discount: '滿3000享?yè)Q購(gòu)',
        num: 1,
        price: '14499'
      }
    ],
    selectAll: false, // 是否全選
    totalNum: 0, // 已選中的商品總數(shù)量
    totalPrice: 0, // 已選中的商品總價(jià)格
    startX: 0, // 手指觸摸的初始X軸坐標(biāo)
    startY: 0 // 手指觸摸的初始Y軸坐標(biāo)
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad: function (options) {
    
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
   */
  onShow: function () {
    this.data.list.forEach((item)=> {
      item.flag = false // 是否已選中商品的依據(jù)字段
      item.x = 0 // 每個(gè)列表項(xiàng)的相對(duì)定位的初始位置
    })
  },
  // 單個(gè)商品選中，計(jì)算已選中的商品總價(jià)格
  selectItem(e) {
    let index = e.currentTarget.dataset.index
    let flag = this.data.list[index].flag
    if(flag == false) {
      this.data.list[index].flag = true
    } else {
      this.data.list[index].flag = false
    }
    // 判斷是否全部選中了
    let bool = this.data.list.every((item) => {
      return item.flag
    })
    this.setData({
      selectAll: bool,
      list: this.data.list
    })
    this.countPrice()
  },
  // 減少數(shù)量，計(jì)算已選中的商品總價(jià)格
  reduce(e) {
    let index = e.currentTarget.dataset.index
    let num = this.data.list[index].num
    // 判斷當(dāng)前商品的數(shù)量是否大于1，大于1則可以進(jìn)行減少操作
    if(num > 1) {
      this.data.list[index].num = num - 1
    }
    this.setData({
      list: this.data.list
    })
    this.countPrice()
  },
  // 輸入數(shù)量
  bindNumInput(e) {
    let val = e.detail.value
    let index = e.currentTarget.dataset.index
    if(Number(val) == 0) {
      this.data.list[index].num = 1
    } else {
      this.data.list[index].num = Number(val)
    }
  },
  // 失去焦點(diǎn)，計(jì)算已選中的商品總價(jià)格
  bindNumBlur() {
    this.setData({
      list: this.data.list
    })
    this.countPrice()
  },
  // 增加商品數(shù)量，計(jì)算已選中的商品總價(jià)格
  add(e) {
    let index = e.currentTarget.dataset.index
    let num = this.data.list[index].num
    this.data.list[index].num = num + 1
    this.setData({
      list: this.data.list
    })
    this.countPrice()
  },
  // 手指觸摸的起始坐標(biāo)
  touchStart(e) {
    this.data.startX = e.touches[0].clientX;
    this.data.startY = e.touches[0].clientY;
  },
  // 滑動(dòng)列表項(xiàng)
  touchMove(e) {
    let index = e.currentTarget.dataset.index
    // 獲得當(dāng)前坐標(biāo)
    let currentX = e.touches[0].clientX;
    let currentY = e.touches[0].clientY;
    let x = this.data.startX - currentX; //橫向移動(dòng)距離
    let y = Math.abs(this.data.startY - currentY); //縱向移動(dòng)距離，若向左移動(dòng)有點(diǎn)傾斜也可以接受
    if (x > 35 && y < 110) {
    // 向左滑是顯示刪除
      this.data.list[index].x = 110; 
      this.setData({
        list:  this.data.list
      })
    } else if (x < -35 && y < 110) {
      // 向右滑
      this.data.list[index].x = 0; 
      this.setData({
        list:  this.data.list
      })
    }
  },
  // 刪除列表項(xiàng)，重新計(jì)算總價(jià)格和全選狀態(tài)
  delete(e) {
    let index = e.currentTarget.dataset.index
    this.data.list.splice(index, 1)
    this.setData({
      list: this.data.list
    })
    this.countPrice()
  },
  // 全選
  allSelect() {
    // 判斷是否已經(jīng)全選，是就全部取消選中，否則全部選中，之后計(jì)算總價(jià)格
    if(this.data.selectAll) {
      this.data.list.forEach((item)=>{
        item.flag = false
      })
      this.data.selectAll = false
    } else {
      this.data.list.forEach((item)=>{
        item.flag = true
      })
      this.data.selectAll = true
    }
    this.setData({
      selectAll: this.data.selectAll,
      list: this.data.list
    })
    this.countPrice()
  },
  // 計(jì)算已選中的總價(jià)格
  countPrice() {
    // 判斷是否有已選中的商品，有則進(jìn)行計(jì)算，沒有則清除全選狀態(tài)，總價(jià)格，結(jié)算的商品數(shù)量
    let bool = this.data.list.some((item) => {
      return item.flag
    })
    if(bool) {
      // 每次重新計(jì)算時(shí)，先把上一次記錄的數(shù)據(jù)清空
      this.data.totalNum = 0 
      this.data.totalPrice = 0
      this.data.list.forEach((item)=>{
        if(item.flag == true) {
          this.data.totalPrice += (item.price * item.num)
          this.data.totalNum += item.num
        }
      })
    } else {
      this.data.totalNum = 0
      this.data.totalPrice = 0
      this.data.selectAll = false
    }
    this.setData({
      totalNum: this.data.totalNum,
      totalPrice: this.data.totalPrice,
      selectAll: this.data.selectAll
    })
  }
})

page {
  background: #f2f2f2;
}
.container {
  width: 100%;
  padding-bottom: 90rpx;
  box-sizing: border-box;
  overflow-y: scroll;
}
.address {
  width: 100%;
  height: 80rpx;
  background: #fff;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.address .left {
  flex: 1;
  display: flex;
  align-items: center;
}
.address .left .icon {
  width: 32rpx;
  height: 35rpx;
  margin-right: 8rpx;
}
.address .left .icon image {
  width: 100%;
  height: 100%;
}
.address .left .txt-wrap {
  width: 0;
  flex: 1;
}
.address .left .txt-wrap .txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10rpx;
  box-sizing: border-box;
}
.address .right {
  width: 80rpx;
  display: flex;
  align-items: center;
}
.address .right .line {
  width: 0rpx;
  height: 26rpx;
  border-left: 4rpx solid #bfbfbf;
}
.address .right .txt {
  flex: 1;
  text-align: right;
}

.list {
  width: 100%;
}
.list .item {
  width: 100%;
  border-radius: 20rpx;
  padding: 30rpx 0;
  box-sizing: border-box;
  background: #ffffff;
  margin-bottom: 20rpx;
}

/* 商品頭部信息 */
.list .item .head {
  width: 100%;
  font-size: 26rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
/* 商品選中圖標(biāo) */
.list .item .head .head-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 26rpx;
  border-radius: 100%;
  box-shadow: 0 0 10rpx lightgray;
}
.list .item .head .head-icon image {
  width: 100%;
  height: 100%;
}
.list .item .head .from {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list .item .head .from .left {
  display: flex;
  align-items: center;
}
.list .item .head .from .left .storeImg {
  width: 26rpx;
  height: 26rpx;
  margin-top: -4rpx;
  margin-right: 8rpx;
}
.list .item .head .from .left .storeImg image {
  width: 100%;
  height: 100%;
}
/* 店鋪名稱 */
.list .item .head .from .left .storeName {
  flex: 1;
  margin-right: 14rpx;
}
/* 右箭頭 */
.list .item .head .from .left .arrow {
  width: 8rpx;
  height: 34rpx;
  display: flex;
  align-items: center;
}
.list .item .head .from .left .arrow image {
  width: 100%;
  height: 16rpx;
.list .item .head .from .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* 免運(yùn)費(fèi) */
.list .item .head .from .right .freight {
  font-size: 22rpx;
  color: #1e1e1e;
}
/* 優(yōu)惠券 */
.list .item .head .from .right .coupon {
  font-size: 24rpx;
  padding: 4rpx 14rpx;
  background: #ffeded;
  border-radius: 20rpx;
  margin-left: 16rpx;
  color: #ffaa7f;
}

/* 商品信息 */
.list .item .cont {
  width: 100%;
  overflow: hidden;
  font-size: 26rpx;
}
.list .item .cont .wrap {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  transition: all 0.2s;
  position: relative;
  top: 0;
  left: 0;
}
/* 商品油滑的刪除按鈕 */
.list .item .cont .wrap .del {
  width: 110rpx;
  height: 100%;
  background: #ffaa7f;
  font-size: 24rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: -110rpx;
}
.list .item .cont .wrap .cont-icon {
  display: flex;
  margin-right: 26rpx;
}
/* 商品選中或未選中圖標(biāo) */
.list .item .cont .wrap .cont-icon .img-wrap {
  width: 40rpx;
  height: 40rpx;
  margin-right: 26rpx;
  border-radius: 100%;
  box-shadow: 0 0 10rpx lightgray;
  position: relative;
  top: 72rpx;
  left: 0;
}
.list .item .cont .wrap .cont-icon .img-wrap image {
  width: 100%;
  height: 100%;
}
/* 商品圖片 */
.list .item .cont .wrap .cont-icon .img {
  width: 190rpx;
  height: 190rpx;
  border-radius: 10rpx;
  box-shadow: 0 0 10rpx lightgray;
  overflow: hidden;
}
.list .item .cont .wrap .cont-icon .img image {
  width: 100%;
  height: 100%;
}
.list .item .cont .wrap .info {
  flex: 1;
  width: 0;
}
/* 商品名稱 */
.list .item .cont .wrap .info .name {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 10rpx;
}
/* 商品規(guī)格 */
.list .item .cont .wrap .info .specs-wrap {
  width: 100%;
  font-size: 24rpx;
  padding-right: 12rpx;
  border-radius: 18rpx;
  box-sizing: border-box;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list .item .cont .wrap .info .specs-wrap .specs {
  display: inline-block;
  background: #f2f2f2;
  border-radius: 18rpx;
  padding: 4rpx 16rpx 4rpx 16rpx;
  box-sizing: border-box;
}
/* 商品優(yōu)惠 */
.list .item .wrap .wrap .cont .info .discount-wrap {
  width: 100%;
  font-size: 24rpx;
}
.list .item .cont .wrap .info .discount-wrap .discount {
  display: inline-block;
  background: #f2f2f2;
  border-radius: 18rpx;
  padding: 4rpx 20rpx 4rpx 16rpx;
  box-sizing: border-box;
}
/* 商品價(jià)格 */
.list .item .cont .wrap .info .price-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8rpx;
}
.list .item .cont .wrap .info .price-wrap .price {
  font-size: 36rpx;
  font-weight: 700;
  color: #ffaa7f;
}
.list .item .cont .wrap .info .price-wrap .price text {
  font-size: 24rpx;
}
/* 商品數(shù)量 */
.list .item .cont .wrap .info .price-wrap .num {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.list .item .cont .wrap .info .price-wrap .num .reduce {
  width: 40rpx;
  font-weight: 800;
  color: #262626;
  text-align: center;
  line-height: 40rpx;
}
.list .item .cont .wrap .info .price-wrap .num .inp {
  width: 80rpx;
  height: 40rpx;
  min-height: 40rpx;
  text-align: center;
  background: #f2f2f2;
  margin: 0 2rpx;
}
.list .item .cont .wrap .info .price-wrap .num .add {
  width: 40rpx;
  font-weight: 800;
  color: #262626;
  text-align: center;
  line-height: 40rpx;
}

/* 全選、總計(jì)、結(jié)算 */
.total {
  width: 100%;
  height: 90rpx;
  background: #fff;
  padding: 0 20rpx 0 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
}
.total .total-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.total .total-icon .img {
  width: 40rpx;
  height: 40rpx;
  margin-right: 14rpx;
  border-radius: 100%;
  box-shadow: 0 0 10rpx lightgray;
}
.total .total-icon image {
  width: 100%;
  height: 100%;
}
.total .settle {
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.total .settle .price {
  display: flex;
  align-items: center;
  margin-right: 16rpx;
}
.total .settle .btn {
  height: 60rpx;
  background: #ffaa7f;
  border-radius: 30rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  font-size: 24rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}