cy-shop-app/pages/order/afterSales/applyProgress.vue

<template>
  <view>
    <view class="info-view">
      <view class="header-title-view">
        <view class="title">售后单号:</view>
        <view>{{ sn }}</view>
      </view>
      <view class="header-title-view">
        <view class="title">申请时间:</view>
        <view>{{ createTime }}</view>
      </view>
    </view>
    <view class="info-view">
      <view class="header-title-view">
        <view>{{ serviceStatus }}</view>
      </view>
    </view>
    <view class="info-view">
      <view>
        <u-time-line v-if="logList.length != 0">
          <u-time-line-item>
            <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
            <template v-slot:content>
              <view v-for="(time,index) in logList" :key="index">
                <view class="u-order-desc">{{time.message}}</view>
                <view class="u-order-time">{{time.createTime}}</view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line>
        <view v-else>
          <u-empty text="暂无审核日志"></u-empty>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sn: "", //sn
      createTime: "", //创建时间
      logList: [], //日志集合
      serviceStatus: "", //订单状态
    };
  },
  onLoad(options) {
    this.sn = options.sn;
    this.createTime = decodeURIComponent(options.createTime);
    this.serviceStatus = this.statusFilter(options.serviceStatus);
    this.logList = JSON.parse(decodeURIComponent(options.logs));

  },
  methods: {
    statusFilter(val) {
      switch (val) {
        case "APPLY":
          return "售后服务申请成功，等待商家审核";
        case "PASS":
          return "售后服务申请审核通过";
        case "REFUSE":
          return "售后服务申请已被商家拒绝，如有疑问请及时联系商家";
        case "FULL_COURIER":
          return "申请售后的商品已经寄出，等待商家收货";
        case "STOCK_IN":
          return "商家已将售后商品入库";
        case "WAIT_FOR_MANUAL":
          return "等待平台进行人工退款";
        case "REFUNDING":
          return "商家退款中，请您耐心等待";
        case "COMPLETED":
          return "售后服务已完成，感谢您的支持";
        case "ERROR_EXCEPTION":
          return "系统生成新订单异常，等待商家手动创建新订单";
        case "CLOSED":
          return "售后服务已关闭";
        case "WAIT_REFUND":
          return "等待平台进行退款";
        default:
          return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page,
.content {
  background: $page-color-base;
  height: 100%;
}

.u-order-time {
  font-size: 24rpx;
  color: #999;
  margin: 20rpx 0;
}

.info-view {
  margin: 20rpx 0;
  border-radius: 20rpx;
  background-color: #fff;
  padding: 30rpx;

  .header-title-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #909399;

    .title {
      width: 160rpx;
    }
  }

  .steps-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #909399;
    border-bottom: 1px solid $page-color-base;
    margin-bottom: 10rpx;

    .title {
      width: 160rpx;
    }
  }
}
</style>