From 153246b0db57d266a5e4e6c080245b76422ded56 Mon Sep 17 00:00:00 2001
From: Mack <103027852+mackt@users.noreply.github.com>
Date: Thu, 10 Oct 2024 15:02:15 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E8=A2=AB=E9=82=80=E8=AF=B7=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/invite/page.tsx | 51 +++++++++++++++++++++++++++++++++++------
 1 file changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/app/invite/page.tsx b/src/app/invite/page.tsx
index bae5459..ded6e3f 100644
--- a/src/app/invite/page.tsx
+++ b/src/app/invite/page.tsx
@@ -1,31 +1,68 @@
+/**
+ * 邀请 分享页
+ */
 'use client';
-import { useEffect } from 'react';
+
+import { useEffect, useState, useCallback } from 'react';
+
+import Image from 'next/image';
 
 import DownloadButton from '@/components/DownloadButton';
 
+async function fetchInviteInfo(code: string) {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_HOST}/user/my/userInfo/invite?inviteCode=${code}`);
+  return res.json();
+}
+
 export default function Invite() {
+  const [inviteCode, setInviteCode] = useState<string | null>(null);
+  const [userInfo, setUserInfo] = useState<{ nickName: string; avatar: string; inviteCode: string } | null>(null);
+
+  const getInviteInfo = useCallback(
+    (code: string) => {
+      fetchInviteInfo(code).then((res) => {
+        if (res.data) setUserInfo(res.data);
+      });
+    },
+    [inviteCode],
+  );
+
   useEffect(() => {
     document.title = '加入雀乐';
+    const searchParams = new URLSearchParams(window.location.search);
+    const code = searchParams.get('code');
+    if (code) {
+      setInviteCode(code);
+      getInviteInfo(code);
+    }
   }, []);
 
   return (
     <main className="max-w-screen-sm min-h-screen mx-auto flex flex-col justify-between items-center font-normal text-#000/95 bg-#f3f2f7 px-18px pb-50px">
-      <div className="flex flex-col justify-between mx-auto">
-        <div className="mt-34px"></div>
+      <div className="flex flex-col justify-between items-center">
+        <Image
+          width="56"
+          height="56"
+          className="mt-34px object-cover rounded-full"
+          src={userInfo?.avatar ?? ''}
+          alt=""
+          unoptimized
+        />
 
         <div className="mt-13px flex flex-col justify-between items-center">
-          <p className="text-17px leading-23.8px">{`${1}，邀请你加入雀乐`}</p>
+          <p className="text-17px leading-23.8px">{`${userInfo?.nickName ?? ''}，邀请你加入雀乐`}</p>
           <p className="w-fit mt-1px text-12px leading-16.8px text-#000/40">一起 记录独立音乐</p>
         </div>
 
-        <div className="flex justify-between items-center w-278px h-103px mt-14px pl-30px pr-25px bg-#fff">
-          <img className="w-42px h-42px rounded-full" src="/img/share.png" alt="" />
+        <div className="flex justify-between items-center w-278px h-103px mt-14px pl-30px pr-25px rounded-6px bg-#fff">
+          <Image width="42" height="42" className="rounded-full" src="/img/share.png" alt="" unoptimized />
+
           <div>
             <div>
               <div className="flex items-center text-17px leading-23.8px">
                 <div>推荐码</div>
                 <div className="w-1px h-14.5px mx-9px bg-#000/10" />
-                <div>xxxxxxx</div>
+                <div>{userInfo?.inviteCode ?? ''}</div>
               </div>
               <p className="text-12px leading-16.8px text-#000/40">填写邀请码，双方均可获得积分</p>
             </div>