积分兑换

next.config.js

@@ -1,12 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  output: "standalone",
-  env: {
-    MONGODB_URI: process.env.MONGODB_URI,
-  },
-  images: {
-    domains: ["match.dzhhzy.com"],
-  },
-};
-
-module.exports = nextConfig;

src/app/api/exchange-history/route.js

@@ -0,0 +1,186 @@
+import dbConnect from "../../lib/dbConnect";
+import ExchangeHistory from "../../models/ExchangeHistory";
+import ExchangeItem from "../../models/ExchangeItem";
+import { NextResponse } from "next/server";
+import { setCORSHeaders, handleError } from "../../lib/apiUtils";
+
+export async function GET(request) {
+  await dbConnect();
+  console.log("GET请求已接收");
+  try {
+    const { searchParams } = new URL(request.url);
+    let query = {};
+    let itemQuery = {};
+
+    for (const [key, value] of searchParams.entries()) {
+      switch (key) {
+        case "username":
+          query.username = { $regex: value, $options: "i" };
+          break;
+        case "userId":
+          query.userId = value;
+          break;
+        case "item":
+          try {
+            const itemObj = JSON.parse(value);
+            if (itemObj.title) {
+              itemQuery.title = {
+                $regex: itemObj.title,
+                $options: "i",
+              };
+            }
+            if (itemObj.type) {
+              itemQuery.type = itemObj.type;
+            }
+          } catch (e) {
+            console.error("Error parsing item JSON:", e);
+          }
+          break;
+        case "status":
+          query.status = value;
+          break;
+        case "exchangeTime":
+          const [start, end] = value.split(",");
+          query.exchangeTime = {
+            $gte: new Date(start),
+            $lte: new Date(end),
+          };
+          break;
+      }
+    }
+
+    console.log("Query:", query);
+    console.log("Item Query:", itemQuery);
+
+    // 首先查找符合条件的 ExchangeItem
+    const matchedItems = await ExchangeItem.find(itemQuery).select("_id");
+    const itemIds = matchedItems.map((item) => item._id);
+
+    // 将匹配的 item ID 添加到主查询中
+    if (itemIds.length > 0) {
+      query.item = { $in: itemIds };
+    }
+
+    const exchangeHistories = await ExchangeHistory.find(query).populate(
+      "item",
+      "title type points"
+    );
+
+    const message =
+      exchangeHistories.length > 0
+        ? "成功获取兑换历史"
+        : "当前没有任何兑换历史";
+    const response = NextResponse.json(
+      {
+        success: true,
+        data: exchangeHistories,
+        message,
+        total: exchangeHistories.length,
+      },
+      { status: 200 }
+    );
+    return setCORSHeaders(response);
+  } catch (error) {
+    console.error("Error in GET /api/exchange-history:", error);
+    return handleError(error);
+  }
+}
+
+export async function POST(request) {
+  await dbConnect();
+  try {
+    const {
+      userId,
+      username,
+      item,
+      status,
+      exchangeInfo,
+      exchangeTime,
+      exchangeCount,
+    } = await request.json();
+    const newExchangeHistory = new ExchangeHistory({
+      userId,
+      username,
+      item,
+      status,
+      exchangeInfo,
+      exchangeTime,
+      exchangeCount,
+    });
+    await newExchangeHistory.save();
+    const response = NextResponse.json(
+      {
+        success: true,
+        message: "兑换历史创建成功",
+        data: newExchangeHistory,
+      },
+      { status: 201 }
+    );
+    return setCORSHeaders(response);
+  } catch (error) {
+    console.error("创建兑换历史时出错:", error);
+    return handleError(error);
+  }
+}
+
+export async function PUT(request) {
+  await dbConnect();
+  try {
+    const { id, ...updateData } = await request.json();
+    console.log(id, updateData);
+    const updatedExchangeHistory = await ExchangeHistory.findByIdAndUpdate(
+      id,
+      updateData,
+      {
+        new: true,
+        runValidators: true,
+      }
+    );
+    if (!updatedExchangeHistory) {
+      return NextResponse.json(
+        { success: false, error: "未找到兑换历史" },
+        { status: 404 }
+      );
+    }
+    const response = NextResponse.json(
+      { success: true, data: updatedExchangeHistory },
+      { status: 200 }
+    );
+    return setCORSHeaders(response);
+  } catch (error) {
+    return handleError(error);
+  }
+}
+
+export async function DELETE(request) {
+  await dbConnect();
+  try {
+    const url = new URL(request.url);
+    const id = url.searchParams.get("id");
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "需要提供兑换历史ID" },
+        { status: 400 }
+      );
+    }
+    const deletedExchangeHistory = await ExchangeHistory.findByIdAndDelete(id);
+    if (!deletedExchangeHistory) {
+      return NextResponse.json(
+        { success: false, error: "未找到兑换历史" },
+        { status: 404 }
+      );
+    }
+    const response = NextResponse.json(
+      { success: true, message: "兑换历史删除成功" },
+      { status: 200 }
+    );
+    return setCORSHeaders(response);
+  } catch (error) {
+    return handleError(error);
+  }
+}
+
+export async function OPTIONS() {
+  const response = new NextResponse(null, { status: 204 });
+  return setCORSHeaders(response);
+}

