nova-live/projects/live-app/src/modules/account/order/detail/detail.component.html

<nav title="订单详情"></nav>
<ion-content class="content">
  <div class="status-view">
    <img
      [src]="
        order?.get('status') == '200' ? 'img/complete.png' : 'img/warn.png'
      "
      alt=""
      class=""
    />
    @switch (order?.get("status")) { @case ('100') {
    <div class="text">已取消</div>
    <div class="desc">订单已取消</div>
    }@case ('200') {
    <div class="text">已完成</div>
    <div class="desc">订单已完成</div>
    } @case ('500') {
    <div class="text">已退款</div>
    <div class="desc">订单已退款</div>
    } }
  </div>
  <div class="h3">商品详情</div>
  <div class="card-container">
    <div class="row">
      <div class="label">产品名称：</div>
      <div class="val">{{ order?.get("targetObject")[0]?.get("name") }}</div>
    </div>
    <div class="row">
      <div class="label">产品周期：</div>
      <div class="val">
        {{ order?.get("targetObject")[0]?.get("validity") }}天
      </div>
    </div>
  </div>

  <div class="h3">订单详情</div>
  <div class="card-container">
    <div class="row">
      <div class="label">订单编号：</div>
      <div class="val">{{ order?.get("orderNum") }}</div>
    </div>
    <div class="row">
      <div class="label">创建时间：</div>
      <div class="val">
        {{ order?.get("createdAt") | date : "yyyy-MM-dd HH:ss" }}
      </div>
    </div>
    <div class="row">
      <div class="label">实付：</div>
      <div class="val">
        {{ order?.get("isPay") ? order?.get("price") : "未付款" }}
      </div>
    </div>
  </div>
</ion-content>