OSCHINA-MIRROR/vk-uni-vk-u-goods-sku-popup

Плагин vk-data-goods-sku-popup — это компонент бизнес-ориентированного типа, который управляется данными. Он разработан VK и является частью плагина vk-unicloud-router.

Для обсуждения вопросов и предложений по этому плагину можно присоединиться к исследовательской группе Q в униОблаке: 22466457.

Плагин «Товары sku: выборка компонентов» (премиум-версия)

Этот плагин используется для выбора параметров товаров на страницах с их подробным описанием.

Скачать плагин можно по ссылке: нажмите, чтобы скачать компонент sku.

Обратите внимание, что начиная с версии 1.1.0, компонент определён как компонент datacom (data components), а его название изменено с vk-u-goods-sku-popup на vk-data-goods-sku-popup.

Datacom — это компоненты, управляемые данными, которые представляют собой подкласс базовых компонентов Vue. Они отличаются тем, что им присваивается набор данных, на основе которых автоматически выводятся результаты.

Компоненты бизнес-ориентированного типа предоставляют готовые решения для конкретных бизнес-задач и не требуют дополнительной настройки.

Преимущества использования datacom для разработчиков включают:

сокращение объёма кода;
более чёткую структуру проекта;
стандартизацию данных между сервером и клиентом.

Пример использования плагина:

Загрузите файл findGoodsInfo в каталог cloudfunctions.
Запустите проект.

Чтобы установить компонент в свой проект, выполните следующие шаги:

Скопируйте файлы vk-data-goods-sku-popup и vk-data-input-number-box из каталога components в корневой каталог вашего проекта. Если у вас нет каталога components, создайте его.
Используйте компонент, следуя примеру ниже. Документация API находится в конце текста.

Пример использования