src/app/api/exchange-items/route.js

@@ -0,0 +1,139 @@
+import dbConnect from "../../lib/dbConnect";
+import ExchangeItem from "../../models/ExchangeItem";
+import { NextResponse } from "next/server";
+import { setCORSHeaders, handleError } from "../../lib/apiUtils";
+
+export async function GET(request) {
+  await dbConnect();
+  console.log("GET请求已接收");
+  try {
+    const isFromFrontend = request.headers.get("x-from-frontend") === "true";
+
+    console.log("isFromFrontend", isFromFrontend);
+
+    let exchangeItems;
+    let message;
+
+    exchangeItems = await ExchangeItem.find();
+    message =
+      exchangeItems.length > 0
+        ? "成功获取所有兑换项目"
+        : "当前没有任何兑换项目";
+
+    const response = NextResponse.json(
+      {
+        success: true,
+        data: exchangeItems,
+        message,
+        total: exchangeItems.length,
+      },
+      { status: 200 }
+    );
+
+    return setCORSHeaders(response);
+  } catch (error) {
+    console.error("Error in GET /api/exchange-items:", error);
+    return handleError(error);
+  }
+}
+
+export async function POST(request) {
+  await dbConnect();
+  try {
+    const { type, logo, title, points } = await request.json();
+
+    const newExchangeItem = new ExchangeItem({
+      type,
+      logo,
+      title,
+      points,
+    });
+    await newExchangeItem.save();
+    const response = NextResponse.json(
+      {
+        success: true,
+        message: "兑换项目创建成功",
+        data: newExchangeItem,
+      },
+      { status: 201 }
+    );
+    return setCORSHeaders(response);
+  } catch (error) {
+    console.error("创建兑换项目时出错:", error);
+    return handleError(error);
+  }
+}
+
+export async function PUT(request) {
+  await dbConnect();
+
+  try {
+    const { id, ...updateData } = await request.json();
+
+    console.log(id, updateData);
+
+    const updatedExchangeItem = await ExchangeItem.findByIdAndUpdate(
+      id,
+      updateData,
+      {
+        new: true,
+        runValidators: true,
+      }
+    );
+
+    if (!updatedExchangeItem) {
+      return NextResponse.json(
+        { success: false, error: "未找到兑换项目" },
+        { status: 404 }
+      );
+    }
+
+    const response = NextResponse.json(
+      { success: true, data: updatedExchangeItem },
+      { status: 200 }
+    );
+
+    return setCORSHeaders(response);
+  } catch (error) {
+    return handleError(error);
+  }
+}
+
+export async function DELETE(request) {
+  await dbConnect();
+
+  try {
+    const url = new URL(request.url);
+    const id = url.searchParams.get("id");
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "需要提供兑换项目ID" },
+        { status: 400 }
+      );
+    }
+
+    const deletedExchangeItem = await ExchangeItem.findByIdAndDelete(id);
+
+    if (!deletedExchangeItem) {
+      return NextResponse.json(
+        { success: false, error: "未找到兑换项目" },
+        { status: 404 }
+      );
+    }
+
+    const response = NextResponse.json(
+      { success: true, message: "兑换项目删除成功" },
+      { status: 200 }
+    );
+
+    return setCORSHeaders(response);
+  } catch (error) {
+    return handleError(error);
+  }
+}
+
+export async function OPTIONS() {
+  const response = new NextResponse(null, { status: 204 });
+  return setCORSHeaders(response);
+}

