@tanzhenxing/zx-cart-bar v1.0.1

CartBar 购物车底部栏

购物车底部栏组件，用于展示购物车商品信息、价格统计和结算功能。支持全选操作、商品数量显示、价格计算等功能。

引入

import zxCartBar from '@/components/zx-cart-bar/zx-cart-bar.vue'

代码演示

基础用法

<template>
  <zx-cart-bar
    :total-price="totalPrice"
    :checked-count="checkedCount"
    :total-count="totalCount"
    :all-checked="allChecked"
    @submit="handleSubmit"
    @check-all="handleCheckAll"
  />
</template>

<script setup>
import { ref } from 'vue'

const totalPrice = ref(12800) // 单位：分
const checkedCount = ref(2)
const totalCount = ref(5)
const allChecked = ref(false)

const handleSubmit = (data) => {
  console.log('结算', data)
}

const handleCheckAll = (checked) => {
  console.log('全选状态', checked)
  allChecked.value = checked
}
</script>

显示原价和优惠信息

<template>
  <zx-cart-bar
    :total-price="totalPrice"
    :original-price="originalPrice"
    :checked-count="checkedCount"
    :show-original-price="true"
    discount-text="已优惠 ¥20.00"
    @submit="handleSubmit"
  />
</template>

<script setup>
const totalPrice = ref(12800) // ¥128.00
const originalPrice = ref(14800) // ¥148.00
const checkedCount = ref(2)
</script>

自定义按钮

<template>
  <zx-cart-bar
    :total-price="totalPrice"
    :checked-count="checkedCount"
    button-text="立即购买"
    button-type="primary"
    :button-round="false"
  >
    <template #button>
      <view class="custom-buttons">
        <zx-button type="warning" size="small" @click="addToFavorites">收藏</zx-button>
        <zx-button type="danger" @click="buyNow">立即购买</zx-button>
      </view>
    </template>
  </zx-cart-bar>
</template>

添加提示信息

<template>
  <zx-cart-bar
    :total-price="totalPrice"
    :checked-count="checkedCount"
    tip="满99元免运费，还差21元"
    tip-icon="info-circle"
  />
</template>

隐藏部分功能

<template>
  <zx-cart-bar
    :total-price="totalPrice"
    :checked-count="checkedCount"
    :show-check-all="false"
    :show-count="false"
    price-label="总计："
  />
</template>

自定义左侧内容

<template>
  <zx-cart-bar
    :total-price="totalPrice"
    :checked-count="checkedCount"
  >
    <template #left>
      <view class="custom-left">
        <zx-icon name="gift" color="#ff6900" />
        <text>有礼品</text>
      </view>
    </template>
  </zx-cart-bar>
</template>

API

Props

Events

Slots

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式。

注意事项

1. 价格单位统一使用分，组件内部会自动转换为元显示
2. 组件默认固定在页面底部，使用时需要给页面内容添加底部边距
3. 在小程序中使用时，建议开启 safe-area-inset-bottom 以适配底部安全区域
4. 全选状态需要通过 v-model:all-checked 或监听 check-all 事件来同步

常见问题

如何处理价格计算？

// 价格以分为单位传入
const totalPrice = ref(12800) // 表示 ¥128.00

// 如果后端返回的是元，需要转换
const priceInYuan = 128.00
const totalPrice = ref(Math.round(priceInYuan * 100))

如何实现全选功能？

<template>
  <zx-cart-bar
    v-model:all-checked="allChecked"
    @check-all="handleCheckAll"
  />
</template>

<script setup>
const allChecked = ref(false)

const handleCheckAll = (checked) => {
  // 更新商品列表的选中状态
  cartList.value.forEach(item => {
    item.checked = checked
  })
  
  // 重新计算价格和数量
  calculateTotal()
}
</script>

如何添加页面底部边距？

.page-content {
  padding-bottom: 120rpx; /* 购物车栏高度 + 安全区域 */
}