产品购买 & 测试账号-免费领取

2026-10-13 13:32:53 +08:00
parent 160a9c9b97
commit 1fc625ede8
8 changed files with 282 additions and 396 deletions
--- a/src/api/account.ts
+++ b/src/api/account.ts
@@ -1,11 +1,11 @@
 import type { ApiResponse } from "@/lib/api"
 import type { MyAccountItem, MyAccountQueryParams } from "@/lib/models/account"
-import { callPublic } from "./base"
+import { callByUserCookie } from "./base"

 export async function fetchMyAccounts(
  params: MyAccountQueryParams,
 ): Promise<ApiResponse<MyAccountItem[]>> {
-  const res = await callPublic<MyAccountItem[] | unknown>(
+  const res = await callByUserCookie<MyAccountItem[] | unknown>(
    "/user/ApiMyAccounts",
    params,
    "GET",
--- a/src/api/base.ts
+++ b/src/api/base.ts
@@ -6,21 +6,22 @@ import {
 } from "@/lib/api"
 import { clearCookie, clearSession, getUserToken } from "./token"

-type CallMode = "public" | "device" | "user"
+type CallMode = "public" | "device" | "user" | "cookie"

 // ==================== 登录态失效全局处理 ====================
-// user 模式请求未登录或收到 401（token 失效）时：清除本地会话并跳转登录页，
-// 带 redirect 参数便于登录后回跳。与 logout() 及 juipnet 老项目行为保持一致。
+// user/cookie 模式请求未登录、收到 401（token 失效）或 302（后端跳登录页）时：
+// 清除本地会话并跳转登录页，带 redirect 参数便于登录后回跳。
+// 与 logout() 及 juipnet 老项目行为保持一致。
 let redirectingToLogin = false

 function handleUnauthorized() {
  if (redirectingToLogin) return
-  redirectingToLogin = true
  clearSession()
  clearCookie("token")
  clearCookie("userInfo")
  const current = window.location.pathname
  if (current !== "/login") {
+    redirectingToLogin = true
    window.location.href = `/login?redirect=${encodeURIComponent(current)}`
  }
 }
@@ -62,8 +63,20 @@ async function request<R = undefined>(
      headers,
      body: init.body,
      signal: controller.signal,
+      redirect: "manual",
    })

+    // 登录态失效时后端会把受保护接口 302 到登录页（如 /User/WebLogin）。
+    // manual 模式不自动跟随，此处识别重定向并返回 302，
+    // 由 call() 在 user/cookie 模式下统一触发 handleUnauthorized 跳登录页。
+    if (response.type === "opaqueredirect") {
+      return {
+        success: false,
+        status: 302,
+        message: "登录状态已失效，请重新登录",
+      }
+    }
+
    const responseHeaders = captureHeaders(response)
    const contentType = response.headers.get("Content-Type") ?? "text/plain"

@@ -125,7 +138,13 @@ async function request<R = undefined>(
      return { success: true, data: json, headers: responseHeaders }
    }

-    throw new Error(`无法解析响应数据: ${contentType}`)
+    // 其他内容类型（如 text/html 错误页）无法按 API 格式解析，
+    // 保留真实 HTTP 状态码返回，便于上层识别 401/3xx 等登录态问题
+    return {
+      success: false,
+      status: response.status,
+      message: `无法解析响应数据: ${contentType}`,
+    }
  } catch (e) {
    if (controller.signal.aborted) {
      return {
@@ -235,6 +254,18 @@ async function call<R = undefined>(
          }
        }
        auth = `Bearer ${token}`
+      } else if (mode === "cookie") {
+        // cookie 模式：凭证走浏览器 cookie（老 /user/* 接口），
+        // 但登录态判断仍以本地 token 为准，缺失时同样触发跳登录
+        const token = getUserToken()
+        if (!token) {
+          handleUnauthorized()
+          return {
+            success: false,
+            status: 401,
+            message: "未登录或会话已过期",
+          }
+        }
      } else if (mode === "device") {
        if (attempt > 1) {
          deviceToken = null
@@ -262,7 +293,13 @@ async function call<R = undefined>(
        continue
      }

-      if (!resp.success && resp.status === 401 && mode === "user") {
+      // 会话失效的三种表现：本地无 token（前面已处理）、后端 401、
+      // 或后端 302 重定向到登录页（如 /user/* 过期跳 /User/WebLogin）
+      if (
+        !resp.success &&
+        (resp.status === 401 || resp.status === 302) &&
+        (mode === "user" || mode === "cookie")
+      ) {
        handleUnauthorized()
      }
      return resp
@@ -305,4 +342,12 @@ async function callByUser<R = undefined>(
  return call<R>("user", endpoint, data, method)
 }

-export { callByDevice, callByUser, callPublic }
+async function callByUserCookie<R = undefined>(
+  endpoint: string,
+  data?: unknown,
+  method: "GET" | "POST" = "POST",
+): Promise<ApiResponse<R>> {
+  return call<R>("cookie", endpoint, data, method)
+}
+
+export { callByDevice, callByUser, callByUserCookie, callPublic }
--- a/src/api/dashboard.ts
+++ b/src/api/dashboard.ts
@@ -1,11 +1,11 @@
 import type { ApiResponse } from "@/lib/api"
 import type { ApiIndexItem } from "@/lib/models/dashboard"
-import { callPublic } from "./base"
+import { callByUserCookie } from "./base"

 export async function fetchApiIndex(): Promise<
  ApiResponse<ApiIndexItem | null>
 > {
-  const res = await callPublic<ApiIndexItem | ApiIndexItem[]>(
+  const res = await callByUserCookie<ApiIndexItem | ApiIndexItem[]>(
    "/user/ApiIndex",
    undefined,
    "GET",
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -6,7 +6,7 @@ import type {
  UserItem,
  UserQueryParams,
 } from "@/lib/models/user"
-import { callByUser, callPublic } from "./base"
+import { callByUser, callByUserCookie } from "./base"

 // ==================== 用户管理 ====================

@@ -54,11 +54,11 @@ export async function updateUserProfile(
 export async function updateUserInfo(
  data: UpdateUserInfoParams,
 ): Promise<ApiResponse<undefined>> {
-  return await callPublic<undefined>("/user/ApiUpdateInfo", data)
+  return await callByUserCookie<undefined>("/user/ApiUpdateInfo", data)
 }

 export async function updateUserPwd(
  data: UpdateUserPwdParams,
 ): Promise<ApiResponse<PhpUserModel>> {
-  return await callPublic<PhpUserModel>("/user/UpdatePwd", data)
+  return await callByUserCookie<PhpUserModel>("/user/UpdatePwd", data)
 }
--- a/src/home/product/buy.tsx
+++ b/src/home/product/buy.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 import { useLocation, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
-import { createOrder } from "@/api/order"
+import { createOrder, createTestAccount } from "@/api/order"
 import RealNameCheck from "@/components/realNameCheck"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -18,7 +18,6 @@ import Wrap from "@/components/wrap"
 import type { CreateOrderRequest } from "@/lib/models/order"
 import type { Product } from "@/lib/models/product"
 import { clearPayPaid, PAY_PAID_KEY, saveOrderPay } from "@/lib/recharge"
-import { cn } from "@/lib/utils"
 import alipay from "../_assets/alipay.svg"
 import balance from "../_assets/balance.svg"
 import wechat from "../_assets/wechat.svg"
@@ -41,42 +40,6 @@ function randomDigits(length: number): string {
  return result
 }

-// ============ 模式切换 Tab ============
-function ModeTabs({
-  mode,
-  onModeChange,
-}: {
-  mode: "single" | "batch"
-  onModeChange: (mode: "single" | "batch") => void
-}) {
-  return (
-    <div className="flex bg-gray-50 rounded-xl p-1 w-48 max-md:w-full">
-      <button
-        className={cn(
-          "flex-1 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer",
-          mode === "single"
-            ? "bg-white text-blue-600 shadow-sm"
-            : "text-gray-500 hover:text-gray-700",
-        )}
-        onClick={() => onModeChange("single")}
-      >
-        单个注册
-      </button>
-      <button
-        className={cn(
-          "flex-1 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer",
-          mode === "batch"
-            ? "bg-white text-blue-600 shadow-sm"
-            : "text-gray-500 hover:text-gray-700",
-        )}
-        onClick={() => onModeChange("batch")}
-      >
-        批量注册
-      </button>
-    </div>
-  )
-}
-
 // ============ 连接设备数选择器 ============
 function ConnectCountSelector({
  value,
@@ -176,50 +139,15 @@ function CouponSelector() {
  )
 }

-// ============ 批量注册说明 ============
-function BatchInfo() {
-  return (
-    <div className="flex flex-col gap-2 md:flex-row md:items-start md:gap-6">
-      <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28 md:pt-1">
-        说明：
-      </Label>
-      <div className="flex-1 text-sm text-gray-600 leading-relaxed p-2 bg-blue-50/70 rounded-xl border border-blue-100">
-        <p>
-          批量注册的账号会使用【账号前缀】+【开始数】+【个数】顺序进行注册，
-        </p>
-        <p className="mt-1">
-          如：注册账号前缀为【user】开始数为【2】个数为【10】，则注册的账号为：
-          <span className="text-blue-600 font-medium">
-            {" "}
-            user2，user3，user4，....user11
-          </span>
-        </p>
-      </div>
-    </div>
-  )
-}
-
 // ============ 主页面 ============
 export default function BuyPage() {
  const location = useLocation()
  const navigate = useNavigate()
  const product = location.state?.product as Product | undefined

-  // 模式
-  const [mode, setMode] = useState<"single" | "batch">("single")
-
-  // 单个注册
  const [account, setAccount] = useState("")
  const [pwd, setPwd] = useState("")
  const [connectCount, setConnectCount] = useState(1)
-
-  // 批量注册
-  const [batchAccount, setBatchAccount] = useState("")
-  const [batchPwd, setBatchPwd] = useState("")
-  const [batchStart, setBatchStart] = useState(1)
-  const [batchCount, setBatchCount] = useState(1)
-  const [batchConnectCount, setBatchConnectCount] = useState(1)
-
  const [payType, setPayType] = useState("100")
  const [submitting, setSubmitting] = useState(false)

@@ -240,12 +168,8 @@ export default function BuyPage() {
      navigate("/product", { replace: true })
      return
    }
-    const acct = randomChars(2) + randomDigits(4)
-    const pw = randomDigits(3)
-    setAccount(acct)
-    setPwd(pw)
-    setBatchAccount(randomChars(3))
-    setBatchPwd(pw)
+    setAccount(randomChars(2) + randomDigits(4))
+    setPwd(randomDigits(3))
  }, [navigate, product])

  if (!product) return null
@@ -271,69 +195,63 @@ export default function BuyPage() {
    return total
  }

-  const singleTotal = clampMinPrice(
+  const total = clampMinPrice(
    product.price * displayConnectCount,
    displayConnectCount,
  )
-  const batchTotal = clampMinPrice(
-    product.price * batchConnectCount * batchCount,
-    batchConnectCount * batchCount,
-  )
-  const total = mode === "single" ? singleTotal : batchTotal

-  // 批量预览
-  const batchPreview = (() => {
-    if (!batchAccount) return ""
-    const end = batchStart + batchCount - 1
-    if (batchCount <= 4) {
-      const items: string[] = []
-      for (let i = batchStart; i <= end; i++) {
-        items.push(`${batchAccount}${i}`)
-      }
-      return items.join(", ")
-    }
-    return `${batchAccount}${batchStart}, ${batchAccount}${batchStart + 1}, ${batchAccount}${batchStart + 2}...${batchAccount}${end}`
-  })()
-
-  const handlePay = async () => {
-    if (mode === "single") {
-      if (!account.trim() || !pwd.trim()) {
-        toast.error("账号和密码不能为空")
-        return
-      }
-    } else {
-      if (!batchAccount.trim() || !batchPwd.trim()) {
-        toast.error("账号前缀和密码不能为空")
-        return
-      }
-      if (batchCount > 500) {
-        toast.error("一次最多注册500个")
-        return
-      }
+  // 测试套餐：免费领取
+  const handleClaim = async () => {
+    if (!account.trim() || !pwd.trim()) {
+      toast.error("账号和密码不能为空")
+      return
    }

    setSubmitting(true)
    try {
+      const result = await createTestAccount({
+        ProductId: product.productId,
+        PackageId: packageId,
+        Account: account.trim(),
+        Pwd: pwd.trim(),
+      })
+
+      if (result.success) {
+        toast.success("领取成功")
+        navigate("/admin/channels")
+      } else {
+        toast.error(result.message || "领取失败")
+      }
+    } catch {
+      toast.error("网络错误，请重试")
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handlePay = async () => {
+    if (!account.trim() || !pwd.trim()) {
+      toast.error("账号和密码不能为空")
+      return
+    }
+
+    setSubmitting(true)
+    try {
+      // 支付类型/通道映射：1余额 100支付宝 70微信；30微信 50支付宝 70余额
      const oPayType = Number(payType)
-      const useBalance = oPayType === 1 ? 1 : 0
-      const payChannel = oPayType === 70 ? 30 : 50
+      const useBalance = oPayType === 1
+      const payChannel = oPayType === 1 ? 70 : oPayType === 70 ? 30 : 50

      const params: CreateOrderRequest = {
+        Account: account.trim(),
        PackageId: packageId,
-        OrderType: mode === "single" ? 1 : 2,
-        Account: mode === "single" ? account.trim() : batchAccount.trim(),
-        Pwd: mode === "single" ? pwd.trim() : batchPwd.trim(),
-        ConnectCount:
-          mode === "single" ? displayConnectCount : batchConnectCount,
+        Pwd: pwd.trim(),
+        ConnectCount: displayConnectCount,
+        CouponAmount: 0,
        CouponId: 0,
-        UseAccountAmount: useBalance,
        OPayType: oPayType,
        PayChannel: payChannel,
-        Price: product.price,
-        ...(mode === "batch" && {
-          MinPostfix: batchStart,
-          MaxPostfix: batchCount,
-        }),
+        UseAccountAmount: useBalance,
      }

      const result = await createOrder(params)
@@ -343,7 +261,6 @@ export default function BuyPage() {
        return
      }

-      // 参考 juipnet Product/buy.cshtml：
      // Data == "00" 为余额支付直接成功；否则需要微信/支付宝支付
      const data = result.data
      if (typeof data === "string") {
@@ -381,9 +298,6 @@ export default function BuyPage() {

  const handleBack = () => navigate(-1)

-  // 天卡首单(0.1元)不显示批量注册；天卡>0.1元时显示（juipnet：应付款!=0.1时显示批量tab）
-  const showTabs = !isTest && !isFirstOrderDayCard
-
  return (
    <Wrap className="bg-white min-h-screen flex items-start justify-center pt-24">
      <RealNameCheck />
@@ -392,249 +306,162 @@ export default function BuyPage() {
        <div className="text-center mb-6 space-y-2">
          <h4 className="text-2xl font-bold">
            <span className="text-gray-800">{product.title}</span>
-            <span className="text-orange-500 ml-2">¥{total.toFixed(2)}</span>
+            <span className="text-orange-500 ml-2">
+              {isTest ? "免费领取" : `¥${total.toFixed(2)}`}
+            </span>
          </h4>
-          <p className="text-sm text-amber-600">
-            请务必选好所需物品，换货会产生费用
-          </p>
-          {isDayCard && (
-            <p className="text-sm text-amber-600">天卡不支持退款，请谨慎购买</p>
+          {isTest ? (
+            <p className="text-sm text-amber-600">
+              测试套餐免费领取，领取成功后可在 IP账号管理 中查看
+            </p>
+          ) : (
+            <>
+              <p className="text-sm text-amber-600">
+                请务必选好所需物品，换货会产生费用
+              </p>
+              {isDayCard && (
+                <p className="text-sm text-amber-600">
+                  天卡不支持退款，请谨慎购买
+                </p>
+              )}
+            </>
          )}
        </div>

-        {/* Tab 切换 */}
-        {showTabs && (
-          <div className="flex justify-center mb-3">
-            <ModeTabs mode={mode} onModeChange={setMode} />
-          </div>
-        )}
-
        <div className="space-y-5 mb-20">
-          {mode === "single" ? (
-            // ====== 单个注册 ======
-            <>
-              {/* IP产品账号 */}
-              <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
-                <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
-                  IP产品账号：
-                </Label>
-                <Input
-                  value={account}
-                  onChange={e => setAccount(e.target.value)}
-                  placeholder="4-10位字母或数字"
-                  className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1"
-                />
-                <span className="text-xs text-gray-400">
-                  4至10位字母或数字或组合
-                </span>
-              </div>
-
-              {/* IP产品密码 */}
-              <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
-                <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
-                  IP产品密码：
-                </Label>
-                <Input
-                  value={pwd}
-                  onChange={e => setPwd(e.target.value)}
-                  placeholder="1-10位字母或数字"
-                  className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1"
-                />
-                <span className="text-xs text-gray-400">
-                  1至10位字母或数字或组合
-                </span>
-              </div>
-
-              {!isTest && (
-                <ConnectCountSelector
-                  value={displayConnectCount}
-                  onChange={setConnectCount}
-                  label="连接设备数"
-                  hint="一个账号可同时在线设备数"
-                  disabled={isFirstOrderDayCard}
-                />
-              )}
-            </>
-          ) : (
-            // ====== 批量注册 ======
-            <>
-              {/* 批量说明 */}
-              <BatchInfo />
-
-              {/* IP账号前缀 */}
-              <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
-                <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
-                  IP账号前缀：
-                </Label>
-                <Input
-                  value={batchAccount}
-                  onChange={e => setBatchAccount(e.target.value)}
-                  placeholder="3-8位字母或数字"
-                  className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1"
-                />
-                <span className="text-xs text-gray-400">
-                  3至8位字母或数字或组合
-                </span>
-              </div>
-
-              {/* 开始号 */}
-              <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
-                <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
-                  开始号：
-                </Label>
-                <Input
-                  type="number"
-                  value={batchStart}
-                  onChange={e =>
-                    setBatchStart(Number.parseInt(e.target.value, 10) || 1)
-                  }
-                  className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1 md:max-w-32"
-                />
-                <span className="text-xs text-gray-400">
-                  本批次账号的起始账号
-                </span>
-              </div>
-
-              {/* 注册个数 */}
-              <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
-                <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
-                  注册个数：
-                </Label>
-                <Input
-                  type="number"
-                  value={batchCount}
-                  onChange={e =>
-                    setBatchCount(
-                      Math.min(500, Number.parseInt(e.target.value, 10) || 1),
-                    )
-                  }
-                  className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1 md:max-w-32"
-                />
-              </div>
-
-              {/* 账号预览 */}
-              {batchPreview && (
-                <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
-                  <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
-                    即将生成的账号：
-                  </Label>
-                  <span className="text-sm text-gray-700 font-medium">
-                    {batchPreview}
-                  </span>
-                </div>
-              )}
-
-              {/* IP产品密码 */}
-              <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
-                <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
-                  IP产品密码：
-                </Label>
-                <Input
-                  value={batchPwd}
-                  onChange={e => setBatchPwd(e.target.value)}
-                  placeholder="1-10位字母或数字"
-                  className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1"
-                />
-                <span className="text-xs text-gray-400">
-                  1至10位字母或数字或组合
-                </span>
-              </div>
-
-              {/* 单账号连接设备数 */}
-              <ConnectCountSelector
-                value={batchConnectCount}
-                onChange={setBatchConnectCount}
-                label="单账号连接设备数"
-                hint="每个账号可同时在线设备的数量"
-              />
-            </>
-          )}
-
-          {/* 优惠券 */}
-          {!isTest && <CouponSelector />}
-
-          {/* 余额 */}
+          {/* IP产品账号 */}
          <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
            <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
-              余额：
+              IP产品账号：
            </Label>
-            <div className="flex items-center gap-2 w-full md:w-auto md:flex-1">
-              <span className="text-sm text-gray-600">
-                当前账户余额
-                <span className="font-bold text-orange-500 ml-1">¥10.00</span>
-              </span>
-              <Button
-                variant="link"
-                className="text-sm text-blue-500 p-0 h-auto font-medium"
-                onClick={() => navigate("/admin")}
-              >
-                去充值
-              </Button>
-            </div>
+            <Input
+              value={account}
+              onChange={e => setAccount(e.target.value)}
+              placeholder="4-10位字母或数字"
+              className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1"
+            />
+            <span className="text-xs text-gray-400">
+              4至10位字母或数字或组合
+            </span>
          </div>

-          {/* 支付方式 */}
-          <div className="flex flex-col gap-3 md:flex-row md:items-center md:gap-6">
+          {/* IP产品密码 */}
+          <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
            <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
-              支付方式：
+              IP产品密码：
            </Label>
-            <RadioGroup
-              value={payType}
-              onValueChange={setPayType}
-              className="flex flex-wrap gap-x-8 gap-y-3 md:gap-8"
-            >
-              <div className="flex items-center gap-2">
-                <RadioGroupItem value="100" id="alipay" />
-                <Label
-                  htmlFor="alipay"
-                  className="cursor-pointer text-sm text-gray-700 flex items-center gap-1.5"
-                >
-                  <img src={alipay} alt="支付宝" className="w-5 h-5" />
-                  支付宝
-                </Label>
-              </div>
-              <div className="flex items-center gap-2">
-                <RadioGroupItem value="70" id="wechat" />
-                <Label
-                  htmlFor="wechat"
-                  className="cursor-pointer text-sm text-gray-700 flex items-center gap-1.5"
-                >
-                  <img src={wechat} alt="微信" className="w-5 h-5" />
-                  微信
-                </Label>
-              </div>
-              <div className="flex items-center gap-2">
-                <RadioGroupItem value="1" id="balance" />
-                <Label
-                  htmlFor="balance"
-                  className="cursor-pointer text-sm text-gray-700 flex items-center gap-1.5"
-                >
-                  <img src={balance} alt="余额" className="w-5 h-5" />
-                  余额
-                </Label>
-              </div>
-            </RadioGroup>
+            <Input
+              value={pwd}
+              onChange={e => setPwd(e.target.value)}
+              placeholder="1-10位字母或数字"
+              className="h-10 rounded-xl border-gray-200 w-full md:w-auto md:flex-1"
+            />
+            <span className="text-xs text-gray-400">
+              1至10位字母或数字或组合
+            </span>
          </div>

-          {/* 总金额 / 应付款 */}
-          <div className="space-y-2">
-            <div className="flex items-center justify-between md:justify-start md:gap-6">
-              <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
-                总金额：
-              </Label>
-              <span className="font-medium text-gray-800">
-                ¥{total.toFixed(2)}
-              </span>
-            </div>
-            <div className="flex items-center justify-between md:justify-start md:gap-6">
-              <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
-                应付款：
-              </Label>
-              <span className="text-xl font-bold text-orange-500">
-                ¥{total.toFixed(2)}
-              </span>
-            </div>
-          </div>
+          {!isTest && (
+            <ConnectCountSelector
+              value={displayConnectCount}
+              onChange={setConnectCount}
+              label="连接设备数"
+              hint="一个账号可同时在线设备数"
+              disabled={isFirstOrderDayCard}
+            />
+          )}
+
+          {!isTest && (
+            <>
+              {/* 优惠券 */}
+              <CouponSelector />
+
+              {/* 余额 */}
+              <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
+                <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
+                  余额：
+                </Label>
+                <div className="flex items-center gap-2 w-full md:w-auto md:flex-1">
+                  <span className="text-sm text-gray-600">
+                    当前账户余额
+                    <span className="font-bold text-orange-500 ml-1">
+                      ¥10.00
+                    </span>
+                  </span>
+                  <Button
+                    variant="link"
+                    className="text-sm text-blue-500 p-0 h-auto font-medium"
+                    onClick={() => navigate("/admin")}
+                  >
+                    去充值
+                  </Button>
+                </div>
+              </div>
+
+              {/* 支付方式 */}
+              <div className="flex flex-col gap-3 md:flex-row md:items-center md:gap-6">
+                <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
+                  支付方式：
+                </Label>
+                <RadioGroup
+                  value={payType}
+                  onValueChange={setPayType}
+                  className="flex flex-wrap gap-x-8 gap-y-3 md:gap-8"
+                >
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="100" id="alipay" />
+                    <Label
+                      htmlFor="alipay"
+                      className="cursor-pointer text-sm text-gray-700 flex items-center gap-1.5"
+                    >
+                      <img src={alipay} alt="支付宝" className="w-5 h-5" />
+                      支付宝
+                    </Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="70" id="wechat" />
+                    <Label
+                      htmlFor="wechat"
+                      className="cursor-pointer text-sm text-gray-700 flex items-center gap-1.5"
+                    >
+                      <img src={wechat} alt="微信" className="w-5 h-5" />
+                      微信
+                    </Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="1" id="balance" />
+                    <Label
+                      htmlFor="balance"
+                      className="cursor-pointer text-sm text-gray-700 flex items-center gap-1.5"
+                    >
+                      <img src={balance} alt="余额" className="w-5 h-5" />
+                      余额
+                    </Label>
+                  </div>
+                </RadioGroup>
+              </div>
+
+              {/* 总金额 / 应付款 */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between md:justify-start md:gap-6">
+                  <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
+                    总金额：
+                  </Label>
+                  <span className="font-medium text-gray-800">
+                    ¥{total.toFixed(2)}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between md:justify-start md:gap-6">
+                  <Label className="text-sm font-medium text-gray-700 md:whitespace-nowrap md:w-28">
+                    应付款：
+                  </Label>
+                  <span className="text-xl font-bold text-orange-500">
+                    ¥{total.toFixed(2)}
+                  </span>
+                </div>
+              </div>
+            </>
+          )}

          <div className="flex gap-4">
            <Button
@@ -644,13 +471,23 @@ export default function BuyPage() {
            >
              上一步
            </Button>
-            <Button
-              className="flex-1 h-12 rounded-xl text-base bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90 transition-all"
-              onClick={handlePay}
-              disabled={submitting}
-            >
-              {submitting ? "提交中..." : "确认支付"}
-            </Button>
+            {isTest ? (
+              <Button
+                className="flex-1 h-12 rounded-xl text-base bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90 transition-all"
+                onClick={handleClaim}
+                disabled={submitting}
+              >
+                {submitting ? "领取中..." : "免费领取"}
+              </Button>
+            ) : (
+              <Button
+                className="flex-1 h-12 rounded-xl text-base bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90 transition-all"
+                onClick={handlePay}
+                disabled={submitting}
+              >
+                {submitting ? "提交中..." : "确认支付"}
+              </Button>
+            )}
          </div>
        </div>
      </div>
--- a/src/home/product/buyStatic.tsx
+++ b/src/home/product/buyStatic.tsx
@@ -324,16 +324,15 @@ export default function BuyStaticPage() {
    try {
      const oPayType = Number(payType)
      const params: CreateOrderRequest = {
-        PackageId: packageId,
-        OrderType: 1,
        Account: account.trim(),
+        PackageId: packageId,
        Pwd: pwd.trim(),
        ConnectCount: 1,
+        CouponAmount: 0,
        CouponId: 0,
-        UseAccountAmount: oPayType === 1 ? 1 : 0,
+        UseAccountAmount: oPayType === 1,
        OPayType: oPayType,
-        PayChannel: oPayType === 70 ? 30 : 50,
-        Price: Number(getPrice()),
+        PayChannel: oPayType === 1 ? 70 : oPayType === 70 ? 30 : 50,
      }

      const result = await createOrder(params)
@@ -353,7 +352,7 @@ export default function BuyStaticPage() {
      saveOrderPay({
        orderNo: data.OrderInfo.OrderNo,
        amount: Number(data.OrderInfo.OtherPayAmount) || Number(getPrice()),
-        payChannel: oPayType === 70 ? 30 : 50,
+        payChannel: oPayType === 1 ? 70 : oPayType === 70 ? 30 : 50,
        payData: data.PayData,
      })
      const win = window.open(
--- a/src/home/product/productGrid.tsx
+++ b/src/home/product/productGrid.tsx
@@ -88,7 +88,7 @@ export default function ProductGrid({ products }: ProductGridProps) {
              className="w-full text-blue-500 border-blue-400 hover:bg-blue-50"
              onClick={() => handleBuy(product)}
            >
-              立即购买
+              {product.isTest ? "免费领取" : "立即购买"}
            </Button>
          </div>
        </div>
--- a/src/lib/models/order.ts
+++ b/src/lib/models/order.ts
@@ -39,19 +39,24 @@ export type OrderItem = {
  DeleteTag: number
 }

+// 产品购买（不含水滴）
 export type CreateOrderRequest = {
-  PackageId: number
-  OrderType: number
  Account: string
+  PackageId: number
  Pwd: string
  ConnectCount: number
-  MinPostfix?: number
-  MaxPostfix?: number
-  CouponId?: number
-  UseAccountAmount?: number
+  // 优惠券减免金额
+  CouponAmount: number
+  // 优惠券ID
+  CouponId: number
+  // 支付类型：1余额 100支付宝 70微信
  OPayType: number
-  PayChannel?: number
-  Price?: number
+  // 支付通道：30微信 50支付宝 70余额
+  PayChannel: number
+  // 是否使用余额
+  UseAccountAmount: boolean
+  // 代理下用户会员号（可选）
+  phone?: string
 }

 export type CreateTestAccountRequest = {