top

В этом репозитории готовим общую "шапку" для сайтов Авто-Евро, реализованную на Vue v2.6

Цель проекта - предоставить коллегам репозиторий, в котором содержатся компоненты с настроенным взаимодействием через events и props.

Начнем с описания иерархии компонентов в шапке.

Getting started

Подключить пакет в проект

Выполнить команду npm i @auto-euro/ae-header.

Импортировать компонент в нужном месте

import AEHeader from '@auto-euro/ae-header';

Название импортируемого компонента может быть произвольным.

Подключить пакет для локальной разработки/тестирования

• Перейти в папку пакета и выполнить команду npm link.

• В проекте, в котором нужно подключить локальную версию проекта, в директории с package.json файлом выполнить команду npm link.

Для отключения локального пакета, выполнить команду npm unlink.

Props

| Name | Type | Require | Default | Description | |------------------------------|----------------|---------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | obtain | Object | True | {} | Объект отображаемого адреса и способа получения | | user-erp-id | String, Number | False | '' | Erp-id пользователя. Передача параметра обозначает залогиненного пользователя | | | brands | Array | False | [] | Список брендов | | logo-link | String | False | '' | Ссылка для перехода по клику на логотип | | favorite-link | String | False | '' | Ссылка для перехода по клику на иконку "Избранное" | | cart-link | String | False | '' | Ссылка для перехода по клику на иконку "Корзина" | | user-login-url | String | False | '' | Ссылка для перехода по клику на "Войти" | | user-logout-url | String | False | '' | Ссылка для перехода по клику на "Выйти" | | user-registration-url | String | False | '' | Ссылка для перехода по клику на "Зарегистрироваться" | | navigation-items | Array | False | [] | Список ссылок для перехода | | user-menu-navigation-items | Array | False | [] | Список ссылок для перехода из меню пользователя | | catalog-menu-categories | Array | False | [] | Дерево меню каталога | | pick-points-list | Array | False | [] | Список адресов самовывоза | | user-addresses | Array | False | [] | Список адресов доставки | | get-geolocation | Boolean | False | false | Нужно ли использовать определение местоположения по геоолокации | | create-address | Function | False | () => {} | Функция создания адреса. При клике на "Добавить адрес" вызываем эту функцию. Входящий параметр соответствует возвращаемому из onCallbackCreateAddress объекту. Если запрос выполнен успешно вызываем onCallbackCreateAddress. |

Emits

Props

| Name | Description | |---------------------------|----------------------------------------------------------------------------------------------------------------| | selectDeliveryAddress | Объект адреса, возвращаемый при выборе адреса в разделе "Доставка". Соответствует объекту из user-addresses | | selectPickupAddress | Объект адреса, возвращаемый при выборе адреса в разделе "Самовывоз". Соответствует объекту из pick-points-list | | onCallbackCreateAddress | Объект адреса, возвращаемый для создания. Соответствует объекту из user-addresses | | updateAddress | Объект адреса, возвращаемый для обновления. Соответствует объекту из user-addresses |

Data models

obtain

| Name | Type | Require | Default | Description | |---------|--------|---------|---------|-----------------| | address | String | True | '' | Адрес в 'шапке' | | erp_id | String | True | '' | erp id адреса |

user-menu-navigation-items

-модель объектов в массиве

| Name | Type | Require | Default | Description | |--------|--------|---------|---------|---------------------------------------------------------------------| | action | String | False | null | Функция, котороя выполнится перед переходом. Может быть асинхронной | | title | String | True | '' | Название ссылки | | url | String | True | '' | ссылка для перехода |

catalog-menu-categories

-модель объектов в массиве

| Name | Type | Require | Default | Example | Description | |-------------------|--------|---------|---------|-----------------------------------------------------------------------------|-----------------------------------------------------------------------------------| | cropped_images | Array | False | [] | [{src: String, width: Number}] | Массив картинок | | full_description | ? | False | null | | ? | | id | Number | True | null | 73657 | Id | | image | String | True | null | 'https://cdn-01.autoeuro.ru/full_size/6134633066324365a636613938663932.jpg' | Ссылка на картинку | | name | String | True | null | 'Масла и технические жидкости' | Название | | path | String | True | null | '/masla-i-tehnicheskie-zhidkosti' | Ссылка | | seo_canonical | ? | False | null | | ? | | seo_description | ? | False | null | | ? | | seo_title | ? | False | null | | ? | | short_description | ? | False | null | | ? | | slug | String | False | null | | Транслит названия | | subcategory | Array | False | [] | | Массив, аналогичный catalog-menu-categories. Для реализации древовидной структуры |catalog-menu-categories

pick-points-list

-модель объектов в массиве

| Name | Type | Require | Default | Example | Description | |------------|--------|---------|---------|-----------------------------------------------------------|--------------------------| | address | String | True | [] | 'г. Москва, ул. Рябиновая 28, стр.6' | Адрес | | area | String | False | null | 'Москва' | | | country_id | Number | False | null | 643 | | | district | String | False | null | 'Москва' | | | enabled | Number | False | null | 1 | | | erp_id | String | True | null | ' A3OLM' | Erp id | | id | Number | False | null | 1 | Id | | map_lat | Number | True | null | 55.693597 | Широта | | map_lon | Number | True | null | 37.421791 | Долгота | | name | String | True | null | 'Рябиновая' | Название | | phones | Array | False | [] | ["+7(495)120-09-41"] | Массив номеров телефонов | | region | String | False | null | 'Центральный федеральный округ' | | | type | String | False | null | 'Офис продаж' | Тип пвз | | work_time | Array | False | [] | ["пн.–пт.: с 9:00 до 20:00", "сб., вс.: с 9:00 до 18:00"] | Массив времени работы | | ws_id | String | False | null | ' DOLM' | |

user-addresses

-модель объектов в массиве

| Name | Type | Require | Default | Description | |--------------|---------|---------|----------------------------------------------------------------------------------------------------|-----------------------------------------------------------| | contact | Object | False | {comment: '', fio: '', phone: ''} | Данные о пользователе. Для редактирования | | deliveryTime | Array | False | [{dayName: "Понедельник", dayIsActive: true, startFromValue: "09:00", startToValue: "19:00"}, ...] | Данные о точке доставки. Для редактирования | | enabled | Boolean | False | False | Если false, не показываем | | id | String | True | '' | Id | | map_lat | Number | True | null | Широта | | map_lon | Number | True | null | Долгота | | name | String | True | null | Название | | verify | Boolean | False | False | Верифицирован ли адрес. Неверифицированные нельзя выбрать |

Версионирование пакета

Пакет лежит в директории компании "https://www.npmjs.com/settings/auto-euro/packages"; Для работы с пакетом (обновление/удаление), необходимо:

• иметь учетную запись на сайте "https://www.npmjs.com";
• учетная запись должна быть добавлена в комманду разработки пакета auto-euro (необходимо обратиться к владельцу пакета);
• быть авторизованным - выполнить в терминале команду npm login и ввести учетные данные.

Для обновления версии пакета, необходимо:

• Перед мержем изменений в код, выполнить команду npm version <номер версии в формате [ major | minor | patch ]> (на данном этапе все изменения в коде должны быть закомичены). Закоммитить изменение версии и запушить в репозиторий.
• Выполнить команду npm publish --access public.