parking_h5_all/pages/applyRefundDetails/applyRefundDetails.vue

<template>
  <view class="refund-details">
    <u-navbar
      v-if="details.refundStatus === 0"
      :is-back="false"
      back-text=""
      title="申请退款"
      :background="{ backgroundColor: '#008CFF' }"
      title-color="#fff"
      back-icon-color="#fff"
    ></u-navbar>
    <u-navbar v-else back-text="" title="申请退款" :background="{ backgroundColor: '#008CFF' }" title-color="#fff" back-icon-color="#fff"></u-navbar>
    <view class="refund-details-list">
      <view class="refund-details-list-item">
        <view class="rdli-label">申请时间：</view>
        <view class="rdli-content">{{ details.applyTime }}</view>
      </view>
      <view class="refund-details-list-item">
        <view class="rdli-label">消费金额：</view>
        <view class="rdli-content"
          ><text class="rdli-font">{{ details.refundAmount }}</text
          >元</view
        >
      </view>
      <view class="refund-details-list-item">
        <view class="rdli-label">退款原因：</view>
        <view class="rdli-content">{{ details.refundReason }}</view>
      </view>
      <view class="refund-details-list-item" v-if="details.images && details.images.length > 0">
        <view class="rdli-label">图片：</view>
        <view class="rdli-content">
          <u-lazy-load class="image" v-for="(item, index) in details.images" :key="index" :image="item" img-mode="aspectFill"></u-lazy-load>
        </view>
      </view>
    </view>
    <view class="apply-button" v-if="details.refundStatus === 0">
      <u-button type="primary" disabled>申请中</u-button>
    </view>
    <view class="apply-button" v-if="details.refundStatus === 0">
      <u-button type="primary" @click="jumpPage('pages/center/order/order')">返回列表页</u-button>
    </view>
    <view class="refund-details-status" v-if="details.refundStatus === 2">
      <view class="refund-details-status-item">
        <view>处理时间：</view>
        <view>{{ details.auditTime }}</view>
      </view>
      <view class="refund-details-status-item">
        <view>处理结果：</view>
        <view v-if="details.refundStatus === 1">已通过</view>
        <view v-if="details.refundStatus === 2">已驳回</view>
      </view>
      <view class="refund-details-status-item">
        <view>备注：</view>
        <view>{{ details.refuseReason }}</view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      details: {}
    };
  },
  onLoad(options) {
    const { orderId } = options;
    this.getOrderRefundDetails(orderId);
  },
  methods: {
    /**
     * @description: 获取退款详情
     * @param {*} orderId
     * @return {*}
     */
    async getOrderRefundDetails(orderId) {
      const { code, data } = await this.$u.api.getOrderRefundDetails({ orderId });
      if (code === 200) {
        this.details = data;
      }
    },
    jumpPage(url) {
      this.$u.route({
        url
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './applyRefundDetails.scss';
</style>