uni-app 实现类似阿里巴巴批发SKU选择器功能

要实现类似阿里巴巴批发SKU（Stock Keeping Unit）选择器功能，在uni-app中，你可以通过以下步骤来实现。以下是一个简化的代码案例，展示了如何实现一个基本的SKU选择器功能。

1. 数据准备

首先，我们需要准备SKU数据。通常，SKU数据会包括商品的各种属性及其对应的库存和价格。

data() {
    return {
        skus: [
            { id: 1, attributes: { color: '红', size: 'S' }, stock: 100, price: 50 },
            { id: 2, attributes: { color: '红', size: 'M' }, stock: 50, price: 55 },
            { id: 3, attributes: { color: '蓝', size: 'S' }, stock: 80, price: 60 },
            // 更多SKU数据
        ],
        selectedSku: null, // 当前选中的SKU
    };
}

2. 模板展示

在模板中，我们使用v-for指令遍历SKU数据，并使用v-model绑定选中的SKU。

<template>
    <view>
        <view v-for="sku in skus" :key="sku.id" @click="selectSku(sku)">
            <text>{{ sku.attributes.color }} - {{ sku.attributes.size }}</text>
            <text>库存: {{ sku.stock }}</text>
            <text>价格: ¥{{ sku.price }}</text>
        </view>
        <view v-if="selectedSku">
            <text>已选中: {{ selectedSku.attributes.color }} - {{ selectedSku.attributes.size }}</text>
            <text>价格: ¥{{ selectedSku.price }}</text>
        </view>
    </view>
</template>

3. 方法实现

在方法中，我们实现选择SKU的逻辑。

methods: {
    selectSku(sku) {
        this.selectedSku = sku;
    }
}

4. 样式调整

为了提升用户体验，你可以根据需要调整样式。例如，为选中的SKU添加高亮效果。

<style>
view[v-for] {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}
view[v-for].selected {
    background-color: #f0f0f0;
}
</style>

在JavaScript中，可以通过添加和移除类名来控制样式：

selectSku(sku) {
    // 清除之前的选中状态
    this.skus.forEach(s => s.selected = false);
    // 设置新的选中状态
    sku.selected = true;
    this.selectedSku = sku;
}

并在模板中添加类名绑定：

<view v-for="sku in skus" :key="sku.id" :class="{ selected: sku.selected }" @click="selectSku(sku)">

通过上述步骤，你就可以在uni-app中实现一个基本的SKU选择器功能。根据实际需求，你可以进一步扩展和优化功能，例如添加数量选择器、库存预警等。