Статья, чтобы разобраться в дизайне страницы расчета электронного заказа?

Go Шаблоны проектирования

предисловие

До сих пор содержание серии SkrShop «Руководство по дизайну электронной коммерции» охватывало следующие основные части:

  • Пользователь
  • товар
  • корзина
  • Маркетинг
  • платить
  • Основные услуги

Сегодня мы готовы начать новую главуЦентр заказов.

Основное содержание серии центров заказов:

Точка знаний
Страница расчета заказа
Создать заказ
выполнение заказа
Статус заказа
Информация для заказа
обратный порядок
...

Во-первых, давайте рассмотрим простой процесс обычных покупок пользователей на платформе электронной коммерции, как показано на следующем рисунке:

Итак, о чем мы сегодня поговорим?

答：今天的这篇文章我们主要就来聊聊上面流程中『订单结算页』的设计与实现。

Как выглядит страница расчета заказа?

Давайте взглянем на страницу расчета заказа определенного Донга:

Давайте взглянем на страницу расчета заказа сокровища:

Из скриншотов выше мы можем примерно нарисоватьстраница расчета заказаСодержание главной страницы:

  • Информация об адресе доставки пользователя по умолчанию
  • Выбор способа оплаты
  • Информация о магазине и продукте
  • Возможные варианты доставки товара
  • Выбор типа счета
  • информация о скидках
  • Сумма заказа
  • и т.д

Состав страницы расчета заказа

Я думал, что внешний интерфейс может быть модульным, но данные внутреннего интерфейса не могут быть модульными?

我的答案：是可以的。

Основываясь на вышеупомянутом содержании, а затем исходя из прошлого опыта, мыстраница расчета заказаВыполните модульное разделение и объединение, чтобы получить следующую страницу расчета заказа:Модульная композиция:

Чтобы узнать, как разработать этот код, вы можете обратиться к моей статье.«Компоненты кода | В моем коде нет ничего другого»

Анализ каждого модуля на странице расчета заказа

Номер модуля имя модуля номер субмодуля имя подмодуля Описание модуля
1 адресный модуль - - Показать лучший адрес пользователя
2 Модуль способа оплаты - - Способы оплаты, поддерживаемые этим заказом
3 модуль магазина - - Включая информацию о магазине, информацию о продукте, информацию об участвующих скидках, дополнительные методы логистики, информацию о послепродажном обслуживании продукта и т. д.
3 - 3.1 товарный модуль Содержит подмодули: модуль базовой информации о продукте, модуль информации о скидках на продукт, модуль послепродажного обслуживания.
3 - 3.2.1 Модуль основной информации о товаре Информация о продукте, название, изображение, цена, наличие на складе и т. д.
3 - 3.2.2 Модуль информации о товарном предложении Выбранный вариант предложения продажи
3 - 3.2.3 Модуль послепродажного обслуживания Информация о послепродажных правах и интересах продуктов
3 - 3.3 Логистический модуль Альтернативные способы доставки
3 - 3.4 Модуль информации о количестве товара в магазине -
4 Модуль счета - - Выберите тип счета и дополните информацию о счете
5 купонный модуль - - Показать список купонов, доступных для этого заказа
6 модуль подарочной карты - - Показать список дополнительных подарочных карт
7 Модуль интеграции с платформой - - Пользователи могут использовать баллы для компенсации части денежных средств.
8 Модуль информации о сумме заказа - - Содержит детали суммы для этого заказа

адресный модуль

Показать лучший адрес для пользователей

Оптимальная адресная логика:

  • Во-первых, адрес по умолчанию, установленный пользователем
  • Если адреса по умолчанию нет, будет возвращен адрес самого последнего заказа.
