LocalLivingServicesUniapp/pages/finance/withdrawalDetails.vue

<template>
  <view class="cash">
    <view class="top"></view>
    <view class="head">
      <span class="cuIcon-back" @click="back"></span>
      <view class="case"> 提现详情 </view>
    </view>

    <view class="cash-card">
      <view class="cash-header">
        <view class="img">
          <image :src="`/static/finance/status/${reviewIcon}.png`" mode="aspectFit"></image>
        </view>
        <view class="amount">-¥{{ cashInfo.applyAmount }}</view>
        <view class="title">{{ cashInfo.statusName }}</view>
      </view>
      <view class="cash-info">
        <view class="info">
          <view class="label">申请时间</view>
          <view class="value">{{ cashInfo.applyTime }}</view>
        </view>

        <view class="info">
          <view class="label">申请人</view>
          <view class="value">{{ cashInfo.applicantName }}</view>
        </view>

        <view class="info">
          <view class="label">审批时间</view>
          <view class="value">{{ cashInfo.auditTime }}</view>
        </view>

        <view class="info">
          <view class="label">审批人</view>
          <view class="value">{{ cashInfo.auditByName }}</view>
        </view>

        <view class="info">
          <view class="label">订单号</view>
          <view class="value">{{ cashInfo.withdrawNo }}</view>
        </view>

        <view v-if="cashInfo.invoiceImgs && cashInfo.invoiceImgs.length" class="info">
          <view class="label">发票</view>
          <view class="value view-btn" @click="openInvoicePopup">查看</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/api/account';

export default {
  name: 'cashDetails',
  data() {
    return {
      bizId: '',
      cashInfo: {},
      showInvoicePopup: false,
      reviewIcon: '',
    };
  },
  onLoad(options) {
    if (options.id) {
      this.bizId = options.id;
    }
  },
  onShow() {
    this.getCashDetails(this.bizId);
  },
  methods: {
    getCashDetails(bizId) {
      api.getWithdrawalDetails(bizId).then((res) => {
        if (res.data.code === 200) {
          this.cashInfo = res.data.result;
          switch (this.cashInfo.statusName) {
            case '提现成功':
              this.reviewIcon = 'success';
              break;
            case '提现失败':
              this.reviewIcon = 'fail';
              break;
            case '审核中':
              this.reviewIcon = 'processing';
              break;
          }
        }
      });
    },
    back() {
      uni.navigateBack();
    },
    openInvoicePopup() {
      uni.previewImage({
        urls: this.cashInfo.invoiceImgs,
        current: this.cashInfo.invoiceImgs[0],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.cash {
  background: #f8f8f8;
  min-height: 100vh;
  font-weight: 500;

  /*#ifdef APP-PLUS*/
  .top {
    width: 100%;
    height: var(--status-bar-height);
    background: #fff;
  }

  /*#endif*/

  .head {
    width: 100%;
    height: 112rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    border-bottom: 1rpx solid #eeeeee;

    .cuIcon-back {
      font-size: 40rpx;
      margin-right: 40rpx;
    }

    .case {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-weight: 500;
      font-size: 38rpx;
      color: #333333;
    }
  }

  .cash-card {
    border-radius: 10rpx;
    overflow: hidden;
    padding: 50rpx 32rpx 0;
    background: #fff;
  }
}

.cash-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;

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

  .amount {
    font-size: 60rpx;
    color: #1f1f1f;
    margin: 30rpx 0 20rpx;
  }

  .title {
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
    margin-bottom: 40rpx;
  }
}

.cash-info {
  background-color: #fff;
  padding: 0 30rpx;
}

.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30rpx;
  font-size: 30rpx;

  .label {
    display: flex;
    align-items: center;
    font-weight: 400;
    color: #666666;
    line-height: 30rpx;
  }

  .value {
    font-family: Source Han Sans SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #333333;
  }

  .view-btn {
    color: #449aff;
  }
}
</style>