ucard-person-app-front/pages/wallet/withdraw-detail.vue

<template>
  <cwg-page-wrapper>
    <view class="order-detail-page">
      <view class="content">
        <view class="section-card">
          <view class="success-icon-wrap">
            <image v-if="detailData.transactionStatus == 3" src="/static/images/vector.png" alt="" mode="widthFix" />
            <image v-else-if="detailData.transactionStatus == 4 || detailData.transactionStatus == 5"
              src="/static/images/vector2.png" alt="" mode="widthFix" />
            <image v-else src="/static/images/vector3.png" alt="" mode="widthFix" />
            <text class="success-text">{{ t(withdrawStatus[detailData.transactionStatus]) }}</text>
            <text v-if="approveDesc" class="success-text">{{ approveDesc }}</text>
          </view>
        </view>

        <view class="section-card">
          <view class="section-header">
            <uni-icons type="wallet" size="18" color="#2563eb" />
            <text class="section-title">{{ t('Ib.Report.Title3') }}</text>
          </view>
          <view class="info-list">
            <view class="info-row" v-if="detailData.merchantOrderNo">
              <text class="info-label">{{ t('card.Form.f35') }}</text>
              <view class="info-value-wrapper">
                <text class="info-value">{{ detailData.merchantOrderNo }}</text>
                <cwg-icon name="copy" :size="14" color="#9ca3af" @click.stop="copyOrderNo" />
              </view>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('WalletApply.p3') }}</text>
              <text class="info-value amount-highlight">
                {{ detailData.amount }} USDT
              </text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('card.Form.f31') }}</text>
              <text class="info-value">
                {{ detailData.receivedAmount || '0' }}
                <text class="currency">{{ detailData.receivedCurrency }}</text>
              </text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('WalletApply.p8') }}</text>
              <text class="info-value">
                {{ detailData.contractAddress }}
              </text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('WalletApply.p9') }}</text>
              <text class="info-value">
                {{ detailData.fromAddress }}
              </text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('WalletApply.p1') }}</text>
              <text class="info-value">
                {{ formatOrderNo(detailData.address) }}
                <cwg-icon class="footer-order-icon" name="copy" :size="14" color="#9ca3af"
                  @click.stop="copyOrderNo(detailData.address)" />
              </text>
            </view>
            <view class="divider"></view>
            <view class="info-row">
              <text class="info-label">{{ t('card.Form.f27') }}</text>
              <text class="info-value">
                <text v-if="detailData.remark">{{ detailData.remark }}</text>
                <text v-else-if="detailData.note">{{ detailData.note }}</text>
                <text v-else-if="approveDesc">{{ approveDesc }}</text>
                <text v-else>--</text>
              </text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('Label.ApplyTime') }}</text>
              <text class="info-value">
                <text>{{ detailData.addTime }}</text>
              </text>
            </view>
            <view class="info-row" v-if="detailData.approveTime">
              <text class="info-label">{{ t('WalletApply.p10') }}</text>
              <text class="info-value">
                <text>{{ detailData.approveTime }}</text>
              </text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('global.p22') }}</text>
              <text class="info-value">
                <text>{{ t(withdrawApprovalText[detailData.status]) }}</text>
              </text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('card.Form.f45') }}</text>
              <text class="info-value">
                <text>{{ t(withdrawStatus[detailData.transactionStatus]) }}</text>
              </text>
            </view>
          </view>
        </view>
      </view>
      <view class="bottom-actions" v-if="(detailData.transactionStatus == 1 && detailData.transactionStatus != 5)">
        <view class="action-btn cancel-btn" @click="cancelOrder">
          <text class="btn-text">{{ t('global.GlobalOrder.CancelOrder') }}</text>
        </view>
      </view>
    </view>
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, watch, nextTick, computed } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { useI18n } from 'vue-i18n';
import useCardStore from '@/stores/use-card-store';
import { ucardApi } from "@/api/ucard";
import { withdrawApprovalText, withdrawStatus } from '@/utils/dataMap';
import useUserStore from "@/stores/use-user-store";
const { t, locale } = useI18n();

const userStore = useUserStore();
const approveDesc = ref('');
const getApproveDesc = () => {
  const d = detailData.value.approveDesc
  if (!d) return
  const c = userStore.reasonsOptions
  const a = c[d || '']
  const b = locale.value == 'cn' || locale.value == 'zhHant' ? a.content : a.enContent
  if (!b) {
    reasonsRefusalList()
  }
  approveDesc.value = b;
}
const formatOrderNo = (orderNo?: string) => {
  if (!orderNo) return '--';
  if (orderNo.length <= 16) return orderNo;
  return orderNo.slice(0, 6) + '...' + orderNo.slice(-4);
};

