kxmall-ui/kxmall-rider-ui/pages/wallet/withdraw-detail.vue

<template>
  <view class="detail-container">
    <view class="status-card" :class="statusClassMap[detail.status]">
      <view class="status-icon">
        <image :src="currentStatusIcon" mode="aspectFit"></image>
      </view>
      <view class="status-text">{{statusText}}</view>
      <view class="amount">-¥{{formatMoney(detail.amount)}}</view>
    </view>

    <view class="info-card">
      <view class="info-item">
        <text class="label">提现单号</text>
        <text class="value">{{detail.id}}</text>
      </view>
      <view class="info-item">
        <text class="label">申请时间</text>
        <text class="value">{{formatTime(detail.createTime)}}</text>
      </view>
      <view class="info-item" v-if="detail.auditTime">
        <text class="label">审核时间</text>
        <text class="value">{{formatTime(detail.auditTime)}}</text>
      </view>
      <view class="info-item" v-if="detail.paymentTime">
        <text class="label">打款时间</text>
        <text class="value">{{formatTime(detail.paymentTime)}}</text>
      </view>
      <view class="info-item">
        <text class="label">提现银行</text>
        <text class="value">{{detail.bankName}}</text>
      </view>
      <view class="info-item">
        <text class="label">银行卡号</text>
        <text class="value">{{formatBankAccount(detail.bankAccount)}}</text>
      </view>
      <view class="info-item">
        <text class="label">开户人</text>
        <text class="value">{{detail.accountHolder}}</text>
      </view>
    </view>

    <view class="remark-card" v-if="detail.auditRemark || detail.paymentRemark">
      <view class="card-title">备注信息</view>
      <view class="remark-item" v-if="detail.auditRemark">
        <text class="label">审核备注：</text>
        <text class="value">{{detail.auditRemark}}</text>
      </view>
      <view class="remark-item" v-if="detail.paymentRemark">
        <text class="label">打款备注：</text>
        <text class="value">{{detail.paymentRemark}}</text>
      </view>
    </view>

    <button class="contact-btn" v-if="detail.status === 2" @click="contactService">
      联系客服
    </button>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data() {
    return {
      detail: {}
    };
  },
  computed: {
    ...mapState(['token']),
    statusText() {
      const statusMap = {
        0: '提现申请已提交',
        1: '提现审核通过',
        2: '提现审核拒绝',
        3: '提现已打款'
      };
      return statusMap[this.detail.status] || '未知状态';
    },
    statusClassMap() {
      return {
        0: 'pending',
        1: 'approved',
        2: 'rejected',
        3: 'paid'
      };
    },
    currentStatusIcon() {
      const iconMap = {
        0: require('@/static/icons/withdraw-pending.png'),
        1: require('@/static/icons/withdraw-success.png'),
        2: require('@/static/icons/withdraw-failed.png'),
        3: require('@/static/icons/withdraw-success.png')
      };
      return iconMap[this.detail.status] || '';
    }
  },
  onLoad(options) {
    if (options.id) {
      this.loadDetail(options.id);
    }
  },
  methods: {
    loadDetail(id) {
      uni.showLoading({ title: '加载中...' });
      this.request("get", `rider/withdrawal/detail/${id}`, this.token)
          .then(res => {
            if (res.code === 200) {
              this.detail = res.data;
            }
          })
          .finally(() => {
            uni.hideLoading();
          });
    },

    formatMoney(amount) {
      const num = Number(amount || 0);
      return num.toFixed(2);
    },

    formatTime(time) {
      if (!time) return '';
      return time.replace('T', ' ').substring(0, 16);
    },

    formatBankAccount(account) {
      if (!account) return '';
      return account.replace(/(\d{4})(?=\d)/g, '$1 ');
    },

    contactService() {
      uni.makePhoneCall({
        phoneNumber: '400-123-4567'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.detail-container {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 40rpx;
}

.status-card {
  padding: 60rpx 0;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

  &.pending {
    .status-icon image {
      filter: hue-rotate(180deg);
    }
  }

  &.approved {
    .status-icon image {
      filter: hue-rotate(120deg);
    }
  }

  &.rejected {
    .status-icon image {
      filter: hue-rotate(300deg);
    }
  }

  &.paid {
    .status-icon image {
      filter: hue-rotate(240deg);
    }
  }

  .status-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .status-text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 20rpx;
  }

  .amount {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
  }
}

.info-card {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 0 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

  .info-item {
    display: flex;
    justify-content: space-between;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

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

    .value {
      font-size: 28rpx;
      color: #333;
    }
  }
}

.remark-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

  .card-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }

  .remark-item {
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

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

    .value {
      font-size: 28rpx;
      color: #333;
    }
  }
}

.contact-btn {
  margin: 40rpx 30rpx 0;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  background-color: #437CE8;
  color: #fff;
  font-size: 32rpx;
}
</style>