功能完善
This commit is contained in:
parent
59b0aaf227
commit
4f4ff7686c
|
|
@ -132,4 +132,23 @@ body{
|
|||
}
|
||||
.adm-tab-bar .adm-tab-bar-item-icon{
|
||||
height:32px;
|
||||
}
|
||||
.adm-image-viewer-slides .adm-image-viewer-slide{
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.videoMask{
|
||||
display: none;
|
||||
}
|
||||
.adm-dialog .adm-center-popup-wrap{
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: none;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.adm-dialog .adm-dialog-content{
|
||||
max-height: none;
|
||||
height: 100%;
|
||||
}
|
||||
22
app/page.js
22
app/page.js
|
|
@ -9,15 +9,13 @@ import {
|
|||
InfiniteScroll,
|
||||
List,
|
||||
Image,
|
||||
SpinLoading,
|
||||
} from "antd-mobile";
|
||||
|
||||
import PostItem from "../components/PostItem";
|
||||
import Loading from "./loading.js";
|
||||
import { sleep } from "antd-mobile/es/utils/sleep";
|
||||
import "./index.css";
|
||||
import PostItemSkeleton from "@/components/skeletons/PostItemSkeleton";
|
||||
import Router from "next/router";
|
||||
import Link from "next/link";
|
||||
const variables = {
|
||||
"@active-line-color": "#f00", // 将主题色改为红色
|
||||
};
|
||||
|
|
@ -26,6 +24,7 @@ const tabItems = [
|
|||
{ key: "follow", title: "关注" },
|
||||
];
|
||||
let count = 0;
|
||||
|
||||
// const scrollHeight = 700;
|
||||
// const scrollHeight = window.innerHeight-126
|
||||
export default function Home() {
|
||||
|
|
@ -99,14 +98,7 @@ export default function Home() {
|
|||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
<div
|
||||
onClick={() => {
|
||||
Router.push("/search");
|
||||
}}
|
||||
className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"
|
||||
>
|
||||
<Image src="/icons/search.png" />
|
||||
</div>
|
||||
<Link href="search" className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"><Image src="/icons/search.png"/></Link>
|
||||
</div>
|
||||
<Swiper
|
||||
className="overflow-visible"
|
||||
|
|
@ -124,19 +116,19 @@ export default function Home() {
|
|||
<List className="px-4 overflow-y-auto scrollbarBox_hidden">
|
||||
<PostItemSkeleton />
|
||||
<List.Item className="!p-0">
|
||||
<PostItem photos={[
|
||||
<PostItem type="post" photos={[
|
||||
{url:"https://picsum.photos/seed/picsum/200/300",type:"video"},
|
||||
{url:"https://picsum.photos/seed/picsum/200/300",type:"img"},
|
||||
{url:"https://picsum.photos/seed/picsum/200/300",type:"img"},
|
||||
]}/>
|
||||
</List.Item>
|
||||
<List.Item className="!p-0">
|
||||
<PostItem photos={[
|
||||
<PostItem type="post" photos={[
|
||||
{url:"https://picsum.photos/seed/picsum/200/300",type:"img"},
|
||||
]}/>
|
||||
</List.Item>
|
||||
<List.Item className="!p-0">
|
||||
<PostItem photos={[
|
||||
<PostItem type="post" photos={[
|
||||
{url:"https://picsum.photos/seed/picsum/200/300",type:"img"},
|
||||
{url:"https://picsum.photos/seed/picsum/200/300",type:"img"},
|
||||
]}/>
|
||||
|
|
@ -152,7 +144,7 @@ export default function Home() {
|
|||
style={{ maxHeight: `${scrollHeight}px` }}
|
||||
>
|
||||
<List.Item className="!p-0">
|
||||
<PostItem follow={true} />
|
||||
<PostItem follow={true} type="post"/>
|
||||
</List.Item>
|
||||
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
||||
</List>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,15 @@
|
|||
"use client";
|
||||
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
Tabs,
|
||||
Swiper,
|
||||
Toast,
|
||||
Image,
|
||||
} from "antd-mobile";
|
||||
import { AppstoreOutline } from "antd-mobile-icons";
|
||||
import { Tabs, Swiper, Toast, Image, List, InfiniteScroll } from "antd-mobile";
|
||||
import PostItem from "@/components/PostItem";
|
||||
import { sleep } from "antd-mobile/es/utils/sleep";
|
||||
import "./index.css";
|
||||
import Link from "next/link";
|
||||
import BottomNav from "@/components/BottomNav";
|
||||
import Empty from "@/components/Empty";
|
||||
import { useRouter } from "next/navigation";
|
||||
import PostItemSkeleton from "@/components/skeletons/PostItemSkeleton";
|
||||
const variables = {
|
||||
"@active-line-color": "#f00", // 将主题色改为红色
|
||||
};
|
||||
|
|
@ -84,7 +80,7 @@ export default function Space() {
|
|||
}
|
||||
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 p-2 custom-tabs text-gray-400 sticky top-0 z-10 bg-deepBg">
|
||||
<Tabs
|
||||
activeKey={tabItems[activeIndex].key}
|
||||
onChange={(key) => {
|
||||
|
|
@ -102,7 +98,12 @@ export default function Space() {
|
|||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
<Link href="search" className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"><Image src="/icons/search.png"/></Link>
|
||||
<Link
|
||||
href="search"
|
||||
className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"
|
||||
>
|
||||
<Image src="/icons/search.png" />
|
||||
</Link>
|
||||
</div>
|
||||
<Swiper
|
||||
className="overflow-visible"
|
||||
|
|
@ -116,36 +117,127 @@ export default function Space() {
|
|||
}}
|
||||
>
|
||||
<Swiper.Item>
|
||||
<ul className="grid grid-cols-2 gap-2 py-2 px-4">
|
||||
<li>
|
||||
<VisitingCard />
|
||||
</li>
|
||||
<li>
|
||||
<VisitingCard />
|
||||
</li>
|
||||
<li>
|
||||
<VisitingCard />
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
className={`flex flex-col items-center justify-center`}
|
||||
style={{ height: `${scrollHeight}px` }}
|
||||
>
|
||||
<Empty type="nospace" />
|
||||
<div className="flex flex-col mt-6">
|
||||
<Link
|
||||
href="/search"
|
||||
className="bg-[#FFFFFF40] px-12 py-2 rounded-full text-base text-white"
|
||||
>
|
||||
搜索空间
|
||||
</Link>
|
||||
<Link
|
||||
href="/search"
|
||||
className="bg-[#FFFFFF40] px-12 py-2 rounded-full text-base text-white mt-2"
|
||||
>
|
||||
查看推荐
|
||||
</Link>
|
||||
<Link
|
||||
href="/search"
|
||||
className="bg-[#FFFFFF40] px-12 py-2 rounded-full text-base text-white"
|
||||
>
|
||||
搜索空间
|
||||
</Link>
|
||||
<Link
|
||||
href="/search"
|
||||
className="bg-[#FFFFFF40] px-12 py-2 rounded-full text-base text-white mt-2"
|
||||
>
|
||||
查看推荐
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Swiper.Item>
|
||||
<Swiper.Item>
|
||||
<div
|
||||
className={`flex flex-col items-center justify-center`}
|
||||
style={{ height: `${scrollHeight}px` }}
|
||||
>
|
||||
<Empty type="nodata" />
|
||||
<div className=" py-2 px-4">
|
||||
<List className="overflow-y-auto scrollbarBox_hidden">
|
||||
<PostItemSkeleton />
|
||||
<List.Item className="!p-0">
|
||||
<PostItem
|
||||
type="space"
|
||||
photos={[
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "video",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</List.Item>
|
||||
<List.Item className="!p-0">
|
||||
<PostItem
|
||||
type="space"
|
||||
photos={[
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</List.Item>
|
||||
<List.Item className="!p-0">
|
||||
<PostItem
|
||||
type="space"
|
||||
photos={[
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</List.Item>
|
||||
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
||||
</List>
|
||||
<div
|
||||
className={`flex flex-col items-center justify-center`}
|
||||
style={{ height: `${scrollHeight}px` }}
|
||||
>
|
||||
<Empty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
</Swiper.Item>
|
||||
</Swiper>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const VisitingCard = () => {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<div
|
||||
className="relative h-60"
|
||||
onClick={() => router.push("/space/person_space")}
|
||||
>
|
||||
<Image
|
||||
src="/images/space_new.png"
|
||||
width={78}
|
||||
fit="contain"
|
||||
className="absolute top-2 right-2"
|
||||
/>
|
||||
<Image
|
||||
width={"100%"}
|
||||
height={"100%"}
|
||||
src="https://picsum.photos/seed/picsum/200/300"
|
||||
className="rounded-lg"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 w-full px-2 py-3 bg-[#1b1b1b] flex items-center rounded-b-lg">
|
||||
<span className="font-bold">洋洋不是洋妞</span>
|
||||
<ul className="ml-2">
|
||||
<li className="text-[10px] bg-primary rounded px-1 mr-1">付费</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,7 +12,11 @@ import {
|
|||
} from "antd-mobile";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faAngleLeft, faRefresh } from "@fortawesome/free-solid-svg-icons";
|
||||
import {
|
||||
faAngleLeft,
|
||||
faRefresh,
|
||||
faAngleRight,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import PostItem from "@/components/PostItem";
|
||||
import PostItemSkeleton from "@/components/skeletons/PostItemSkeleton";
|
||||
import Empty from "@/components/Empty";
|
||||
|
|
@ -120,7 +124,7 @@ export default function PersonSpace() {
|
|||
<li
|
||||
className="flex flex-col items-center mr-6"
|
||||
onClick={() =>
|
||||
setMaskVisible({ visible: true, type: "tiefen" })
|
||||
setMaskVisible({ visible: true, type: "ironFan" })
|
||||
}
|
||||
>
|
||||
<div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
|
||||
|
|
@ -185,6 +189,7 @@ export default function PersonSpace() {
|
|||
<PostItemSkeleton />
|
||||
<List.Item className="!p-0">
|
||||
<PostItem
|
||||
type="space"
|
||||
photos={[
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
|
|
@ -198,11 +203,45 @@ export default function PersonSpace() {
|
|||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</List.Item>
|
||||
<List.Item className="!p-0">
|
||||
<PostItem
|
||||
type="space"
|
||||
photos={[
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
|
|
@ -213,6 +252,7 @@ export default function PersonSpace() {
|
|||
</List.Item>
|
||||
<List.Item className="!p-0">
|
||||
<PostItem
|
||||
type="space"
|
||||
photos={[
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
|
|
@ -230,9 +270,9 @@ export default function PersonSpace() {
|
|||
</JumboTabs.Tab>
|
||||
<JumboTabs.Tab
|
||||
title="铁粉专享"
|
||||
key="tiefen"
|
||||
key="ironFan"
|
||||
description={
|
||||
currentKey == "tiefen" && (
|
||||
currentKey == "ironFan" && (
|
||||
<div className="titlePinkLine relative w-full"></div>
|
||||
)
|
||||
}
|
||||
|
|
@ -259,6 +299,7 @@ export default function PersonSpace() {
|
|||
<PostItemSkeleton />
|
||||
<List.Item className="!p-0">
|
||||
<PostItem
|
||||
type="space"
|
||||
photos={[
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
|
|
@ -272,11 +313,37 @@ export default function PersonSpace() {
|
|||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "video",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "video",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
type: "img",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</List.Item>
|
||||
<List.Item className="!p-0">
|
||||
<PostItem
|
||||
type="space"
|
||||
photos={[
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
|
|
@ -287,6 +354,7 @@ export default function PersonSpace() {
|
|||
</List.Item>
|
||||
<List.Item className="!p-0">
|
||||
<PostItem
|
||||
type="space"
|
||||
photos={[
|
||||
{
|
||||
url: "https://picsum.photos/seed/picsum/200/300",
|
||||
|
|
@ -330,7 +398,7 @@ export default function PersonSpace() {
|
|||
</li>
|
||||
<li
|
||||
className="flex flex-col items-center"
|
||||
onClick={() => setMaskVisible({ visible: true, type: "tiefen" })}
|
||||
onClick={() => setMaskVisible({ visible: true, type: "ironFan" })}
|
||||
>
|
||||
<div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
|
||||
<Image
|
||||
|
|
@ -367,10 +435,10 @@ export default function PersonSpace() {
|
|||
<div className="w-full h-screen flex justify-center items-center absolute top-0 pointer-events-none">
|
||||
<div className="relative w-[70vw] h-max flex flex-col justify-center items-center p-4 bg-[#261e30] rounded-2xl pointer-events-auto">
|
||||
{maskVisible.type === "weChat" && <SeeWechat />}
|
||||
{maskVisible.type === "tiefen" && (
|
||||
{maskVisible.type === "ironFan" && (
|
||||
<SeeTiefen
|
||||
handleClick={() => {
|
||||
setCurrentKey("tiefen");
|
||||
setCurrentKey("ironFan");
|
||||
setMaskVisible({ visible: false, type: "" });
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
"use client";
|
||||
|
||||
import React, { useRef, useState } from "react";
|
||||
import { Image } from "antd-mobile";
|
||||
|
||||
export default function PaySpacePost({
|
||||
type = "ironFan",
|
||||
price = "0.00",
|
||||
status = 0,
|
||||
}) {
|
||||
return (
|
||||
<div className={`rounded-md bg-${type === "ironFan" ? "primary" : "super"}-500 px-2 py-2 my-2 text-sm`}>
|
||||
<div className={`flex justify-between items-center text-sm text-super mb-2 text-${type === "ironFan" ? "primary" : "super"}`}>
|
||||
<div className="flex items-center">
|
||||
<Image
|
||||
width={18}
|
||||
height={18}
|
||||
placeholder=""
|
||||
className="mr-2"
|
||||
src={
|
||||
type === "ironFan"
|
||||
? "/icons/money_pink.png"
|
||||
: "/icons/money_gold.png"
|
||||
}
|
||||
/>
|
||||
<span className="font-bold">{price}元</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span>{status === 1 ? "已付费解锁" : `${type === "ironFan"?'铁粉':'超粉'}免费查看`}</span>
|
||||
<Image
|
||||
height={14}
|
||||
placeholder=""
|
||||
className="ml-2"
|
||||
src={type === "ironFan"?"/icons/pinklink.png":"/icons/goldlink.png"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{status === 0 && (
|
||||
<p className="text-xs" style={{color:type === "ironFan" ? "#ff669e54" : "#FFD68554"}}>
|
||||
空间内任何消费满399元即可成为铁粉
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,48 +1,160 @@
|
|||
"use client";
|
||||
|
||||
import React, { useRef, useState } from "react";
|
||||
import { Image, ImageViewer } from "antd-mobile";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Image, ImageViewer, Dialog } from "antd-mobile";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faAngleUp, faClose, faSave } from "@fortawesome/free-solid-svg-icons";
|
||||
const tabItems = [
|
||||
{ key: "commend", title: "推荐" },
|
||||
{ key: "follow", title: "关注" },
|
||||
];
|
||||
|
||||
export default function Photos({ photos }) {
|
||||
export default function Photos({ photos = [] }) {
|
||||
const [seeAllPhotos, setSeeAllPhotos] = useState(false);
|
||||
const [currentPhotos, setCurrentPhotos] = useState(photos);
|
||||
const [videoVisible, setVideoVisible] = useState({
|
||||
video: "",
|
||||
visible: false,
|
||||
});
|
||||
useEffect(() => {
|
||||
if (photos.length > 9) {
|
||||
const newPhotos = [...photos];
|
||||
setCurrentPhotos(newPhotos.slice(0, 9));
|
||||
}
|
||||
}, []);
|
||||
const showPhotos = (photos, index) => {
|
||||
ImageViewer.Multi.show({
|
||||
images: photos.map((item) => item.url),
|
||||
defaultIndex: index
|
||||
})
|
||||
defaultIndex: index,
|
||||
});
|
||||
};
|
||||
const handleShowVideo = (video) => {
|
||||
Dialog.className = "videoMask";
|
||||
Dialog.show({
|
||||
title: "",
|
||||
content: (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex w-full justify-end">
|
||||
<div
|
||||
className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
|
||||
key="closeBtn"
|
||||
onClick={()=>Dialog.clear()}
|
||||
>
|
||||
<FontAwesomeIcon icon={faClose} size="2xl" className="h-12" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-4">
|
||||
<video
|
||||
width="100%"
|
||||
height="100%"
|
||||
controls
|
||||
className="w-screen h-[70vh] rounded-lg object-cover"
|
||||
poster="https://picsum.photos/seed/picsum/200/300"
|
||||
>
|
||||
<source
|
||||
src="https://www.runoob.com/try/demo_source/movie.mp4"
|
||||
type="video/mp4"
|
||||
/>
|
||||
您的浏览器不支持 Video 标签。
|
||||
</video>
|
||||
</div>
|
||||
<div
|
||||
className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
|
||||
key="closeBtn"
|
||||
onClick={handleSeeAllPhotos}
|
||||
>
|
||||
<FontAwesomeIcon icon={faSave} size="xl" className="h-12" />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
bodyStyle: {
|
||||
background: "none",
|
||||
maxHeight: "none",
|
||||
height: "100%",
|
||||
},
|
||||
});
|
||||
};
|
||||
const handleSeeAllPhotos = (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
console.log(e);
|
||||
setSeeAllPhotos((old) => {
|
||||
if (old) {
|
||||
const newPhotos = [...photos];
|
||||
setCurrentPhotos(newPhotos.slice(0, 9));
|
||||
return false;
|
||||
} else {
|
||||
setCurrentPhotos(photos);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{photos.map((item, index) => {
|
||||
{currentPhotos.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
className="relative "
|
||||
className="relative "
|
||||
key={index}
|
||||
onClick={() => {
|
||||
showPhotos(photos, index);
|
||||
if (item.type == "video") {
|
||||
handleShowVideo(item.url);
|
||||
} else {
|
||||
showPhotos(photos, index);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
lazy={true}
|
||||
placeholder={<div className="w-full h-full bg-[#1d1d1d] rounded"></div>}
|
||||
width={photos.length > 1 ? "100%" : 150}
|
||||
height={photos.length > 1 ? "24vw" : "auto"}
|
||||
placeholder={
|
||||
<div className="w-full h-full bg-[#1d1d1d] rounded"></div>
|
||||
}
|
||||
width={currentPhotos.length > 1 ? "100%" : 150}
|
||||
height={currentPhotos.length > 1 ? "24vw" : "auto"}
|
||||
className="rounded"
|
||||
fit="cover"
|
||||
src={item.url}
|
||||
/>
|
||||
{item.type=="video"&&<div className="absolute top-0 w-full h-full flex justify-center items-center bg-[#33333348]">
|
||||
<Image className="" width={64} height={64} src="/icons/play.png" placeholder=""/>
|
||||
</div>}
|
||||
{item.type == "video" && (
|
||||
<div className="absolute top-0 w-full h-full flex justify-center items-center bg-[#33333348]">
|
||||
<Image
|
||||
className=""
|
||||
width={64}
|
||||
height={64}
|
||||
src="/icons/play.png"
|
||||
placeholder=""
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* {index==8 && currentPhotos.length>9 && (
|
||||
<div className="absolute top-0 w-full h-full flex justify-center items-center bg-[#33333348]">
|
||||
<span className="text-2xl">+{currentPhotos.length}</span>
|
||||
</div>
|
||||
)} */}
|
||||
{index == currentPhotos.length - 1 &&
|
||||
photos.length > 9 &&
|
||||
!seeAllPhotos && (
|
||||
<div
|
||||
className="absolute top-0 w-full h-full flex justify-center items-center bg-[#33333348]"
|
||||
onClick={handleSeeAllPhotos}
|
||||
>
|
||||
<span className="text-2xl">+{currentPhotos.length}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{seeAllPhotos && (
|
||||
<div
|
||||
className="flex justify-center items-center bg-[#33333348] rounded"
|
||||
key="closeBtn"
|
||||
onClick={handleSeeAllPhotos}
|
||||
>
|
||||
<FontAwesomeIcon icon={faAngleUp} size="2xl" className="h-14" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, useMemo } from "react";
|
||||
import Photos from "../Photos";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
Image,
|
||||
} from "antd-mobile";
|
||||
export default function PostItem({ follow,photos=[] }) {
|
||||
import PaySpacePost from "../PaySpacePost";
|
||||
import { Image } from "antd-mobile";
|
||||
export default function PostItem({
|
||||
type,
|
||||
follow,
|
||||
date = new Date(),
|
||||
photos = [],
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isOpenText, setIsOpenText] = useState(false);
|
||||
useEffect(() => {
|
||||
|
|
@ -14,69 +18,107 @@ export default function PostItem({ follow,photos=[] }) {
|
|||
router.prefetch("/profile");
|
||||
};
|
||||
}, []);
|
||||
const getDays = useMemo(() => {
|
||||
const today = new Date();
|
||||
const days = Math.floor((today - date) / (1000 * 60 * 60 * 24));
|
||||
return days;
|
||||
}, []);
|
||||
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("/profile")}
|
||||
/>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-bold text-md">用户名</span>
|
||||
<span className="rounded-full bg-[#FFFFFF1A] px-2 py-1 text-xs text-white font-medium">
|
||||
{follow ? "已关注" : "关注"}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className={`mb-2 mt-2 ${!isOpenText?'text-ellipsis-3':''}`}>御姐风细跟高跟鞋太绝了御姐风细跟高跟鞋太绝了御姐风细跟高跟鞋太绝了御姐风细跟高跟鞋太绝了御姐风细跟高跟鞋太绝了</p>
|
||||
<div className="font-bold text-btn my-4 text-base" onClick={() => setIsOpenText(!isOpenText)}>{isOpenText?'收起':'全文'}</div>
|
||||
</div>
|
||||
<Photos
|
||||
photos={photos}
|
||||
<div>
|
||||
{type == "space" && (
|
||||
<Image src="/images/top_post.png" width={76} className="mb-2" />
|
||||
)}
|
||||
<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("/profile")}
|
||||
/>
|
||||
<div className="flex justify-between items-center rounded-md bg-primary-500 px-2 py-2 my-2 text-sm text-primary">
|
||||
<div className="flex items-center">
|
||||
<Image width={18} height={18} placeholder="" className="mr-2" src="/icons/money_pink.png"/>
|
||||
<span className="font-bold">19.89元</span>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-bold text-md">用户名</span>
|
||||
{type == "post" && (
|
||||
<span className="rounded-full bg-[#FFFFFF1A] px-2 py-1 text-xs text-white font-medium">
|
||||
{follow ? "已关注" : "关注"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span>已付费解锁</span>
|
||||
<Image width={18} height={18} placeholder="" className="ml-2" src="/icons/pinklink.png"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mt-2">
|
||||
<span className="mr-2">
|
||||
{"new" < 7
|
||||
? `空间${
|
||||
"new" === 0
|
||||
? "今日"
|
||||
: "new" === 1
|
||||
? "昨日"
|
||||
: "new" === 2
|
||||
? "前天"
|
||||
: "new" + "天前"
|
||||
}有更新`
|
||||
: "1" === 2
|
||||
? "空间今日有更新"
|
||||
: ""}
|
||||
</span>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center mr-4">
|
||||
<Image
|
||||
src="/icons/notthumbup.png"
|
||||
width={32}
|
||||
className="w-4 h-full"
|
||||
placeholder=""
|
||||
/>
|
||||
<span className=" text-xs">点赞</span>
|
||||
<div>
|
||||
<p className={`mb-2 mt-2 ${!isOpenText ? "text-ellipsis-3" : ""}`}>
|
||||
御姐风细跟高跟鞋太绝了御姐风细跟高跟鞋太绝了御姐风细跟高跟鞋太绝了御姐风细跟高跟鞋太绝了御姐风细跟高跟鞋太绝了
|
||||
</p>
|
||||
<div
|
||||
className="font-bold text-btn my-4 text-base"
|
||||
onClick={() => setIsOpenText(!isOpenText)}
|
||||
>
|
||||
{isOpenText ? "收起" : "全文"}
|
||||
</div>
|
||||
<span className="mr-2">···</span>
|
||||
</div>
|
||||
<Photos photos={photos} />
|
||||
{type == "space" && (
|
||||
<PaySpacePost type="superFan" price="19.89" status={0}/>
|
||||
)}
|
||||
<div className="flex justify-between items-center mt-2">
|
||||
{type == "post" ? (
|
||||
<div className="flex items-center">
|
||||
<Image
|
||||
src="/icons/space_new_post.png"
|
||||
width={18}
|
||||
className="w-4 h-full mr-1"
|
||||
placeholder=""
|
||||
/>
|
||||
<span className="mr-2 text-primary text-xs">
|
||||
{getDays < 7
|
||||
? `空间${
|
||||
getDays === 0
|
||||
? "今日"
|
||||
: "new" === 1
|
||||
? "昨日"
|
||||
: "new" === 2
|
||||
? "前天"
|
||||
: getDays + "天前"
|
||||
}有更新`
|
||||
: "1" === 2
|
||||
? "空间今日有更新"
|
||||
: ""}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-[#ffffff88] text-xs">
|
||||
<span className="mr-2">
|
||||
{getDays < 3
|
||||
? `${
|
||||
getDays === 0
|
||||
? "今日"
|
||||
: "new" === 1
|
||||
? "昨日"
|
||||
: "前天"
|
||||
}`
|
||||
: date.getMonth() + 1 + "月" + date.getDate() + "日"
|
||||
}
|
||||
</span>
|
||||
<span>
|
||||
{date.getHours() + ":" + date.getMinutes()}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center mr-4">
|
||||
<Image
|
||||
src="/icons/notthumbup.png"
|
||||
width={32}
|
||||
className="w-4 h-full"
|
||||
placeholder=""
|
||||
/>
|
||||
<span className="text-xs">点赞</span>
|
||||
</div>
|
||||
<span className="mr-2">···</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="rounded-full h-px bg-gray-200 mt-2"></div> */}
|
||||
</div>
|
||||
{/* <div className="rounded-full h-px bg-gray-200 mt-2"></div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 302 B |
Binary file not shown.
|
Before Width: | Height: | Size: 161 B After Width: | Height: | Size: 297 B |
|
|
@ -7,16 +7,20 @@ module.exports = {
|
|||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors:{
|
||||
primary: {DEFAULT:"#FF669E",500:"#FF669E50"},
|
||||
secondary: {DEFAULT:"#838284"},
|
||||
neutral: {DEFAULT:"#2c2b2f"},
|
||||
info: {DEFAULT:"#3B69B8"},
|
||||
success: {DEFAULT:"#27F5B7"},
|
||||
warning: {DEFAULT:"#FFF04C"},
|
||||
error: {DEFAULT:"#F53030"},
|
||||
deepBg: {DEFAULT:"#07050A"},
|
||||
btn:{DEFAULT:"#3763b7"}
|
||||
colors: {
|
||||
primary: { DEFAULT: "#FF669E", 500: "#FF669E50" },
|
||||
secondary: { DEFAULT: "#838284" },
|
||||
neutral: { DEFAULT: "#2c2b2f" },
|
||||
info: { DEFAULT: "#3B69B8" },
|
||||
success: { DEFAULT: "#27F5B7" },
|
||||
warning: { DEFAULT: "#FFF04C" },
|
||||
error: { DEFAULT: "#F53030" },
|
||||
deepBg: { DEFAULT: "#07050A" },
|
||||
btn: { DEFAULT: "#3763b7" },
|
||||
super: {
|
||||
DEFAULT: "#FFD685",
|
||||
500: "#FFD68550",
|
||||
},
|
||||
},
|
||||
backgroundImage: {
|
||||
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
||||
|
|
|
|||
Loading…
Reference in New Issue