<!-- Статическая версия данных для любого бэкенда -->
<template>
    <view class="app">
        <button @click="openSkuPopup()">Открыть компонент SKU</button>

        <vk-data-goods-sku-popup
            ref="skuPopup"
            v-model="skuKey"
            border-radius="20"
            :z-index="990"
            :localdata="goodsInfo"
            :mode="skuMode"
            @open="onOpenSkuPopup"
            @close="onCloseSkuPopup"
            @add-cart="addCart"
            @buy-now="buyNow"
        ></vk-data-goods-sku-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // Открыт ли компонент SKU
            skuKey: false,
            // Режим компонента SKU
            skuMode: 1,
            // Данные о товаре от бэкенда
            goodsInfo: {}
        };
    },
    // Загрузка при каждом переходе на страницу
    onLoad(options) {
        this.init(options);
    },
    methods: {
        // Инициализация
        init(options = {}) {},
        // Получение данных о товаре и открытие компонента sku
        openSkuPopup() {
            /**
             * Получить данные о товаре
             * Здесь каждый раз при открытии компонента SKU запрашиваются данные о товаре, чтобы отображать актуальное количество товара на складе
             */
            // Здесь вы можете написать код для запроса данных и обработать их в формате goodsInfo
            this.goodsInfo = {
                "_id": "001",
                "name": "iphone11",
                "goods_thumb": "https://img14.360buyimg.com/n0/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
                "sku_list": [
                    {
                        "_id": "001",
                        "goods_id": "001",
                        "goods_name": "iphone11",
                        "image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
                        "price": 19800,
                        "sku_name_arr": ["красный", "128G", "открытая версия"],
                        "stock": 1000
                    },
                    {
                        "_id": "002",
                        "goods_id": "001",
                        "goods_name": "iphone11",
                        "image": "https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg",
                        "price": 9800,
                        "sku_name_arr": ["белый", "256G", "открытая версия"],
                        "stock": 100
                    }
                ]
            };
        }
    }
};
</script> ```
spec_list: [
    {
        "name": "Цвет",
        "list": [
            { "name": "Красный" },
            { "name": "Чёрный" },
            { "name": "Белый" }
        ]
    },
    {
        "name": "Память",
        "list": [
            { "name": "128G" },
            { "name": "256G" }
        ],
    },
    {
        "name": "Версия",
        "list": [
            { "name": "Открытая версия" },
            { "name": "Неоткрытая версия" }
        ]
    }
];
this.skuKey = true;
},
// sku组件 开始-----------------------------------------------------------
onOpenSkuPopup() {
    console.log("Отслеживание - открытие sku компонента");
},
onCloseSkuPopup() {
    console.log("Отслеживание - закрытие sku компонента");
},
// перед добавлением в корзину
addCartFn(obj) {
    let { selectShop } = obj;
    // имитация добавления в корзину, пожалуйста, замените на свою логику добавления в корзину
    let res = {};
    let name = selectShop.goods_name;
    if (selectShop.sku_name != "по умолчанию") {
        name += "-" + selectShop.sku_name_arr;
    }
    res.msg = `${name} добавлен в корзину`;
    if (typeof obj.success == "function") obj.success(res);
},
// кнопка добавления в корзину
addCart(selectShop) {
    console.log("Отслеживание - добавление в корзину");
    this.addCartFn({
        selectShop: selectShop,
        success: res => {
            // в реальном бизнесе, пожалуйста, замените свою логику добавления в корзину
            this.toast(res.msg);
            setTimeout(() => {
                this.skuKey = false;
            }, 300);
        }
    });
},
// покупка сейчас
buyNow(selectShop) {
    console.log("Отслеживание - покупка сейчас");
    this.addCartFn({
        selectShop: selectShop,
        success: res => {
            // в реальном бизнесе, пожалуйста, замените свою логику покупки сейчас
            this.toast("Покупка сейчас");
        }
    });
},
toast(msg) {
    uni.showToast({
        title: msg,
        icon: "none"
    });
}
};
``` | Товарная информация | Источник локальных данных |
| --- | --- |
| safe-area-inset-bottom | Включать ли адаптацию к безопасной области снизу | Boolean | true, true или false |
| amount-type | По умолчанию сумма делится на 100 (то есть 100 = 1 юань), если установлено значение 0, то не делится на 100 (т. е. 1 = 1 юаню) | Number | 1 | 0 |
| custom-action | Функция для получения информации о товаре (известно, что Alipay не поддерживает, пожалуйста, измените использование localdata для Alipay) | Function | null | - |
| show-close | Отображать ли кнопку закрытия в правом верхнем углу | Boolean | true | true или false |
| close-image | Адрес изображения кнопки закрытия | String | - | - |
| z-index | Значение z-индекса окна | Number | 990 | - |
| price-color | Цвет шрифта цены | String | #fe560a | - |
| buy-now-text | Текст кнопки «Купить сейчас» | String | Купить сейчас | - |
| buy-now-color | Цвет текста кнопки «Купить сейчас» | String | #ffffff | - |
| buy-now-background-color | Цвет фона кнопки «Купить сейчас» | String | #fe560a | - |
| add-cart-text | Текст кнопки добавления в корзину | String | Добавить в корзину | - |
| add-cart-color | Цвет текста кнопки добавления в корзину | String | #ffffff | - |
| add-cart-background-color | Цвет фона кнопки добавления в корзину | String | #ff9402 | - |
| goods-thumb-background-color | Цвет фона миниатюры товара | String | - | - |
| disable-style | Стиль — стиль кнопки, когда она недоступна для нажатия | Object | null | - |
| actived-style | Стиль — стиль кнопки при нажатии | Object | null | - |
| btn-style | Стиль — обычный стиль кнопки | Object | null | - |
| goods-id-name | Имя поля — имя поля id таблицы товаров | String | _id | - |
| sku-id-name | Имя поля — имя поля id таблицы sku | String | _id | - |
| sku-list-name | Имя поля — имя поля списка sku, связанного с товаром | String | sku_list | - |
| spec-list-name | Имя поля — имя поля спецификации товара | String | spec_list | - |
| stock-name | Имя поля — поле запаса sku | String | stock | - |
| sku-arr-name | Имя поля — имя поля пути sku (порядок элементов массива должен соответствовать списку спецификаций) | String | sku_name_arr | - |
| goods-thumb-name | Имя поля — поле миниатюры товара (когда sku не выбрано) | String | goods_thumb | - |

### Событие

| Событие | Описание | Параметры обратного вызова |
|---|---|---|
| open | При открытии компонента | |
| close | При закрытии компонента | |
| cart | При нажатии кнопки «Добавить в корзину» (необходимо выбрать SKU перед запуском) | selectShop: текущие данные sku |
| buy | При нажатии кнопки «Купить сейчас» (необходимо выбрать SKU перед запуском) | selectShop: текущие данные sku |

## Важное примечание

### `skuArrName (sku_name_arr)` и `specListName (spec_list)` соответствуют порядку

