hjc-web/app/pages/tender/orders.vue

<template>
  <div class="container mx-auto px-4 py-10">
    <div class="mb-6 flex items-center justify-between">
      <h1 class="text-2xl font-bold text-gray-900">我的订单</h1>
      <HjcUserBar />
    </div>

    <div v-if="!loggedIn" class="py-20 text-center">
      <p class="text-gray-500">请先登录后查看订单</p>
      <NuxtLink to="/login?redirect=/tender/orders" class="mt-4 inline-block rounded-md bg-blue-600 px-6 py-2 text-white hover:bg-blue-700">去登录</NuxtLink>
    </div>

    <div v-else-if="error" class="py-20 text-center text-red-500">{{ error }}</div>

    <template v-else>
      <p v-if="notice" class="mb-4 rounded-md bg-gray-50 px-4 py-3 text-sm text-gray-700">{{ notice }}</p>

      <div v-if="orders.length" class="space-y-4">
        <div v-for="o in orders" :key="o.id" class="rounded-lg border border-gray-200 p-5">
          <div class="flex items-start justify-between">
            <div>
              <p class="font-semibold text-gray-900">{{ o.projectName }}</p>
              <p class="mt-1 text-sm text-gray-500">订单号：{{ o.orderNo }} · 项目编号：{{ o.projectNo }}</p>
            </div>
            <span class="rounded px-2 py-0.5 text-xs" :class="hjcOrderStatusClass(o)">{{ hjcOrderStatusLabel(o) }}</span>
          </div>
          <div class="mt-4 flex items-center justify-between text-sm">
            <span class="text-gray-500">{{ fmtTime(o.createTime) }}</span>
            <span class="text-blue-600 font-bold">¥{{ formatMoney(o.totalAmount) }}</span>
          </div>

          <!--
            待支付订单的操作区。判定用 hjcCanActOnOrder（payStatus===0 && orderStatus!==2），
            **不用** statusKey==='pending'——payStatus=2（支付失败）也会落进 pending 兜底。
          -->
          <div v-if="hjcCanActOnOrder(o)" class="mt-4 flex justify-end gap-3 border-t border-gray-100 pt-4">
            <button
              type="button"
              class="rounded-md border border-gray-300 px-4 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50"
              :disabled="cancelling && cancelTarget?.id === o.id"
              @click="askCancel(o)"
            >
              取消订单
            </button>
            <NuxtLink
              :to="`/tender/pay?orderNo=${encodeURIComponent(o.orderNo)}`"
              class="rounded-md bg-blue-600 px-4 py-1.5 text-sm text-white hover:bg-blue-700"
            >
              去支付
            </NuxtLink>
          </div>
        </div>
      </div>

      <div v-else-if="loaded" class="py-20 text-center text-gray-500">暂无订单</div>
      <SiteLoading v-else />
    </template>

    <HjcConfirmDialog
      :open="cancelDialogOpen"
      title="确定取消该订单吗？"
      content="取消后订单不可恢复，如需购买请重新下单。"
      confirm-text="确定取消"
      cancel-text="再想想"
      loading-text="取消中..."
      :loading="cancelling"
      @confirm="confirmCancel"
      @cancel="cancelDialogOpen = false"
    />
  </div>
</template>

<script setup lang="ts">
import { hjcCanActOnOrder, hjcOrderStatusClass, hjcOrderStatusLabel } from '~/utils/orderStatus'

