's'

app/vip/components/landing/LandingCTA.tsx

@@ -8,13 +8,23 @@ type LandingCTAProps = {
   onJoin: () => void;
   onLogin: () => void;
   payTestMode?: boolean;
+  wechatAvatar?: string | null;
+  wechatNick?: string | null;
 };
 
 /** 设为 true 可重新展示「适合你 / 请止步」区块（下方 JSX 与 vip.module.css 内样式均保留） */
 const SHOW_CTA_AUDIENCE_BOUNDARY = false;
 
-export function LandingCTA({ onJoin, onLogin, payTestMode }: LandingCTAProps) {
+export function LandingCTA({
+  onJoin,
+  onLogin,
+  payTestMode,
+  wechatAvatar,
+  wechatNick,
+}: LandingCTAProps) {
   const [restoreDate] = useState<string>(() => formatRestoreDateShort());
+  const hasAvatar = !!(wechatAvatar || "").trim();
+  const badgeName = (wechatNick || "微信用户").trim();
 
   return (
     <section className={`${styles.section} ${styles.ctaSection}`} aria-labelledby="cta-heading">
@@ -75,6 +85,62 @@ export function LandingCTA({ onJoin, onLogin, payTestMode }: LandingCTAProps) {
               style={payTestMode ? { background: "linear-gradient(135deg,#16a34a,#22c55e)" } : undefined}
             >
               🔒 立即加入
+              {hasAvatar ? (
+                <span
+                  title={`${badgeName}（未开通）`}
+                  aria-label={`${badgeName}（未开通）`}
+                  style={{
+                    position: "relative",
+                    display: "inline-flex",
+                    width: 24,
+                    height: 24,
+                    marginLeft: 10,
+                    verticalAlign: "middle",
+                  }}
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={(wechatAvatar || "").trim()}
+                    alt={badgeName}
+                    style={{
+                      width: 24,
+                      height: 24,
+                      borderRadius: "9999px",
+                      objectFit: "cover",
+                      border: "1px solid rgba(255,255,255,.72)",
+                      boxShadow:
+                        "0 0 0 1px rgba(15,23,42,.12), 0 2px 6px rgba(2,6,23,.18)",
+                    }}
+                  />
+                  <span
+                    aria-hidden
+                    style={{
+                      position: "absolute",
+                      right: -6,
+                      bottom: -5,
+                      minWidth: 20,
+                      height: 12,
+                      padding: "0 4px",
+                      borderRadius: 9999,
+                      background:
+                        "linear-gradient(180deg, #fde68a 0%, #f59e0b 58%, #d97706 100%)",
+                      border: "1px solid rgba(251,191,36,.95)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: "#7c2d12",
+                      fontSize: 7,
+                      lineHeight: "12px",
+                      fontWeight: 800,
+                      letterSpacing: ".25px",
+                      boxShadow:
+                        "0 2px 7px rgba(245,158,11,.45), inset 0 1px 0 rgba(255,255,255,.55)",
+                    }}
+                  >
+                    VIP
+                  </span>
+                </span>
+              ) : null}
             </button>
             <button type="button" onClick={onLogin} className={styles.ctaBtnSecondary}>
               已有账号登录