uniapp多选框购物车卡片式

为实现uniapp多选框购物车卡片式，可以按照以下步骤进行操作：

1.在购物车页面中，使用u-checkbox组件实现多选框功能。可以使用v-model绑定选中状态，使用@change监听选中状态的变化。

2.使用u-card组件实现商品卡片的展示。可以在卡片中展示商品图片、名称、价格等信息。

3.在卡片中使用u-number-box组件实现商品数量的选择。可以使用v-model绑定商品数量，使用@change监听数量的变化。

4.在底部使用u-tab-bar组件实现结算功能。可以在tab-bar中展示已选商品数量和总价，并使用u-button组件实现结算按钮。

以下是示例代码：

<template>
  <div>
    <div v-for="(item, index) in goodsList" :key="index">
      <u-checkbox v-model="item.checked" @change="onCheckedChange(index)"></u-checkbox>
      <u-card>
        <img :src="item.imgUrl" />
        <div>{{ item.name }}</div>
        <div>{{ item.price }}</div>
        <u-number-box v-model="item.num" @change="onNumChange(index)"></u-number-box>
      </u-card>
    </div>
    <u-tab-bar>
      <div slot="center">已选{{ selectedNum }}件商品，共{{ totalPrice }}元</div>
      <u-button slot="right" @click="onPayClick">结算</u-button>
    </u-tab-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [
        {
          imgUrl: 'xxx',
          name: '商品1',
          price: 10,
          num: 1,
          checked: false
        },
        {
          imgUrl: 'xxx',
          name: '商品2',
          price: 20,
          num: 2,
          checked: false
        }
      ]
    }
  },
  computed: {
    selectedNum() {
      return this.goodsList.filter(item => item.checked).length
    },
    totalPrice() {
      return this.goodsList.reduce((total, item) => {
        if (item.checked) {
          return total + item.price * item.num
        } else {
          return total
        }
      }, 0)
    }
  },
  methods: {
    onCheckedChange(index) {
      this.goodsList[index].checked = !this.goodsList[index].checked
    },
    onNumChange(index) {
      // do something
    },
    onPayClick() {
      // do something
    }
  }
}
</script>