spz-order-detail 订单详情

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

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

模版数据

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

订单详情数据：

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 对象数据

parsedProperties 对象数据

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