Имя поля тип Имя подчиненного поля тип Значение поля
consignee string - - Имя грузополучателя
email string - - Адрес электронной почты грузополучателя (код части имени пользователя возвращаемого значения)
mobile string - - Номер мобильного телефона грузополучателя (кодируются средние четыре цифры возвращаемого значения)
country object id int64 Идентификатор страны
country object name string Имя страны
province object id int64 Идентификатор провинции
province object name string Имя провинции
city object id int64 Идентификатор города
city object name string название города
county object id int64 Идентификатор района
county object name string Название района
street object id int64 Идентификатор улицы городка
street object name string Название поселка
detailed_address string - - Подробный адрес (пользователь заполняет вручную)
postal_code string - - почтовый индекс
address_id int64 - - Идентификатор адреса
is_default bool - - Это адрес по умолчанию
label string - - Этикетки типа адреса, домашний, рабочий и т. д.
longitude string - - долгота
latitude string - - широта

Демонстрация данных модуля:

{
    "address_module": {
        "consignee": "收货人姓名",
        "email": "收货人邮箱(返回值用户名部分打码)",
        "mobile": "收货人手机号(返回值中间四位打码)",
        "country": {
            "id": 666,
            "name": "国家名称"
        },
        "province": {
            "id": 12123,
            "name": "省名称"
        },
        "city": {
            "id": 212333,
            "name": "市名称"
        },
        "county": {
            "id": 1233222,
            "name": "区县名称"
        },
        "street": {
            "id": 9989999,
            "name": "街道乡镇名称"
        },
        "detailed_address": "详细地址(用户手填)",
        "postal_code": "邮编",
        "address_id": 212399999393,
        "is_default": false,
        "label": "地址类型标签，家、公司等",
        "longitude": "经度",
        "latitude": "纬度"
    }
}

Модуль способа оплаты

Способы оплаты, поддерживаемые этим заказом

Варианты способа оплаты:

  • Онлайн платеж
  • оплата при доставке
Имя поля тип Имя подчиненного поля тип Значение поля
pay_method_list array id int Идентификатор способа оплаты
pay_method_list array name string Название способа оплаты
pay_method_list array desc string Описание способа оплаты

Демонстрация данных модуля:

{
    "pay_method_module": {
        "pay_method_list": [
            {
                "id": 1,
                "name": "在线支付",
                "desc": "在线支付的描述"
            },
            {
                "id": 2,
                "name": "货到付款",
                "desc": "货到付款的描述"
            }
        ]
    }   
}

модуль магазина

Включая информацию о магазине, информацию о продукте, информацию об участвующих скидках, дополнительные методы логистики, информацию о послепродажном обслуживании продукта и т. д.

Модуль магазина состоит из следующих подмодулей:

  • товарный модуль
    • Модуль основной информации о товаре
    • Модуль информации о товарном предложении
    • Модуль послепродажного обслуживания
  • Модуль товарной логистики
  • Модуль информации об общей сумме товаров в магазине

Поскольку контента здесь больше, позже мы разберем его отдельно.

Модуль счета

Пользователь выбирает тип выставления счета и дополнительную информацию в счете.

Выберите тип выставления счета:

  • личный
  • единица измерения
Имя поля тип Имя подчиненного поля тип Значение поля
type_id int - - Тип счета: индивидуальный, единичный
type_name string - - Название типа счета
type_desc string - - Тип счета Описание

Демонстрация данных модуля:

{
    "invoice_module": {
        "type_list": [
            {
                "type_id": 1,
                "type_name": "个人",
                "type_desc": "描述"
            },
            {
                "type_id": 2,
                "type_name": "公司",
                "type_desc": "描述"
            }
        ]
    }
}

купонный модуль

Возвращает список купонов, доступных для этого заказа, и по умолчанию лучший купон для текущего заказа.

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

Для получения дополнительной информации о купонах, пожалуйста, прочитайте главу о купонах.

модуль подарочной карты

Показать список дополнительных подарочных карт

