uni-app 求助大佬开发类似奶茶点餐组件 左侧商品分类右侧分类下商品 支持二级分类

了解你的需求后，以下是一个简单的示例代码，用于在 uni-app 中创建一个类似奶茶点餐的组件，左侧显示商品分类，右侧显示分类下的商品，并支持二级分类。这个示例使用了 uni-app 的基础组件和样式，你可以根据需要进行进一步的自定义和扩展。

1. 数据结构

首先，定义数据结构，包括分类和商品信息：

data() {
    return {
        categories: [
            {
                id: 1,
                name: '奶茶',
                subCategories: [
                    {
                        id: 11,
                        name: '原味奶茶',
                        products: [
                            { id: 111, name: '小杯原味奶茶', price: 10 },
                            { id: 112, name: '大杯原味奶茶', price: 15 }
                        ]
                    },
                    {
                        id: 12,
                        name: '珍珠奶茶',
                        products: [
                            { id: 121, name: '小杯珍珠奶茶', price: 12 },
                            { id: 122, name: '大杯珍珠奶茶', price: 17 }
                        ]
                    }
                ]
            },
            // 更多分类...
        ],
        selectedCategoryId: null,
        selectedSubCategoryId: null
    };
}

2. 模板

接下来，在模板中渲染分类和商品：

<view class="container">
    <view class="categories">
        <view
            v-for="category in categories"
            :key="category.id"
            class="category"
            @click="selectCategory(category.id)"
        >
            {{ category.name }}
        </view>
    </view>
    <view class="products" v-if="selectedCategoryId">
        <view
            v-for="subCategory in getSelectedSubCategories"
            :key="subCategory.id"
            class="sub-category"
            @click="selectSubCategory(subCategory.id)"
        >
            {{ subCategory.name }}
        </view>
        <view class="product-list" v-if="selectedSubCategoryId">
            <view
                v-for="product in getSelectedProducts"
                :key="product.id"
                class="product"
            >
                {{ product.name }} - ￥{{ product.price }}
            </view>
        </view>
    </view>
</view>

3. 方法

在方法中实现分类和子分类的选择逻辑：

methods: {
    selectCategory(id) {
        this.selectedCategoryId = id;
        this.selectedSubCategoryId = null;
    },
    selectSubCategory(id) {
        this.selectedSubCategoryId = id;
    },
    getSelectedSubCategories() {
        return this.categories.find(c => c.id === this.selectedCategoryId).subCategories;
    },
    getSelectedProducts() {
        return this.getSelectedSubCategories.find(sc => sc.id === this.selectedSubCategoryId).products;
    }
}

4. 样式

最后，添加一些基础样式：

<style>
.container {
    display: flex;
}
.categories, .products {
    width: 50%;
    padding: 10px;
}
.category, .sub-category {
    margin: 5px 0;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
}
.product {
    margin: 5px 0;
}
</style>

这个示例提供了一个基础框架，你可以根据实际需求进行扩展和美化。