个人中心主页面接口

src/app/(public)/customer/account/_components/AccountHeader.tsx

@@ -4,26 +4,58 @@ import { useState } from "react";
 import SettingModal from "@/components/customer/SettingModal";
 import AccountVipPopup from "./AccountVipPopup";
 import Image from "next/image";
-export default function AccountHeader() {
+type NextLevelInfo = {
+  group_id: number;
+  group_name: string;
+  growth_level_name: string;
+  min_growth_value: number;
+  icon: string | null;
+  require_first_order: boolean;
+};
+
+export type VipGrowthData = {
+  growth_value: number;
+  level_name: string;
+  discount_rate: number;
+  level_icon: string | null;
+  benefits: string[];
+  next_level: NextLevelInfo;
+  growth_to_next_level: string; // 提示文案，如"First order required"
+  expires_at: string | null;
+  first_order_completed: boolean;
+};
+interface AccountHeaderProps {
+  user: {
+    name: string;
+    email: string;
+    image_url?: string | null;
+  };
+
+  points: number;
+  coupon_count: number;
+  wishlist_count?: number;
+  vipData: VipGrowthData;
+}
+
+export default function AccountHeader({
+  user,
+  points,
+  coupon_count,
+  vipData
+}: AccountHeaderProps) {
   const [showSetting, setShowSetting] = useState(false);
   const [showVip, setShowVip] = useState(false);
- const VipGrothData={
-    growth_value:1000,
-    next_level:{
-      min_growth_value:2000,
-    }
+  let progressPercent = 0;
+  let progressText = "";
+  if (vipData.next_level.min_growth_value > 0) {
+    const rawPercent = (vipData.growth_value / vipData.next_level.min_growth_value) * 100;
+    progressPercent = Math.min(Math.max(rawPercent, 0), 100);
+    progressText = `growth value ${vipData.growth_value}/${vipData.next_level.min_growth_value}`;
+  } else {
+  
+    progressText = vipData.growth_to_next_level;
+    progressPercent = 0; 
   }
-  const progressPercent = VipGrothData
-    ? Math.min(
-        Math.max(
-          (VipGrothData.growth_value /
-            VipGrothData.next_level.min_growth_value) *
-            100,
-          0,
-        ),
-        100,
-      )
-    : 0;
   return (
     <>
       {/* 顶部浅橙色背景 */}
@@ -70,15 +102,15 @@ export default function AccountHeader() {
           <div className="relative text-5xl w-17.5 h-17.5 rounded-full bg-[rgba(249,249,249,1)] mr-3 uppercase flex  items-center justify-center">
             <Image
               className=" block"
-              src="/image/account/202608271601.png"
+              src={ user.image_url || "/image/account/202608271601.png" }
               alt={"userphoto"}
               width={48}
               height={48}
             />
           </div>
           <div className="align-left leading-5">
-            <h2 className="font-semibold text-lg text-white">New User</h2>
-            <p className="text-xs mt-1.5 text-white">18567768101@163.com</p>
+            <h2 className="font-semibold text-lg text-white">  {user.name}</h2>
+            <p className="text-xs mt-1.5 text-white"> {user.email}</p>
           </div>
         </div>
 
@@ -89,7 +121,7 @@ export default function AccountHeader() {
             href="/customer/account/mypoints"
             aria-label="Go to customer account mypoints page"
           >
-            <strong>99999</strong> <br />{" "}
+            <strong> {points}</strong> <br />{" "}
             <span className="flex items-center justify-center">
               {" "}
               Points{" "}
@@ -116,7 +148,7 @@ export default function AccountHeader() {
             href="/customer/account/mycoupon"
             aria-label="Go to customer account mycoupon page"
           >
-            <strong className="coupons-number">0</strong> <br />{" "}
+            <strong className="coupons-number"> {coupon_count}</strong> <br />{" "}
             <span className="flex items-center justify-center">
               {" "}
               Coupon{" "}
@@ -203,9 +235,9 @@ export default function AccountHeader() {
     text-4.5
     leading-normal"
         >
-          VIP 1
+          {vipData.level_name}
         </span>
-        <p className="text-black text-right pr-10" >growth value 1000/2000</p>
+        <p className="text-black text-right pr-10" >{progressText}</p>
         <svg
           className="absolute top-4 right-4 text-4 w-5 h-5"
           viewBox="0 0 1024 1024"

src/app/(public)/customer/account/page.tsx

@@ -1,6 +1,7 @@
 import AccountSwiper from "@components/customer/accountSwiper";
 import AccountHeader from "./_components/AccountHeader"
 import AccountBottomHrefSwiper from "./_components/AccountBottomHrefSwiper"
+import { restApiFetch } from "@utils/bagisto/index";
 // import Link from "next/link";
 const orderNavs = [
   {
@@ -31,11 +32,21 @@ const orderNavs = [
   },
 ];
 
-const MyAccountPage = () => {
-  
+const MyAccountPage =async () => {
+  const res = await restApiFetch({
+    api: `/customer/profile`,
+    method: "GET",
+    isRoute: false,
+  });
+console.log('accountres-----------------------------:',res);
   return (
     <div className="min-h-screen bg-white pt-2 px-2">
-      <AccountHeader />
+      <AccountHeader
+        user={res.body.data.user}
+        points={res.body.data.points}
+        coupon_count={res.body.data.coupon_count}
+        vipData={res.body.data.growth}
+      />
       {/* 我的订单 */}
       <div className="">
         <h3 className="mt-8 ml-4 text-base">My Order</h3>