's'

app/vip/components/landing/LandingCTA.tsx

@@ -24,7 +24,7 @@ export function LandingCTA({ onJoin, onLogin }: LandingCTAProps) {
         <div className={styles.ctaGlow} aria-hidden />
         <div className={styles.ctaCard}>
           <h2 id="cta-heading" className={styles.ctaPromoLine}>
-            <span className={styles.ctaBadgeInline}>
+            <span className={styles.ctaPromoClickable} aria-disabled="true">
               <span className={styles.ctaBadgePulse} aria-hidden />
               限时特惠
             </span>

app/vip/components/landing/PromoProofModal.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { type ChangeEvent, useRef, useState } from "react";
+import styles from "../vip.module.css";
+
+type PromoProofModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+type RecognizeResult = {
+  ok: boolean;
+  nickname?: string;
+  avatar_image_base64?: string;
+  avatar_mime?: string;
+  confidence?: {
+    nickname?: number;
+    avatar?: number;
+    overall?: number;
+  };
+  message?: string;
+  error?: string;
+};
+
+export function PromoProofModal({ open, onClose }: PromoProofModalProps) {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [confirmed, setConfirmed] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [result, setResult] = useState<RecognizeResult | null>(null);
+  const [error, setError] = useState<string>("");
+
+  if (!open) return null;
+
+  const onPickFile = () => {
+    fileInputRef.current?.click();
+  };
+
+  const onFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    setError("");
+    setResult(null);
+    setUploading(true);
+    try {
+      const form = new FormData();
+      form.append("image", file);
+      const res = await fetch("/api/promo/recognize-discount", {
+        method: "POST",
+        body: form,
+      });
+      const data = (await res.json().catch(() => ({}))) as RecognizeResult;
+      if (!res.ok || !data?.ok) {
+        setError(data?.error || data?.message || "识别失败，请换一张清晰截图再试");
+      } else {
+        setResult(data);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "上传失败，请稍后重试");
+    } finally {
+      setUploading(false);
+      event.target.value = "";
+    }
+  };
+
+  const avatarSrc =
+    result?.avatar_image_base64 && result?.avatar_mime
+      ? `data:${result.avatar_mime};base64,${result.avatar_image_base64}`
+      : null;
+
+  return (
+    <div className={styles.communityModalBackdrop} role="dialog" aria-modal="true" aria-labelledby="promo-proof-title">
+      <div className={styles.promoModalPanel}>
+        <button type="button" onClick={onClose} className={styles.communityModalClose} aria-label="关闭">
+          ×
+        </button>
+        <div className={styles.promoModalTop}>
+          <div className={styles.promoModalTag}>限时优惠任务</div>
+          <h3 id="promo-proof-title" className={styles.promoModalTitle}>推荐任意公众号文章，立减 50 元</h3>
+          <p className={styles.promoModalDesc}>
+            在手机里打开任意一篇公众号文章，点击文末推荐（心形 icon），然后上传截图。系统将识别
+            <strong> 头像 + 昵称 + 心形推荐痕迹 </strong>
+            作为优惠凭证。
+          </p>
+          <p className={styles.promoModalHint}>示例参考：页面左下角「异地世界」上方那一行（头像 / Eric / 爱心）。</p>
+        </div>
+
+        {!confirmed ? (
+          <div className={styles.promoModalActions}>
+            <button type="button" className={`${styles.btnPrimary} ${styles.promoPrimaryBtn}`} onClick={() => setConfirmed(true)}>
+              我已理解，去上传截图
+            </button>
+          </div>
+        ) : (
+          <div className={styles.promoUploadArea}>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/png,image/jpeg,image/webp"
+              className={styles.promoFileInput}
+              onChange={onFileChange}
+            />
+            <button type="button" className={styles.promoUploadBtn} onClick={onPickFile} disabled={uploading}>
+              {uploading ? "识别中..." : "选择手机截图并上传"}
+            </button>
+            <p className={styles.promoUploadTip}>支持 jpg/png/webp，建议宽度大于 720px 且文字清晰</p>
+
+            {error ? <p className={styles.promoError}>{error}</p> : null}
+
+            {result?.ok ? (
+              <div className={styles.promoResultCard}>
+                <p className={styles.promoResultTitle}>识别结果</p>
+                <div className={styles.promoResultRow}>
+                  <div className={styles.promoAvatarWrap}>
+                    {avatarSrc ? (
+                      <img src={avatarSrc} alt="识别头像" className={styles.promoAvatarImg} />
+                    ) : (
+                      <div className={styles.promoAvatarEmpty}>无头像</div>
+                    )}
+                  </div>
+                  <div className={styles.promoResultMeta}>
+                    <p className={styles.promoNicknameLabel}>昵称</p>
+                    <p className={styles.promoNicknameValue}>{result.nickname || "未识别"}</p>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+