queyue-frontend
/
queyue-h5
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: 期刊页面ssg

Browse Source
main
fadeaway 8 months ago
parent 09b497e865
commit b8d13cc1b2
3 changed files with 97 additions and 59 deletions
Show Stats Download Patch File Download Diff File

62
src/app/journal/page.tsx
Unescape View File

@ -1,72 +1,18 @@
/**
* 期刊页面
*/
import Image from 'next/image';
import ArticalWrap from '@/components/ArticalWrap';
import JournalBanner from '@/components/JournalBanner';
import JournalComment from '@/components/JournalComment';
import SongList from '@/components/SongList';
import JournalContent from '@/components/JournalContent';
import type { Metadata } from 'next';
export const metadata: Metadata = { title: '雀乐期刊' };
// 获取期刊信息
async function getJournalInfo(journalId: string) {
const res = await fetch(`http://api.indie.cn:9012/luoo-music/journal/${journalId}`);
return res.json();
}
// 获取期刊歌曲列表
async function getSongList(journalId: string) {
const res = await fetch(`http://api.indie.cn:9012/luoo-music/song/journalId/${journalId}`);
return res.json();
}
async function getInfo(journalId: string) {
return await Promise.all([getJournalInfo(journalId), getSongList(journalId)]);
}
export default async function Journal({ searchParams: { id } }: any) {
const [res0, res1] = await getInfo(id);
const journalInfo = res0?.data;
const songList = res1?.data;
export default function Journal() {
return (
<main className="max-w-screen-sm min-h-screen mx-auto flex flex-col items-center font-normal text-[#000000f2] bg-white">
<main className="max-w-screen-sm min-h-screen mx-auto flex flex-col items-center font-normal text-[#000000f2] bg-gradient-to-b from-[#030303] to-[#1f1f20]">
<JournalBanner />
{/* 期刊封面图 */}
<div className="relative w-[100vw] h-[264.84px]">
<Image className="object-cover" unoptimized fill src={journalInfo?.image} alt="journal-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] mb-[79px]">
<div className="flex items-center flex-wrap text-[#000000b2] mb-[5px]">
<div className="text-[14px] font-medium leading-[19.6px]">VOL·{journalInfo?.journalNo}</div>
<div className="ml-[11px] flex items-center flex-wrap text-[12px] leading-[12px]">
{journalInfo?.tags?.map((tag: string, index: number) => (
<div
className={`h-[18px] py-[3px] px-[10px] rounded-[15px] bg-[#0000000c] flex items-center ${index !== 0 && 'ml-[6px]'}`}
key={tag}
>
{tag}
</div>
))}
</div>
</div>
<h5 className="font-medium text-[20px] leading-[28px]">{journalInfo?.title}</h5>
<p className="flex item-center text-[#00000066] text-[12px] leading-[17px] mt-[3px]">
<span className="mr-[12px]">{journalInfo?.editor}</span>
<span>{journalInfo?.date}</span>
</p>
<ArticalWrap content={journalInfo?.content} />
<SongList list={songList} />
</section>
<JournalComment journalInfo={journalInfo} />
<JournalContent />
</main>
);
}

2
src/components/JournalComment/index.tsx
Unescape View File

@ -9,7 +9,7 @@ export default function JournalComment({ journalInfo }: { journalInfo: any }) {
router.push('/download');
};
return (
<section className="w-full flex items-center border-t-[1px] border-[#00000019] pt-[14px] pb-[35px] px-[18px]">
<section className="w-full flex items-center border-t-[0.8px] border-[#00000019] pt-[14px] pb-[35px] px-[18px] bg-white">
<div
className="w-[294px] h-[38px] rounded-full bg-[#0000000c] px-[24px] flex items-center text-[15px] text-[#000000b2]"
onClick={handleClick}

92
src/components/JournalContent/index.tsx
Unescape View File

@ -0,0 +1,92 @@
/**
* 期刊内容
*/
'use client';
import { useEffect, useState } from 'react';
import Image from 'next/image';
import ArticalWrap from '@/components/ArticalWrap';
import JournalComment from '@/components/JournalComment';
import SongList from '@/components/SongList';
import type { Metadata } from 'next';
export const metadata: Metadata = { title: '雀乐期刊' };
// 获取期刊信息
async function getJournalInfo(journalId: string) {
const res = await fetch(`http://api.indie.cn:9012/luoo-music/journal/${journalId}`);
return res.json();
}
// 获取期刊歌曲列表
async function getSongList(journalId: string) {
const res = await fetch(`http://api.indie.cn:9012/luoo-music/song/journalId/${journalId}`);
return res.json();
}
async function getInfo(journalId: string) {
return await Promise.all([getJournalInfo(journalId), getSongList(journalId)]);
}
export default function JournalContent() {
const [journalInfo, setJournalInfo] = useState<any>();
const [songList, setSongList] = useState<ISong[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const { searchParams } = new URL(window.location.href);
setLoading(true);
getInfo((searchParams as any)?.get('id'))
.then(([res0, res1]) => {
setJournalInfo(res0?.data);
setSongList(res1?.data);
})
.finally(() => {
setLoading(false);
});
}, []);
return (
<>
{loading && (
<div className="w-full relative flex-1 text-[#ffffff66] flex items-center justify-center">加载中 ...</div>
)}
<div className={`w-full flex-1 flex-col ${loading ? 'hidden' : 'flex'}`}>
{/* 期刊封面图 */}
<div className="relative w-[100vw] h-[264.84px]">
<Image className="object-cover" unoptimized fill src={journalInfo?.image} alt="journal-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]">
<div className="flex items-center flex-wrap text-[#000000b2] mb-[5px]">
<div className="text-[14px] font-medium leading-[19.6px]">VOL·{journalInfo?.journalNo}</div>
<div className="ml-[11px] flex items-center flex-wrap text-[12px] leading-[12px]">
{journalInfo?.tags?.map((tag: string, index: number) => (
<div
className={`h-[18px] py-[3px] px-[10px] rounded-[15px] bg-[#0000000c] flex items-center ${index !== 0 && 'ml-[6px]'}`}
key={tag}
>
{tag}
</div>
))}
</div>
</div>
<h5 className="font-medium text-[20px] leading-[28px]">{journalInfo?.title}</h5>
<p className="flex item-center text-[#00000066] text-[12px] leading-[17px] mt-[3px]">
<span className="mr-[12px]">{journalInfo?.editor}</span>
<span>{journalInfo?.date}</span>
</p>
<ArticalWrap content={journalInfo?.content} />
<SongList list={songList} />
</section>
<JournalComment journalInfo={journalInfo} />
</div>
</>
);
}
Write Preview
Loading…
Cancel
Save