car-wash-java/admin-h5/src/pages/finance/refund-detail.vue

<template>
  <view class="detail-container">
    <!-- 状态卡片 -->
    <view class="status-card">
      <text class="status-text" :style="{ color: statusColor }">{{ fmtDictName('RefundLog.status', detail.status) }}</text>
      <text class="status-amount">¥{{ formatAmount(detail.refund) }}</text>
      <text class="status-label">退款金额</text>
      <button v-if="detail.status === 'NEW'" class="process-btn" :loading="processing" @click="handleProcessRefund">退款处理</button>
    </view>

    <!-- 退款信息 -->
    <view class="section">
      <view class="section-title">退款信息</view>
      <view class="info-card">
        <view class="info-row" @click="showFullText('商户退款单号', detail.outRefundNo)">
          <text class="info-label">商户退款单号</text>
          <text class="info-value">{{ detail.outRefundNo || '-' }}</text>
        </view>
        <view class="info-row" @click="showFullText('商户订单号', detail.outTradeNo)">
          <text class="info-label">商户订单号</text>
          <text class="info-value">{{ detail.outTradeNo || '-' }}</text>
        </view>
        <view class="info-row" @click="showFullText('微信支付订单号', detail.transactionId)">
          <text class="info-label">微信支付订单号</text>
          <text class="info-value">{{ detail.transactionId || '-' }}</text>
        </view>
        <view class="info-row" @click="showFullText('微信退款单号', detail.refundId)">
          <text class="info-label">微信退款单号</text>
          <text class="info-value">{{ detail.refundId || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">退款原因</text>
          <text class="info-value info-value-wrap">{{ detail.reason || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">退款渠道</text>
          <text class="info-value">{{ detail.channel || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">退款入账账户</text>
          <text class="info-value">{{ detail.userReceivedAccount || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">资金账户</text>
          <text class="info-value">{{ detail.fundsAccount || '-' }}</text>
        </view>
      </view>
    </view>

    <!-- 金额信息 -->
    <view class="section">
      <view class="section-title">金额明细</view>
      <view class="info-card">
        <view class="info-row">
          <text class="info-label">原充值金额</text>
          <text class="info-value amount">¥{{ formatAmount(detail.total) }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">退款金额</text>
          <text class="info-value amount-refund">¥{{ formatAmount(detail.refund) }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">不可退优惠金额</text>
          <text class="info-value">{{ formatAmount(detail.discountAmount) }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">币种</text>
          <text class="info-value">{{ detail.currency || 'CNY' }}</text>
        </view>
      </view>
    </view>

    <!-- 操作信息 -->
    <view class="section">
      <view class="section-title">操作信息</view>
      <view class="info-card">
        <view class="info-row">
          <text class="info-label">退款人</text>
          <text class="info-value">{{ detail.adminUsername || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">申请时间</text>
          <text class="info-value">{{ formatTime(detail.createTime) }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">退款成功时间</text>
          <text class="info-value">{{ detail.successTime ? formatTime(detail.successTime) : '-' }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">更新时间</text>
          <text class="info-value">{{ detail.updateTime ? formatTime(detail.updateTime) : '-' }}</text>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getRefundDetail, processRefund } from '../../api/finance.js'
import { formatTime, showToast, formatAmount, fmtDictName, getDictColor } from '../../utils/index.js'
import { loadDicts } from '../../utils/dict.js'

const detail = ref({})
const loading = ref(true)
const processing = ref(false)

const statusColor = computed(() => {
  return getDictColor('RefundLog.status', detail.value.status) || '#666666'
})

const showFullText = (label, value) => {
  if (!value) return
  uni.showModal({
    title: label,
    content: value,
    showCancel: false,
    confirmText: '关闭'
  })
}

const handleProcessRefund = () => {
  const refundLogId = detail.value.id
  if (!refundLogId) {
    showToast('退款记录ID不存在')
    return
  }
  uni.showModal({
    title: '确认退款',
    content: `确定对该笔退款进行处理吗？`,
    success: async (res) => {
      if (res.confirm) {
        processing.value = true
        try {
          const result = await processRefund(refundLogId)
          if (result && result.code === 200) {
            showToast('退款处理成功', 'success')
            loadDetail(detail.value.outRefundNo)
          } else {
            showToast(result?.msg || '退款处理失败')
          }
        } catch (error) {
          showToast('退款处理失败')
        } finally {
          processing.value = false
        }
      }
    }
  })
}

const loadDetail = async (outRefundNo) => {
  loading.value = true
  try {
    const res = await getRefundDetail(outRefundNo)
    if (res && res.code === 200) {
      detail.value = res.data || {}
    } else {
      showToast(res?.msg || '加载退款详情失败')
    }
  } catch (error) {
    showToast('加载退款详情失败')
  } finally {
    loading.value = false
  }
}

onLoad((options) => {
  if (options && options.outRefundNo) {
    loadDetail(options.outRefundNo)
  }
})

onMounted(async () => {
  await loadDicts()
})
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  background-color: #F5F7FA;
  padding-bottom: 40rpx;
}

.status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48rpx 30rpx;
  background-color: #FFFFFF;
  margin-bottom: 20rpx;
}

.status-text {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
}

.status-amount {
  font-size: 56rpx;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 8rpx;
}

.status-label {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 24rpx;
}

.process-btn {
  padding: 16rpx 60rpx;
  background: #C6171E;
  color: #FFFFFF;
  border-radius: 44rpx;
  font-size: 28rpx;
  border: none;
  font-weight: 500;
}
.process-btn:active {
  background: #A81212;
  transform: scale(0.97);
}

.section {
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 26rpx;
  color: #999999;
  padding: 16rpx 10rpx 12rpx;
}

.info-card {
  background-color: #FFFFFF;
  border-radius: 24rpx;
  padding: 8rpx 24rpx;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #F5F5F5;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 26rpx;
  color: #999999;
  flex-shrink: 0;
}

.info-value {
  font-size: 26rpx;
  color: #1A1A1A;
  max-width: 420rpx;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-value-wrap {
  white-space: normal;
  word-break: break-all;
  text-overflow: clip;
}

.info-value.amount {
  color: #C6171E;
  font-weight: 500;
}

.info-value.amount-refund {
  color: #52C41A;
  font-weight: 500;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid rgba(0, 0, 0, 0.1);
  border-top-color: #C6171E;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 28rpx;
  color: #999999;
  margin-top: 16rpx;
}
</style>