0.0.1 • Published 7 months ago
@auto-euro/ae-header v0.0.1
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.