const copyOrderNo = (orderNo?: string) => {
  if (!orderNo) return;
  uni.setClipboardData({
    data: orderNo,
    success: () => {
      uni.showToast({
        title: t('card.Msg.m8') || '复制成功',
        icon: 'success'
      });
    }
  });
};
async function reasonsRefusalList() {
  try {
    const res = await ucardApi.reasonsRefusalList();
    if (res.code === 200) {
      pickFields(res.data);
      getApproveDesc()
    } else {
      uni.$u.toast(res.msg || t("login.msg0"));
    }
  } catch (error) {
    console.log(error, 111);
  }
}
function pickFields(source, fields = ['content', 'enContent']) {
  const result = {}
  Object.entries(source).forEach(([key, value]) => {
    result[key] = fields.reduce((acc, f) => {
      acc[f] = value[f] ?? null
      return acc
    }, {})
  })
  userStore.saveReasonsOptions(result);
}

const cardStore = useCardStore();

// 取消订单
const cancelOrder = () => {
  uni.showModal({
    title: t('Msg.SystemPrompt'),
    cancelText: t('common.cancel'),
    confirmText: t('common.confirm'),
    content: t('global.GlobalOrder.ConfirmCancelOrder'),
    success: async (e) => {
      if (e.confirm) {
        const res = await ucardApi.getBlockchainWithdrawCancel({ id: detailData.value.id })
        if (res.code == 200) {
          // 刷新订单详情
          uni.showToast({
            title: t('global.GlobalOrder.CancelOrderSuccess'),
            icon: 'success'
          });
          detailData.value.transactionStatus = 5;
        }
      }
    }
  });
};

const detailData = ref<any>({})
// 页面加载时，先使用缓存数据渲染，然后获取最新数据
onLoad((e) => {
  const cachedData = cardStore.orderDetail
  if (cachedData) {
    try {
      const clonedData = JSON.parse(JSON.stringify(cachedData))
      Object.assign(detailData.value, clonedData)
    } catch (error) {
      console.error('加载缓存数据失败:', error)
    }
  }
});

// 离开页面时清空订单详情
onUnload(() => {
  cardStore.clearOrderDetail();
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.page-wrapper {
  padding: 0;
}

.success-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background-color: #ffffff;

  image {
    width: 100%;
  }

  .success-text {
    width: 100%;
    text-align: center;
    font-size: px2rpx(18);
    color: #111827;
    margin-bottom: px2rpx(24);
  }
}

.order-detail-page {
  background-color: #f9fafb;
  padding-bottom: px2rpx(80);
}

/* Header */
.header {
  background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
  padding: px2rpx(12) px2rpx(16);
  padding-top: calc(px2rpx(12) + env(safe-area-inset-top));
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.back-btn {
  width: px2rpx(40);
  height: px2rpx(40);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title {
  color: #ffffff;
  font-size: px2rpx(18);
}

.header-action {
  width: px2rpx(40);
}

/* Content */
.content {
  padding: px2rpx(16);
}

/* Status Card */
.status-card {
  background-color: #ffffff;
  border-radius: px2rpx(16);
  padding: px2rpx(32) px2rpx(24);
  margin-bottom: px2rpx(16);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-icon-wrapper {
  margin-bottom: px2rpx(16);
}

.status-icon {
  width: px2rpx(80);
  height: px2rpx(80);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-icon-success {
  background-color: #f0fdf4;
}

.status-icon-processing {
  background-color: #fefce8;
}

.status-icon-failed {
  background-color: #fef2f2;
}

.status-icon-cancelled {
  background-color: #f9fafb;
}

.status-title {
  font-size: px2rpx(22);
  color: #111827;
  margin-bottom: px2rpx(8);
}

.status-subtitle {
  font-size: px2rpx(14);
  color: #6b7280;
  text-align: center;
}

/* Section Card */
.section-card {
  background-color: #ffffff;
  border-radius: px2rpx(12);
  padding: px2rpx(16);
  margin-bottom: px2rpx(16);
}

.section-header {
  display: flex;
  align-items: center;
  gap: px2rpx(8);
  margin-bottom: px2rpx(16);
}

.section-title {
  font-size: px2rpx(16);
  color: #111827;
}

/* Approval Timeline */
.approval-timeline {
  display: flex;
  flex-direction: column;
}

.timeline-item {
  display: flex;
  gap: px2rpx(12);
}

.timeline-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.timeline-dot {
  width: px2rpx(24);
  height: px2rpx(24);
  border-radius: 50%;
  background-color: #f3f4f6;
  border: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-dot-active {
  background-color: #22c55e;
  border-color: #22c55e;
}

.timeline-dot-current {
  background-color: #eab308;
  border-color: #eab308;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.timeline-line {
  width: px2rpx(2);
  flex: 1;
  background-color: #e5e7eb;
  margin: px2rpx(4) 0;
}

.timeline-right {
  flex: 1;
  padding-bottom: px2rpx(24);
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: px2rpx(6);
}

.timeline-title {
  font-size: px2rpx(15);
  color: #111827;
}

.timeline-status {
  display: flex;
  align-items: center;
  gap: px2rpx(4);
  padding: px2rpx(2) px2rpx(8);
  border-radius: px2rpx(12);
}

.timeline-status.completed {
  background-color: #f0fdf4;
}

.timeline-status.current {
  background-color: #fefce8;
}

.timeline-status.pending {
  background-color: #f9fafb;
}

.timeline-status-text {
  font-size: px2rpx(12);
}

.timeline-status.completed .timeline-status-text {
  color: #22c55e;
}

.timeline-status.current .timeline-status-text {
  color: #eab308;
}

.timeline-status.pending .timeline-status-text {
  color: #9ca3af;
}

.timeline-operator {
  font-size: px2rpx(13);
  color: #6b7280;
  display: block;
  margin-bottom: px2rpx(4);
}

.timeline-time {
  font-size: px2rpx(12);
  color: #9ca3af;
  display: block;
  margin-bottom: px2rpx(4);
}

.timeline-remark {
  font-size: px2rpx(13);
  color: #6b7280;
  display: block;
  margin-top: px2rpx(6);
  padding: px2rpx(8);
  background-color: #f9fafb;
  border-radius: px2rpx(6);
}

/* Info List */
.info-list {
  display: flex;
  flex-direction: column;
  gap: px2rpx(12);
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: px2rpx(12);
  padding: px2rpx(4) 0;
}

.info-row.vertical {
  flex-direction: column;
  align-items: flex-start;
}

.info-label {
  font-size: px2rpx(14);
  color: #6b7280;
  flex-shrink: 0;
}

.info-value {
  font-size: px2rpx(14);
  color: #111827;
  text-align: right;
  word-break: break-all;
}

.info-value-wrapper {
  display: flex;
  align-items: center;
  gap: px2rpx(8);
  flex: 1;
  justify-content: flex-end;
}

.amount-highlight {
  font-size: px2rpx(20);
  color: #2563eb;
}

.total-label {
  font-size: px2rpx(15);
  color: #111827;
}

.total-value {
  font-size: px2rpx(18);
  color: #ef4444;
}

.remark-text {
  text-align: left;
  color: #6b7280;
  line-height: 1.6;
}

.divider {
  height: px2rpx(1);
  background-color: #f3f4f6;
  margin: px2rpx(4) 0;
}

/* Service Card */
.service-card {
  background-color: #ffffff;
  border-radius: px2rpx(12);
  padding: px2rpx(16);
  display: flex;
  align-items: center;
  gap: px2rpx(12);
  margin-bottom: px2rpx(16);
}

.service-text {
  flex: 1;
  font-size: px2rpx(15);
  color: #111827;
}

/* Bottom Actions */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: px2rpx(12) px2rpx(16);
  padding-bottom: calc(px2rpx(12) + env(safe-area-inset-bottom));
  display: flex;
  gap: px2rpx(12);
}

.action-btn {
  flex: 1;
  height: px2rpx(44);
  border-radius: px2rpx(8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-btn {
  background-color: #f3f4f6;
}

.cancel-btn .btn-text {
  color: #6b7280;
}

.appeal-btn {
  background-color: #2563eb;
}

.appeal-btn .btn-text {
  color: #ffffff;
}

.delete-btn {
  background-color: #f3f4f6;
}

.delete-btn .btn-text {
  color: #ef4444;
}

.btn-text {
  font-size: px2rpx(15);
}

.currency {
  font-size: px2rpx(12);
}
</style>