用uni-app写一个购物车底部

以下是一个简单的购物车底部示例，使用uni-app框架和flex布局实现：

<template>
  <view class="cart-bar">
    <view class="check-all">
      <checkbox v-model="isCheckAll" />
      <text>全选</text>
    </view>
    <view class="total-price">
      <text>总价：</text>
      <text class="price">{{ totalPrice }}</text>
    </view>
    <view class="submit-btn">
      <button @click="submitOrder">提交订单</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isCheckAll: false, // 是否全选
      totalPrice: 0, // 总价
      cartItems: [
        { id: 1, name: '商品1', price: 10, count: 2, isChecked: false },
        { id: 2, name: '商品2', price: 20, count: 1, isChecked: false },
        { id: 3, name: '商品3', price: 30, count: 3, isChecked: false },
      ],
    };
  },
  computed: {
    // 计算选中的商品价格总和
    selectedItems() {
      return this.cartItems.filter(item => item.isChecked);
    },
    totalPrice() {
      return this.selectedItems.reduce(
        (total, item) => total + item.price * item.count,
        0
      );
    },
  },
  methods: {
    // 全选/取消全选
    toggleCheckAll() {
      this.isCheckAll = !this.isCheckAll;
      this.cartItems.forEach(item => {
        item.isChecked = this.isCheckAll;
      });
    },
    // 选择/取消选择商品
    toggleCheckItem(item) {
      item.isChecked = !item.isChecked;
      this.isCheckAll = this.cartItems.every(item => item.isChecked);
    },
    // 提交订单
    submitOrder() {
      // TODO: 提交订单逻辑
    },
  },
};
</script>

<style lang="scss">
.cart-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60rpx;
  padding: 10rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.check-all {
  display: flex;
  align-items: center;
}

.total-price {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  .price {
    color: #f00;
    margin-left: 10rpx;
  }
}

.submit-btn {
  button {
    width: 180rpx;
    height: 60rpx;
    border-radius: 30rpx;
    background-color: #f00;
    color: #fff;
    font-size: 28rpx;
  }
}
</style>