@tanzhenxing/zx-settle-bar v1.0.1

SettleBar 结算栏

介绍

结算栏组件，常用于购物车页面底部，支持全选、价格显示、结算按钮等功能。

引入

import { createSSRApp } from 'vue'
import ZxSettleBar from '@/components/zx-settle-bar/zx-settle-bar.vue'

const app = createSSRApp(App)
app.component('zx-settle-bar', ZxSettleBar)

代码演示

基础用法

<template>
  <zx-settle-bar
    :price="totalPrice"
    :selected-count="selectedCount"
    :check-all="checkAll"
    @settle="handleSettle"
    @check-all="handleCheckAll"
  />
</template>

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

const totalPrice = ref(12800) // 128.00元，单位：分
const selectedCount = ref(2)
const checkAll = ref(false)

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

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

显示原价

<template>
  <zx-settle-bar
    :price="12800"
    :original-price="15800"
    :selected-count="2"
  />
</template>

自定义按钮

<template>
  <zx-settle-bar
    :price="12800"
    :selected-count="2"
    button-text="立即购买"
    button-type="danger"
    button-color="#ff4444"
  />
</template>

加载状态

<template>
  <zx-settle-bar
    :price="12800"
    :selected-count="2"
    :loading="loading"
    loading-text="结算中..."
    @settle="handleSettle"
  />
</template>

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

const loading = ref(false)

const handleSettle = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
</script>

提示信息

<template>
  <zx-settle-bar
    :price="12800"
    :selected-count="2"
    tip="满99元免运费"
    tip-icon="info"
  />
</template>

禁用状态

<template>
  <zx-settle-bar
    :price="12800"
    :selected-count="0"
    :disabled="true"
    button-text="请选择商品"
  />
</template>

自定义插槽

<template>
  <zx-settle-bar :price="12800" :selected-count="2">
    <!-- 顶部插槽 -->
    <template #top>
      <view class="custom-top">优惠券可用</view>
    </template>
    
    <!-- 默认插槽 -->
    <view class="custom-content">
      <text>已优惠：¥20.00</text>
    </view>
    
    <!-- 自定义按钮 -->
    <template #button>
      <button class="custom-button" @click="handleCustomSettle">
        去结算
      </button>
    </template>
  </zx-settle-bar>
</template>

API

Props

样式定制 Props

Events

Slots

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

常见问题

如何实现购物车全选功能？

<template>
  <view>
    <!-- 商品列表 -->
    <view v-for="item in cartList" :key="item.id">
      <zx-checkbox 
        v-model="item.checked" 
        @change="updateCheckAll"
      />
      <!-- 商品信息 -->
    </view>
    
    <!-- 结算栏 -->
    <zx-settle-bar
      :check-all="isAllChecked"
      :selected-count="selectedCount"
      :price="totalPrice"
      @check-all="handleCheckAll"
      @settle="handleSettle"
    />
  </view>
</template>

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

const cartList = ref([
  { id: 1, name: '商品1', price: 5000, checked: false },
  { id: 2, name: '商品2', price: 8000, checked: false }
])

// 是否全选
const isAllChecked = computed(() => {
  return cartList.value.length > 0 && cartList.value.every(item => item.checked)
})

// 已选择数量
const selectedCount = computed(() => {
  return cartList.value.filter(item => item.checked).length
})

// 总价
const totalPrice = computed(() => {
  return cartList.value
    .filter(item => item.checked)
    .reduce((total, item) => total + item.price, 0)
})

// 处理全选
const handleCheckAll = (checked) => {
  cartList.value.forEach(item => {
    item.checked = checked
  })
}

// 更新全选状态
const updateCheckAll = () => {
  // 当单个商品选择状态改变时，会自动通过计算属性更新全选状态
}

// 处理结算
const handleSettle = (data) => {
  const selectedItems = cartList.value.filter(item => item.checked)
  console.log('结算商品', selectedItems)
  console.log('结算数据', data)
}
</script>

如何自定义结算按钮样式？

<template>
  <zx-settle-bar :price="12800" :selected-count="2">
    <template #button>
      <view class="custom-button-group">
        <button class="add-to-cart">加入购物车</button>
        <button class="buy-now" @click="handleBuyNow">立即购买</button>
      </view>
    </template>
  </zx-settle-bar>
</template>

<style>
.custom-button-group {
  display: flex;
  gap: 16rpx;
}

.add-to-cart {
  flex: 1;
  height: 80rpx;
  background: #fff;
  border: 2rpx solid #1989fa;
  color: #1989fa;
  border-radius: 40rpx;
}

.buy-now {
  flex: 1;
  height: 80rpx;
  background: #1989fa;
  color: #fff;
  border: none;
  border-radius: 40rpx;
}
</style>