spz-order-detail 订单详情

支持布局: container

何时使用

需要展示订单详情，一般用在订单详情页面。

代码演示

基本用法

该组件将业务逻辑都封装起来，我们可以直接使用封装好的数据来展示订单详情。

模版数据

需要多语言的数据都组件内部都支持了多语言，可以直接使用。（只包含组件处理过的数据，原接口数据不变）

订单详情数据：

属性名	说明	类型
`showAddToCart`	是否展示加购按钮	boolean
`order_info.orderStatus`	订单状态	string
`order_info.orderStatusColor`	订单状态颜色状态	string
`order_info.orderTip`	订单提示信息，例如：`The order is awaiting your payment`	string
`line_items[0].parsedProperties`	解析商品数据里的 `properties` 属性为一个对象	Object
`line_items[0].shippingStatus`	订单的物流状态	string
`line_items[0].xQty`	商品数量带 `x` 前缀，例如：`x12`	string
`line_items[0].optionValueJoinInSlash`	将商品数据里的 `options` 数组的值取出来用 `/` 分隔展示，例如：`black / L`	string
`line_items[0].optionsJoinInColon`	将商品数据里的 `options` 数组的名/值格式为 `name: value` 形式，例如：`color: black`	Array
`summary`	-	Object

summary 对象数据

以下是 summary 对象数据的描述以及每个字断是由哪些原始字段组合而成的。

{
  "contact_name": {
    "label": "Contact name",
    "value": "..." // => `${shipping_address.first_name} ${shipping_address.last_name}`
  },
  "address": {
    "label": "Address",
    "value": "...", // => `${shipping_address.address}`
    "value1": "...", // => `${shipping_address.province} ${shipping_address.country}`
    "value2": "...", // => `${shipping_address.address1} ${shipping_address.area} ${shipping_address.city}`
    "value3": "...", // => `${shipping_address.address},${shipping_address.address1},${shipping_address.area},${shipping_address.city},${shipping_address.province}`
  },
  "company": {
    "label": "Company",
    "value": "...", // => `${shipping_address.company}`
  },
  "zip": {
    "label": "Zip Code",
    "value": "...", // => `${shipping_address.zip}`
  },
  "contact_info": {
    "label": "Contact Info",
    "email": "...", // => `${shipping_address.email}`
    "phone": "..." // => `${shipping_address.phone}`
  },
  "cpf": {
    "label": "...", // => `${shippingAddress.extra_info?.tax_text || 'CPF/CNPJ'}`,
    "value": "..." // => `${shippingAddress.extra_info?.cpf}`
  },
  "create_time": {
    "label": "Order time",
    "value": "...", // => `${order_info.create_time}`
    "parsedTime": {/* ... */} // => parsedTime 对象
  },
  "order_no": {
    "label": "Order ID",
    "value": "..." // => `${order_info.order_no}`
  },
  "shipping_status": {
    "label": "Shipment status",
    "value": "..." // => orderInfo.fulfillment_status 状态对应的多语言
  },
  "payment_status": {
    "label": "Payment status",
    "value": "..." // => order_info.financial_status 状态对应的多语言
  },
  "email": "...", // => `${shipping_address.email}`
  "phone": "...", // => `${shipping_address.phone}`
  "payment_methods": {
    "label": "...", // => 根据 order_info.payment_progress 来判断要展示的文案
    "lines": [/* ... */], // => 根据 order.payment_lines 数组过滤不符合条件的礼品卡数据
    "available": "Boolean", // => 礼品卡是否需要展示
    "hasExchangeRate": "Boolean" // => 礼品
  },
  "total": {
    "label": "Total amount",
    "value": "..." // => order_info.total
  },
  "sub_total": {
    "label": "Product amount",
    "value": "..." // => order_info.sub_total
  },
  "discount_total": {
    "label": "Product amount",
    "value": "..." // => order_info.discount_total
  },
  "code_discount_total": {
    "label": "Discount code",
    "label1": "...", // => `${order_info.code_discount_total} (${order_info.discount_code})`
    "value": "...", // => order_info.code_discount_total
  },
  "total_tip_received": {
    "label": "Tip",
    "value": "..." // => order_info.total_tip_received
  },
  "shipping_total": {
    "label": "Shipping cost",
    "value": "..." // => order_info.shipping_total
  },
  "tax_total": {
    "label": "Tax",
    "value": "..." // => order_info.tax_total
  }
}

parsedTime 对象数据

属性名	描述	输出
`YYYY`	四位数的年份	2023
`M`	月份，从1开始	1-12
`MM`	月份，两位数	01-12
`MMM`	缩写的月份名称	Jan-Dec
`D`	月份里的一天	1-31
`DD`	月份里的一天，两位数	01-31
`ddd`	缩写的星期名称	Mon-Sun
`H`	小时	0-23
`HH`	小时，两位数	00-23
`h`	小时，12小时制	1-12
`hh`	小时，12小时制，两位数	01-12
`m`	分钟	0-59
`mm`	分钟，两位数	00-59
`s`	秒	0-59
`ss`	秒，两位数	00-59
`a`	上午或下午，小写	am \| pm
`A`	上午或下午，大写	AM \| PM

parsedProperties 对象数据

属性名	描述	类型
name	自定义属性名称	string
value	自定义属性值	any
isImage	自定义属性值是否是图片类型	boolean

<spz-order-detail layout="container" order-id="xxx">
  <template>
    <div>
      <h3>Order Detail</h3>
      <!-- ... -->
    </div>
  </template>
</spz-order-detail>

属性

属性名	说明	类型	默认值	是否必需
order-id	订单ID	string	-	是

AI 摘要（LLM Ready）

组件标识：spz-order-detail
用途一句话：展示订单详情。
可识别属性条目：1
可识别方法小节：0
可识别事件小节：0
关键属性名（Top）：order-id
关键方法名（Top）：无（待补充）
关键事件名（Top）：无（待补充）
阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
关联文档：/guide/actions-and-events/ 、/guide/layouts/

spz-order-detail 订单详情#

#何时使用

#代码演示

#基本用法

#模版数据

#属性