Имя поля тип Имя подчиненного поля тип Значение поля
giftcard_list array id int64 идентификатор подарочной карты
giftcard_list array name string название подарочной карты
giftcard_list array desc string Описание подарочной карты
giftcard_list array pic_url string подарочная карта картинки
giftcard_list array total_amount float64 Начальная общая сумма подарочной карты
giftcard_list array total_amount_txt string Начальная общая сумма подарочной карты — после форматирования
giftcard_list array remaining_amount float64 Оставшаяся сумма подарочной карты
giftcard_list array remaining_amount_txt string Оставшаяся сумма подарочной карты - после форматирования

Демонстрация данных модуля:

{
    "giftcard_module": {
        "giftcard_list": [
            {
                "id": 341313121,
                "name": "礼品卡名称",
                "desc": "礼品卡描述",
                "pic_url": "礼品卡图片",
                "total_amount": 100.00,
                "total_amount_txt": "100.00",
                "remaining_amount": 21.00,
                "remaining_amount_txt": "21.00"
            }
        ]
    }
}

Модуль интеграции с платформой

Пользователи могут использовать баллы для погашения

Например, Jingdou на странице урегулирования онлайн-заказа определенного Востока.

Имя поля тип Имя подчиненного поля тип Значение поля
order_amount_min float64 - - Минимальная сумма заказа, которую можно оплатить баллами
total_points int64 - - Общее количество баллов пользователя
can_use_points int64 - - Доступные кредиты (могут существовать замороженные кредиты)
points2money_rate int - - Баллы конвертируются в денежное соотношение, например, каждые 100 баллов стоят 1 юань, а минимальный балл 0,01 юаня.
points2money_min int - - Минимальное количество баллов, которое пользователь может использовать для обмена баллов
points2money_max int - - Максимальный лимит баллов, которые можно использовать для одного заказа
points_amount float64 - - Количество баллов, которое может быть списано за этот заказ
points_amount_txt string - - Вычитаемая сумма баллов за заказ - после форматирования

Демонстрация данных модуля:

{
    "points_module": {
        "order_amount_min": 100.00,
        "total_points": 9999,
        "can_use_points": 9999,
        "points2money_rate": 100,
        "points2money_min": 1000,
        "points2money_max": 9999,
        "points_amount": 99.99,
        "points_amount_txt": "99.99"
    }
}

Модуль информации о сумме заказа

Содержит детали суммы для этого заказа

Имя поля тип Имя подчиненного поля тип Значение поля
skus_amount float64 - - Общая сумма товара
promotion_amount float64 - - Общая сумма предложения
freight float64 - - груз
final_amount float64 - - К оплате
promotion_detail object coupon_amount float64 Сумма скидки по купону
promotion_detail object sales_activity_amount float64 Сумма скидки по стимулированию сбыта
promotion_detail object giftcard_amount float64 Сумма использования подарочной карты
promotion_detail object points_amount float64 Сумма списания баллов за заказ 
_txt字段略

Демонстрация данных модуля:

{
    "order_amount_module": {
        "skus_amount": 99.99,
        "skus_amount_txt": "99.99",
        "promotion_amount_total": 10.00,
        "promotion_amount_total_txt": "10.00",
        "freight_total": 8.00,
        "freight_total_txt": "8.00",
        "final_amount": 97.99,
        "final_amount_txt": "97.99",
        "promotion_detail": {
            "coupon_amount": 5.00,
            "coupon_amount_txt": "5.00",
            "sales_activity_amount": 5.00,
            "sales_activity_amount_txt": "5.00",
            "giftcard_amount": 0,
            "giftcard_activity_amount_txt": "0",
            "points_amount": 0,
            "points_amount_txt": "0"
        }
    }
}

Эпилог

Как и выше, содержание страницы расчета заказа в основном представлено.Если у вас есть какие-либо вопросы, не стесняйтесь оставлять сообщение в нашем проекте github.GitHub.com/payee-shop/лошадь….

[Skr Shop] Нажмите и удерживайте адрес проекта, чтобы ввести:GitHub.com/payee-shop/лошадь…

Еще статьи из серии SkrShop:

Категории