简单的示例图如下

主要是全选，取消全选，单选，商品的数量的+1，-1进行这些操作时，商品总价格是不断变化的（用的vant-ui插件 https://youzan.github.io/vant/#/zh-CN/）

<template>
  <div class="home">
    <ul>
      <li v-for="(item,index) in cartList" :key="item.id">
        <van-checkbox v-model="item.checked" @change="changeCheck(item)"></van-checkbox>
        <van-image width="100px" height="100px" fit="fill" :src="item.image" />
        <div class="info">
          <p>{{item.name}}</p>
          <p style="color:#f00;">￥{{item.price}}</p>
        </div>
        <van-stepper theme="round" button-size="22" disable-input v-model="item.count" @change="changeStepper"/>
      </li>
    </ul>
    <div class="check_all">
      <van-checkbox v-model="isCheckedAll" @change="checkAll"></van-checkbox><span>全选</span>
    </div>
    <div class="totals">
      <span>总价格:<span style="color:#f00;margin-right:20px;">￥{{totalsPrice}}</span></span>
      <van-button type="danger">去结算</van-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        totalsPrice: 0,
        isCheckedAll: false,
        cartList: [{
          id: 1,
          image: 'https://img.alicdn.com/imgextra/i3/1114511827/O1CN01m76xm61PMoBWXQFWo_!!1114511827.jpg_200x200Q90.jpg',
          name: '荣耀V30',
          price: '2999',
          count: 1,
          checked: false

        }, {
          id: 2,
          image: 'https://img.alicdn.com/tfs/TB17D1KDCf2gK0jSZFPXXXsopXa-400-400.jpg_200x200Q90.jpg',
          name: '荣耀30',
          price: '2999',
          count: 1,
          checked: false
        }, {
          id: 3,
          image: 'https://img.alicdn.com/tfs/TB1pYiNDEY1gK0jSZFCXXcwqXXa-420-420.png_200x200Q90.jpg',
          name: '荣耀30pro',
          price: '3999',
          count: 1,
          checked: false
        }]
      }
    },
    methods: {
      //单选按钮
      changeCheck() {
        this.computToallPrice();
      },
      //全选
      checkAll(e) {
        e ? this.cartList.forEach(item => {
          item.checked = true
          this.computToallPrice();
        }) : this.cartList.forEach(item => {
          item.checked = false
           this.totalsPrice = 0;
        })
      },
      //计算总结
      computToallPrice() {
        this.totalsPrice = 0;
        this.cartList.forEach(item => {
          if (item.checked) {
            this.totalsPrice =  this.totalsPrice + item.count * item.price;
          }
        })
      },
      //计数器
      changeStepper(e){
        this.computToallPrice();
      }
    },
    created() {
    }
  }
</script>

<style scoped lang="less">
  .home {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px;

    ul li {
      margin-bottom: 30px;
      width: 100%;
      height: 150px;

      .van-checkbox {
        width: 30px;
        height: 30px;
        float: left;
        margin-top: 30px;
      }
    }

    .van-image {
      float: left;
      vertical-align: middle;

    }

    .info {
      width: 100px;
      float: left;
      margin-top: 20px;

      p {
        line-height: 30px;
      }
    }

    .van-stepper {
      float: left;
      margin-top: 50px;
    }

    .check_all {
      width: 150px;
      float: left;

      span {
        float: left;
      }

      .van-checkbox {
        width: 30px;
        height: 30px;
        float: left;
      }
    }

    .totals {
      float: right;
    }
  }
</style>