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

<template>
  <cwg-page-wrapper>
    <view class="order-detail-page">


      <!-- Content -->
      <view class="content">
        <view class="section-card">
          <view class="success-icon-wrap">
            <image v-if="detailData.status === 'success'" src="/static/images/vector.png" alt="" mode="widthFix" />
            <image v-else-if="detailData.status === 'fail' || detailData.status === 'cancel'" src="/static/images/vector2.png" alt="" mode="widthFix" />
            <image v-else src="/static/images/vector3.png" alt="" mode="widthFix" />
            <text class="success-text">{{ t(globalStatusText[detailData.status]) }}</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('card.Form.f37') }}</text>
              <text class="info-value amount-highlight">
                {{ detailData.deductionAmount || '0' }}
                <text class="info-valuecurrency">USD</text>
              </text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('card.Form.f30') }}</text>
              <text class="info-value">
                {{ detailData.deductionFee || '0' }}
                <text class="currency">USD</text>
              </text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('global.p12') }}</text>
              <text class="info-value">
                {{ detailData.exchangeRate ? `1 : ${detailData.exchangeRate}` : '-- ' }}
              </text>
            </view>
            <view class="divider"></view>
            <view class="info-row" v-for="(item, index) in list.common" :key="index">
              <text class="info-label">{{ item.name }}</text>
              <text class="info-value">{{ item.value }}</text>
            </view>
          </view>
        </view>
        <view class="section-card">
          <view class="section-header">
            <uni-icons type="list" size="18" color="#2563eb" />
            <text class="section-title">{{ getGroupTitle('sender') }}</text>
          </view>
          <view class="info-list">
            <view class="info-row" v-for="(item, index) in list.sender" :key="index">
              <text class="info-label">{{ item.name }}</text>
              <text class="info-value">{{ item.value }}</text>
            </view>
          </view>
        </view>
        <view class="section-card">
          <view class="section-header">
            <uni-icons type="list" size="18" color="#2563eb" />
            <text class="section-title">{{ getGroupTitle('receiver') }}</text>
          </view>
          <view class="info-list">
            <view class="info-row" v-for="(item, index) in list.receiver" :key="index">
              <text class="info-label">{{ item.name }}</text>
              <text class="info-value">{{ item.value }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="content" v-if="complianceStatus">
        <view>
          <view class="section-header">
            <uni-icons type="list" size="18" color="#2563eb" />
            <text class="section-title">{{ getGroupTitle('submitRfi') }}</text>
          </view>
        </view>
        <DynamicForm ref="globalFormRef" :fields="complianceItems" :globalForm="globalForm" :step2="true" type="2">
        </DynamicForm>
      </view>
      <!-- Bottom Actions -->
      <view class="bottom-actions"
        v-if="(detailData.approveStatus == 1 && detailData.status != 'cancel') || detailData.needSupplement">
        <view v-if="detailData.approveStatus == 1 && detailData.status != 'cancel'" class="action-btn cancel-btn"
          @click="cancelOrder">
          <text class="btn-text">{{ t('global.GlobalOrder.CancelOrder') }}</text>
        </view>
        <view v-if="detailData.needSupplement" class="action-btn appeal-btn" @click="appealOrder">
          <text class="btn-text">{{ t('global.GlobalOrder.submitRfi') }}</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 DynamicForm from "./components/DynamicForm.vue";
import { useOrderFields } from './composable/useOrderFields';
import { globalApprovalText, globalComplianceText, globalStatusText } 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;
}
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 getGroupTitle = (type) => {
  const map = {
    common: "global.GlobalOrder.common",
    receiver: "global.GlobalOrder.receiver",
    sender: "global.GlobalOrder.sender",
    other: "global.GlobalOrder.other",
    submitRfi: "global.GlobalOrder.submitRfi",
  };
  return t(map[type] || type);
}
// 复制订单号
const copyOrderNo = () => {
  uni.setClipboardData({
    data: detailData.value.merchantOrderNo,
    success: () => {
      uni.showToast({
        title: t('card.Msg.m8') || '复制成功',
        icon: 'success'
      });
    }
  });
};

// 取消订单
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.globalCancelOrder({ id: detailData.value.id })
        if (res.code == 200) {
          // 刷新订单详情
          uni.showToast({
            title: t('global.GlobalOrder.CancelOrderSuccess'),
            icon: 'success'
          });
          await getOrderDetail(detailData.value.id);
        }
      }
    }
  });
};
const globalFormRef = ref(null)
const setRfiInfos = () => {
  let list = []
  list = complianceItems.value.filter(item => globalForm.value[item.fieldName])
  const rfiInfos = list.map((item) => {
    const { fieldType, rfiId } = item;
    let rfiValue = undefined;
    let rfiValueUrl = undefined;
    if (fieldType === "file") {
      rfiValueUrl = globalForm.value[item.fieldName]
    } else {
      rfiValue = globalForm.value[item.fieldName];
    }
    return {
      rfiId,
      fieldType,
      rfiValueUrl,
      rfiValue,
    };
  });
  return {
    orderNo: detailData.value.orderNo,
    rfiInfos,
  };
}
// 申诉订单
const appealOrder = async () => {
  try {
    const isValid = await globalFormRef.value.validateForm();
    if (!isValid) {
      return;
    }
    const params = setRfiInfos();
    const res = await ucardApi.globalSupplementary(params);
    if (res.code == 200) {
      await getOrderDetail(detailData.value.id);
    }
  } catch (error) {
    console.log(error);
  }
};

const isLoading = ref(false) // 接口加载状态

const detailData = ref<any>({})
const list = ref<Record<string, any[]>>({})

const complianceItems = ref<any[]>([])
const globalForm = ref<any>({})

const complianceStatus = ref(false)

const type = ref<'1' | '2'>('1')

const { fieldGroups } = useOrderFields(detailData)

/** 自动同步字段分组到列表 */
watch(
  fieldGroups,
  (val) => {
    list.value = { ...val }
  },
  { immediate: true, deep: true }
)

/**
 * 处理合规字段和状态
 * 从 detailData 中提取并处理合规相关数据
 */
function processComplianceData() {
  // 处理合规字段
  complianceItems.value = (detailData.value.dataDtos || []).map(item => {
    const fieldName = `${item.customerType}_${item.fieldName}`

    if (item.status !== "pending_check" && item.status !== "approved") {
      globalForm.value[fieldName] =
        item.fieldType === 'file'
          ? item.rfiValueUrl
          : item.rfiValue

      return { ...item, fieldName, disabled: true }
    } else {
      if (item.status == "pending" || item.status == "approved") {
        return {
          ...item, fieldName,
          disabled: true,
        };
      } else {
        return { ...item };
      }
    }
  })
  // 更新合规状态
  complianceStatus.value = complianceItems.value.length > 0
}

/**
 * 获取订单详情
 * 接口返回后会更新 detailData，通过 watch 自动同步到 list
 */
async function getOrderDetail(id: string | number) {
  try {
    isLoading.value = true
    const res = await ucardApi.globalOrdersDetail({ id })
    if (res.code !== 200) {
      console.warn('获取订单详情失败:', res.msg)
      return
    }
    Object.assign(detailData.value, res.data)
    await nextTick()
    processComplianceData()
    getApproveDesc()
  } catch (e) {
    console.error('获取订单详情异常:', e)
  } finally {
    isLoading.value = false
  }
}

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

      processComplianceData()
    } catch (error) {
      console.error('加载缓存数据失败:', error)
    }
  }
  if (e.id) {
    nextTick(() => {
      getOrderDetail(e.id)
    })
  }
});

// 离开页面时清空订单详情
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>