feat(tender): 汇吉采标书购买阶段3 - C端标书列表/详情/购买入口

- server/api/tender/{list.get,detail.get,order.post}.ts 代理到 mp-api /api/hjc/bid-project|order - app/types/tender.ts 前端视图模型 - app/templates/template-07/pages/{TenderList,TenderDetail,BuyDocument}.vue（Tailwind，仿 Product 页） - app/pages/tender/index.vue + tender/[id].vue + buy.vue 路由，经 useTemplate 加载 - useTemplate.ts 注册 TenderList/TenderDetail/BuyDocument（全部模板安全可选） - 附 BUY_TENDER_MAP_REPORT.md（hjc-web 结构映射参考）
2026-09-08 21:45:34 +08:00
parent bbcb76485d
commit 2828ba6718
12 changed files with 1092 additions and 8 deletions
@@ -0,0 +1,121 @@
+<template>
+  <div class="container mx-auto px-4 py-10">
+    <div v-if="tender" class="grid lg:grid-cols-[1fr_320px] gap-8">
+      <!-- 左侧：项目信息 -->
+      <div>
+        <NuxtLink to="/tender" class="text-sm text-blue-600 hover:underline">← 返回标书中心</NuxtLink>
+        <h1 class="mt-3 text-2xl font-bold text-gray-900">{{ tender.projectName }}</h1>
+        <div class="mt-2 flex flex-wrap gap-3 text-sm text-gray-500">
+          <span>项目编号：{{ tender.projectNo }}</span>
+          <span class="rounded bg-gray-100 px-2 py-0.5">{{ tender.category || '未分类' }}</span>
+        </div>
+
+        <div class="mt-6 space-y-3 text-sm">
+          <div class="flex gap-3">
+            <span class="w-28 shrink-0 text-gray-400">发布时间</span>
+            <span>{{ fmt(tender.publishTime) }}</span>
+          </div>
+          <div class="flex gap-3">
+            <span class="w-28 shrink-0 text-gray-400">投标截止</span>
+            <span>{{ fmt(tender.deadlineTime) }}</span>
+          </div>
+          <div class="flex gap-3">
+            <span class="w-28 shrink-0 text-gray-400">招标人</span>
+            <span>{{ tender.tenderer || '-' }}</span>
+          </div>
+          <div class="flex gap-3">
+            <span class="w-28 shrink-0 text-gray-400">开售时间</span>
+            <span>{{ fmt(tender.onsaleTime) }}</span>
+          </div>
+          <div class="flex gap-3">
+            <span class="w-28 shrink-0 text-gray-400">停售时间</span>
+            <span>{{ fmt(tender.offsaleTime) }}</span>
+          </div>
+        </div>
+
+        <div v-if="tender.bulletinTitle || tender.bulletinContent" class="mt-8">
+          <h2 class="mb-3 text-lg font-semibold text-gray-900">中标公告</h2>
+          <div class="rounded-md border border-gray-200 p-5 text-sm text-gray-700">
+            <h3 class="mb-2 font-semibold">{{ tender.bulletinTitle }}</h3>
+            <p class="whitespace-pre-line leading-relaxed">{{ tender.bulletinContent }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧：购买卡片 -->
+      <aside class="lg:sticky lg:top-24 h-fit rounded-lg border border-gray-200 p-6">
+        <div class="flex items-end gap-1 text-blue-600">
+          <span class="text-3xl font-bold">¥{{ formatMoney(tender.tenderPrice) }}</span>
+          <span class="text-xs text-gray-400 mb-1">信息服务费</span>
+        </div>
+        <p class="mt-2 text-xs text-gray-400">购买成功后可在「我的订单」查看并下载标书</p>
+
+        <div class="mt-5 space-y-2 text-sm text-gray-600">
+          <p>购买人数：{{ tender.saleCount || 0 }}</p>
+          <p>售卖方式：{{ sellingMethodText }}</p>
+        </div>
+
+        <button
+          class="mt-6 w-full rounded-md bg-blue-600 py-3 text-white font-medium hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+          :disabled="!buyable"
+          @click="goBuy"
+        >
+          {{ buyable ? '立即购买' : '已截止' }}
+        </button>
+        <p class="mt-3 text-xs text-gray-400 text-center">购买需通过企业资质审核</p>
+      </aside>
+    </div>
+
+    <div v-else-if="notFound" class="py-20 text-center text-gray-500">标书项目不存在或已下架</div>
+    <SiteLoading v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Tender } from '~/types/tender'
+
+const route = useRoute()
+const id = route.params.id as string
+const tender = shallowRef<Tender | null>(null)
+const notFound = ref(false)
+
+const buyable = computed(() => {
+  if (!tender.value) return false
+  if (tender.value.status !== undefined && tender.value.status !== 1) return false
+  if (tender.value.needSell !== undefined && tender.value.needSell === 0) return false
+  if (tender.value.offsaleTime) {
+    const t = new Date(tender.value.offsaleTime.replace('T', ' ')).getTime()
+    if (!Number.isNaN(t) && t < Date.now()) return false
+  }
+  return true
+})
+
+const sellingMethodText = computed(() => {
+  const m = tender.value?.sellingMethod
+  if (m === 2) return '公众号'
+  if (m === 3) return '交易中心'
+  if (m === 4) return '政采云'
+  return '公司财务'
+})
+
+function fmt(s?: string) {
+  return s ? s.slice(0, 19).replace('T', ' ') : '-'
+}
+
+function formatMoney(n?: number | string) {
+  return Number(n ?? 0).toFixed(2)
+}
+
+function goBuy() {
+  if (!tender.value) return
+  return navigateTo(`/buy?id=${tender.value.id}`)
+}
+
+try {
+  const res: any = await $fetch(`/api/tender/detail?id=${id}`)
+  tender.value = res && res.id ? res : null
+  if (!res) notFound.value = true
+} catch {
+  notFound.value = true
+}
+</script>