tiefen_space_h5/app/space/person_space_introduce/page.js

"use client";

import React, { useEffect, useState, useRef } from "react";
import { Image, Mask } from "antd-mobile";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
export default function PersonSpaceIntroduce() {
  const router = useRouter();
  const contentBox = useRef();
  // 获取屏幕高度
  // const scrollHeight = 600;
  const photos = [
    "https://picsum.photos/seed/picsum/200/300",
    "https://picsum.photos/seed/picsum/200/300",
  ];
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    if (contentBox.current) {
      contentBox.current.style.transform = "translateY(-12px)";
      // debugger
    }
  }, []);
  return (
    <div className="">
      <div className="flex justify-between items-center p-4 fixed top-0 z-10 w-full">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full">
          <FontAwesomeIcon
            icon={faAngleLeft}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
      </div>
      {/* 内容 */}
      <div>
        <div
          className="bg-no-repeat bg-cover bg-fixed "
          style={{
            backgroundImage: "url('https://picsum.photos/seed/picsum/200/300')",
          }}
        >
          <div className="px-4 pt-24 pb-8 bg-[#181818a9]">
            <div className="flex justify-between items-center">
              <div className="flex items-center">
                <Image
                  width="64px"
                  height="64px"
                  className="rounded-full mr-2 border-2 border-white"
                  fit="cover"
                  src="https://picsum.photos/seed/picsum/200/300"
                />
                <div>
                  <p className="text-2xl mb-1 font-bold">草莓不可爱</p>
                  <div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mb-1 w-max">
                    <Image
                      src="/icons/info/ID.png"
                      width={14}
                      className="w-4 h-full mr-1"
                    />
                    <span>213422</span>
                  </div>
                </div>
              </div>
              <div
                className="flex flex-col items-center"
                onClick={() => setVisible(true)}
              >
                <div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
                  <Image
                    src="/images/wechat.png"
                    width={22}
                    className="w-4 h-full"
                  />
                </div>
                <p className="text-xs">查看微信</p>
              </div>
            </div>
            <ul className="flex justify-around items-center mt-8">
              <li className="text-center">
                <p className="font-bold text-2xl">38</p>
                <p>动态</p>
              </li>
              <li className="text-center">
                <p className="font-bold text-2xl">38</p>
                <p>照片</p>
              </li>
              <li className="text-center">
                <p className="font-bold text-2xl">38</p>
                <p>视频</p>
              </li>
            </ul>
          </div>
        </div>
        <div className="rounded-2xl bg-deepBg p-4 pb-24" ref={contentBox}>
          <p className="text-lg font-bold tabPinkLine relative inline-block">空间介绍</p>
          <p className="my-2 text-base">
            草莓秘密基地，一次进入永久权限。都是你想看到的哟。
          </p>
          <ul className="grid grid-cols-3 gap-1.5">
            <li>
              <Image
                height="28vw"
                className="rounded"
                fit="cover"
                src="https://picsum.photos/seed/picsum/200/300"
              />
            </li>
            <li>
              <Image
                height="28vw"
                className="rounded"
                fit="cover"
                src="https://picsum.photos/seed/picsum/200/300"
              />
            </li>
            <li>
              <Image
                height="28vw"
                className="rounded"
                fit="cover"
                src="https://picsum.photos/seed/picsum/200/300"
              />
            </li>
            <li>
              <Image
                height="28vw"
                className="rounded"
                fit="cover"
                src="https://picsum.photos/seed/picsum/200/300"
              />
            </li>
            <li>
              <Image
                height="28vw"
                className="rounded"
                fit="cover"
                src="https://picsum.photos/seed/picsum/200/300"
              />
            </li>
          </ul>
          <div className="mt-6">
            <p className="text-lg font-bold mb-2 titlePinkLine relative inline-block">付费须知</p>
            <div>
              <p className="text-white text-base mb-1">
                1、加入后，您可以查看空间内相关内容；
              </p>
              <p className="text-white text-base mb-1">
                2、本空间由空间主人自行创建，加入空间前请确认相关风险，本平台不提供相关保证，请避免上当受骗；
              </p>
              <p className="text-white text-base mb-1">
                3、虚拟商品一经售出不予退款，请确认阅读上述条款并无异议后进行购买。
              </p>
              <p className="text-white text-base mb-1">
                4、本平台不提供违法及色情内容，如您发现空间内存在以上内容，请联系人工客服举报处理。
              </p>
            </div>
          </div>
        </div>
        <Mask visible={visible} >
          <div className="w-full h-screen flex justify-center items-center" onClick={() => setVisible(false)}>
            <div className="relative w-[70vw] h-max flex flex-col justify-center items-center p-4 pt-10 bg-[#261e30] rounded-2xl">
              <Image src="https://picsum.photos/seed/picsum/200/300" width={64} height={64} className="rounded-full absolute -top-8"/>
              <p className="text-2xl font-bold">草莓不可爱</p>
              <div className="my-2 bg-[#FFFFFF1A] px-4 py-2 rounded-lg text-base">
                解锁后展示
              </div>
              <p className="text-[red] text-center mb-2">
                添加时请备注自己“铁粉空间”昵称
                <br />
                若解锁后72小时为通过好友，请联系客服
              </p>
              <div className="bg-primary px-4 py-2 rounded-full flex items-center">
                <span className="text-[16px]">解锁微信（990金币）</span>
              </div>
            </div>
          </div>
        </Mask>
        <div className="flex justify-center items-center px-4 py-4 fixed bottom-0 bg-deepBg w-full border-t-2 border-[#FFFFFF1A]">
          <div className="bg-primary px-10 py-1 text-base rounded-full">
            {/* <Image/> */}
            <div className="flex items-center py-2 text-base" onClick={() => {
                  router.push("/pay");
                }}>
              <Image width={18} height={18} placeholder="" className="mr-2" src="/icons/money_pink.png"/>
              <span>39.9元立即加入</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="xl"
                className="h-4 ml-2"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}