From db25bccabadcc0cafd0ec88da8b391fdd23e924b Mon Sep 17 00:00:00 2001
From: wangjia <809946525@qq.com>
Date: Sat, 11 Jul 2026 07:35:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(website):=20/buy=20=E5=8A=A0=E4=BB=98?=
 =?UTF-8?q?=E6=AC=BE=E7=B1=BB=E5=9E=8B=E9=80=89=E6=8B=A9=E5=99=A8=EF=BC=88?=
 =?UTF-8?q?=E6=B5=8B=20redirect/qr/crypto=5Faddress=20=E4=B8=89=E6=80=81?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

catalog 步骤新增付款类型分段控件（复用 .price-toggle 样式），选中值写入
下单 body 的 metadata.render（字符串），驱动 pay 侧 fake 渠道渲染分支。
method 仍固定 fake，未新增渠道名。
---
 web/website/src/components/BuyFlow.jsx | 25 ++++++++++++++++++++++++-
 web/website/src/styles/buy.css         |  4 ++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/web/website/src/components/BuyFlow.jsx b/web/website/src/components/BuyFlow.jsx
index cb8f66e..df37c0a 100644
--- a/web/website/src/components/BuyFlow.jsx
+++ b/web/website/src/components/BuyFlow.jsx
@@ -81,6 +81,7 @@ export default function BuyFlow() {
   const [catalogError, setCatalogError] = useState('');
 
   // order
+  const [renderType, setRenderType] = useState('crypto_address'); // 付款类型选择器：驱动 fake 渠道渲染形态（metadata.render）
   const [orderLoading, setOrderLoading] = useState('');
   const [orderError, setOrderError] = useState('');
   const [order, setOrder] = useState(null); // { order_no, session }
@@ -155,7 +156,9 @@ export default function BuyFlow() {
         body: JSON.stringify({
           sku,
           method: 'fake',
-          metadata: { is_mobile: false },
+          // 服务端 metadata 是 map[string]string,值必须是字符串(布尔会 400)；
+          // render 驱动 pay fake 渠道 Create 出的渲染形态(redirect/qr/crypto_address)。
+          metadata: { is_mobile: 'false', render: renderType },
         }),
       });
       setOrder(data);
@@ -285,6 +288,26 @@ export default function BuyFlow() {
             <div class="buy-hint">catalog 为空。</div>
           )}
 
+          <div class="buy-hint" style={{ margin: '0 0 8px' }}>付款类型（联调 fake 渠道三种渲染形态）：</div>
+          <div class="price-toggle" role="radiogroup" aria-label="付款类型">
+            {[
+              { v: 'crypto_address', label: 'USDT 地址' },
+              { v: 'redirect', label: '网页跳转' },
+              { v: 'qr', label: '扫码支付' },
+            ].map((opt) => (
+              <button
+                key={opt.v}
+                type="button"
+                role="radio"
+                aria-checked={renderType === opt.v}
+                class={renderType === opt.v ? 'on' : ''}
+                onClick={() => setRenderType(opt.v)}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+
           <div class="buy-grid">
             {items.map((it) => (
               <div class="plan buy-plan" key={it.sku}>
diff --git a/web/website/src/styles/buy.css b/web/website/src/styles/buy.css
index 811632f..ab90545 100644
--- a/web/website/src/styles/buy.css
+++ b/web/website/src/styles/buy.css
@@ -34,6 +34,10 @@
 .buy-hint { font-size: 13.5px; color: var(--fg3); line-height: 1.6; margin: 0 0 16px; }
 .buy-hint code, .buy-h code { font-family: var(--font-mono); background: var(--bg-subtle); border-radius: var(--radius-sm); padding: 1px 6px; }
 
+/* 复用 website.css 的 .price-toggle 分段控件样式做付款类型选择器；这里只覆写外边距，
+   让它贴着上方 hint 文案、不居中（buy-card 是左对齐块级上下文，非 price 区块的居中容器）。 */
+.buy-block .price-toggle { margin: 0 0 20px; }
+
 .buy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 4px; }
 .buy-plan { padding: 22px 18px; }
 .buy-plan .price { font-size: 26px; margin: 8px 0 4px; }