积分兑换规则

src/app/exchange-points/page.js

@@ -2,7 +2,7 @@
 
 import Alert from "../ui/components/Alert";
 import ExchangeForm from "./ExchangeForm";
-import { ChevronLeft } from "lucide-react";
+import { ChevronLeft, X } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState, useEffect } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
@@ -18,6 +18,7 @@ export default function ExchangePage() {
   const [page, setPage] = useState(1);
   const [hasMore, setHasMore] = useState(true);
   const [currentUser, setCurrentUser] = useState(null);
+  const [isRulesOpen, setIsRulesOpen] = useState(false);
 
   const router = useRouter();
 
@@ -74,16 +75,128 @@ export default function ExchangePage() {
     setSelectedItem(item);
   };
 
+  const Modal = ({ isOpen, onClose, children }) => {
+    if (!isOpen) return null;
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center">
+        <div
+          className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+          onClick={onClose}
+        />
+
+        <div className="relative bg-white rounded-lg w-full max-w-2xl m-4 p-6 shadow-xl max-h-[90vh] overflow-y-auto">
+          <button
+            onClick={onClose}
+            className="absolute right-4 top-4 text-gray-500 hover:text-gray-700"
+          >
+            <X size={24} />
+          </button>
+          {children}
+        </div>
+      </div>
+    );
+  };
+
+  const PointsRules = () => {
+    return (
+      <div className="space-y-4 text-gray-700">
+        <h2 className="text-xl font-bold text-gray-900">积分兑换规则</h2>
+
+        <section>
+          <h3 className="font-medium text-lg text-gray-900 mb-3">
+            1. 积分兑换规则
+          </h3>
+          <div className="space-y-2 pl-4">
+            <p className="font-medium">兑换资格：</p>
+            <p>用户必须拥有足够积分才能进行兑换。</p>
+
+            <p className="font-medium mt-3">商品种类：</p>
+            <p>积分可用于兑换以下几类商品：</p>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>实物商品：如电子产品、生活用品等</li>
+              <li>虚拟商品：如优惠券、抵用券、彩金等</li>
+            </ul>
+            <p className="text-gray-500 italic text-sm">
+              （积分兑换商品会不定期更新，以显示为准）
+            </p>
+          </div>
+        </section>
+
+        <section>
+          <h3 className="font-medium text-lg text-gray-900 mb-3">
+            2. 兑换流程
+          </h3>
+          <ol className="list-decimal pl-6 space-y-2">
+            <li>点击"兑换积分"按钮</li>
+            <li>
+              按需兑换商品，输入智博会员账号（输入错误会影响奖品发放）点击"确认兑换"
+            </li>
+            <li>兑换完成后需要等待审核，审核完成后会在3个工作日内自动派发</li>
+            <li>实物商品类需要填写姓名，联系方式，地址，预计7个工作日到件</li>
+          </ol>
+        </section>
+
+        <section>
+          <h3 className="font-medium text-lg text-gray-900 mb-3">
+            3. 兑换商品退换规则
+          </h3>
+          <ul className="list-disc pl-6 space-y-2">
+            <li>实物商品，一旦兑换成功，概不退换</li>
+            <li>虚拟商品（如优惠券、抵用券），一经兑换，不可折现</li>
+          </ul>
+        </section>
+
+        <section>
+          <h3 className="font-medium text-lg text-gray-900 mb-3">4. 解释权</h3>
+          <p className="pl-4">平台对积分获取、使用及兑换规则保留最终解释权。</p>
+        </section>
+
+        <section>
+          <h3 className="font-medium text-lg text-gray-900 mb-3">
+            5. 常见问题
+          </h3>
+          <div className="space-y-4 pl-4">
+            <div>
+              <p className="font-medium">是否可以兑换多个商品？</p>
+              <p className="text-gray-600">
+                可以，但需满足商品兑换所需积分条件。
+              </p>
+            </div>
+            <div>
+              <p className="font-medium">积分是否可以转让给他人？</p>
+              <p className="text-gray-600">积分不可转让或赠送。</p>
+            </div>
+            <div>
+              <p className="font-medium">积分有效期是多久？</p>
+              <p className="text-gray-600">积分有效期为1年，逾期作废。</p>
+            </div>
+          </div>
+        </section>
+
+        <p className="text-sm text-gray-500 italic mt-6">
+          以上规则确保会员能够公平参与积分兑换活动，并提供了清晰的指引，保证平台和用户的权益。
+        </p>
+      </div>
+    );
+  };
+
   return (
     <div className="bg-blue-600 text-white min-h-screen">
-      <div className="max-w-4xl mx-auto px-4 py-6">
-        <div className="flex items-center mb-6">
+      <div className="max-w-4xl mx-auto p-4">
+        <div className="flex items-center mb-4">
           <ChevronLeft
             className="cursor-pointer hover:text-blue-200 transition-colors"
             onClick={() => router.back()}
             size={28}
           />
           <h1 className="text-xl font-bold ml-4">积分兑换</h1>
+          <button
+            onClick={() => setIsRulesOpen(true)}
+            className="ml-auto px-4 py-2 bg-blue-500 hover:bg-blue-400 rounded-lg transition-colors"
+          >
+            兑换规则
+          </button>
         </div>
 
         <div className="grid gap-4 sm:grid-cols-2">
@@ -182,6 +295,11 @@ export default function ExchangePage() {
           </div>
         </div>
 
+        {/* 积分规则 */}
+        <Modal isOpen={isRulesOpen} onClose={() => setIsRulesOpen(false)}>
+          <PointsRules />
+        </Modal>
+
         {selectedItem && (
           <ExchangeForm
             currentUser={currentUser}