wishpal_ironfan
/
tiefen_space_h5
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加空间页面

This commit is contained in:
al 2024-06-26 19:46:31 +08:00
parent 12d382adcb
commit 50d06182f3
19 changed files with 544 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/globals.css
View File

@ -71,3 +71,8 @@ body {
.whitespace-no-wrap{
white-space: nowrap;
}
.imageBlur{
filter: blur(8px);
}

8
app/index.css
View File

@ -9,15 +9,16 @@
/* .custom-tabs .adm-tabs .adm-tabs-tab {
color: #a0a0a0;
} */
.custom-tabs .adm-tabs .adm-tabs-tab-active {
.custom-tabs .adm-tabs .adm-tabs-tab {
font-weight: bold;
font-size: 24px;
}
.custom-tabs .adm-tabs-tab-line {
background: none;
background-image: url(http://localhost:3000/icons/tabindicator.png);
height: 34px;
background-position: -3px -7px;
background-position: -2px -18px;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
@ -26,5 +27,8 @@
.custom-tabs .adm-tabs-header {
border-bottom: none;
}
.adm-list-body-inner {
margin-top: 8px;
}

23
app/layout.js
View File

@ -4,10 +4,27 @@ import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "铁粉空间",
description: "与Ta永不失联",
keywords: [
"铁粉空间",
"铁粉空间APP",
"社交",
"网红",
"粉丝",
"创作者",
"变现",
"平台",
"铁粉",
"空间",
],
};
export const viewport = {
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: 0,
};
export default function RootLayout({ children }) {
return (
<html

7
app/page.js
View File

@ -89,7 +89,7 @@ export default function Home() {
}
return (
<main className="h-screen">
<div className="flex justify-between items-center p-2 custom-tabs text-gray-400">
<div className="flex justify-between items-center px-2 custom-tabs text-gray-400 sticky top-0 z-10 bg-[#07050A]">
<Tabs
activeKey={tabItems[activeIndex].key}
onChange={(key) => {
@ -123,8 +123,7 @@ export default function Home() {
<Swiper.Item>
<PullToRefresh onRefresh={doRefresh}>
<List
className="p-2 overflow-y-auto scrollbarBox_hidden"
style={{ maxHeight: `${scrollHeight}px` }}
className="px-4 overflow-y-auto scrollbarBox_hidden"
>
<PostItemSkeleton/>
<List.Item className="!p-0">
@ -154,7 +153,7 @@ export default function Home() {
</PullToRefresh>
</Swiper.Item>
</Swiper>
<div className="fixed bottom-0 left-0 w-full">
<div className="fixed bottom-0 left-0 w-full bg-[#07050A]">
<BottomNav />
</div>
</main>

108
app/pay/page.js Normal file
View File

@ -0,0 +1,108 @@
"use client";
import React, { useEffect, useRef, useState } from "react";
import { Mask, Divider } from "antd-mobile";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
export default function Pay() {
const router = useRouter();
const [visible, setVisible] = useState(false);
// 获取屏幕高度
// const scrollHeight = 600;
useEffect(() => {}, []);
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 className="p-4 pt-24">
<div className=" text-base">
<p className="text-[46px] text-[#FF669E] text-center">¥39.90</p>
<div className="mt-12">
<div className="flex justify-between">
<span>付费商品：</span>
<span className="text-[#ffffff88]">草莓不可爱-空间成员</span>
</div>
<Divider />
<div className="flex justify-between">
<span>有效期：</span>
<span className="text-[#ffffff88]">永久</span>
</div>
<Divider />
</div>
</div>
<div className="mt-16">
<p className="text-[#ffffff88] text-base font-medium">购买须知：</p>
<p className="text-[#ffffff88] text-sm">
1、本空间由空间主人自行创建，加入空间前请确认相关风险，避免上当受骗；
<br />
2、当前开通的空间成员身份仅针对当前空间生效，请确认空间名称与与空间主人；
<br />
3、当前购买内容为空间成员身份，开通后可获得当前空间内成员身份查阅权限；
<br />
4、虚拟商品一经售出不予退款，请确认阅读上述条款并无异议后进行购买；
<br />
5、本平台不提供违法及色情内容，如您发现空间内存在以上内容，请联系人工客服举报处理；
<br />
6、本项权益内容最终解释权归铁粉空间运营方所有。
</p>
</div>
</div>
<div>
<div className="flex flex-col justify-center items-center px-4 py-4 fixed bottom-0 bg-[#07050A] w-full ">
<div className="bg-[#FF669E] w-full px-10 py-1 text-base rounded-full">
{/* <Image/> */}
<div
className="flex items-center py-1 font-bold"
onClick={() => {
router.push("/pay");
}}
>
<span className="m-auto">支付宝支付</span>
</div>
</div>
<p className="mt-4 text-xs text-[#ffffff88]">
确认购买即视为同意
<span className="text-primary" onClick={() => setVisible(true)}>
《用户充值协议》
</span>
</p>
</div>
</div>
<Mask visible={visible}>
<div
className="w-full h-screen flex justify-center items-center"
onClick={() => setVisible(false)}
>
<div className="w-full h-screen flex flex-col p-4 bg-[#07050A] rounded-2xl text-base">
<div className="w-full mt-4 mb-8">
<div className="w-9 h-9 float-left flex items-center justify-center bg-[#FFFFFF1A] rounded-full">
<FontAwesomeIcon
icon={faAngleLeft}
size="xl"
onClick={() => {
setVisible(false)
}}
/>
</div>
<p className="text-center text-2xl">铁粉空间充值协议</p>
</div>
<p>更新时间：2023年12月20日</p>
<p>生效日期：2023年12月20日</p>
</div>
</div>
</Mask>
</div>
);
}

190
app/space/person_space/page.js Normal file
View File

@ -0,0 +1,190 @@
"use client";
import React, { useEffect, useRef, useState } from "react";
import { Image, Swiper, Divider } from "antd-mobile";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faAngleLeft,
faAngleRight,
faEllipsisVertical,
faCopy,
} from "@fortawesome/free-solid-svg-icons";
export default function PersonSpace() {
const router = useRouter();
// 获取屏幕高度
// const scrollHeight = 600;
const [searchValue, setSearchValue] = useState("");
const photos = [
"https://picsum.photos/seed/picsum/200/300",
"https://picsum.photos/seed/picsum/200/300",
];
useEffect(() => {}, []);
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>
<FontAwesomeIcon
icon={faEllipsisVertical}
size="xl"
onClick={() => {
router.back();
}}
/>
</div>
{/* 内容 */}
<div>
<div>
<Swiper autoplay loop>
{photos.map((photo, index) => (
<Swiper.Item key={index}>
<Image
className="h-12 w-full"
fit="cover"
height={320}
src={photo}
onClick={() => {
Toast.show(`你点击了卡片 ${index + 1}`);
}}
/>
</Swiper.Item>
))}
</Swiper>
</div>
<div className="p-4 pb-24">
<div>
<div className="mb-2">
<div className="flex items-center mb-2">
<p className="text-2xl mr-2">PUPIHAN</p>
<div className="w-5 h-5">
<Image src="/icons/verification.png" />
</div>
</div>
<ul className="flex">
<li className="rounded-md bg-[#FF669E] mr-2 px-2 py-1 text-xs mb-1">
颜值高
</li>
<li className="rounded-md bg-[#FF669E] mr-2 px-2 py-1 text-xs mb-1">
身材好
</li>
<li className="rounded-md bg-[#FF669E] mr-2 px-2 py-1 text-xs mb-1">
女王范
</li>
</ul>
</div>
<div>
<ul className="flex mb-1">
<li className="h-4 flex items-center text-xs bg-[#FFFFFF1A] rounded-full px-2 py-2.5 mb-1">
<Image
src="/icons/ID.png"
width={14}
className="w-4 h-full mr-1"
/>{" "}
<span>213422</span>
</li>
</ul>
<p>
<span className="text-[#ffffff88]">个性签名｜</span>
专属圈内容都在空间里，永久更新外面看不到哟
</p>
</div>
</div>
<Divider />
<div>
<div onClick={()=>router.push("/space/person_space_introduce")}>
<div className="flex justify-between items-center mb-2">
<span className="font-bold">空间动态</span>
<div className="h-4 text-xs text-[#ffffff88]">
<span className="mr-2">查看60条</span>
<FontAwesomeIcon
icon={faAngleRight}
size="xl"
className="h-4"
onClick={() => {
router.back();
}}
/>
</div>
</div>
<div className="flex ">
<Image
width="20vw"
height="20vw"
className="rounded mr-2"
fit="cover"
src="https://picsum.photos/seed/picsum/200/300"
/>
<div className="w-20 h-20 overflow-hidden rounded">
<Image
width="20vw"
height="20vw"
className="rounded mr-2 imageBlur"
fit="cover"
src="https://picsum.photos/seed/picsum/200/300"
/>
</div>
</div>
</div>
</div>
<Divider />
<div>
<p className="font-bold mb-2">来这找我玩</p>
<ul>
<li className="flex justify-between border-2 border-[#ffffff43] rounded-xl p-2">
<div className="flex justify-between items-center">
<Image
height={24}
width={24}
className="mr-2"
src="/images/platform_wechat.png"
/>
<div>
<span>微信：</span>
<span>PUPIHAN</span>
</div>
</div>
<div className="flex text-xs">
<div className="flex items-center mr-6">
<FontAwesomeIcon
icon={faCopy}
size="xl"
className="h-3 mr-1"
onClick={() => {
router.back();
}}
/>
<span>复制</span>
</div>
<div className="flex items-center">
<FontAwesomeIcon
icon={faAngleRight}
size="xl"
className="h-3 mr-1"
onClick={() => {
router.back();
}}
/>
<span>前往</span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div className="flex justify-between items-center px-4 py-4 fixed bottom-0 bg-[#07050A] w-full border-t-2 border-[#FFFFFF1A]">
<div className="text-base bg-[#FFFFFF1A] py-1 px-6 rounded-full">关注</div>
<div className="bg-[#FF669E] px-10 py-1 text-base rounded-full">添加微信</div>
</div>
</div>
</div>
);
}

204
app/space/person_space_introduce/page.js Normal file
View File

@ -0,0 +1,204 @@
"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/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-[#07050A] p-4 pb-24" ref={contentBox}>
<p className="text-lg font-bold">空间介绍</p>
<p className="my-2 text-base">
草莓秘密基地，一次进入永久权限。都是你想看到的哟。
</p>
<ul className="flex flex-wrap">
<li>
<Image
width="28vw"
height="28vw"
className="rounded mr-1 mb-1"
fit="cover"
src="https://picsum.photos/seed/picsum/200/300"
/>
</li>
<li>
<Image
width="28vw"
height="28vw"
className="rounded mr-1 mb-1"
fit="cover"
src="https://picsum.photos/seed/picsum/200/300"
/>
</li>
<li>
<Image
width="28vw"
height="28vw"
className="rounded mr-1 mb-1"
fit="cover"
src="https://picsum.photos/seed/picsum/200/300"
/>
</li>
<li>
<Image
width="28vw"
height="28vw"
className="rounded mr-1 mb-1"
fit="cover"
src="https://picsum.photos/seed/picsum/200/300"
/>
</li>
<li>
<Image
width="28vw"
height="28vw"
className="rounded mr-1 mb-1"
fit="cover"
src="https://picsum.photos/seed/picsum/200/300"
/>
</li>
</ul>
<div className="mt-6">
<p className="text-lg font-bold mb-2">付费须知</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-[#FF669E] 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-[#07050A] w-full border-t-2 border-[#FFFFFF1A]">
<div className="bg-[#FF669E] px-10 py-1 text-base rounded-full">
{/* <Image/> */}
<div className="flex items-center py-2 text-lg font-bold" onClick={() => {
router.push("/pay");
}}>
<span>39.9元立即加入</span>
<FontAwesomeIcon
icon={faAngleRight}
size="xl"
className="h-4 ml-2"
/>
</div>
</div>
</div>
</div>
</div>
);
}

8
components/Photos/index.js
View File

@ -21,15 +21,15 @@ export default function Photos({ photos }) {
return (
<div
key={index}
className="mr-1 mb-1"
className="mr-2 mb-2"
onClick={() => {
showPhotos(photos, index);
}}
>
<Image
width={photos.length > 1 ? "24vw" : 150}
height={photos.length > 1 ? "24vw" : "auto"}
className="rounded-lg"
width={photos.length > 1 ? "25vw" : 150}
height={photos.length > 1 ? "25vw" : "auto"}
className="rounded"
fit="cover"
src="https://picsum.photos/seed/picsum/200/300"
/>

6
components/PostItem/index.js
View File

@ -2,15 +2,17 @@
import React, { useRef, useState } from "react";
import Photos from "../Photos";
import { useRouter } from "next/navigation";
export default function PostItem({ follow }) {
const router = useRouter();
return (
<div className="flex">
<img
className="flex-none w-8 h-8 rounded-full mr-2"
src="https://picsum.photos/seed/picsum/200/300"
alt=""
onClick={()=>router.push("/space/person_space")}
/>
<div className="flex-1">
<div className="flex justify-between items-center">
@ -19,7 +21,7 @@ export default function PostItem({ follow }) {
{follow?"已关注":"关注"}
</span>
</div>
<p className="mb-2 mt-3">御姐风细跟高跟鞋太绝了</p>
<p className="mb-2 mt-2">御姐风细跟高跟鞋太绝了</p>
<ul>
<li>
<Photos

BIN
public/icons/ID.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 398 B

BIN
public/icons/play.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
public/icons/verification.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
public/images/platform_bilibili.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
public/images/platform_douyin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/images/platform_qq.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/images/platform_wechat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/images/platform_weibo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
public/images/tiefen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 840 B

BIN
public/images/wechat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB