Skip to content

Главный экран кассы самооблуживания (КСО)

Jump to bottom Edit New page
NickAssai edited this page Oct 7, 2024 · 1 revision

Главный экран кассы самооблуживания (КСО)

Главный экран КСО

Главный экран кассового приложения является центральным элементом взаимодействия между пользователем и кассовым программным обеспечением (ПО), обеспечивая добавление товаров в чек, проведение платежей, отмену операций и выполнение других действий, связанных с работой кассы.

Структура элементов экрана

Неактивные компоненты

Заголовок "Наименование", "Количество", "Сумма"

Оглавление

  • Назначение: Это часть интерфейса и выполняют роль визуального разделителя. Они помогают пользователю легко ориентироваться между столбцами: в первом отображается наименование выбранного товара, во втором — его количество, а в третьем — цена.

Область отображения наименований товаров, количества и их цен

Наименование

  • Назначение: Это элемент интерфейса предназначен для отображения списка всех выбранных пользоваталем товаров и их стоимости. Каждый раз, когда вы сканируете или добавляете товар вручную, его наименование, количество и цена появляются в области поле отобрабражения товара.

Поле отображения товара

1 оригинал

  • Назначение: Для каждого добавленного товара отображается его наименование, цена за единицу товара и итоговая стоимость позиции. На примере показан, термопакет для пищевых продуктов. Это дает пользователю четкое представление о выбранном товаре, его количестве и стоимости.
  • События:
  1. [onClick] - нажатие на кнопку "Х" удаляет текущую позицию из списка.
  2. [onClick] - нажатие на кнопку "+" увеличивает количество товара на 1 (измеряется в штуках) и заменяет кнопку "X" на кнопку "-".

2 оригинал

  1. [onClick]- нажатие на кнопку "-" уменьшает количество выбранного товара на 1(измеряется в штуках) и если количество становится 1, возвращает кнопку "Х".
  • Логика взаимодействия:
  1. Кнопка с крестиком "Х": Позволяет удалить выбранный товар из списка, после нажатия выбранная строка изменяет свой цвет на темный и не учитывается при осуществлении процесса оплаты покупки.
  2. Кнопка с плюсом "+": Используется для увелечения количества выбранного товара без повторого сканирования. При нажатию на которую кнопка "Х" заменяется на "-".
  3. Кнока "-": Дает возможность уменьшить количество товара, если было выбрано больше, чем необходимо. Если товар остается в одном экземпляере, кнопка "-" заменяется на "Х".
  • Технические параметры (разработка):

Дополнительная кнопка "Добавить пакет"

Добавить пакет.jph

  • Назначение: Кнопка "Добавить пакет" с ценой 8 рублей уже размещена на главном экране кассы. Она позволяет пользователю легко и быстро добавить пакет к текущей покупке.
  • События: [onClick] - добавляет пакет в список покупок.
  • Логика взаимодействия: При нажатии на кнопку "Добавить пакет" пакет автоматически помещается в корзину, а общая сумма покупки обновляется с учётом стоимости пакета.

Итоговая строка

Итоговая сумма

  • Назначение: Этот элемент находясь в нижней части интерфейса, дает пользователям обратную связь о текущей итоговой сумме всех выбранных товаров до момента совершения оплаты.

Версия сборки

номер магазина.

  • Назначение: Данный скриншот несет в себе информацию, идентифицирующую номер торговой точки и номер кассы, а также текущую версию сборки ПО. Информация может меняться в зависимости от номера торговой точки (ТТ) и версии ПО.
  • Описание:
    • [999.**]: Указывает номер ТТ, где установлена касса.
    • [**.77]: Показывает номер конкретного кассового аппарата на ТТ.
    • [849]: Отражает версию сборки ПО для бэкенда.
    • [1.0.479]: Отражает версию пользовательского интерфейса (фронтенда).
    • \12:02: Показывает текующее время
    • \03.10.24: Показывает текущую дату

Активные компоненты

Поиск товаров

Поиск товаров

  • Назначение: Позволяет пользователю начать поиск товара в кассовой системе.
  • События: [onClick] - открывает экран поиска товара.
  • Логика взаимодействия: При нажатии на кнопку активируется функция поиска, которая открывает интерфейс, где пользователь может выбрать нужные категории для поиска товара.

Отменить покупку

Отменить покупку

  • Назначение: Предоставляет возможность пользователю отменить текущий процесс покупки.
  • События: [onClick] - инициирует отмену текущей покупки.
  • Логика взаимодействия: Нажатие на кнопку вызывает диалоговое окно подтверждения отмены покупки.

Позвать на помощь

Кнопка позвать на помощь

  • Назначение: Оказание помощи пользователю персоналом магазина.
  • События: [onClick] - отображение всплывающего окна с информацией помощи.
  • Логика взаимодействия: При нажатии на кнопку активируется всплывающее уведомление:

Помощь сотрудника

Карта лояльности

Карта лояльности

  • Назначение: Ввод и привязка пользователя с помощью карты лояльности, QR-кода или номеа телефона к покупке для получения скидок или бонусов.
  • События: [onClick] - запускает модальное окно
  • Логика взаимодействия: Нажатие на кнопку подтверждения запускает процесс, где приложение отправляет запрос для предложения ввода данных пользователя для входа в программу лояльности. В ответ на эту операцию на экране появляется модальное окно карты лояльности.
  • Технические параметры:
  • API запрос при активации модального окна "Карта лояльности"
    • API запрос при активации модального окна "Карта лояльности":
      • Метод: POST
      • URL-адрес: http://localhost:8080/pos/app/send-to-all-socket
      • Описание: Данный запрос предназначен для выполнения действия, указанного в теле запроса — в данном случае, для открытия модального окна карты лояльности.
      • Тело запроса: { action: "openQR" type: "casuer" }
      • Ссылка на документацию метода*

Кнопки навигации

Стрелки (на главном экране)

  • Назначение: Способ перемещения по выбранным товарам в корзине.
  • События: [onClick] - меняет выбранный товар.
  • Логика взаимодействия: При нажатии на кнопку навигации, происходит изменение выбранной позиции в корзине (вверх/вниз) для последующего взаимодействия с товаром.

Весовые товары

Весовые товары

  • Назначение: Упрощение процесса выбора товаров по категории весовых товаров.
  • События: [onClick] - инициирует открытие нового экрана.
  • Логика взаимодействия: Пользователь нажимает на кнопку категории, что приводит к отображению экрана весовых товаров.

Напитки с собой

Напитки с собой2.jpg

  • Назначение: Позволяет пользователю перейти в раздел "Поиск товаров" для выбора напитков.
  • События: [onClick] — открывает экран "Поиск товара".
  • Логика взаимодействия: При нажатии на кнопку "Напитки с собой" открывается интерфейс "Поиск товара", где пользователь может выбрать напитки и добавить их в корзину, нажав на соответствующую категорию.

Оплатить покупку

Кнопка Оплатить покупку

  • Назначение: Запуск процесса оплаты выбранных в корзине товаров.
  • События: [onClick] - инициирует открытие нового экрана.
  • Логика взаимодействия: Нажатие на кнопку инициирует переход к следующему этапу оформления покупки - процессу оплаты.
  • Технические параметры:
  1. API запрос на пересчет стоимости товаров в корзине перед оплатой:
  • Метод: POST
  • URL-адрес: http://localhost:8080/pos/current-check/commands/recalculate
  • Описание: Вызов метода используется для пересчета итоговой стоимости товаров в корзине перед инициацией процесса оплаты.
  • Ссылка на документацию метода
  1. API запрос для получения текущего состояния корзины:
  • Метод: GET
  • URL-адрес: http://localhost:8080/pos/current-check
  • Описание: После пересчёта, вызов метода используется для получения данных о текущем состоянии корзины перед началом оплаты.
  • Ссылка на документацию метода
  1. API запрос для получения состояния системы:
  • Метод: GET
  • URL-адрес: http://localhost:8080/pos/app/state
  • Описание: После проверки состояния корзины, вызов метода используется для проверки текущего состояния системы перед оплатой.
  • Ссылка на документацию метода

Взвесить "Манго Египет"

Манго на гл экране

  • Назначение: Позволяет пользователю быстро взвесить и заказать товар, который может меняться в зависимости от сезона.
  • События: [onClick] - при нажатии на кнопку товар добавляется в корзину и открывается интерфейс для его взвешивания.
  • Логика взаимодействия: Пользователь нажимает на кнопку "Взвесить 'Манго Египет'" (сезонный продукт может меняться). После этого открывается интерфейс, позволяющий пользователю взвесить товар и добавить его в корзину.
<title>Title</title> <style> @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic); 
  body { font-family: 'Droid Serif'; }
  h1, h2, h3 {
    font-family: 'Yanone Kaffeesatz';
    font-weight: normal;
  }
  .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
<textarea id="source">

Code:

def add(a,b)
  a + b
end
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
  var slideshow = remark.create();
</script>
Clone this wiki locally