前言

截止目前为止SkrShop《电商设计手册》系列梳理的内容已经涵盖了如下几大块：

• 用户
• 商品
• 购物车
• 营销
• 支付
• 基础服务

今天我们准备开启一个新的篇章订单中心。

订单中心系列主要内容如下：

首先，我们来回顾下用户平常在电商平台上的购物的一个简单过程，如下图所示：

所以，今天我们来聊聊什么呢？

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

订单结算页长啥样？

我们来看看某东的订单结算页面：

再来看看某宝的订单结算页面：

通过上面的截图，我们可以大致得出订单结算页面的主要页面内容：

• 用户默认收货地址信息
• 支付方式选择
• 店铺&商品信息
• 商品可选择的配送方式
• 发票类型选择
• 优惠信息
• 订单相关金额
• 等等

订单结算页面的组成

我一直在思考前端可以模块化，后端接口数据不可以模块化吗？

我的答案：是可以的。

我们依据上面整理的内容，再通过以往的经验把订单结算页面进行模块化拆分和组合，得到如下订单结算页面的模块化构成:

关于这块代码如何设计，可以参考我的文章《代码组件 | 我的代码没有else》

订单结算页面各模块分析

地址模块

展示用户的最优地址

最优地址逻辑：

• 首先，用户设置的默认地址
• 如果没有默认地址，则返回最近下单的地址

模块数据demo：

{
    "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": "纬度"
    }
}

支付方式模块

该订单支持的支付方式

支付方式选项：

• 在线支付
• 货到付款

模块数据demo：

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

店铺模块

包含店铺信息、商品信息、参与的优惠信息、可选的物流方式、商品售后信息等

店铺模块由如下子模块组成：

• 商品模块
  • 商品基础信息模块
  • 商品优惠信息模块
  • 售后模块
• 商品物流模块
• 店铺商品总金额信息模块

由于此处内容比较多我们之后再来单独分析。

发票模块

用户选择开发票的类型以及补充发票信息

选择开发票的类型：

• 个人
• 单位

模块数据demo：

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

优惠券模块

返回该订单可以使用的优惠券列表，以及默认选择对于当前订单而言的最优优惠券

• 展示用户的优惠券列表：当前订单可用的排最前面其他放最后面
• 默认选中最优优惠券：对于当前订单优惠力度最大的一张优惠券

关于优惠券的其他内容可以阅读优惠券章节内容。

礼品卡模块

展示可以选择使用礼品卡列表

模块数据demo：

{
    "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"
            }
        ]
    }
}

平台积分模块

用户可以使用积分抵现

比如上线某东订单结算页面中的京豆。

模块数据demo：

{
    "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"
    }
}

订单金额信息模块

包含该订单的金额明细

_txt字段略

模块数据demo：

{
    "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项目下留言 https://github.com/skr-shop/manuals/issues。