src/app/exchange-points/ExchangeForm.jsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { X } from "lucide-react";
+
+export default function ExchangeForm({ item, onClose, setAlert }) {
+  const [formData, setFormData] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [currentUser, setCurrentUser] = useState(null);
+
+  useEffect(() => {
+    const user = JSON.parse(localStorage.getItem("currentUser") || "null");
+    setCurrentUser(user);
+  }, []);
+
+  const handleInputChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    try {
+      const params = {
+        userId: currentUser.id,
+        username: currentUser.username,
+        item: item._id,
+        status: "待兑换未审核",
+        exchangeInfo: {
+          account: formData.account || "",
+          address: formData.address || "",
+          name: formData.name || "",
+          phone: formData.phone || "",
+        },
+        exchangeTime: new Date(), // 添加兑换时间
+        // exchangeCount: formData.exchangeCount || 1,
+      };
+
+      console.log("params", params);
+
+      console.log("param", params);
+      const response = await fetch("/api/exchange-history", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(params),
+      });
+
+      const res = await response.json();
+
+      if (res.success) {
+        setAlert({
+          type: "success",
+          message: "提交成功，正在审核中",
+        });
+        onClose();
+      } else {
+        setAlert({ type: "error", message: res.error });
+      }
+    } catch (error) {
+      console.error("兑换请求失败:", error);
+      setAlert({ type: "error", message: res.error });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white text-black rounded-lg max-w-md w-full mx-4">
+        <div className="flex justify-end items-center p-4">
+          <button
+            onClick={onClose}
+            className="text-gray-600 hover:text-gray-800 transition duration-300"
+            aria-label="关闭"
+          >
+            <X size={24} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="px-4 pb-4">
+          {item.type === "彩金" || item.type === "优惠券" ? (
+            <div className="mb-4">
+              <label htmlFor="account" className="block mb-2 font-semibold">
+                兑换账号
+              </label>
+              <input
+                type="text"
+                id="account"
+                name="account"
+                placeholder="请输入智博1919账号"
+                required
+                className="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={handleInputChange}
+              />
+            </div>
+          ) : (
+            <>
+              <div className="mb-4">
+                <label htmlFor="name" className="block mb-2 font-semibold">
+                  姓名
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  required
+                  className="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  onChange={handleInputChange}
+                />
+              </div>
+              <div className="mb-4">
+                <label htmlFor="phone" className="block mb-2 font-semibold">
+                  电话
+                </label>
+                <input
+                  type="tel"
+                  id="phone"
+                  name="phone"
+                  required
+                  className="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  onChange={handleInputChange}
+                />
+              </div>
+              <div className="mb-4">
+                <label htmlFor="address" className="block mb-2 font-semibold">
+                  地址
+                </label>
+                <textarea
+                  id="address"
+                  name="address"
+                  required
+                  className="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  onChange={handleInputChange}
+                ></textarea>
+              </div>
+            </>
+          )}
+          <div className="flex justify-end mt-6">
+            <button
+              type="button"
+              onClick={onClose}
+              className="mr-4 px-4 py-2 border rounded text-gray-600 hover:bg-gray-100 transition duration-300"
+              disabled={isSubmitting}
+            >
+              取消
+            </button>
+            <button
+              type="submit"
+              className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "提交中..." : "确认兑换"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

src/app/exchange-points/page.js

@@ -0,0 +1,199 @@
+"use client";
+
+import Alert from "../ui/components/Alert";
+import ExchangeForm from "./ExchangeForm";
+import { ChevronLeft } from "lucide-react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useState, useEffect } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+
+const PAGE_SIZE = 10;
+
+export default function ExchangePage() {
+  const [items, setItems] = useState([]);
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [alert, setAlert] = useState(null);
+
+  const [exchanges, setExchanges] = useState([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [currentUser, setCurrentUser] = useState(null);
+
+  const router = useRouter();
+
+  useEffect(() => {
+    fetchExchangeItems();
+    const user = JSON.parse(localStorage.getItem("currentUser") || "null");
+    setCurrentUser(user);
+  }, []);
+
+  useEffect(() => {
+    loadExchanges();
+  }, [currentUser]);
+
+  const loadExchanges = async () => {
+    if (!currentUser) return;
+    try {
+      const response = await fetch(
+        `/api/exchange-history?userId=${encodeURIComponent(
+          currentUser.id
+        )}&current=${page}&pageSize=${PAGE_SIZE}`
+      );
+      const data = await response.json();
+      if (data.success) {
+        setExchanges((prev) => [...prev, ...data.data]);
+        setPage((prev) => prev + 1);
+        setHasMore(data.data.length === PAGE_SIZE);
+      } else {
+        console.error("Failed to fetch exchange history:", data.error);
+      }
+    } catch (error) {
+      console.error("Error fetching exchange history:", error);
+    }
+  };
+
+  const fetchExchangeItems = async () => {
+    try {
+      const response = await fetch("/api/exchange-items");
+      const res = await response.json();
+      if (res.success) {
+        setItems(res.data);
+      } else {
+        console.error("获取兑换项目失败:", res.message);
+      }
+    } catch (error) {
+      console.error("获取兑换项目失败:", error);
+    }
+  };
+
+  const handleExchange = (item) => {
+    setSelectedItem(item);
+  };
+
+  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">
+          <ChevronLeft
+            className="cursor-pointer hover:text-blue-200 transition-colors"
+            onClick={() => router.back()}
+            size={28}
+          />
+          <h1 className="text-xl font-bold ml-4">积分兑换</h1>
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-2">
+          {items.map((item) => (
+            <div
+              key={item._id}
+              className="bg-white text-black rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex items-center flex-grow">
+                  <Image
+                    src={item.logo}
+                    alt={item.title}
+                    width={50}
+                    height={50}
+                    className="rounded-full mr-4 flex-shrink-0"
+                  />
+                  <div>
+                    <h2
+                      className="text-lg font-bold"
+                      dangerouslySetInnerHTML={{ __html: item.title }}
+                    ></h2>
+                    <p className="text-gray-600 text-sm">
+                      所需积分: {item.points}
+                    </p>
+                  </div>
+                </div>
+                <button
+                  onClick={() => handleExchange(item)}
+                  className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ml-4 flex-shrink-0"
+                >
+                  兑换
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+        {/* 积分预测记录 */}
+        <div className="bg-white text-black rounded-lg p-4 mb-4 mt-6">
+          <h3 className="text-lg font-bold mb-2 text-blue-700">积分兑换记录</h3>
+          <div
+            id="exchangeScroll"
+            style={{ height: "280px", overflow: "auto" }}
+          >
+            <InfiniteScroll
+              dataLength={exchanges.length}
+              next={loadExchanges}
+              hasMore={hasMore}
+              loader={<h4>Loading...</h4>}
+              endMessage={
+                <p className="text-center text-gray-500">没有更多记录了</p>
+              }
+              scrollableTarget="exchangeScroll"
+            >
+              {exchanges.map((exchange, index) => (
+                <div key={exchange._id}>
+                  <div className="flex items-start py-3">
+                    <div className="flex-grow mr-4">
+                      <p className="text-sm text-gray-500 mb-1">
+                        {new Date(exchange.exchangeTime).toLocaleDateString()}{" "}
+                        {new Date(exchange.exchangeTime).toLocaleTimeString(
+                          [],
+                          { hour: "2-digit", minute: "2-digit" }
+                        )}
+                      </p>
+                      <p
+                        className="font-medium text-gray-800 mb-1"
+                        dangerouslySetInnerHTML={{
+                          __html: exchange.item.title,
+                        }}
+                      ></p>
+                      <p
+                        className={`text-sm font-medium ${
+                          exchange.status === "待兑换已审核"
+                            ? "text-blue-600"
+                            : exchange.status === "待兑换未审核"
+                            ? "text-gray-600"
+                            : exchange.status === "已兑换"
+                            ? "text-green-600"
+                            : "text-gray-600"
+                        }`}
+                      >
+                        {exchange.status}
+                      </p>
+                    </div>
+                    <div className="flex-shrink-0 font-bold text-red-600 self-center">
+                      -{exchange.item.points}
+                    </div>
+                  </div>
+                  {index < exchanges.length - 1 && (
+                    <div className="border-b border-gray-200"></div>
+                  )}
+                </div>
+              ))}
+            </InfiniteScroll>
+          </div>
+        </div>
+
+        {selectedItem && (
+          <ExchangeForm
+            item={selectedItem}
+            setAlert={setAlert}
+            onClose={() => setSelectedItem(null)}
+          />
+        )}
+        {alert && (
+          <Alert
+            message={alert.message}
+            type={alert.type}
+            onClose={() => setAlert(null)}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

src/app/models/ExchangeHistory.js

@@ -0,0 +1,37 @@
+import mongoose from "mongoose";
+
+const ExchangeHistorySchema = new mongoose.Schema(
+  {
+    userId: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "User",
+      required: true,
+    },
+    username: {
+      type: String,
+      required: true,
+    },
+    item: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "ExchangeItem",
+      required: true,
+    },
+    status: {
+      type: String,
+      enum: ["待兑换未审核", "待兑换已审核", "已兑换"],
+      default: "待兑换未审核",
+    },
+    exchangeInfo: {
+      account: { type: String },
+      name: { type: String },
+      phone: { type: String },
+      address: { type: String },
+    },
+    exchangeTime: { type: Date },
+    exchangeCount: { type: Number, default: 0 },
+  },
+  { timestamps: true }
+);
+
+export default mongoose.models.ExchangeHistory ||
+  mongoose.model("ExchangeHistory", ExchangeHistorySchema);

src/app/models/ExchangeItem.js

@@ -0,0 +1,17 @@
+import mongoose from "mongoose";
+
+const ExchangeItemSchema = new mongoose.Schema(
+  {
+    type: {
+      type: String,
+      enum: ["彩金", "优惠券", "实物"],
+    },
+    logo: { type: String },
+    title: { type: String },
+    points: { type: Number },
+  },
+  { timestamps: true }
+);
+
+export default mongoose.models.ExchangeItem ||
+  mongoose.model("ExchangeItem", ExchangeItemSchema);

src/app/page.js

@@ -51,8 +51,8 @@ export default function Home() {
                     <Image
                       src={currentUser.avatar}
                       alt="User Avatar"
-                      width={28}
-                      height={28}
+                      width={32}
+                      height={32}
                       className="rounded-full mr-2"
                     />
                   ) : (
@@ -60,13 +60,13 @@ export default function Home() {
                       <Image
                         src="/images/cluo.webp"
                         alt="User Avatar"
-                        width={28}
-                        height={28}
+                        width={32}
+                        height={32}
                         className="rounded-full"
                       />
                     </div>
                   )}
-                  <span className="text-sm font-bold text-gray-700">
+                  <span className="text-base font-bold text-gray-700">
                     {currentUser.username}
                   </span>
                 </div>

src/app/personal-center/page.jsx

@@ -156,7 +156,7 @@ const PersonalCenter = () => {
 
   const handleExchangePoints = () => {
     console.log("兑换积分");
-    // router.push('/exchange-points');
+    router.push("/exchange-points");
   };
 
   if (isLoading) {

src/app/ui/components/ActivityModal.jsx

@@ -25,11 +25,8 @@ const ActivityModal = () => {
           setActivityContent(data.data[0]);
           setIsOpen(true);
         } else {
-          // 处理没有活动数据的情况
           console.log(data.message || "No active activity");
           setActivityContent(null);
-          // 可以选择不打开模态框，或者显示一个提示信息
-          // setIsOpen(false);
         }
       } catch (error) {
         console.error("Error fetching activity content:", error);