wxml

<view class="main">
  <view wx:if="{{hasList}}">
    <view class='merchant-name'>
      <icon wx:if="{{selectAllStatus}}" class='iconfont icon-ischecked' style='font-size:60rpx;color:red' bindtap="selectAll" />
      <icon wx:else class="iconfont icon-ischecked" bindtap="selectAll" style='font-size:60rpx;' bindtap="selectAll" />
      <text>商家名稱</text>
    </view>
    <view class="checkbox" wx:for="{{carts}}" wx:key="{{index}}">
      <icon wx:if="{{item.selected}}" class='iconfont icon-ischecked' data-index="{{index}}" style='font-size:60rpx; color:red' bindtap="selectList"></icon>
      <icon wx:else class='iconfont icon-ischecked' data-index="{{index}}" bindtap="selectList" bindtap="selectList" style='font-size:60rpx;' />
      <navigator url="../details/details?id={{item.id}}">
        <!-- <image src="{{item.image}}"></image> -->
        <view class='product-img'>圖片</view>
      </navigator>
      <view class='details-message'>
        <view class='godds-name'>{{item.title}} <text class='close' bindtap='deleteList'>刪除</text></view>
        <view class='details-container'>
          <view class='spec-price'>
            <view class='spec'>{{item.spec}}</view>
            <view class='price-number'>
              <text>¥ {{item.price}}</text>
              <!-- <text>X {{item.buyCount}}</text> -->
            </view>
          </view>
          <view class='add-subtract'>
            <view class="minus sign" bindtap="minusCount" data-obj="{{obj}}" data-index="{{index}}">-</view>
            <view class='add-min-number'>{{item.num}}</view>
            <view class="plus sign" bindtap="addCount" data-index="{{index}}">+</view>
          </view>
        </view>
      </view>
    </view>
    <view class='settlement-sum'>
      <text>¥ {{totalPrice}}</text>
      <view class="settlement" bindtap='toSettlement'>結算</view>
    </view>
  </view>
  <view wx:else>
    當前無資料
  </view>

</view>
 

wxss

.checkbox{
  display: flex;
  margin:5px;
  align-items: center;
}
.merchant-name{
  margin-left: 20rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 40rpx;
}
.shop-list{
  height: 100%;
  font-size: 28rpx;
}



.merchant-name>text{
  position: relative;
  top: -4rpx;
}
.product-img{
  width: 180rpx;
  height: 180rpx;
  background: red;
}

.details-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.spec-price>view{
  padding: 10rpx;
}
.add-subtract{
  display: flex;
  align-items: center;
}


.add-min-number{
  height: 52rpx;
  width: 50rpx;
  border-top: 1px solid #BCBCBC;
  border-bottom: 1px solid #BCBCBC;
  text-align: center;
  line-height: 52rpx;
}
.sign{
  width: 50rpx;
  height: 52rpx;
  border: 1px solid #BCBCBC;
  text-align: center;
  line-height: 50rpx;
}
.spec-price{
  display: flex;
  flex-direction: column;
}

.details-message{
  width: 65%;
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  height: 170rpx;
}

.price-number{
  display: flex;
  justify-content: space-between;
  width:250rpx;
}
.goodsName{
  padding-left: 20rpx;
}

.settlement{
  font-size: 30rpx;
  color: #fff;
  background: #00CC00;
  width: 200rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
  margin: 0 20rpx;
}

.settlement-sum{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.settlement-sum{
  font-size: 40rpx;
  font-weight: bold;
}

.godds-name{
  width: 100%;
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close{
  display: inline-block;
  color: red;
  border: 1px solid #BCBCBC;
  padding: 10rpx;
  font-size: 20rpx;
  border-radius: 10rpx;
}
.spec{
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 26rpx;
}
 

js

// pages/shopCart/shopCart.js
let http = require("../../data/getData.js");
let config = require("../../data/config.js");
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    carts: [], // 購物車列表
    hasList: false, // 列表是否有資料
    totalPrice: 0, // 總價，初始為0
    selectAllStatus: true, // 全選狀態，預設全選
    selectAA:true,
    obj: {
      name: "hello"
    }
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function(options) {
    let that = this;
    http.Post(config.URL.CartInfo, function(res) {
      let a = res.data.data[0].gtGoodsList[0].goodsEnterpriseVOJson;
      //在這裡請求資料替換掉假資料
      // console.log(res.data.data[0]); //JSON.parse(a)
      // that.setData({
      //   items: res.data.data[0].gtGoodsList[0].goodsEnterpriseVOJson
      // })
    })
  },
  onShow() {
    this.setData({
      hasList: true,
      carts: [{
          id: 1,
          title: '新鮮芹菜 半斤',
          image: '/images/home_n.png',
          num: 4,
          price: 0.01,
          selected: true,
          spec: "guigesdfasdfasd"
        },
        {
          id: 2,
          title: '素米 500g',
          image: '/images/my_n.png',
          num: 1,
          price: 0.03,
          selected: true,
          spec: "guigesdfasdfasd"
        }
      ]
    });
    this.getTotalPrice();
  },
  toSettlement: function() {
    wx.navigateTo({
      url: 'settlement/settlement',
    })
  },
  /**
   * 當前商品選中事件
   */
  selectList(e) {
    const index = e.currentTarget.dataset.index;
    console.log("index",index);

    let carts = this.data.carts;
    let selectAllStatus = this.data.carts;
    const selected = carts[index].selected;
    carts[index].selected = !selected;
    let arr = [];
    for(var i in carts){
      carts[i].selected == true ? arr.push(carts[i].selected):""; 
    }
    this.setData({
      carts: carts,
      selectAllStatus: carts[index].selected == false ? (selectAllStatus = false) : arr.length == carts.length ? (selectAllStatus = true) : (selectAllStatus = false)
    });
    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();
  },
  selectBB(e){
    console.log(e);
  },
  /**
   * 繫結加數量事件
   */
  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)
    });
  },
  /**
 * 刪除購物車當前商品
 */
  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();
    }
  },

})