tiefen_space_web/app/[user_id]/page.jsx

"use client";

import React, { useState, useEffect } from "react";
import AuthBar from "@/components/AuthBar";
import WechatBar from "./_components/WechatBar";
import baseRequest from "@/utils/baseRequest";
import { Toast } from "antd-mobile";
import InOtherApp from "@/components/InOtherApp";
import { generateSignature } from "@/utils/crypto";
import Image from "next/image";
import verification from "@/public/icon/verification.png";
import icon_border from "@/public/images/icon_border.png";
import zone from "@/public/images/zone.png";
import Link from "next/link";
import { setCookie } from "cookies-next";
import copy from "@/utils/copy";
import { useRouter } from "next/navigation";
import { checkAuth } from "@/utils/auth";

export default function StreamerDetail({ params }) {
  //页面数据
  const [data, setData] = useState({});
  useEffect(() => {
    const getData = async () => {
      try {
        const base = baseRequest();
        const signature = generateSignature({
          user_id: parseInt(params.user_id, 10),
          ...base,
        });
        const detailResponse = await fetch(
          `/api/streamer/list_ext_by_user_id?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              user_id: parseInt(params.user_id, 10),
              ...base,
            }),
          }
        );
        const detailData = await detailResponse.json();
        console.log(detailData);
        if (detailData.ret === -1) {
          Toast.show({
            content: detailData.msg,
          });
          return;
        }
        setData(detailData.data.streamer_ext);
      } catch (error) {
        console.error(error);
      }
    };
    getData();
  }, []);

  const router = useRouter();

  const [name, setName] = useState("");
  const [content, setContent] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    const isLogined = await checkAuth();
    if (!isLogined) {
      Toast.show({
        content: "请先登录",
      });
      return;
    }
    router.push("/pay");
  };

  return (
    <section className="flex flex-1 flex-col container relative">
      <InOtherApp />
      <div className="absolute top-0 left-0 w-full">
        <div className="flex relative h-64 overflow-hidden">
          <img
            src={data?.avatar?.images[0].urls[0]}
            alt=""
            className="w-full object-cover opacity-30"
          />
          <div className="absolute top-0 left-0 w-full h-64 bg-gradient-to-t from-[#07050A] to-[#00000000]"></div>
        </div>
      </div>
      <div className="flex flex-col flex-1 px-4 pt-2 pb-24 z-10">
        <AuthBar />
        <div className="flex flex-col items-center mt-24 mb-4">
          <div className="w-[74px] h-[74px] rounded-full overflow-hidden">
            <img
              src={data?.avatar?.images[0].urls[0]}
              alt=""
              className="w-full object-cover"
            />
          </div>
          <div className="flex flex-row items-center mt-3">
            <p className="text-white text-2xl font-medium mr-1">{data?.name}</p>
            <Image src={verification} alt="" className="w-6 h-6" />
          </div>
        </div>
        <form className="flex flex-col items-center" onSubmit={handleSubmit}>
          <p className="text-white text-base mt-2 w-full max-w-sm">
            您的昵称：
          </p>
          <input
            type="text"
            name="name"
            placeholder="请输入您的昵称"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="input input-bordered input-md input-primary w-full max-w-sm"
          />
          <p className="text-white text-base mt-2 w-full max-w-sm">
            想要的祝福语：
          </p>
          <input
            type="text"
            name="content"
            placeholder="请输入你想要的祝福语"
            value={content}
            onChange={(e) => setContent(e.target.value)}
            className="input input-bordered input-md input-primary w-full max-w-sm"
          />
          <button className="btn btn-primary text-white rounded-full w-full max-w-sm mt-2">
            提交
          </button>
        </form>
      </div>
    </section>
  );
}