Mack
3 months 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