diff --git a/app/components/HjcPayPanel.vue b/app/components/HjcPayPanel.vue
new file mode 100644
index 0000000..4e6ee2e
--- /dev/null
+++ b/app/components/HjcPayPanel.vue
@@ -0,0 +1,251 @@
+<template>
+  <!--
+    支付面板：收银台（`/tender/pay`）与购标流程（`/buy`）共用。
+
+    两段：**选择态**（选支付方式 + 立即支付）→ **出码态**（微信二维码 / 支付宝表单）。
+    进页不发起支付、不预选方式；出码后没有切换控件，只有「更换支付方式」这一个出口。
+    为什么这么切，见 `useHjcPayFlow` 的文件头注释。
+  -->
+  <div v-if="!timedOut" class="mx-auto mt-6 max-w-2xl rounded-lg border border-gray-200 p-8 text-center">
+    <!-- ============ 选择态 ============ -->
+    <template v-if="phase === 'select'">
+      <h2 class="text-xl font-bold text-gray-900">请选择支付方式</h2>
+      <p class="mt-2 text-sm text-gray-500">订单号：{{ orderNo }}</p>
+      <p v-if="projectName" class="mt-1 text-sm text-gray-500">{{ projectName }}</p>
+
+      <!--
+        倒计时：驱动值来自**后端下发的 payDeadline**，不是前端拿创建时刻自己加时限。
+        它是「这张单还有多久不能付」的唯一告知渠道——不给它，用户会拿一张已经不能付的码去扫。
+        没下发到期时刻（旧订单/字段缺失）时不显示，也不锁页面。
+      -->
+      <p v-if="remainText" class="mt-3 text-sm" :class="remainWarn ? 'text-red-500' : 'text-gray-500'">
+        支付剩余时间 <span class="font-mono font-semibold">{{ remainText }}</span>
+      </p>
+
+      <!-- 金额一律来自**订单本身**，不来自支付响应：
+           支付一失败页面就会停在 0.00，而收银台恰恰是最需要看到金额的地方 -->
+      <p class="my-4 text-2xl font-bold text-blue-600">¥{{ formatMoney(amount) }}</p>
+
+      <!--
+        支付方式选择。**不预选**：进来就替买家选中一个，等于替他做了决定；
+        没选之前「立即支付」是禁用的——必须由买家自己点一次。
+      -->
+      <div class="grid grid-cols-2 gap-3">
+        <button
+          v-for="opt in payOptions"
+          :key="opt.value"
+          type="button"
+          class="rounded-md border px-4 py-3 text-sm font-medium transition-colors disabled:opacity-50"
+          :class="payType === opt.value
+            ? 'border-blue-600 bg-blue-50 text-blue-700'
+            : 'border-gray-300 text-gray-600 hover:bg-gray-50'"
+          :disabled="starting"
+          @click="select(opt.value)"
+        >
+          {{ opt.label }}
+        </button>
+      </div>
+      <button
+        class="mt-4 w-full rounded-md bg-blue-600 py-3 font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+        :disabled="!payType || starting"
+        @click="start"
+      >
+        {{ starting ? '正在发起支付...' : '立即支付' }}
+      </button>
+    </template>
+
+    <!-- ============ 出码态 ============ -->
+    <template v-else>
+      <h2 class="text-xl font-bold text-gray-900">请使用{{ channelLabel }}支付</h2>
+      <p class="mt-2 text-sm text-gray-500">订单号：{{ orderNo }}</p>
+      <p v-if="projectName" class="mt-1 text-sm text-gray-500">{{ projectName }}</p>
+      <p v-if="remainText" class="mt-3 text-sm" :class="remainWarn ? 'text-red-500' : 'text-gray-500'">
+        支付剩余时间 <span class="font-mono font-semibold">{{ remainText }}</span>
+      </p>
+      <p class="my-4 text-2xl font-bold text-blue-600">¥{{ formatMoney(amount) }}</p>
+
+      <!--
+        支付宝走**电脑网站支付**：后端返回一段自提交表单，写进新页面即跳转支付宝收银台
+        （当面付扫码需单独签约并提交资料审核，见 ADR 0010 补记，故不作默认）。
+        微信仍是出码：两者在模板里各占一支。
+      -->
+      <template v-if="alipayForm">
+        <div class="rounded-md bg-blue-50 px-4 py-6 text-sm text-blue-700">
+          已为你打开支付宝收银台。若新页面没有自动打开，请点击下方按钮。
+        </div>
+        <button
+          class="mt-6 w-full rounded-md bg-blue-600 py-3 font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+          :disabled="confirming"
+          @click="openAlipayForm"
+        >
+          前往支付宝付款
+        </button>
+        <button
+          class="mt-3 w-full rounded-md border border-gray-300 py-3 font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="confirming"
+          @click="confirm"
+        >
+          {{ confirming ? '确认中...' : '我已完成支付，确认订单' }}
+        </button>
+      </template>
+
+      <template v-else-if="codeUrl">
+        <!-- 过期只是置灰提示，仍留在页面上：万一用户是刚过点就扫的，还能看见自己扫的是哪张码 -->
+        <div :class="payExpired ? 'opacity-30' : ''">
+          <HjcPayQrcode :value="codeUrl" :size="240" :alt="qrAlt" />
+        </div>
+        <!--
+          这里**不写具体时长**：支付时限由后端配置、且随订单剩余窗口变化，
+          页面上写死一个数字（原先写的是 2 小时）迟早与上面那行倒计时自相矛盾。
+        -->
+        <p class="mt-3 text-sm text-gray-500">请在支付时限内用{{ channelLabel }}扫描上方二维码完成支付</p>
+        <p v-if="payExpired" class="mt-2 text-sm text-amber-600">二维码已过期，请重新获取后再扫码</p>
+      </template>
+      <div v-else class="rounded-md bg-gray-50 px-4 py-6 text-sm text-gray-500">
+        {{ refreshing ? `正在获取${channelLabel}支付` : '暂未获取到支付信息，请点击下方按钮重新获取' }}
+      </div>
+
+      <button
+        v-if="codeUrl && !alipayForm"
+        class="mt-6 w-full rounded-md bg-blue-600 py-3 font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+        :disabled="confirming"
+        @click="confirm"
+      >
+        {{ confirming ? '确认中...' : '我已完成支付，确认订单' }}
+      </button>
+      <button
+        v-if="!alipayForm"
+        class="mt-6 w-full rounded-md py-3 font-medium disabled:opacity-50"
+        :class="codeUrl
+          ? 'border border-gray-300 text-gray-700 hover:bg-gray-50'
+          : 'bg-blue-600 text-white hover:bg-blue-700'"
+        :disabled="refreshing || starting"
+        @click="refresh"
+      >
+        {{ refreshing ? '获取中...' : (codeUrl ? '重新获取二维码' : '获取支付信息') }}
+      </button>
+
+      <!--
+        换支付方式**只有这一个入口**，而且是有意识的一次动作：不自动重发、也不停查单
+        （见 `useHjcPayFlow.changePayMethod`）。这就是"随意切换"与"显式更换"的区别。
+      -->
+      <button
+        class="mt-4 text-sm text-blue-600 hover:underline disabled:opacity-50"
+        :disabled="refreshing || starting || confirming"
+        @click="changePayMethod"
+      >
+        更换支付方式
+      </button>
+    </template>
+
+    <p v-if="failureText" class="mt-3 text-sm text-red-500">{{ failureText }}</p>
+    <p v-else-if="querying" class="mt-3 text-sm text-gray-400">正在确认支付状态...</p>
+
+    <div v-if="$slots.default" class="mt-6 border-t border-gray-100 pt-4">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * 支付面板（收银台 + 购标流程共用）。
+ *
+ * 页面只需要把**订单侧的事实**传进来（订单号、金额、支付时限、401 回跳地址、项目名），
+ * 以及决定付款成功后去哪；支付流程本身全在 `useHjcPayFlow` 里。
+ *
+ * 与改造前的区别（也是本面板存在的理由）：进页**不**自动发起支付，先让买家选支付方式；
+ * 出码后不再有切换控件。详见 `useHjcPayFlow` 的文件头注释。
+ */
+const props = defineProps<{
+  /** 订单号：收银台从路由取，购标流程下单成功后拿到 */
+  orderNo: string
+  /** 应付金额（来自订单本身，不是支付响应） */
+  amount?: number | string
+  /** 支付时限到期时刻（后端下发的原始串）。拿不到时既不显示倒计时、也不锁页面 */
+  deadline?: string | null
+  /** 401 跳登录页时带上，便于登录后回跳 */
+  redirect: string
+  /** 订单所属项目名；收银台显示，购标流程不必传 */
+  projectName?: string
+}>()
+
+const emit = defineEmits<{
+  /** 渠道侧确认收款（收银台跳订单列表 / 购标流程进完成态） */
+  (e: 'paid'): void
+  /** 支付时限到点：页面切到"已超时"那一屏并锁死 */
+  (e: 'timeout'): void
+}>()
+
+const {
+  phase,
+  payType,
+  payOptions,
+  channelLabel,
+  qrAlt,
+  codeUrl,
+  alipayForm,
+  starting,
+  refreshing,
+  confirming,
+  error,
+  paid,
+  querying,
+  payError,
+  payExpired,
+  channelClosed,
+  remainText,
+  remainWarn,
+  timedOut,
+  select,
+  start,
+  refresh,
+  changePayMethod,
+  confirm,
+  openAlipayForm,
+  startPolling
+} = useHjcPayFlow({
+  orderNo: () => props.orderNo,
+  redirect: () => props.redirect,
+  deadline: () => props.deadline
+})
+
+/**
+ * 展示哪一条失败文案。
+ *
+ * 动作失败（`error`）优先；渠道侧那张支付单已关闭时按**当前处在哪一段**说对：还没出过码时
+ * 是"重新选择支付方式"，出过码才是"重新获取二维码"。这正是 `channelClosed` 这个结构化标记
+ * 存在的理由——**不要**退回去匹配 `payError` 的文案，那种写法一改就静默失效。
+ */
+const failureText = computed(() => {
+  if (error.value) return error.value
+  if (channelClosed.value && phase.value === 'select') {
+    return '上次的支付单已关闭，请重新选择支付方式后支付'
+  }
+  return payError.value
+})
+
+/** 渠道侧确认收款后，去哪由页面决定（面板不猜路由，也不猜流程） */
+watch(paid, (v) => {
+  if (v) emit('paid')
+})
+
+onMounted(() => {
+  // 进页就已经过期：不出码也不查单，直接让页面切到"已超时"那一屏
+  if (timedOut.value) {
+    emit('timeout')
+    return
+  }
+  // **只查单、不发起支付**——这是本面板与改造前最关键的区别（见 issue 验收第 7 条）
+  startPolling()
+})
+
+/** 开着页面等到时限归零：同样交给页面锁死 */
+watch(timedOut, (v) => {
+  if (v) emit('timeout')
+})
+
+function formatMoney(n?: number | string) {
+  return Number(n ?? 0).toFixed(2)
+}
+</script>
diff --git a/app/composables/useHjcPayFlow.ts b/app/composables/useHjcPayFlow.ts
new file mode 100644
index 0000000..7808390
--- /dev/null
+++ b/app/composables/useHjcPayFlow.ts
@@ -0,0 +1,321 @@
+import {
+  hjcFormatCountdown,
+  hjcPayDeadlineMs,
+  hjcPayRemainMs
+} from '~/utils/orderStatus'
+
+/**
+ * 收银台 / 购标流程的支付流程状态机（hjc-web）。
+ *
+ * **为什么分两段**（`select` → `code`）：买家先明确选「微信支付 / 支付宝」，点「立即支付」才
+ * 向渠道发起。改造前是"进页就按默认微信发起 + 页面上留个切换器"，两个后果都被这次改掉：
+ * ①收银台替买家做了决定；②切换即重新发起一次**真实的渠道下单**，订单上的 `payMethod`
+ * （甲方对账、订单详情展示用）跟着被覆盖——而它建单时就是 `WECHAT_NATIVE`，与买家选过什么
+ * 无关（见 `CONTEXT.md` 的「支付渠道」）。H5 收银台本来就是"选择后发起"的形状，这里是向它对齐。
+ *
+ * 三条约束，改这个文件前先读懂：
+ * - **不预选**：`payType` 初值是 `null`，没选之前「立即支付」不可用——预选一个就等于替买家决定。
+ * - **出码即锁**：拿到 `codeUrl` / `alipayForm` 后进 `code` 段，页面上**不再有**切换控件；
+ *   要换只能 {@link changePayMethod} 显式回到选择态（清掉当前支付信息、**不自动重发**）。
+ * - **失败留在选择态**：发起失败说明渠道侧什么都没产生，没有理由把用户锁在一个没成功的方式上。
+ *
+ * 锁是**页面会话级**的：订单现有字段区分不了"从没选过"与"选过微信没付"（`pay_method` 建单即
+ * `WECHAT_NATIVE`），所以刷新/重进必然回到选择态。要做服务端硬锁就得在订单上加字段，本次不做。
+ */
+
+export type HjcPayMethod = 'wechat' | 'alipay'
+export type HjcPayPhase = 'select' | 'code'
+
+export interface HjcPayFlowOptions {
+  /** 订单号（收银台从路由取，购标流程下单成功后拿到） */
+  orderNo: () => string
+  /** 401 跳登录页时带上，便于登录后回跳 */
+  redirect: () => string
+  /**
+   * 该订单支付时限的到期时刻（后端下发的原始串）。**拿不到时既不显示倒计时、也不锁页面**——
+   * 拿一个假值去锁死收银台比不显示倒计时糟得多。
+   */
+  deadline?: () => string | null | undefined
+}
+
+export function useHjcPayFlow(options: HjcPayFlowOptions) {
+  const { handleAuthCode } = useHjcAuth()
+
+  const orderNo = () => String(options.orderNo() || '')
+  const deadlineMs = () => hjcPayDeadlineMs({ payDeadline: options.deadline?.() ?? null })
+
+  /** 当前选择。**不预选**：`null` = 买家还没选，「立即支付」在这个状态下不可用 */
+  const payType = ref<HjcPayMethod | null>(null)
+  /** 选择态 / 出码态。出码后不能再直接改方式，只能走 `changePayMethod` */
+  const phase = ref<HjcPayPhase>('select')
+
+  const payOptions: Array<{ value: HjcPayMethod; label: string }> = [
+    { value: 'wechat', label: '微信支付' },
+    { value: 'alipay', label: '支付宝' }
+  ]
+
+  const codeUrl = ref('')
+  /** 支付宝电脑网站支付的自提交表单（后端只在该渠道下返回） */
+  const alipayForm = ref('')
+  const starting = ref(false)
+  const refreshing = ref(false)
+  const confirming = ref(false)
+  /** 动作本身的失败（发起 / 重新获取 / 手动确认），与"查单失败"分开 */
+  const error = ref('')
+
+  /** 提示文案里的渠道名（只影响措辞，不影响判定） */
+  const channelLabel = computed(() => (payType.value === 'alipay' ? '支付宝' : '微信'))
+  const qrAlt = computed(() => (payType.value === 'alipay' ? '支付宝支付二维码' : '微信支付二维码'))
+
+  /**
+   * 支付确认一律以**渠道侧**为准（轮询 + 手动确认都走它）。
+   * 绝不调用 `mark-paid`：那个接口不查单，点一下就能把订单置为已支付（见 ADR 0010）。
+   *
+   * 渠道名传当前选择；还没选时按微信传——它只影响提示里的"微信侧 / 支付宝侧"，
+   * 状态词表不因此变化（见 `useHjcPayStatus` 的文件头注释）。
+   */
+  const {
+    paid,
+    querying,
+    error: payError,
+    expired: payExpired,
+    channelClosed,
+    start: beginQueryPolling,
+    query: queryPayStatus
+  } = useHjcPayStatus(() => options.redirect(), () => payType.value ?? 'wechat')
+
+  /**
+   * 倒计时用的"当前时刻"。
+   *
+   * 每秒只更新一个 ref（而不是每个用到它的地方各自 setInterval），且**秒级**就够了：
+   * 支付时限是 30 分钟量级，没必要为 1 秒的精度付出多次渲染。
+   */
+  const now = ref(Date.now())
+  let clock: ReturnType<typeof setInterval> | null = null
+
+  onMounted(() => {
+    clock = setInterval(() => {
+      now.value = Date.now()
+    }, 1000)
+  })
+  onUnmounted(() => {
+    if (clock) {
+      clearInterval(clock)
+      clock = null
+    }
+  })
+
+  const remainMs = computed(() => hjcPayRemainMs({ payDeadline: options.deadline?.() ?? null }, now.value))
+  const remainText = computed(() => (remainMs.value == null ? '' : hjcFormatCountdown(remainMs.value)))
+  /** 剩余不足一分钟时把倒计时标红（与 H5 收银台同一口径） */
+  const remainWarn = computed(() => remainMs.value != null && remainMs.value <= 60_000)
+  /** 到期时刻已知且已归零：页面锁死，不再出码、不再轮询（到期时刻未知时**不算**超时） */
+  const timedOut = computed(() => remainMs.value !== null && remainMs.value <= 0)
+
+  /**
+   * 选择支付方式。出码后调它无效——锁定只能由 `changePayMethod` 解开，
+   * 否则"锁定"就等于没锁（模板在 `code` 段也确实不再渲染这两个按钮）。
+   */
+  function select(method: HjcPayMethod) {
+    if (phase.value === 'code') return
+    payType.value = method
+    error.value = ''
+  }
+
+  /**
+   * 渠道错误码 → 可行动的中文提示。
+   *
+   * `OUT_TRADE_NO_USED` = 同一订单号换了支付类型重复下单。微信内（JSAPI）与 PC（Native）
+   * 各发起一次时必现，而"先选方式再发起"恰恰让用户更容易自己撞上它（比如在微信内付过一半，
+   * 又来 PC 选微信）。错误码由后端从支付异常的 cause 链上取，**不要**去匹配 message 字符串——
+   * 那种写法会在错误包装方式一改时静默失效。
+   */
+  function payErrorMessage(res: any) {
+    if (res?.data?.wechatCode === 'OUT_TRADE_NO_USED') {
+      return '该订单已在微信内发起过支付，请回到微信内的收银台继续完成付款。'
+    }
+    return res?.message || '发起支付失败，请稍后重试'
+  }
+
+  /**
+   * 向渠道发起（或重新发起）一次支付。
+   *
+   * - `ok`   拿到了支付信息
+   * - `auth` 登录态问题（401 已跳登录页 / 403 已给出提示）——调用方**不要再起查单**
+   * - `fail` 其它失败（渠道拒单、网络、没返回支付信息），原因已写进 `error`
+   */
+  async function issuePayment(): Promise<'ok' | 'auth' | 'fail'> {
+    // 代理原样透传 ApiResult：按 body.code 判定（HTTP 状态码恒为 200，不可用于判定）
+    const res: any = await $fetch('/api/tender/pay', {
+      method: 'POST',
+      body: { orderNo: orderNo(), payType: payType.value }
+    })
+    const auth = await handleAuthCode(res, options.redirect())
+    if (auth.handled) {
+      error.value = auth.message || ''
+      return 'auth'
+    }
+    if (res?.code !== 0) {
+      error.value = payErrorMessage(res)
+      return 'fail'
+    }
+    codeUrl.value = res.data?.codeUrl || ''
+    alipayForm.value = res.data?.alipayForm || ''
+    if (!codeUrl.value && !alipayForm.value) {
+      error.value = '未获取到支付信息，请稍后重试'
+      return 'fail'
+    }
+    return 'ok'
+  }
+
+  /**
+   * 「立即支付」。
+   *
+   * 没选方式、没有订单号、已过支付时限都不发：后端也会拒（它按"本单剩余窗口"算，剩余不足
+   * 一分钟即拒绝），前端先拦住只是省一次注定失败的请求。
+   */
+  async function start() {
+    if (!payType.value || !orderNo() || timedOut.value) return
+    error.value = ''
+    starting.value = true
+    let issued: 'ok' | 'auth' | 'fail' = 'fail'
+    try {
+      issued = await issuePayment()
+      if (issued === 'ok') {
+        phase.value = 'code'
+        // 网页支付：立刻把表单送去新页面，用户不必再点一次
+        if (alipayForm.value) openAlipayForm()
+      }
+    } catch (e: any) {
+      error.value = e?.data?.message || e?.message || '发起支付失败，请稍后重试'
+    } finally {
+      starting.value = false
+      // 401 已经把我们送去登录页了，再起查单只会又打一次匿名请求（改造前这条路径也是不查单的）
+      if (issued !== 'auth') {
+        // 无论这次有没有拿到支付信息都重新开始查单：订单可能**已经**在渠道侧付过了
+        //（例如在微信内付掉、或上一次支付成功但页面被关掉）。上一次查单若因渠道单已关闭
+        // 而停过表，这里也顺带恢复——否则换了方式再付就再也没人查了。
+        startPolling()
+      }
+    }
+  }
+
+  /** 「重新获取」：对**已经锁定的那个方式**再要一次支付信息，不成为换方式的后门 */
+  async function refresh() {
+    if (!payType.value || !orderNo() || timedOut.value) return
+    error.value = ''
+    refreshing.value = true
+    let issued: 'ok' | 'auth' | 'fail' = 'fail'
+    try {
+      issued = await issuePayment()
+      if (issued === 'ok') {
+        phase.value = 'code'
+        if (alipayForm.value) openAlipayForm()
+      }
+    } catch (e: any) {
+      error.value = e?.data?.message || e?.message || '获取支付信息失败，请稍后重试'
+    } finally {
+      refreshing.value = false
+      if (issued !== 'auth') startPolling()
+    }
+  }
+
+  /**
+   * 「更换支付方式」：显式回到选择态。
+   *
+   * 清掉当前支付信息、**不自动重发**（重发等于又替买家决定了一次），但**不停查单**——
+   * 买家可能刚把上一张码付掉，停了就漏掉那笔钱。刚才的选择保留着，他只改想改的那一半。
+   */
+  function changePayMethod() {
+    if (phase.value !== 'code') return
+    phase.value = 'select'
+    codeUrl.value = ''
+    alipayForm.value = ''
+    error.value = ''
+  }
+
+  /** 手动确认（扫码后的兜底）：**也走查单**，不代替渠道下结论 */
+  async function confirm() {
+    error.value = ''
+    confirming.value = true
+    try {
+      const res = await queryPayStatus()
+      if (res.handled) {
+        error.value = res.message || ''
+        return
+      }
+      // 已付款：`paid` 被置真，面板据此通知页面（收银台跳订单列表 / 购标流程进完成态）
+      if (res.settled) return
+      error.value = res.message || `${channelLabel.value}侧还未收到付款，请完成支付后再试`
+    } finally {
+      confirming.value = false
+    }
+  }
+
+  /**
+   * 把支付宝返回的自提交表单写进一个新页面。
+   *
+   * 用 `document.write` 而不是 `v-html`：表单里带一段自动提交的脚本，而 `v-html` 插入的
+   * 脚本标签**不会执行**（HTML 规范如此），表单永远不会自动提交。写进新窗口则脚本正常执行，
+   * 且原页面留在本标签页继续轮询查单。
+   *
+   * 弹窗被拦截时不报"失败"——按钮复用本函数，用户允许弹窗后再点一次即可。
+   * 注意：本注释不要写出脚本标签的字面量——SFC 的 script 块会被它提前闭合。
+   */
+  function openAlipayForm() {
+    if (!alipayForm.value) return
+    const w = window.open('', '_blank')
+    if (!w) {
+      error.value = '浏览器拦截了新窗口，请允许弹出窗口后点「前往支付宝付款」'
+      return
+    }
+    w.document.open()
+    w.document.write(alipayForm.value)
+    w.document.close()
+    error.value = ''
+  }
+
+  /**
+   * 开始查单轮询——**只查单，不发起支付**。
+   *
+   * 进页就开：这是认出"渠道侧其实已经付了、只是本地还没回写"那类订单的唯一路径。
+   * 改造前它挂在自动发起支付之后，现在发起点变成用户点按钮，它必须独立存在。
+   */
+  function startPolling() {
+    if (!orderNo()) return
+    // 到期时刻传后端下发的那个：让轮询的终点与后端判定超时、渠道单失效对齐（ADR 0019）
+    beginQueryPolling(orderNo(), deadlineMs())
+  }
+
+  return {
+    // 状态
+    phase,
+    payType,
+    payOptions,
+    channelLabel,
+    qrAlt,
+    codeUrl,
+    alipayForm,
+    starting,
+    refreshing,
+    confirming,
+    error,
+    paid,
+    querying,
+    payError,
+    payExpired,
+    channelClosed,
+    remainMs,
+    remainText,
+    remainWarn,
+    timedOut,
+    // 动作
+    select,
+    start,
+    refresh,
+    changePayMethod,
+    confirm,
+    openAlipayForm,
+    startPolling
+  }
+}
diff --git a/app/composables/useHjcPayStatus.ts b/app/composables/useHjcPayStatus.ts
index ca7e9cc..b7dde1c 100644
--- a/app/composables/useHjcPayStatus.ts
+++ b/app/composables/useHjcPayStatus.ts
@@ -68,6 +68,15 @@ export function useHjcPayStatus(
   const error = ref('')
   /** 支付码是否已超出计时（优先用后端下发的到期时刻，拿不到时才用本地兜底值） */
   const expired = ref(false)
+  /**
+   * 渠道侧那张支付单已经终态、且不是成功（FAILED / CANCELLED / TIMEOUT / REFUND_FAILED）。
+   *
+   * 为什么要单独给一个结构化标记、而不是只给 `error` 里那句文案：收银台现在分两段
+   * （选择态 / 出码态），同一件事在**还没出过码**时该说"请重新选择支付方式"，出过码才该说
+   * "请重新获取二维码"。让调用方去匹配那句 message 是一改就静默失效的写法，
+   * 所以**状态**归这里、**措辞**归调用方（见 `useHjcPayFlow` 的 failureText）。
+   */
+  const channelClosed = ref(false)
 
   /** 轮询是否应当进行（已开始、未付款、未过期） */
   let active = false
@@ -109,12 +118,15 @@ export function useHjcPayStatus(
       error.value = ''
       const name = res.data?.paymentStatus ? String(res.data.paymentStatus) : null
       status.value = name
+      channelClosed.value = false
       if (name && SETTLED_STATUS.has(name)) {
         paid.value = true
         stop()
       } else if (name && DEAD_STATUS.has(name)) {
-        // 渠道侧已终态且不是成功：这张支付码已经没用了，继续轮询只是空转
+        // 渠道侧已终态且不是成功：这张支付码已经没用了，继续轮询只是空转。
+        // 这里的文案是按"已经出过码"写的；还没出过码的调用方用 channelClosed 换成自己的措辞。
         stop()
+        channelClosed.value = true
         error.value = `该支付单在${channelLabel.value}已关闭，请重新获取二维码`
       }
       return { handled: false, status: name, settled: paid.value }
@@ -154,6 +166,7 @@ export function useHjcPayStatus(
     orderNo = no
     paid.value = false
     expired.value = false
+    channelClosed.value = false
     error.value = ''
     status.value = null
     deadline = typeof deadlineAtMs === 'number' && Number.isFinite(deadlineAtMs)
@@ -189,5 +202,5 @@ export function useHjcPayStatus(
     document.removeEventListener('visibilitychange', onVisibilityChange)
   })
 
-  return { status, paid, querying, error, expired, channelLabel, start, stop, query }
+  return { status, paid, querying, error, expired, channelClosed, channelLabel, start, stop, query }
 }
diff --git a/app/pages/tender/orders/[id].vue b/app/pages/tender/orders/[id].vue
index 7d5635f..fe7b1b8 100644
--- a/app/pages/tender/orders/[id].vue
+++ b/app/pages/tender/orders/[id].vue
@@ -185,6 +185,7 @@ import type { HjcOrder } from '~/types/tender'
 import {
   hjcCanActOn,
   hjcOrderStatusClass,
+  hjcOrderStatusKey,
   hjcOrderStatusLabel
 } from '~/utils/orderStatus'
 
@@ -221,7 +222,26 @@ const cancelling = ref(false)
 
 /** 已支付：标书附件是否下发的唯一依据（与后端 `isPaid` 同一口径，只看 payStatus） */
 const isPaid = computed(() => order.value?.payStatus === 1)
-const payMethodLabel = computed(() => (order.value?.payMethod === 'ALIPAY' ? '支付宝' : '微信支付'))
+
+/**
+ * 「支付方式」这一行的显示口径。
+ *
+ * **只有已完成的订单才把 `payMethod` 当事实**：它建单时就被写成 `WECHAT_NATIVE`，只有真发起过
+ * 一次支付才会被渠道响应改写——所以未支付订单上的值并不代表买家选过什么，也区分不了
+ * "没选过"与"选过微信没付"（见 CONTEXT.md 的「支付渠道」）。未支付一律显示「—」，
+ * 不去声称一种买家可能根本没选过的方式。
+ *
+ * 标签按**前缀**判而不是精确等值：支付宝侧有 `ALIPAY`（电脑网站支付）与 `ALIPAY_QR`（扫码），
+ * 原先只认 `ALIPAY` 一个值，扫码支付过的单在详情里会被显示成"微信支付"。
+ */
+const payMethodLabel = computed(() => {
+  const o = order.value
+  if (!o || hjcOrderStatusKey(o) !== 'done') return '—'
+  const method = String(o.payMethod || '')
+  if (method.startsWith('ALIPAY')) return '支付宝'
+  if (method.startsWith('WECHAT')) return '微信支付'
+  return '—'
+})
 
 /**
  * 还能不能操作（去支付 / 取消）：共享判定，**不在这里重写一遍**——
diff --git a/app/pages/tender/pay.vue b/app/pages/tender/pay.vue
index ae8f3ef..0a5b19a 100644
--- a/app/pages/tender/pay.vue
+++ b/app/pages/tender/pay.vue
@@ -24,7 +24,7 @@
 
     <!--
       终态：已支付 / 已取消 / 已退款。
-      **这一块必须先于发起支付判定**——进一张已支付的单却先拉起一次统一下单，既无意义，
+      **这一块必须先于支付面板判定**——进一张已支付的单却先拉起一次统一下单，既无意义，
       又会多撞一次跨端 OUT_TRADE_NO_USED（多一次失败尝试不改变结论）。
     -->
     <div v-else-if="finalState" class="mx-auto mt-6 max-w-2xl rounded-lg border p-8 text-center" :class="finalState.cls">
@@ -40,7 +40,7 @@
       再出一张码要么被渠道拒绝，要么给出一张我们马上就要取消的订单的码。
       超时 = 这张订单终了，想要就重新下单。
     -->
-    <div v-else-if="timedOut" class="mx-auto mt-6 max-w-2xl rounded-lg border border-amber-200 bg-amber-50 p-8 text-center text-amber-800">
+    <div v-else-if="deadlineExpired" class="mx-auto mt-6 max-w-2xl rounded-lg border border-amber-200 bg-amber-50 p-8 text-center text-amber-800">
       <p class="text-xl font-bold">支付已超时</p>
       <p class="mt-2 text-sm opacity-80">该订单因支付超时已取消，如需购买请重新下单。</p>
       <p class="mt-1 text-sm opacity-80">订单号：{{ orderNo }}</p>
@@ -50,134 +50,37 @@
       </div>
     </div>
 
-    <!-- 待支付：进入即自动发起支付（与购标流程的支付步骤、h5 收银台一致） -->
-    <div v-else class="mx-auto mt-6 max-w-2xl rounded-lg border border-gray-200 p-8 text-center">
-      <h2 class="text-xl font-bold text-gray-900">请使用{{ channelLabel }}支付</h2>
-      <p class="mt-2 text-sm text-gray-500">订单号：{{ orderNo }}</p>
-      <p class="mt-1 text-sm text-gray-500">{{ order?.projectName }}</p>
-
-      <!--
-        倒计时：驱动值来自**后端下发的 payDeadline**，不是前端拿创建时刻自己加时限。
-        它是「这张码还有多久失效」的唯一告知渠道——不给它，用户会拿一张已经不能付的码去扫。
-        没下发到期时刻（旧订单/字段缺失）时不显示，也不锁页面。
-      -->
-      <p v-if="remainText" class="mt-3 text-sm" :class="remainMs !== null && remainMs <= 60_000 ? 'text-red-500' : 'text-gray-500'">
-        支付剩余时间 <span class="font-mono font-semibold">{{ remainText }}</span>
-      </p>
-      <!-- 金额一律来自**订单本身**（by-no），不来自支付响应：
-           支付一失败页面就会停在 0.00，而收银台恰恰是最需要看到金额的地方 -->
-      <p class="my-4 text-2xl font-bold text-blue-600">¥{{ formatMoney(amount) }}</p>
-
-      <!--
-        支付方式选择。**切换方式即重新发起支付**——同一订单号不能换支付类型重复下单
-        （微信会回 OUT_TRADE_NO_USED），所以切换前把上一张码清掉，避免两张码同时留在页面上。
-      -->
-      <div class="mb-6 inline-flex rounded-md border border-gray-200 p-1">
-        <button
-          v-for="opt in payOptions"
-          :key="opt.value"
-          type="button"
-          class="rounded px-4 py-1.5 text-sm font-medium transition-colors disabled:opacity-50"
-          :class="payType === opt.value
-            ? 'bg-blue-600 text-white'
-            : 'text-gray-600 hover:bg-gray-50'"
-          :disabled="starting || refreshing"
-          @click="switchPayType(opt.value)"
-        >
-          {{ opt.label }}
-        </button>
-      </div>
-
-      <!--
-        支付宝走**电脑网站支付**：后端返回一段自提交表单，写进新页面即跳转支付宝收银台
-        （当面付扫码需单独签约并提交资料审核，见 ADR 0010 补记，故不作默认）。
-        微信仍是出码：两者在模板里各占一支。
-      -->
-      <template v-if="alipayForm">
-        <div class="rounded-md bg-blue-50 px-4 py-6 text-sm text-blue-700">
-          已为你打开支付宝收银台。若新页面没有自动打开，请点击下方按钮。
-        </div>
-        <button
-          class="mt-6 w-full rounded-md bg-blue-600 py-3 font-medium text-white hover:bg-blue-700 disabled:opacity-50"
-          :disabled="confirming"
-          @click="openAlipayForm"
-        >
-          前往支付宝付款
-        </button>
-        <button
-          class="mt-3 w-full rounded-md border border-gray-300 py-3 font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
-          :disabled="confirming"
-          @click="confirmPaid"
-        >
-          {{ confirming ? '确认中...' : '我已完成支付，确认订单' }}
-        </button>
-      </template>
-
-      <template v-else-if="codeUrl">
-        <!-- 过期只是置灰提示，仍留在页面上：万一用户是刚过点就扫的，还能看见自己扫的是哪张码 -->
-        <div :class="payExpired ? 'opacity-30' : ''">
-          <HjcPayQrcode :value="codeUrl" :size="240" :alt="qrAlt" />
-        </div>
-        <!--
-          这里**不写具体时长**：支付时限由后端配置、且随订单剩余窗口变化，
-          页面上写死一个数字（原先写的是 2 小时）迟早与上面那行倒计时自相矛盾。
-        -->
-        <p class="mt-3 text-sm text-gray-500">请在支付时限内用{{ channelLabel }}扫描上方二维码完成支付</p>
-        <p v-if="payExpired" class="mt-2 text-sm text-amber-600">二维码已过期，请重新获取后再扫码</p>
-      </template>
-      <div v-else class="rounded-md bg-gray-50 px-4 py-6 text-sm text-gray-500">
-        {{ starting ? `正在获取${channelLabel}支付` : '暂未获取到支付信息，请点击下方按钮重新获取' }}
-      </div>
-
-      <button
-        v-if="codeUrl && !alipayForm"
-        class="mt-6 w-full rounded-md bg-blue-600 py-3 font-medium text-white hover:bg-blue-700 disabled:opacity-50"
-        :disabled="confirming"
-        @click="confirmPaid"
-      >
-        {{ confirming ? '确认中...' : '我已完成支付，确认订单' }}
-      </button>
-      <button
-        v-if="!alipayForm"
-        class="mt-6 w-full rounded-md py-3 font-medium disabled:opacity-50"
-        :class="codeUrl
-          ? 'border border-gray-300 text-gray-700 hover:bg-gray-50'
-          : 'bg-blue-600 text-white hover:bg-blue-700'"
-        :disabled="refreshing || starting"
-        @click="refreshQr"
-      >
-        {{ (refreshing || starting) ? '获取中...' : (codeUrl ? '重新获取二维码' : '获取支付信息') }}
-      </button>
-
-      <p v-if="error || payError" class="mt-3 text-sm text-red-500">{{ error || payError }}</p>
-      <p v-else-if="querying" class="mt-3 text-sm text-gray-400">正在确认支付状态...</p>
-
-      <div class="mt-6 border-t border-gray-100 pt-4">
-        <NuxtLink to="/tender/orders" class="text-sm text-blue-600 hover:underline">← 返回我的订单</NuxtLink>
-      </div>
-    </div>
+    <!--
+      待支付：付款界面全在面板里（先选支付方式、点「立即支付」才发起；出码后只能显式更换）。
+      本页只负责订单侧的事——金额与到期时刻都来自上面 by-no 取回的那张订单。
+    -->
+    <HjcPayPanel
+      v-else
+      :order-no="orderNo"
+      :amount="amount"
+      :deadline="order?.payDeadline"
+      :project-name="order?.projectName"
+      :redirect="route.fullPath"
+      @paid="goOrders"
+      @timeout="deadlineExpired = true"
+    >
+      <NuxtLink to="/tender/orders" class="text-sm text-blue-600 hover:underline">← 返回我的订单</NuxtLink>
+    </HjcPayPanel>
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  hjcFormatCountdown,
-  hjcIsTimeoutCancelled,
-  hjcOrderStatusKey,
-  hjcPayDeadlineMs,
-  hjcPayRemainMs
-} from '~/utils/orderStatus'
+import { hjcIsPayExpired, hjcIsTimeoutCancelled, hjcOrderStatusKey } from '~/utils/orderStatus'
 
 /**
  * 收银台：买家为一张**已创建的订单**付款的独立页面（CONTEXT.md 的「收银台」）。
  *
- * 与购标流程（`/buy` 的 BuyDocument `step==='pay'`）的分界：购标流程是「先建单、随即付款」，
- * 收银台是事后回到某张待支付订单继续付款。**本轮不重构 BuyDocument**，
- * 两份实现共享的只有 `HjcPayQrcode` 与 `useHjcPayStatus`（重活已经都在那里了）。
+ * 与购标流程（`/buy` 的 BuyDocument 支付步）的分界：购标流程是「先建单、随即付款」，
+ * 收银台是事后回到某张待支付订单继续付款。两份实现共用的**付款界面**已经收进
+ * `HjcPayPanel`（+ `useHjcPayFlow`）；本页只管订单侧的事：取单、终态、超时锁，
+ * 以及渠道侧确认收款后去哪。
  *
  * 本页只服务微信外（ADR 0010）：不因 UA 在微信内就跳 hjc-h5。
- * 支付方式可选**微信扫码**或**支付宝**；微信出二维码、支付宝走电脑网站支付
- * （返回自提交表单，跳转支付宝收银台）。两者共用同一个查单轮询与状态判定。
  */
 const route = useRoute()
 const { isLoggedIn, handleAuthCode } = useHjcAuth()
@@ -192,64 +95,16 @@ const loading = ref(false)
 /** by-no 失败（订单不存在/无权限/网络），与"发起支付失败"分开 */
 const loadError = ref('')
 const order = shallowRef<any | null>(null)
-/** 终态（已完成/已取消/已退款）：终态下**绝不发起支付** */
+/** 终态（已完成/已取消/已退款）：终态下**绝不渲染支付面板** */
 const finalState = shallowRef<{ title: string; cls: string } | null>(null)
+/**
+ * 支付时限已到：进页就过期，或者面板挂着挂着归零（面板的 `timeout` 事件）。
+ * 两种情况都锁死页面——不再出码、不再查单。
+ */
+const deadlineExpired = ref(false)
 
-/** 当前支付方式。默认微信，与接入支付宝之前的行为一致 */
-const payType = ref<'wechat' | 'alipay'>('wechat')
-const payOptions = [
-  { value: 'wechat' as const, label: '微信支付' },
-  { value: 'alipay' as const, label: '支付宝' }
-]
-
-const codeUrl = ref('')
-/** 支付宝电脑网站支付的自提交表单（后端只在该渠道下返回） */
-const alipayForm = ref('')
+/** 金额来自**订单本身**，与"发起支付"解耦：支付一失败页面就会停在 0.00 */
 const amount = ref(0)
-const starting = ref(false)
-const refreshing = ref(false)
-const confirming = ref(false)
-const error = ref('')
-
-/** 提示文案里的渠道名（只影响措辞，不影响判定） */
-const channelLabel = computed(() => (payType.value === 'alipay' ? '支付宝' : '微信'))
-const qrAlt = computed(() => (payType.value === 'alipay' ? '支付宝支付二维码' : '微信支付二维码'))
-
-/**
- * 支付确认一律以**渠道侧**为准（轮询 + 手动按钮都走它）。
- * 绝不调用 `mark-paid`：那个接口不查单，点一下就能把订单置为已支付（见 ADR 0010）。
- */
-const {
-  paid,
-  querying,
-  error: payError,
-  expired: payExpired,
-  start: startPayPolling,
-  query: queryPayStatus
-} = useHjcPayStatus(() => route.fullPath, () => payType.value)
-
-// 渠道侧确认收款后跳订单列表（与 h5 收银台的 redirectTo 列表对齐）
-watch(paid, async (v) => {
-  if (v) await navigateTo('/tender/orders')
-})
-
-function formatMoney(n?: number | string) {
-  return Number(n ?? 0).toFixed(2)
-}
-
-/**
- * 倒计时用的"当前时刻"。
- *
- * 每秒只更新一个 ref（而不是让每个用到它的地方各自 setInterval），
- * 且**秒级**足够了：支付时限是 30 分钟量级，没必要为 1 秒的精度付出多次渲染。
- */
-const now = ref(Date.now())
-let clock: ReturnType<typeof setInterval> | null = null
-
-const remainMs = computed(() => hjcPayRemainMs(order.value, now.value))
-const remainText = computed(() => (remainMs.value == null ? '' : hjcFormatCountdown(remainMs.value)))
-/** 到期时刻已知且已归零 —— 页面锁死，不再出码、不再轮询 */
-const timedOut = computed(() => remainMs.value !== null && remainMs.value <= 0)
 
 /** 「重新下单」的目标：回到该项目详情（不是购标流程，购标流程会再建一张新单） */
 const projectLink = computed(() => {
@@ -275,118 +130,9 @@ function terminalStateOf(o: any) {
   }
 }
 
-/**
- * 渠道错误码 → 可行动的中文提示。
- *
- * `OUT_TRADE_NO_USED` = 同一订单号换了支付类型重复下单。微信内（h5 → 小程序，JSAPI）与
- * PC 端（Native）各发起一次时必现，而"从订单列表回到旧单支付"这条路径正是本轮新开的。
- * 错误码由后端从支付异常的 cause 链上取，前端**不要**去匹配 message 字符串——
- * 那种写法会在错误包装方式一改时静默失效。
- */
-function payErrorMessage(res: any) {
-  if (res?.data?.wechatCode === 'OUT_TRADE_NO_USED') {
-    return '该订单已在微信内发起过支付，请回到微信内的收银台继续完成付款。'
-  }
-  return res?.message || '发起支付失败，请稍后重试'
-}
-
-async function startPay() {
-  // 已过支付时限就不出码：后端也会拒（它按「本单剩余窗口」算，剩余不足一分钟即拒绝），
-  // 前端先拦住只是省一次注定失败的请求，并让页面停在"支付已超时"而不是闪一下错误。
-  if (timedOut.value) return
-  error.value = ''
-  starting.value = true
-  try {
-    const res: any = await $fetch('/api/tender/pay', {
-      method: 'POST',
-      body: { orderNo: orderNo.value, payType: payType.value }
-    })
-    const auth = await handleAuthCode(res, route.fullPath)
-    if (auth.handled) {
-      error.value = auth.message || ''
-      return
-    }
-    if (res?.code === 0) {
-      codeUrl.value = res.data?.codeUrl || ''
-      alipayForm.value = res.data?.alipayForm || ''
-      if (res.data?.amount) amount.value = Number(res.data.amount)
-      if (!codeUrl.value && !alipayForm.value) {
-        error.value = '未获取到支付信息，请稍后重试'
-      } else if (alipayForm.value) {
-        // 网页支付：立刻把表单送去新页面，用户不必再点一次
-        openAlipayForm()
-      }
-    } else {
-      error.value = payErrorMessage(res)
-    }
-    // 无论这次有没有拿到支付码都开始查单：订单可能**已经**在渠道侧付过了
-    //（例如在微信内由小程序付掉、或上一次支付成功但页面被关掉），查单会把它认出来并跳列表。
-    // 到期时刻传后端下发的那个：让轮询的终点与后端判定超时、渠道单失效对齐（ADR 0019）。
-    if (orderNo.value) startPayPolling(orderNo.value, hjcPayDeadlineMs(order.value))
-  } catch (e: any) {
-    error.value = e?.data?.message || e?.message || '发起支付失败，请稍后重试'
-  } finally {
-    starting.value = false
-  }
-}
-
-/**
- * 把支付宝返回的自提交表单写进一个新页面。
- *
- * 用 `document.write` 而不是 `v-html`：表单里带一段自动提交的脚本，
- * 而 `v-html` 插入的脚本标签**不会执行**（HTML 规范如此），表单永远不会自动提交。
- * 写进新窗口则脚本正常执行，且原收银台页面保留在原标签页继续轮询查单。
- *
- * 弹窗被拦截时不报"失败"——按钮复用本函数，用户允许弹窗后再点一次即可。
- *
- * 注意：本注释不要写出脚本标签的字面量——SFC 的 script 块会被它提前闭合。
- */
-function openAlipayForm() {
-  if (!alipayForm.value) return
-  const w = window.open('', '_blank')
-  if (!w) {
-    error.value = '浏览器拦截了新窗口，请允许弹出窗口后点「前往支付宝付款」'
-    return
-  }
-  w.document.open()
-  w.document.write(alipayForm.value)
-  w.document.close()
-  error.value = ''
-}
-
-/** 切换支付方式：清掉上一张码再重新发起，避免两种支付信息同时留在页面上 */
-async function switchPayType(next: 'wechat' | 'alipay') {
-  if (next === payType.value) return
-  payType.value = next
-  codeUrl.value = ''
-  alipayForm.value = ''
-  error.value = ''
-  await startPay()
-}
-
-/** 重新获取二维码：允许对同一订单号重复发起下单，顺带重置计时 */
-async function refreshQr() {
-  await startPay()
-}
-
-/** 手动确认（扫码后的兜底）：**也走查单**，不代替渠道下结论 */
-async function confirmPaid() {
-  error.value = ''
-  confirming.value = true
-  try {
-    const res = await queryPayStatus()
-    if (res.handled) {
-      error.value = res.message || ''
-      return
-    }
-    if (res.settled) {
-      await navigateTo('/tender/orders')
-      return
-    }
-    error.value = res.message || `${channelLabel.value}侧还未收到付款，请完成支付后再试`
-  } finally {
-    confirming.value = false
-  }
+/** 渠道侧确认收款后跳订单列表（与 h5 收银台的 redirectTo 列表对齐） */
+async function goOrders() {
+  await navigateTo('/tender/orders')
 }
 
 loggedIn.value = isLoggedIn()
@@ -417,35 +163,13 @@ onMounted(async () => {
       finalState.value = terminal
       return
     }
-    // 已在这张单上发起过支付宝支付，就默认用支付宝继续——避免用户上次选了支付宝、
-    // 这次进来又被默认拉回微信，撞一次渠道侧的「订单号已使用」
-    if (typeof o?.payMethod === 'string' && o.payMethod.startsWith('ALIPAY')) {
-      payType.value = 'alipay'
-    }
-    loading.value = false
-    // 已过支付时限：锁在"支付已超时"那一屏，不出码、不轮询
-    if (timedOut.value) return
-    // 只有"确实还没付、也没取消"才发起支付
-    await startPay()
+    // 已过支付时限：锁在"支付已超时"那一屏——面板根本不会挂上，也就不会出码、不会查单。
+    // 到期时刻未知时**不算**超时（拿一个假值去锁死收银台更糟）。
+    deadlineExpired.value = hjcIsPayExpired(o)
   } catch (e: any) {
     loadError.value = e?.data?.message || e?.message || '订单加载失败'
   } finally {
     loading.value = false
   }
 })
-
-onMounted(() => {
-  // 秒级 ticking 只服务倒计时显示；真正的"到点锁页面"由 timedOut 这个 computed 判定，
-  // 所以哪怕这一拍晚了几百毫秒，也不会出现"倒计时 00:00 了还能付款"。
-  clock = setInterval(() => {
-    now.value = Date.now()
-  }, 1000)
-})
-
-onUnmounted(() => {
-  if (clock) {
-    clearInterval(clock)
-    clock = null
-  }
-})
 </script>
diff --git a/app/templates/template-07/pages/BuyDocument.vue b/app/templates/template-07/pages/BuyDocument.vue
index 59b3f0d..3d624e2 100644
--- a/app/templates/template-07/pages/BuyDocument.vue
+++ b/app/templates/template-07/pages/BuyDocument.vue
@@ -47,92 +47,35 @@
       </form>
     </div>
 
-    <!-- 支付 -->
-    <div v-else-if="step === 'pay'" class="mx-auto mt-6 max-w-2xl rounded-lg border border-gray-200 p-8 text-center">
-      <h1 class="text-xl font-bold text-gray-900">请使用{{ channelLabel }}扫码支付</h1>
-      <p class="mt-2 text-sm text-gray-500">订单号：{{ orderNo }}</p>
-      <p class="my-4 text-2xl font-bold text-blue-600">¥{{ formatMoney(totalAmount) }}</p>
-
+    <!-- 支付：下单成功后**不再自动发起**，先让买家选支付方式（面板负责） -->
+    <div v-else-if="step === 'pay'">
       <!--
-        支付方式选择。**切换方式即重新发起支付**——同一订单号不能换支付类型重复下单
-        （渠道侧会拒），所以先清掉上一张码，避免两张码同时留在页面上。
+        支付时限已到（进支付步就过期，或面板挂着挂着归零）。
+        **锁死页面**：同一订单号对同一渠道重复下单会撞 OUT_TRADE_NO_USED，且渠道侧那张单
+        已随支付时限一同失效（ADR 0019）。超时 = 这张订单终了，想要就重新下单。
       -->
-      <div class="mb-6 inline-flex rounded-md border border-gray-200 p-1">
+      <div v-if="deadlineExpired" class="mx-auto mt-6 max-w-2xl rounded-lg border border-amber-200 bg-amber-50 p-8 text-center text-amber-800">
+        <p class="text-xl font-bold">支付已超时</p>
+        <p class="mt-2 text-sm opacity-80">该订单因支付超时已取消，如需购买请重新下单。</p>
+        <p class="mt-1 text-sm opacity-80">订单号：{{ orderNo }}</p>
         <button
-          v-for="opt in payOptions"
-          :key="opt.value"
           type="button"
-          class="rounded px-4 py-1.5 text-sm font-medium transition-colors disabled:opacity-50"
-          :class="payType === opt.value
-            ? 'bg-blue-600 text-white'
-            : 'text-gray-600 hover:bg-gray-50'"
-          :disabled="refreshing"
-          @click="switchPayType(opt.value)"
+          class="mt-6 rounded-md bg-blue-600 px-6 py-2 text-white hover:bg-blue-700"
+          @click="retry"
         >
-          {{ opt.label }}
+          重新下单
         </button>
       </div>
 
-      <!--
-        支付宝走**电脑网站支付**：后端返回一段自提交表单，写进新页面即跳转支付宝收银台
-        （当面付扫码需单独签约并提交资料审核，见 ADR 0010 补记，故不作默认）。
-        微信仍是出码：两者在模板里各占一支。
-      -->
-      <template v-if="alipayForm">
-        <div class="rounded-md bg-blue-50 px-4 py-6 text-sm text-blue-700">
-          已为你打开支付宝收银台。若新页面没有自动打开，请点击下方按钮。
-        </div>
-        <button
-          class="mt-6 w-full rounded-md bg-blue-600 py-3 font-medium text-white hover:bg-blue-700 disabled:opacity-50"
-          :disabled="confirming"
-          @click="openAlipayForm"
-        >
-          前往支付宝付款
-        </button>
-        <button
-          class="mt-3 w-full rounded-md border border-gray-300 py-3 font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
-          :disabled="confirming"
-          @click="confirmPaid"
-        >
-          {{ confirming ? '确认中...' : '我已完成支付，确认订单' }}
-        </button>
-      </template>
-
-      <template v-else-if="codeUrl">
-        <!-- 过期只是置灰提示，仍留在页面上：万一用户是刚过点就扫的，还能看见自己扫的是哪张码 -->
-        <div :class="payExpired ? 'opacity-30' : ''">
-          <HjcPayQrcode :value="codeUrl" :size="240" :alt="qrAlt" />
-        </div>
-        <!-- 这里**不写具体时长**：支付时限由后端配置，页面上写死一个数字（原先写的是 2 小时）迟早与事实不符 -->
-        <p class="mt-3 text-sm text-gray-500">请在支付时限内用{{ channelLabel }}扫描上方二维码完成支付</p>
-        <p v-if="payExpired" class="mt-2 text-sm text-amber-600">二维码已过期，请重新获取后再扫码</p>
-      </template>
-      <div v-else class="rounded-md bg-gray-50 px-4 py-6 text-sm text-gray-500">
-        暂未获取到支付信息，请点击下方按钮重新获取
-      </div>
-
-      <button
-        v-if="codeUrl && !alipayForm"
-        class="mt-6 w-full rounded-md bg-blue-600 py-3 text-white font-medium hover:bg-blue-700 disabled:opacity-50"
-        :disabled="confirming"
-        @click="confirmPaid"
-      >
-        {{ confirming ? '确认中...' : '我已完成支付，确认订单' }}
-      </button>
-      <button
-        v-if="!alipayForm"
-        class="mt-6 w-full rounded-md py-3 font-medium disabled:opacity-50"
-        :class="codeUrl
-          ? 'border border-gray-300 text-gray-700 hover:bg-gray-50'
-          : 'bg-blue-600 text-white hover:bg-blue-700'"
-        :disabled="refreshing"
-        @click="refreshQr"
-      >
-        {{ refreshing ? '获取中...' : (codeUrl ? '重新获取二维码' : '获取支付信息') }}
-      </button>
-
-      <p v-if="error || payError" class="mt-3 text-sm text-red-500">{{ error || payError }}</p>
-      <p v-else-if="querying" class="mt-3 text-sm text-gray-400">正在确认支付状态...</p>
+      <HjcPayPanel
+        v-else
+        :order-no="orderNo"
+        :amount="totalAmount"
+        :deadline="payDeadline"
+        :redirect="redirect"
+        @paid="step = 'done'"
+        @timeout="deadlineExpired = true"
+      />
     </div>
 
     <!-- 完成 -->
@@ -149,7 +92,15 @@
 
 <script setup lang="ts">
 import type { Tender } from '~/types/tender'
+import { hjcIsPayExpired } from '~/utils/orderStatus'
 
+/**
+ * 购标流程：先建单、随即付款（与「收银台」的分界见 CONTEXT.md）。
+ *
+ * 本页只管订单侧的事——取项目、建单、完成后去哪；**付款界面在 `HjcPayPanel` 里**，
+ * 与收银台共用同一套「先选支付方式、点『立即支付』才发起」的规则。
+ * 改造前这里是"建单成功后立刻按默认微信发起支付"，等于替买家做了决定（见 issue 01）。
+ */
 const route = useRoute()
 const id = route.query.id as string
 const { isLoggedIn, handleAuthCode } = useHjcAuth()
@@ -158,87 +109,22 @@ const loggedIn = ref(false)
 const tender = shallowRef<Tender | null>(null)
 const notFound = ref(false)
 const submitting = ref(false)
-const refreshing = ref(false)
-const confirming = ref(false)
 const error = ref('')
 const step = ref<'form' | 'pay' | 'done'>('form')
 const orderNo = ref('')
-const codeUrl = ref('')
-/** 支付宝电脑网站支付的自提交表单（后端只在该渠道下返回） */
-const alipayForm = ref('')
 const totalAmount = ref(0)
-
-/** 当前支付方式。默认微信，与接入支付宝之前的行为一致 */
-const payType = ref<'wechat' | 'alipay'>('wechat')
-const payOptions = [
-  { value: 'wechat' as const, label: '微信支付' },
-  { value: 'alipay' as const, label: '支付宝' }
-]
-
-/** 提示文案里的渠道名（只影响措辞，不影响判定） */
-const channelLabel = computed(() => (payType.value === 'alipay' ? '支付宝' : '微信'))
-const qrAlt = computed(() => (payType.value === 'alipay' ? '支付宝支付二维码' : '微信支付二维码'))
+/** 支付时限到期时刻：由**下单响应**下发（后端 `attachPayDeadlines`），面板的倒计时与超时锁都靠它 */
+const payDeadline = ref<string | null>(null)
+/** 支付时限已到：进支付步就过期、或面板挂着挂着归零（面板的 `timeout` 事件） */
+const deadlineExpired = ref(false)
 
 const form = reactive({ contactName: '', contactPhone: '', contactEmail: '', quantity: 1 })
 const redirect = computed(() => `/buy?id=${id}`)
 
-/**
- * 支付确认一律以**渠道侧**为准（轮询 + 手动按钮都走它）。
- * 这里刻意不再调用 `mark-paid`：那个接口不查单，用户点一下就能把订单置为已支付。
- * 状态词表由后端按渠道归一，前端无需知道支付宝的 trade_status（见 ADR 0010）。
- */
-const {
-  paid,
-  querying,
-  error: payError,
-  expired: payExpired,
-  start: startPayPolling,
-  query: queryPayStatus
-} = useHjcPayStatus(() => redirect.value, () => payType.value)
-
-/** 渠道侧确认已付款后，页面自己走到完成态——用户不必再点任何按钮 */
-watch(paid, (v) => {
-  if (v) step.value = 'done'
-})
-
 function formatMoney(n?: number | string) {
   return Number(n ?? 0).toFixed(2)
 }
 
-/**
- * 把支付宝返回的自提交表单写进一个新页面。
- *
- * 用 `document.write` 而不是 `v-html`：表单里带一段自动提交的脚本，
- * 而 `v-html` 插入的脚本标签**不会执行**（HTML 规范如此），表单永远不会自动提交。
- * 写进新窗口则脚本正常执行，且原页面保留在原标签页继续轮询查单。
- *
- * 弹窗被拦截时不报"失败"——按钮复用本函数，用户允许弹窗后再点一次即可。
- *
- * 注意：本注释不要写出脚本标签的字面量——SFC 的 script 块会被它提前闭合。
- */
-function openAlipayForm() {
-  if (!alipayForm.value) return
-  const w = window.open('', '_blank')
-  if (!w) {
-    error.value = '浏览器拦截了新窗口，请允许弹出窗口后点「前往支付宝付款」'
-    return
-  }
-  w.document.open()
-  w.document.write(alipayForm.value)
-  w.document.close()
-  error.value = ''
-}
-
-/** 切换支付方式：清掉上一张码再重新发起，避免两种支付信息同时留在页面上 */
-async function switchPayType(next: 'wechat' | 'alipay') {
-  if (next === payType.value) return
-  payType.value = next
-  codeUrl.value = ''
-  alipayForm.value = ''
-  error.value = ''
-  await refreshQr()
-}
-
 async function submit() {
   error.value = ''
   submitting.value = true
@@ -266,33 +152,11 @@ async function submit() {
     }
     orderNo.value = order.data?.orderNo || ''
     totalAmount.value = order.data?.totalAmount || 0
-    // 发起支付
-    const payRes: any = await $fetch('/api/tender/pay', {
-      method: 'POST',
-      body: { orderNo: orderNo.value, payType: payType.value }
-    })
-    const payAuth = await handleAuthCode(payRes, redirect.value)
-    if (payAuth.handled) {
-      error.value = payAuth.message || ''
-      return
-    }
-    // 订单已创建：即使发起支付失败也停在支付步骤，避免用户重提交产生重复订单
+    payDeadline.value = order.data?.payDeadline ?? null
+    // 订单已创建：即使还没发起支付也停在支付步——重提交会产生第二张订单。
+    // **不在这里发起支付**：先让买家自己选支付方式（面板的"立即支付"才是发起点）。
+    deadlineExpired.value = hjcIsPayExpired({ payDeadline: payDeadline.value })
     step.value = 'pay'
-    if (payRes?.code === 0) {
-      codeUrl.value = payRes.data?.codeUrl || ''
-      alipayForm.value = payRes.data?.alipayForm || ''
-      if (alipayForm.value) {
-        // 网页支付：立刻把表单送去新页面，用户不必再点一次
-        openAlipayForm()
-      } else if (!codeUrl.value) {
-        error.value = '未获取到支付信息，请稍后重试'
-      }
-    } else {
-      error.value = payRes?.message || '发起支付失败，请稍后重试'
-    }
-    // 无论这次有没有拿到支付码都开始查单：订单可能**已经**在渠道侧付过了
-    //（例如上一次支付成功但页面被关掉），查单会把它认出来并直接进完成态。
-    startPayPolling(orderNo.value)
   } catch (e: any) {
     error.value = e?.data?.message || e?.message || '下单失败'
   } finally {
@@ -301,71 +165,18 @@ async function submit() {
 }
 
 /**
- * 手动确认（二维码扫不了时的兜底）：**也走查单**，不代替渠道下结论。
- * 渠道侧没收到钱就明确这么说，而不是像改造前那样把它当成"已支付"。
- */
-async function confirmPaid() {
-  error.value = ''
-  confirming.value = true
-  try {
-    const res = await queryPayStatus()
-    if (res.handled) {
-      // 401 已跳登录页；403 只提示
-      error.value = res.message || ''
-      return
-    }
-    if (res.settled) {
-      step.value = 'done'
-      return
-    }
-    error.value = res.message || `${channelLabel.value}侧还未收到付款，请完成扫码支付后再试`
-  } finally {
-    confirming.value = false
-  }
-}
-
-/**
- * 重新获取支付码 / 切换渠道后重新发起。
+ * 超时后重新下单：回表单步重新提交。
  *
- * 允许对同一 `out_trade_no`（这里就是 hjc 订单号）重复发起下单，
- * 所以"刷新"是重新调 `/api/tender/pay` 拿一张新码——但**不重置支付时限**：
- * 时限从下单时刻起算（见 CONTEXT.md「支付时限」），重新出码不改变整张订单的到期时刻。
- *
- * 把当前 `payType` 一并带上：切换渠道时必须让后端按新渠道下单，
- * 否则会拿着一张微信的码却显示在"支付宝"标签下。
+ * 旧单已随支付时限失效（ADR 0019），同一订单号不能复活；重新提交会生成一张新的订单号。
+ * 表单里已填的联系人信息保留着，买家不必重填。
  */
-async function refreshQr() {
+function retry() {
+  orderNo.value = ''
+  totalAmount.value = 0
+  payDeadline.value = null
+  deadlineExpired.value = false
   error.value = ''
-  refreshing.value = true
-  try {
-    const res: any = await $fetch('/api/tender/pay', {
-      method: 'POST',
-      body: { orderNo: orderNo.value, payType: payType.value }
-    })
-    const auth = await handleAuthCode(res, redirect.value)
-    if (auth.handled) {
-      error.value = auth.message || ''
-      return
-    }
-    if (res?.code !== 0) {
-      error.value = res?.message || '获取支付信息失败，请稍后重试'
-      return
-    }
-    codeUrl.value = res.data?.codeUrl || ''
-    alipayForm.value = res.data?.alipayForm || ''
-    if (res.data?.amount) totalAmount.value = Number(res.data.amount)
-    if (alipayForm.value) {
-      openAlipayForm()
-    } else if (!codeUrl.value) {
-      error.value = '未获取到支付信息，请稍后重试'
-      return
-    }
-    startPayPolling(orderNo.value)
-  } catch (e: any) {
-    error.value = e?.data?.message || e?.message || '获取支付信息失败，请稍后重试'
-  } finally {
-    refreshing.value = false
-  }
+  step.value = 'form'
 }
 
 loggedIn.value = isLoggedIn()