<!-- 结算模块 --> <div class="cart-floatbar"> <div class="select-all"> <input type="checkbox" name="" id="d" class="checkall">全选 </div> <div class="operation"> <a href="javascript:;" class="remove-batch"> 删除选中的商品</a> <a href="javascript:;" class="clear-all">清理购物车</a> </div> <div class="toolbar-right"> <div class="amount-sum">已经选<em>1</em>件商品</div> <div class="price-sum">总价： <em>￥12.60</em></div> <div class="btn-area">去结算</div> </div> </div>帮我改成组件

可以将上述 HTML 代码封装成一个名为 CartFloatbar 的组件，具体实现如下：

<template>
  <div class="cart-floatbar">
    <div class="select-all">
      <input type="checkbox" name="" id="d" class="checkall" v-model="isAllSelected">
      全选
    </div>
    <div class="operation">
      <a href="javascript:;" class="remove-batch" @click="handleRemoveSelected"> 删除选中的商品</a>
      <a href="javascript:;" class="clear-all" @click="handleClearAll">清理购物车</a>
    </div>
    <div class="toolbar-right">
      <div class="amount-sum">已经选<em>{{ selectedCount }}</em>件商品</div>
      <div class="price-sum">总价： <em>￥{{ totalPrice.toFixed(2) }}</em></div>
      <div class="btn-area" @click="handleCheckout">去结算</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cartList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    // 是否所有商品都被选中
    isAllSelected() {
      return this.cartList.every(item => item.checked)
    },
    // 已选商品数量
    selectedCount() {
      return this.cartList.filter(item => item.checked).length
    },
    // 总价
    totalPrice() {
      return this.cartList.filter(item => item.checked)
        .reduce((total, item) => total + item.price * item.quantity, 0)
    }
  },
  methods: {
    // 处理全选/取消全选
    handleToggleAllChecked() {
      const isChecked = !this.isAllSelected
      this.$emit('toggle-all-checked', isChecked)
    },
    // 处理删除选中商品
    handleRemoveSelected() {
      this.$emit('remove-selected')
    },
    // 处理清空购物车
    handleClearAll() {
      this.$emit('clear-all')
    },
    // 处理去结算
    handleCheckout() {
      this.$emit('checkout')
    }
  }
}
</script>

其中，props 属性 cartList 表示购物车中的商品列表，包含以下字段：

[
  {
    id: 1,
    name: '商品1',
    price: 6.3,
    quantity: 2,
    checked: true
  },
  {
    id: 2,
    name: '商品2',
    price: 3.6,
    quantity: 1,
    checked: false
  },
  // ...
]

组件中的 computed 属性计算了全选状态、已选商品数量和总价，methods 属性提供了处理全选/取消全选、删除选中商品、清空购物车和去结算等方法，通过 emit 事件触发外部组件的逻辑。