uniapp购物车全选

以下是uniapp购物车全选的示例代码，可以根据自己的需求进行修改：

HTML代码：

<template>
  <view>
    <view v-if="cartList.length === 0">购物车为空</view>
    <view v-else>
      <view v-for="(item, index) in cartList" :key="index">
        <view class="cart-item">
          <view class="checkbox" @click="selectItem(index)">
            <image :src="item.selected ? './images/checkbox-checked.png' : './images/checkbox.png'"></image>
          </view>
          <view class="item-info">{{ item.name }}</view>
        </view>
      </view>
      <view class="cart-footer">
        <view class="checkbox" @click="selectAll">
          <image :src="isAllSelected ? './images/checkbox-checked.png' : './images/checkbox.png'"></image>
        </view>
        <view>全选</view>
      </view>
    </view>
  </view>
</template>

JavaScript代码：

<script>
export default {
  data() {
    return {
      cartList: [
        { id: 1, name: '商品1', selected: false },
        { id: 2, name: '商品2', selected: false },
        { id: 3, name: '商品3', selected: false },
        { id: 4, name: '商品4', selected: false },
      ]
    }
  },
  computed: {
    isAllSelected() {
      return this.cartList.every(item => item.selected)
    }
  },
  methods: {
    selectItem(index) {
      this.cartList[index].selected = !this.cartList[index].selected
    },
    selectAll() {
      this.cartList.forEach(item => item.selected = !this.isAllSelected)
    }
  }
}
</script>

CSS代码：

<style>
.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.checkbox {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-info {
  flex: 1;
}

.cart-footer {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.cart-footer .checkbox {
  margin-right: 10px;
}
</style>