更新记录

1.0.0（2025-11-15） 下载此版本

首次发布

平台兼容性

uni-app(3.6.14)

uni-app x(3.6.14)

其他

hy-cascade-select

外卖级联选择组件，基于UTS开发，支持左右分类选择，适用于外卖、电商等场景。

基本用法

<template>
    <hy-cascade-select
        :categories="categories"
        :products="products"
        :cartItems="cartItems"
        @categoryChange="onCategoryChange"
        @productClick="onProductClick"
        @addToCart="onAddToCart"
        @removeFromCart="onRemoveFromCart"
    />
</template>

<script>
export default {
    data() {
        return {
            categories: [
                { id: 1, name: "分类1" },
                { id: 2, name: "分类2" }
            ],
            products: [
                { id: 1, name: "商品1", price: 10, categoryId: 1 }
            ],
            cartItems: []
        }
    },
    methods: {
        onCategoryChange(category) {
            console.log('分类切换:', category)
        },
        onProductClick(product) {
            console.log('商品点击:', product)
        },
        onAddToCart(product) {
            console.log('添加到购物车:', product)
        },
        onRemoveFromCart(product) {
            console.log('从购物车移除:', product)
        }
    }
}
</script>

## 自定义插槽示例

```vue
<template>
    <hy-cascade-select
        :categories="categories"
        :products="products"
        :cart-items="cartItems"
    >
        <!-- 自定义分类项 -->
        <template #category="{ category, active }">
            <view class="custom-category">
                <text :class="{ active }">{{ category.name }}</text>
                <text v-if="category.badge" class="badge">{{ category.badge }}</text>
            </view>
        </template>

        <!-- 自定义商品项 -->
        <template #product="{ product, cartCount }">
            <view class="custom-product">
                <image :src="product.image" class="thumb" />
                <view class="info">
                    <text class="name">{{ product.name }}</text>
                    <text class="price">¥{{ product.price }}</text>
                </view>
                <text v-if="cartCount > 0" class="count">{{ cartCount }}</text>
            </view>
        </template>

        <!-- 自定义空状态 -->
        <template #empty-product>
            <view class="custom-empty">
                <image src="/static/empty.png" />
                <text>暂时没有商品哦~</text>
            </view>
        </template>
    </hy-cascade-select>
</template>

## API

### Props

| 参数 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| categories | Array<CategoryItem> | [] | 分类数据 |
| products | Array<ProductItem> | [] | 商品数据 |
| cartItems | Array<ProductItem> | [] | 购物车数据（用于统计数量/库存） |
| leftWidth | String | `200rpx` | 左侧分类区域宽度 |
| rightColumns | Number | `2` | 右侧商品栅格列数 |
| showCount | Boolean | `false` | 是否展示分类下商品数量 |
| emptyCategoryText | String | `暂无分类` | 分类为空时的提示文案 |
| emptyProductText | String | `暂无商品` | 商品为空时的提示文案 |
| currencySymbol | String | `¥` | 价格符号（支持自定义货币） |
| autoCount | Boolean | `true` | 是否根据商品列表自动计算分类数量 |
| enableStockCheck | Boolean | `true` | 是否启用库存校验并限制加购 |
| productImageMode | String | `aspectFill` | 商品图片 `mode` 值 |
| categoryItemClass | String | `''` | 分类项自定义类名 |
| categoryItemStyle | String/Object | `''` | 分类项自定义样式 |
| productItemClass | String | `''` | 商品项自定义类名 |
| productItemStyle | String/Object | `''` | 商品项自定义样式 |
| activeColor | String | `#007aff` | 激活态颜色 |
| priceColor | String | `#ff6b35` | 价格颜色 |

### Events

| 事件名 | 参数 | 说明 |
| --- | --- | --- |
| categoryChange | category | 分类切换事件 |
| productClick | product | 商品点击事件 |
| addToCart | product | 添加到购物车 |
| removeFromCart | product | 从购物车移除 |
| stockLimit | product | 触发库存上限提示（`enableStockCheck` 为 `true` 时生效） |

### Slots

| 插槽名 | 参数 | 说明 |
| --- | --- | --- |
| category | `{ category, index, active }` | 自定义分类项内容 |
| product | `{ product, index, soldOut, cartCount }` | 自定义商品项内容 |
| empty-category | - | 自定义分类为空时的内容 |
| empty-product | - | 自定义商品为空时的内容 |

### 数据结构

```CategoryItem

interface CategoryItem {
    id: string | number
    name: string
    count?: number
    active?: boolean
}

interface ProductItem {
    id: string | number
    name: string
    price: number
    image?: string
    description?: string
    categoryId: string | number
    count?: number
    stock?: number
}