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
@@ -44,6 +44,12 @@ export interface TemplateComponents {
  Contact?: Component
  /** 关于我们页 */
  About?: Component
+  /** 标书列表页 */
+  TenderList?: Component
+  /** 标书详情页 */
+  TenderDetail?: Component
+  /** 标书购买流程壳 */
+  BuyDocument?: Component
  /** Header 组件 */
  Header: Component
  /** Footer 组件 */
@@ -130,7 +136,10 @@ export function useTemplate() {
        { key: 'CaseList', file: 'CaseList' },
        { key: 'CaseDetail', file: 'CaseDetail' },
        { key: 'Contact', file: 'Contact' },
-        { key: 'About', file: 'About' }
+        { key: 'About', file: 'About' },
+        { key: 'TenderList', file: 'TenderList' },
+        { key: 'TenderDetail', file: 'TenderDetail' },
+        { key: 'BuyDocument', file: 'BuyDocument' }
      ]

      for (const { key, file } of optionalComponents) {
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <Component :is="pageComponent" v-if="pageComponent" :key="route.fullPath" />
+    <SiteLoading v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * 标书购买流程壳 /buy?id=xxx
+ */
+const route = useRoute()
+const { loadTemplate } = useTemplate()
+
+const pageComponent = shallowRef<Component | null>(null)
+const components = await loadTemplate()
+pageComponent.value = components?.BuyDocument || null
+</script>
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <Component :is="pageComponent" v-if="pageComponent" :key="route.fullPath" />
+    <SiteLoading v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * 标书详情 /tender/:id
+ */
+const route = useRoute()
+const { loadTemplate } = useTemplate()
+
+const pageComponent = shallowRef<Component | null>(null)
+const components = await loadTemplate()
+pageComponent.value = components?.TenderDetail || null
+</script>
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <Component :is="pageComponent" v-if="pageComponent" />
+    <SiteLoading v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * 标书中心（列表根） /tender
+ */
+const { loadTemplate } = useTemplate()
+
+const pageComponent = shallowRef<Component | null>(null)
+const components = await loadTemplate()
+pageComponent.value = components?.TenderList || null
+</script>
@@ -1,11 +1,112 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-<div>sdfsdfsdsdfbuy---</div>
+  <div class="container mx-auto px-4 py-10">
+    <NuxtLink to="/tender" class="text-sm text-blue-600 hover:underline">← 返回标书中心</NuxtLink>
+
+    <div v-if="tender" class="mx-auto mt-6 max-w-2xl rounded-lg border border-gray-200 p-6">
+      <h1 class="text-xl font-bold text-gray-900">购买标书</h1>
+      <div class="mt-4 rounded-md bg-gray-50 p-4 text-sm">
+        <p class="font-semibold text-gray-800">{{ tender.projectName }}</p>
+        <p class="mt-1 text-gray-500">项目编号：{{ tender.projectNo }}</p>
+        <p class="mt-2 text-blue-600">
+          信息服务费：<span class="text-2xl font-bold">¥{{ formatMoney(tender.tenderPrice) }}</span>
+        </p>
+      </div>
+
+      <form class="mt-6 space-y-4" @submit.prevent="submit">
+        <div>
+          <label class="text-sm text-gray-600">购买联系人</label>
+          <input v-model="form.contactName" class="mt-1 w-full rounded-md border border-gray-300 px-4 py-2 text-sm" placeholder="姓名" />
+        </div>
+        <div>
+          <label class="text-sm text-gray-600">联系电话</label>
+          <input v-model="form.contactPhone" class="mt-1 w-full rounded-md border border-gray-300 px-4 py-2 text-sm" placeholder="手机号" />
+        </div>
+        <div>
+          <label class="text-sm text-gray-600">联系邮箱</label>
+          <input v-model="form.contactEmail" type="email" class="mt-1 w-full rounded-md border border-gray-300 px-4 py-2 text-sm" placeholder="邮箱" />
+        </div>
+        <div>
+          <label class="text-sm text-gray-600">购买数量</label>
+          <input v-model.number="form.quantity" type="number" min="1" class="mt-1 w-full rounded-md border border-gray-300 px-4 py-2 text-sm" />
+        </div>
+
+        <button
+          type="submit"
+          class="w-full rounded-md bg-blue-600 py-3 text-white font-medium hover:bg-blue-700 disabled:opacity-50"
+          :disabled="submitting"
+        >
+          {{ submitting ? '提交中...' : '提交订单并支付' }}
+        </button>
+
+        <p v-if="tip" class="text-center text-sm text-gray-500">{{ tip }}</p>
+        <p v-if="error" class="text-center text-sm text-red-500">{{ error }}</p>
+      </form>
+    </div>
+
+    <div v-else-if="notFound" class="py-20 text-center text-gray-500">项目不存在</div>
+    <SiteLoading v-else />
+  </div>
 </template>

-<style scoped>
+<script setup lang="ts">
+import type { Tender } from '~/types/tender'

-</style>
+const route = useRoute()
+const id = route.query.id as string
+const tender = shallowRef<Tender | null>(null)
+const notFound = ref(false)
+const submitting = ref(false)
+const tip = ref('')
+const error = ref('')
+
+const form = reactive({
+  contactName: '',
+  contactPhone: '',
+  contactEmail: '',
+  quantity: 1
+})
+
+function formatMoney(n?: number | string) {
+  return Number(n ?? 0).toFixed(2)
+}
+
+async function submit() {
+  error.value = ''
+  tip.value = ''
+  submitting.value = true
+  try {
+    const res: any = await $fetch('/api/tender/order', {
+      method: 'POST',
+      body: {
+        projectId: Number(id),
+        quantity: form.quantity || 1,
+        contactName: form.contactName,
+        contactPhone: form.contactPhone,
+        contactEmail: form.contactEmail
+      }
+    })
+    if (res && res.orderNo) {
+      tip.value = `下单成功，订单号：${res.orderNo}，请扫码支付`
+      // TODO(阶段3b): 调 /api/tender/pay 获取微信二维码（需登录态）
+    } else {
+      error.value = res?.message || '下单失败'
+    }
+  } catch (e: any) {
+    error.value = e?.data?.message || e?.message || '下单失败'
+  } finally {
+    submitting.value = false
+  }
+}
+
+try {
+  if (!id) {
+    notFound.value = true
+  } else {
+    const res: any = await $fetch(`/api/tender/detail?id=${id}`)
+    if (res && res.id) tender.value = res
+    else notFound.value = true
+  }
+} catch {
+  notFound.value = true
+}
+</script>
@@ -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>
@@ -0,0 +1,105 @@
+<template>
+  <div class="container mx-auto px-4 py-10">
+    <h1 class="text-2xl font-bold text-gray-900 mb-2">标书中心</h1>
+    <p class="text-sm text-gray-500 mb-6">汇聚各类采购项目，选择您需要的标书进行购买</p>
+
+    <!-- 搜索 + 分类 -->
+    <div class="mb-6 flex flex-col sm:flex-row gap-3">
+      <input
+        v-model="keywords"
+        class="flex-1 rounded-md border border-gray-300 px-4 py-2 text-sm"
+        placeholder="搜索项目名称 / 采购编号"
+        @keyup.enter="load()"
+      />
+      <select v-model="category" class="rounded-md border border-gray-300 px-4 py-2 text-sm">
+        <option value="">全部项目</option>
+        <option value="服务类">服务类</option>
+        <option value="工程类">工程类</option>
+        <option value="货物类">货物类</option>
+      </select>
+      <button
+        class="rounded-md bg-blue-600 px-5 py-2 text-sm text-white hover:bg-blue-700"
+        @click="load()"
+      >
+        搜索
+      </button>
+    </div>
+
+    <!-- 列表 -->
+    <div v-if="items.length" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      <NuxtLink
+        v-for="item in items"
+        :key="item.id"
+        :to="`/tender/${item.id}`"
+        class="group rounded-lg border border-gray-200 p-5 hover:shadow-md transition"
+      >
+        <div class="text-xs text-gray-400 mb-1">项目编号：{{ item.projectNo }}</div>
+        <h2 class="text-base font-semibold text-gray-900 group-hover:text-blue-600 line-clamp-2">
+          {{ item.projectName }}
+        </h2>
+        <div class="mt-3 flex items-center gap-2 text-xs text-gray-500">
+          <span class="rounded bg-gray-100 px-2 py-0.5">{{ item.category || '未分类' }}</span>
+          <span>截止：{{ item.deadlineTime?.slice(0, 19)?.replace('T', ' ') || '-' }}</span>
+        </div>
+        <div class="mt-4 flex items-end justify-between">
+          <div class="text-blue-600">
+            <span class="text-xl font-bold">¥{{ formatMoney(item.tenderPrice) }}</span>
+            <span class="text-xs text-gray-400 ml-1">信息服务费</span>
+          </div>
+          <span class="text-sm text-blue-600 group-hover:underline">查看详情</span>
+        </div>
+      </NuxtLink>
+    </div>
+
+    <div v-else-if="loaded" class="py-16 text-center text-gray-500">暂无标书项目</div>
+    <SiteLoading v-show="!loaded" />
+
+    <!-- 加载更多 -->
+    <div v-if="items.length < count" class="mt-8 text-center">
+      <button class="rounded-md border border-gray-300 px-6 py-2 text-sm" @click="loadMore()">
+        加载更多
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Tender } from '~/types/tender'
+
+const keywords = ref('')
+const category = ref('')
+const page = ref(1)
+const limit = 12
+const loaded = ref(false)
+const listState = shallowRef<Tender[]>([])
+
+const items = computed(() => listState.value)
+const count = computed(() => (listState as any).__count || 0)
+
+async function load() {
+  page.value = 1
+  const res: any = await $fetch('/api/tender/list', {
+    query: { page: page.value, limit, keywords: keywords.value || undefined, category: category.value || undefined }
+  })
+  listState.value = res?.list || []
+  ;(listState as any).__count = res?.count || 0
+  loaded.value = true
+}
+
+async function loadMore() {
+  page.value += 1
+  const res: any = await $fetch('/api/tender/list', {
+    query: { page: page.value, limit, keywords: keywords.value || undefined, category: category.value || undefined }
+  })
+  const next = res?.list || []
+  listState.value = [...listState.value, ...next]
+  ;(listState as any).__count = res?.count || 0
+}
+
+function formatMoney(n?: number | string) {
+  if (n === undefined || n === null) return '0.00'
+  return Number(n).toFixed(2)
+}
+
+await load()
+</script>
@@ -0,0 +1,50 @@
+/** 汇吉采标书项目（前端视图模型，与 mp-java HjcBidProject 对齐） */
+export interface Tender {
+  id: number
+  /** 项目编号 */
+  projectNo: string
+  /** 项目名称 */
+  projectName: string
+  /** 分类：服务类/工程类/货物类 */
+  category?: string
+  /** 发布时间 */
+  publishTime?: string
+  /** 投标截止时间 */
+  deadlineTime?: string
+  /** 招标人 */
+  tenderer?: string
+  /** 中标公司 */
+  winnerSupplier?: string
+  /** 中标金额 */
+  bidAmount?: number
+  /** 公告标题 */
+  bulletinTitle?: string
+  /** 公告正文 */
+  bulletinContent?: string
+  /** 公告附件(JSON字符串) */
+  bulletinFileList?: string
+  /** 标书价格(信息服务费) */
+  tenderPrice?: number
+  /** 标书附件(JSON字符串) */
+  tenderFile?: string
+  /** 开售时间 */
+  onsaleTime?: string
+  /** 停售时间 */
+  offsaleTime?: string
+  /** 售卖方式：1公司财务 2公众号 3交易中心 4政采云 */
+  sellingMethod?: number
+  /** 是否卖标书 */
+  needSell?: number
+  /** 状态：1上架 0停售 */
+  status?: number
+  /** 来源 */
+  dataSource?: string
+  /** 已售数量 */
+  saleCount?: number
+}
+
+/** 分页返回结构 */
+export interface TenderPage {
+  list: Tender[]
+  count: number
+}