积分兑换商品和兑换配饰

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

@@ -1,6 +1,7 @@
 "use client";
 import React from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { useState, useRef, useEffect } from "react";
 // 定义商品类型接口
 interface RedeemProduct {
@@ -22,7 +23,7 @@ const PointsRedeemHairPage: React.FC = () => {
       title: "U Part Straight Bob Wigs ...",
       points: 4000,
       left: 10,
-      imageUrl: "https://placeholder.com/400/600", // 替换为真实图
+      imageUrl: "https://cdn.alipearlhair.com/media/catalog/product/cache/6/thumbnail/750x1000/9df78eab33525d08d6e5fb8d27136e95/b/o/body_wave_lace_front_wig_2.jpg", // 替换为真实图
     },
     {
       id: 2,
@@ -30,7 +31,7 @@ const PointsRedeemHairPage: React.FC = () => {
       title: "Ready To Go Straight 5x7 L...",
       points: 6000,
       left: 14,
-      imageUrl: "https://placeholder.com/400/600",
+      imageUrl: "https://cdn.alipearlhair.com/media/catalog/product/cache/6/thumbnail/750x1000/9df78eab33525d08d6e5fb8d27136e95/b/o/body_wave_lace_front_wig_2.jpg",
     },
     {
       id: 3,
@@ -38,7 +39,7 @@ const PointsRedeemHairPage: React.FC = () => {
       title: "Glueless 5x7 Lace Closure ...",
       points: 8000,
       left: 15,
-      imageUrl: "https://placeholder.com/400/600",
+      imageUrl: "https://cdn.alipearlhair.com/media/catalog/product/cache/6/thumbnail/750x1000/9df78eab33525d08d6e5fb8d27136e95/b/o/body_wave_lace_front_wig_2.jpg",
     },
     {
       id: 4,
@@ -46,7 +47,7 @@ const PointsRedeemHairPage: React.FC = () => {
       title: "Pre Braided Straight 13X4 ...",
       points: 10000,
       left: 10,
-      imageUrl: "https://placeholder.com/400/600",
+      imageUrl: "https://cdn.alipearlhair.com/media/catalog/product/cache/6/thumbnail/750x1000/9df78eab33525d08d6e5fb8d27136e95/b/o/body_wave_lace_front_wig_2.jpg",
     },
   ]);
   // 加载状态：false-未加载，true-加载中，'no-more'-无更多数据
@@ -168,37 +169,38 @@ const PointsRedeemHairPage: React.FC = () => {
         {/* 积分兑换列表 */}
         <div className="space-y-3">
           {/* 商品列表：2列网格，间距4 */}
-          <div className="grid grid-cols-2 gap-4 mb-8">
+          <div className="grid grid-cols-2 gap-3 mb-8">
             {products.map((product) => (
               <div key={product.id} className="flex flex-col">
                 {/* 商品图片 */}
                 <div className="aspect-[4/5] w-full overflow-hidden rounded-t">
-                  <img
+                  {/* <img
                     src={product.imageUrl}
                     alt={product.title}
                     className="w-full h-full object-cover"
-                  />
+                  /> */}
+                <Image src={product.imageUrl} width={187} height={250}  alt={product.title}   className="w-full h-full object-cover" />
                 </div>
 
                 {/* 商品信息 */}
-                <div className="flex flex-col gap-2 p-3">
+                <div className="flex flex-col gap-2 p-3 pr-0 pl-0">
                   {/* 类型（BUNDLE/WIG） */}
-                  <p className="text-sm font-medium text-gray-600 uppercase">
+                  <p className="text-sm font-medium text-center text-black uppercase">
                     {product.type}
                   </p>
 
                   {/* 标题 */}
-                  <p className="text-xs text-gray-800 line-clamp-2">
+                  <p className="text-xs text-black line-clamp-1">
                     {product.title}
                   </p>
 
                   {/* 积分 */}
-                  <p className="text-base font-bold text-black">
+                  <p className="text-sm font-semibold text-center text-black">
                     {product.points.toLocaleString()} Points + $0.00
                   </p>
 
                   {/* 库存 */}
-                  <p className="text-xs text-gray-500">LEFT: {product.left}</p>
+                  <p className="text-xs text-center text-gray-500">LEFT: {product.left}</p>
 
                   {/* 兑换按钮 */}
                   <button className="mt-2 bg-black text-white text-sm py-2 px-4 rounded-sm font-medium">

src/components/customer/SettingModal.tsx

@@ -1,5 +1,5 @@
 "use client";
-
+import Link from "next/link";
 export default function SettingModal({
   visible,
   onClose,
@@ -14,7 +14,7 @@ export default function SettingModal({
     // 全屏遮罩
     <div className="fixed inset-0 z-50 bg-black/50">
       {/* 弹框主体 - 从底部滑上来 */}
-      <div className="absolute bottom-0 left-0 right-0 w-full h-full bg-white rounded-t-2xl overflow-auto">
+      <div className="absolute bottom-0 rounded-none left-0 right-0 w-full h-full bg-white  overflow-auto">
         <div className="flex flex-col">
           {/* 顶部导航 */}
           <header className="bg-black text-white py-4 px-4 flex items-center">
@@ -47,7 +47,8 @@ export default function SettingModal({
           {/* 菜单列表 */}
           <div className="px-4 py-2">
             {/* Information */}
-            <div className="py-4 border-b border-gray-100 flex justify-between items-center">
+            <Link href={"/customer/account/edit"} className="py-4 border-b border-gray-100 flex justify-between items-center" > 
+            {/* <div > */}
               <span className="text-black font-medium">Information</span>
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -63,7 +64,8 @@ export default function SettingModal({
                   d="M9 5l7 7-7 7"
                 />
               </svg>
-            </div>
+            {/* </div> */}
+            </Link>
 
             {/* Subscribe 开关 */}
             <div className="py-4 border-b border-gray-100 flex justify-between items-center">