recycle-mobile/src/pages/mine/myEarnings/detail.vue

<template>
  <!-- #ifdef H5 -->
  <view>
    <Loading :type="3" :loadStatus="loadStatus" :showText="errorText" />
    <zj-page-layout v-if="detail" :hasFooter="false" :isScroll="true" :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh">

      <view class="goods-container">
        <view class="title">商品信息</view>
        <view class="goods">
          <image :src="imageUrl + detail.goodsPicUrl"></image>
          <view class="main">
            <view class="name">{{detail.goodsTitle}}<text>×{{detail.num}}</text></view>
            <view class="des">{{detail.content}}</view>
            <view class="price">{{detail.goodsAmount | priceFilter2}}</view>
          </view>
        </view>
        <view class="total">订单总金额<text>{{detail.price | priceFilter2}}</text></view>
      </view>

      <view class="order-container">
        <view class="title">订单信息</view>
        <view class="info">
          <view class="row">
            <view class="label">订单编号</view>
            <view class="value">{{detail.orderId}}</view>
          </view>
          <view class="row">
            <view class="label">创建时间</view>
            <view class="value">{{detail.createTime}}</view>
          </view>
          <view class="row">
            <view class="label">付款时间</view>
            <view class="value">{{detail.payTime}}</view>
          </view>
          <view class="row">
            <view class="label">支付方式</view>
            <view class="value">{{detail.payType | payTypeFilter}}</view>
          </view>
          <view class="row">
            <view class="label">支付单号</view>
            <view class="value">{{detail.transactionId}}</view>
          </view>
          <view class="row">
            <view class="label">发货时间</view>
            <view class="value">{{detail.logisticsTime}}</view>
          </view>
          <view class="row">
            <view class="label">收货时间</view>
            <view class="value">{{detail.completeTime}}</view>
          </view>
          <view class="row">
            <view class="label">结算金额</view>
            <view class="value price">¥{{detail.sharePrice | priceFilter}}</view>
          </view>
        </view>
      </view>

    </zj-page-layout>
  </view>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view :src="webViewHref('/pages/mine/myEarnings/detail', pam,crossPagePam)"
    @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
  export default {
    filters: {
      payTypeFilter(val) {
        const MAP = {
          WECHAT: '微信支付'
        }
        return MAP[val];
      }
    },

    data() {
      return {
        id: null,
        detail: null,
        imageUrl: this.$imageUrl,
        loadStatus: 0,
        errorText: '',
        refresherTriggered: false,
      }
    },

    onLoad({
      id
    }) {
      this.id = id;
      this.getDetail();
    },

    methods: {
      getDetail() {
        this.$api.postJson('/orderPay/detail', {
          orderId: this.id
        }).then(res => {
          this.detail = res.data;
          this.loadStatus = 0;
        }).catch(res => {
          this.errorText = res.message;
          this.loadStatus = 2;
        }).finally(res => {
          this.refresherTriggered = false;
        })
      },

      refresherrefresh() {
        this.refresherTriggered = true;
        this.getDetail();
      },
    }
  }
  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },

    onLoad(pam) {
      this.pam = pam;
    },
  }
  // #endif
</script>

<style lang="scss" scoped>
  .goods-container {
    background: #ffffff;
    margin-top: 30rpx;
    padding: 30rpx 30rpx 0;

    .title {
      font-weight: 500;
    }

    .goods {
      display: flex;
      padding: 30rpx 0;

      image {
        width: 120rpx;
        height: 120rpx;
      }

      .main {
        flex: 1;
        margin-left: 20rpx;

        .name {
          font-size: 32rpx;

          text {
            font-size: 28rpx;
            color: $sec-font;
            margin-left: 12rpx;
          }
        }

        .des {
          margin-top: 12rpx;
          font-size: 28rpx;
          color: $reg-font;
        }

        .price {
          margin-top: 12rpx;
          color: $assist-color;
          font-weight: 500;
          font-size: 32rpx;
        }
      }
    }

    .total {
      border-top: 1px solid #eaeaea;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: end;
      font-size: 28rpx;

      text {
        margin-left: 12rpx;
        color: $assist-color;
      }
    }
  }

  .order-container {
    background: #ffffff;
    margin-top: 30rpx;
    padding: 30rpx;

    .title {
      font-weight: 500;
      margin-bottom: 20rpx;
    }

    .row {
      display: flex;
      align-items: center;
      margin-top: 20rpx;

      .label {
        font-size: 28rpx;
        color: $sec-font;
        margin-right: 20rpx;
      }

      .value {
        font-size: 28rpx;
      }

      .price {
        color: $assist-color;
        font-weight: 500;
      }
    }
  }
</style>