spz-order-shipment 订单物流

展示订单物流。

布局

container

何时使用

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

代码演示

基本用法

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

模版数据

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

物流包裹数据：

属性名	说明	类型
`count`	当前物流包裹数	number
`fulfillments`	物流详情	Array
`fulfillments[0].shippingStatus`	物流状态	string
`fulfillments[0].showConfirmReceiptBtn`	是否要展示确认收据按钮	boolean
`fulfillments[0].showTrackingInfoBtn`	是否要展示跟踪物流信息按钮	boolean
`fulfillments[0].showCustomTrackingInfo`	是否要展示自定义的跟踪物流信息按钮	boolean
`fulfillments[0].parsedTime`	订单日期解析对象	Object
`fulfillments[0].line_items`	商品详情数组	Array
`fulfillments[0].line_items[0].parsedProperties`	解析商品数据里的 `properties` 属性为一个对象	Object
`fulfillments[0].line_items[0].optionValueJoinInSlash`	将商品数据里的 `options` 数组的值取出来用 `/` 分隔展示，例如：`black / L`	string
`fulfillments[0].line_items[0].optionsJoinInColo`n	将商品数据里的 `options` 数组的名/值格式为 `name: value` 形式，例如：`color: black`	Array

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-render带有role="tracking-info-render"属性的模版数据：

属性名	说明	类型
tag	物流状态	string
carrierName	物流商名称，例如：`USPS`	string
trackingNumber	物流单号	string
checkpoints	物流到达每个检查点的信息	Array
tagInfo	物流状态信息，例如：`Delivered on Feb 15, Wed`	string
primaryColor	十六进制的主色	string
width	当前物流进度的百分比	string

执行各种操作的按钮需要配置对应的 role 属性值来赋予当前按钮对应的能力，支持以下几种行为能力：

值	描述
tracking	点击按钮，如果物流单号不是 `Aftership` 类型的，就渲染带有 `role="tracking-info-render"` 的 `spz-render` 元素，并给予包裹相关的物流信息。该按钮必须带有 `tracking-id` 属性，值是物流单号和 `target-id` 属性，值为带有 `role="tracking-info-render"` 属性的 `spz-render` 元素的作为子元素的元素ID
confirm_receipt	点击按钮，打开确认收货当前订单警告对话框，如果点击对话框的确认按钮，确认收货。该按钮必须带有 `data-id` 属性，值为物流ID

<spz-order-shipment layout="container" order-id="xxx">
  <template>
    <div>
      <h3>Shipments</h3>
      <!-- Shipment Information ... -->

      <!-- Tracking buttons -->
      <div>
        <button
          id="shipment-tracking-btn"
          role="tracking"
          tracking-id="${item.tracking_number}"
          target-id="shipment-tracking-wrapper"
        >
          Tracking info
        </button>
        <button role="confirm_receipt" data-id="${item.id}">
          Confirm receipt
        </button>
      </div>

      <!-- Tracking info -->
      <div id="shipment-tracking-wrapper">
        <spz-render role="tracking-info-render" manual layout="container" template="shipment-tracking-detail-template"></spz-render>
      </div>
    </div>
  </template>
</spz-order-shipment>

属性

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