rtliveCompany/pages_task/components/WithdrawAudit.vue

<template>
  <view class="withdraw-audit" v-if="data">
    <!-- 提现审核表单 -->
    <view class="info-section">
      <view class="section-header">
        <view class="section-indicator"></view>
        <text class="section-title">提现信息</text>
      </view>
      <view class="info-list">
        <!-- 基本信息 -->
        <view class="info-item">
          <text class="info-label">公司</text>
          <text class="info-value">{{ data.companyName || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">医生</text>
          <text class="info-value">{{ data.doctorName || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">提现金额</text>
          <text class="info-value">{{ data.amount || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">申请时间</text>
          <text class="info-value">{{ data.applyTime || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">提现积分</text>
          <text class="info-value">{{ data.points || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">审核时间</text>
          <text class="info-value">{{ data.auditTime || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">打款时间</text>
          <text class="info-value">{{ data.paymentTime || '-' }}</text>
        </view>
      </view>
    </view>

    <!-- 银行回执 -->
    <view class="info-section" v-if="data.bankReceipts && data.bankReceipts.length > 0">
      <view class="section-header">
        <view class="section-indicator"></view>
        <text class="section-title">银行回执</text>
      </view>
      <view class="bank-receipts">
        <view class="receipt-item" 
          v-for="(receipt, index) in data.bankReceipts" 
          :key="index"
          @click="previewImage(receipt.url, data.bankReceipts.map(item => item.url))"
        >
          <image 
            :src="receipt.url" 
            style="width: 200rpx; height: 200rpx;"
            mode="aspectFill"
          ></image>
          <text class="receipt-name">{{ receipt.name || `回执${index + 1}` }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'WithdrawAudit',
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  methods: {
    // 预览图片
    previewImage(current, urls) {
      uni.previewImage({
        urls: urls,
        current: current
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.info-section {
  margin-bottom: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;

    .section-indicator {
      width: 8rpx;
      height: 32rpx;
      background: #388BFF;
      border-radius: 4rpx;
      margin-right: 16rpx;
    }

    .section-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }
  }

  .info-list {
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #F0F0F0;

      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }

      .info-label {
        font-size: 28rpx;
        color: #666;
        width: 200rpx;
      }

      .info-value {
        font-size: 28rpx;
        color: #333;
        flex: 1;
        text-align: right;
        word-break: break-all;
      }
    }
  }

  .bank-receipts {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;

    .receipt-item {
      width: 200rpx;
      margin-bottom: 20rpx;
      cursor: pointer;

      image {
        border-radius: 8rpx;
        margin-bottom: 10rpx;
      }

      .receipt-name {
        font-size: 24rpx;
        color: #666;
        text-align: center;
        word-break: break-all;
      }
    }
  }
}
</style>