Mack
3 weeks ago
parent
a911197b4a
commit
13530d53d4
@ -0,0 +1,3 @@
|
||||
img {
|
||||
margin: 10px 0 !important;
|
||||
}
|
||||
@ -0,0 +1,68 @@
|
||||
/**
|
||||
* 专栏文章页面
|
||||
*/
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
import parse from 'html-react-parser';
|
||||
import Image from 'next/image';
|
||||
|
||||
import FakeComment from '@/components/FakeComment';
|
||||
import InviteBanner from '@/components/InviteBanner';
|
||||
import SongItemById from '@/components/SongItemById';
|
||||
import './page.css';
|
||||
|
||||
async function getEssayInfo(id: string) {
|
||||
const res = await fetch(`${process.env.NEXT_PUBLIC_HOST}/luoo-music/essay/${id}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export default function Essay() {
|
||||
const [essayInfo, setEssayInfo] = useState<any>({});
|
||||
|
||||
const options: any = {
|
||||
replace: ({ name, attribs }: { name: string; attribs: any }) => {
|
||||
if (name === 'audio') {
|
||||
return <SongItemById id={attribs?.['data-song-id']} />;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const { searchParams } = new URL(window.location.href);
|
||||
getEssayInfo((searchParams as any)?.get('id')).then((res) => {
|
||||
const aInfo = res?.data || {};
|
||||
setEssayInfo(aInfo);
|
||||
if (aInfo?.title) {
|
||||
document.title = aInfo?.title;
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main className={`w-full flex-1 flex-col pt-[50px] pb-[82px] flex`}>
|
||||
<InviteBanner />
|
||||
{essayInfo?.cover && (
|
||||
<div className="relative w-100vw h-264.84px">
|
||||
<Image className="object-cover" unoptimized fill src={essayInfo?.cover} alt="essay-cover" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className="relative w-full flex-1 bg-white mt-[-10px] rounded-tl-[12px] rounded-tr-[12px] z-1 py-[17px] px-[18px] pb-[79px]">
|
||||
<h2 className="font-medium text-[20px] leading-[28px]">{essayInfo?.title}</h2>
|
||||
|
||||
{(essayInfo?.authorName || essayInfo?.updateTime) && (
|
||||
<p className="w-full flex items-center text-[12px] text-[#000000b2] leading-[16.8px] mt-[6px]">
|
||||
<span>{essayInfo?.authorName}</span>
|
||||
<span className="ml-[15px]">{essayInfo?.updateTime}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{essayInfo?.content && <div>{parse(essayInfo?.content, options)}</div>}
|
||||
</section>
|
||||
|
||||
<FakeComment count={essayInfo?.totalCommentReplyInt} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
'use client';
|
||||
|
||||
import ImageWithBasePath from '@/components/ImageWithBasePath';
|
||||
|
||||
import useNav from '@/hooks/useNav';
|
||||
|
||||
export default function FakeComment({ count }: { count: number }) {
|
||||
const nav = useNav();
|
||||
const handleClick = () => {
|
||||
nav.push({ path: '/download' });
|
||||
};
|
||||
return (
|
||||
<section className="fixed bottom-0 left-[50%] translate-x-[-50%] z-[999] w-full max-w-screen-sm flex items-center border-t-[0.8px] border-[#00000019] pt-[14px] pb-[35px] px-[18px] bg-white">
|
||||
<div
|
||||
className="flex-1 h-[38px] rounded-full bg-[#0000000c] px-[24px] flex items-center text-[15px] text-[#000000b2]"
|
||||
onClick={handleClick}
|
||||
>
|
||||
说点想说的
|
||||
</div>
|
||||
<div className="relative ml-[14px]" onClick={handleClick}>
|
||||
<ImageWithBasePath
|
||||
className="w-[24px] h-[24px]"
|
||||
width={24}
|
||||
height={24}
|
||||
unoptimized
|
||||
src="img/icon_comment.png"
|
||||
alt="icon_comment"
|
||||
/>
|
||||
{count > 0 && <div className="absolute top-0 left-[100%] text-[8px] text-[#00000066]">{count}</div>}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
import SongList from '@/components/SongList';
|
||||
|
||||
async function getMusic(songId: string) {
|
||||
const res = await fetch(`${process.env.NEXT_PUBLIC_HOST}/luoo-music/song/${songId}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export default function SongItemById({ id }: { id: string }) {
|
||||
const [data, setData] = useState<ISong>();
|
||||
useEffect(() => {
|
||||
getMusic(id).then((res) => {
|
||||
setData(res?.data);
|
||||
});
|
||||
}, [id]);
|
||||
|
||||
return <div>{data ? <SongList list={[data]} showCtrl={false} showCount={false} /> : null}</div>;
|
||||
}
|
||||
Loading…
Reference in new issue