const { isLoggedIn, handleAuthCode } = useHjcAuth()
/**
 * 必须用 useRequestFetch 取数，不能用裸 `$fetch`。
 *
 * 下面这句在 **SSR 期间** 就会执行：裸 `$fetch` 走的是 Nuxt 全局 ofetch，服务端渲染时
 * **不会**把浏览器请求里的 Cookie 转发给站内 `/api` 代理（Nuxt 只在 `useRequestFetch`
 * / `useFetch` 里做转发）。代理拿不到 `hjc_token` 就等于匿名调用，后端按契约返回
 * `code=401`；`handleAuthCode` 据此判定「凭据失效」→ 在服务端清 Token →
 * SSR 响应带上 `Set-Cookie: hjc_token=; Max-Age=0` 并跳登录页。
 * 结果就是：刷新「我的订单」= 把自己登出（Cookie 被真正删掉，此后一直是未登录）。
 *
 * 客户端侧 `useRequestFetch()` 等价于 `globalThis.$fetch`，行为不变。
 */
const requestFetch = useRequestFetch()
const loggedIn = ref(false)
const orders = shallowRef<any[]>([])
const loaded = ref(false)
const error = ref('')
/** 操作结果提示（取消成功/已支付/未核对上），与 error 分开：它不是错误 */
const notice = ref('')

/** 正在确认取消的那张订单 + 弹窗开合 */
const cancelTarget = shallowRef<any | null>(null)
const cancelDialogOpen = ref(false)
const cancelling = ref(false)

function formatMoney(n?: number | string) {
  return Number(n ?? 0).toFixed(2)
}
function fmtTime(s?: string) {
  return s ? s.slice(0, 19).replace('T', ' ') : '-'
}

/** 拉取（或重新拉取）订单列表。取消成功后走这里就地更新，不留整页 loading。 */
async function reload() {
  try {
    // 代理原样透传 ApiResult：按 body.code 判定（HTTP 状态码恒为 200，不可用于判定）
    const res: any = await requestFetch('/api/tender/my-orders')
    const auth = await handleAuthCode(res, '/tender/orders')
    if (auth.handled) {
      // 401 已清凭据并跳登录页；403 只提示「没有访问权限」，不清 token
      error.value = auth.message || ''
      loggedIn.value = isLoggedIn()
      return
    }
    if (res?.code === 0) {
      orders.value = Array.isArray(res.data) ? res.data : []
      error.value = ''
    } else {
      error.value = res?.message || '订单加载失败'
    }
  } catch (e: any) {
    error.value = e?.data?.message || e?.message || '订单加载失败'
  }
}

function askCancel(o: any) {
  notice.value = ''
  cancelTarget.value = o
  cancelDialogOpen.value = true
}

async function confirmCancel() {
  const o = cancelTarget.value
  if (!o) return
  cancelling.value = true
  notice.value = ''
  try {
    const res: any = await $fetch('/api/tender/cancel', { method: 'POST', body: { orderNo: o.orderNo } })
    const auth = await handleAuthCode(res, '/tender/orders')
    if (auth.handled) {
      notice.value = auth.message || ''
      return
    }
    if (res?.code !== 0) {
      notice.value = res?.message || '取消失败，请稍后重试'
      return
    }
    // 「其实已经付了」**不是错误**：后端同样返回 code=0，结论在结构化字段里。
    // 按字段判定，绝不匹配 message 字符串。
    const d = res.data || {}
    if (d.cancelled) {
      notice.value = d.verified === false
        // 微信不可达时如实告知没核对上，而不是替它下结论
        ? '订单已取消（未能在微信侧核对，如你已付款请稍后刷新订单）'
        : '订单已取消'
    } else if (d.paid) {
      notice.value = '该订单已支付成功，无需取消'
    } else {
      notice.value = res?.message || '取消未生效，请刷新后查看订单状态'
    }
    // 无论哪种结论都重拉列表：状态可能已在服务端变化（含被自愈成已支付）
    await reload()
  } catch (e: any) {
    notice.value = e?.data?.message || e?.message || '取消失败，请稍后重试'
  } finally {
    cancelling.value = false
    cancelDialogOpen.value = false
    cancelTarget.value = null
  }
}

loggedIn.value = isLoggedIn()
if (loggedIn.value) {
  await reload()
  loaded.value = true
} else {
  loaded.value = true
}
</script>