```js
// Для удобства объяснения здесь показаны только поля sku_name_arr и spec_list
{
    "_id":"001",
    "sku_list": [
        {
            "sku_name_arr": ["красный цвет", "128G", "открытая версия"],
        }
    ],
    "spec_list": [
        {
            "name": "цвет",
            "list": [{"name": "красный цвет"},{"name": "чёрный цвет"},{"name": "белый цвет"}]
        },
        {
            "name": "память",
            "list": [{"name": "128G"},{"name": "256G"}]
        },
        {
            "name": "версия",
            "list": [{"name": "открытая версия"},{"name": "непубличная версия"}]
        }
    ]
}

sku_name_arr массив, первое значение sku_name_arr[0] = spec_list[0].list любой элемент name атрибут значения
sku_name_arr массив, второе значение sku_name_arr[1] = spec_list[1].list любой элемент name атрибут значения
sku_name_arr массив, третье значение sku_name_arr[2] = spec_list[2].list любой элемент name атрибут значения
Если sku_name_arr[0] = "красный цвет", то spec_list[0].list должен иметь и только один элемент со значением атрибута name, равным "красный цвет"

Пример товара с одной спецификацией (без спецификации)

{
  "_id":"003",
  "name": "Диор Парфюм",
  "goods_thumb":"https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
  "sku_list": [
    {
      "_id": "006",
      "goods_id": "003",
      "goods_name": "Диор Парфюм",
      "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
      "price": 19800,
      "sku_name_arr": ["по умолчанию"],
      "stock": 100
    }
  ],
  "spec_list": [
    {}
  ]
} ```
{
  "_id": "002",
  "name": "Дио. Парфюмерная вода",
  "goods_thumb": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
  "sku_list": [
    {
      "_id": "004",
      "goods_id": "002",
      "goods_name": "Дио. Парфюмерная вода",
      "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
      "price": 19800,
      "sku_name_arr": ["50 мл / флакон"],
      "stock": 100
    },
    {
      "_id": "005",
      "goods_id": "002",
      "goods_name": "Дио. Парфюмерная вода",
      "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
      "price": 9800,
      "sku_name_arr": ["70 мл / флакон"],
      "stock": 100
    }
  ],
  "spec_list": {
    "list": [
      {
        "name": "20 мл / флакон"
      },
      {
        "name": "50 мл / флакон"
      },
      {
        "name": "70 мл / флакон"
      }
    ],
    "name": "Спецификация"
  }
}

{
  "_id": "001",
  "name": "iPhone 11",
  "goods_thumb": "https://img14.360buyimg.com/n0/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
  "sku_list": [
    {
      "_id": "001",
      "goods_id": "001",
      "goods_name": "iPhone 11",
      "image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
      "price": 19800,
      "sku_name_arr": ["красный цвет", "128 ГБ", "открытая версия"],
      "stock": 100
    },
    {
      "_id": "002",
      "goods_id": "001",
      "goods_name": "iPhone 11",
      "image": "https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg",
      "price": 9800,
      "sku_name_arr": ["белый цвет", "256 ГБ", "открытая версия"],
      "stock": 100
    },
    {
      "_id": "003",
      "goods_id": "001",
      "goods_name": "iPhone 11",
      "image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
      "price": 19800,
      "sku_name_arr": ["красный цвет", "256 ГБ", "открытая версия"],
      "stock": 100
    }
  ],
  "spec_list": {
    "list": [
      {
        "name": "красный цвет"
      },
      {
        "name": "чёрный цвет"
      },
      {
        "name": "белый цвет"
      }
    ],
    "name": "Цвет"
  },
  {
    "list": [
      {
        "name": "128 ГБ"
      },
      {
        "name": "256 ГБ"
      }
    ],
    "name": "Объём памяти"
  },
  {
    "list": [
      {
        "name": "открытая версия"
      },
      {
        "name": "неоткрытая версия"
      }
    ],
    "name": "Версия"
  }
}
``` {
  "Первая группа спецификаций, название значения спецификации третьего пункта":
    "name": "белый цвет",
  },
  {
    // Название первой группы спецификаций
    "name": "цвет",
  },
  {
    "list": [
      {
        // Название значения спецификации первого пункта второй группы спецификаций
        "name": "128G",
      },
      {
        // Название значения спецификации второго пункта второй группы спецификаций
        "name": "256G",
      }
    ],
    // Название второй группы спецификаций
    "name": "память",
  },
  {
    "list": [
      {
        // Название значения спецификации первого пункта третьей группы спецификаций
        "name": "открытая версия",
      },
      {
        // Название значения спецификации второго пункта третьей группы спецификаций
        "name": "не открытая версия",
      }
    ],
    // Название третьей группы спецификаций
    "name": "версия",
  }
}

## uniCloud云函数路由开发框架研究Q群:`22466457` 如有问题或建议可以在群内讨论。
## 你也可以在 комментариях опубликовать сообщение для обмена опытом.