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

update(journal): Add journal recommend and userCollectCount.

Browse Source
mack-mac
mackt 7 months ago
parent 26e60cd197
commit b20e608853
10 changed files with 78 additions and 70 deletions
Show Stats Download Patch File Download Diff File

16
src/app/vol/[journalId]/page.tsx
Unescape View File

@ -1,10 +1,9 @@
/** 期刊详情 */
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { JournalCard, SongCardList, HotJournalList, Comment, Collect } from '@/components';
import { apiGetJournalInfoById, apiGetSongsByJournalNo } from '@/services';
import { JournalCard, SongCardList, JournalRecommendList, Comment, Collect } from '@/components';
import { apiGetJournalInfoById, apiGetSongsByJournalNo, apiGetJournalRecommendById } from '@/services';
export async function generateMetadata({ params: { journalId } }: { params: { journalId: string } }) {
const res = await apiGetJournalInfoById({ id: journalId });
@ -13,16 +12,17 @@ export async function generateMetadata({ params: { journalId } }: { params: { jo
}
const getData = async (journalId: string) => {
const [journalInfoRes, songListRes] = await Promise.all([
const [journalInfoRes, songListRes, recommendList] = await Promise.all([
apiGetJournalInfoById({ id: journalId }),
apiGetSongsByJournalNo({ id: journalId }),
apiGetJournalRecommendById({ id: journalId, limit: 8 }),
]);
if (!(journalInfoRes.code === 200 && songListRes.code === 200)) return notFound();
return { journalInfo: journalInfoRes.data, songList: songListRes.data };
return { journalInfo: journalInfoRes.data, songList: songListRes.data, recommendList: recommendList.data };
};
export default async function JournalDetail({ params: { journalId } }: { params: { journalId: string } }) {
const { journalInfo, songList } = await getData(journalId);
const { journalInfo, songList, recommendList } = await getData(journalId);
return (
<main className="w-[1200px] mx-auto flex flex-row justify-between items-left pt-[145px] pb-[104px] ">
@ -59,7 +59,7 @@ export default async function JournalDetail({ params: { journalId } }: { params:
{/* 收藏 */}
<Collect
active={journalInfo.haveCollect}
text={`${journalInfo.totalCommentReply}人收藏`}
text={`${journalInfo.userCollectCount}人收藏`}
id={journalInfo.id}
type="1"
/>
@ -83,7 +83,7 @@ export default async function JournalDetail({ params: { journalId } }: { params:
<div className="w-[346px]">
{/* 热门推荐 */}
<HotJournalList type="journal" journalId={journalInfo.id} />
{recommendList.length ? <JournalRecommendList list={recommendList} /> : <div />}
</div>
</main>
);

19
src/app/vol/list/[category]/[[...page]]/page.tsx
Unescape View File

@ -1,7 +1,8 @@
/** 期刊列表 */
import { notFound } from 'next/navigation';
import { Category, JournalList, HotJournalList } from '@/components';
import { apiSearchCategory } from '@/services';
import { Category, JournalList, JournalRecommendList } from '@/components';
import { apiSearchCategoryList, apiGetJournalRecommendWithCollect } from '@/services';
import type { Metadata } from 'next';
@ -9,14 +10,18 @@ export const metadata: Metadata = {
title: '期刊',
};
const getCategoryList = async () => {
const result = await apiSearchCategory();
return result.code === 200 ? result.data : [];
const getData = async () => {
const [categoryList, recomendList] = await Promise.all([
apiSearchCategoryList(),
apiGetJournalRecommendWithCollect(),
]);
if (categoryList.code !== 200) return notFound();
return { categoryList: categoryList.data, recomendList: recomendList.data };
};
export default async function Journal({ params }: { params: { category?: string; page?: number } }) {
const { category = 'all', page = 1 } = params;
const categoryList = await getCategoryList();
const { categoryList, recomendList } = await getData();
const categoryInfo: Category | undefined = categoryList.find((item: Category) => item.nameEn === category);
return (
@ -32,7 +37,7 @@ export default async function Journal({ params }: { params: { category?: string;
{/* 右侧 */}
<div className="w-[346px] mt-[218px]">
{/* 热门推荐 */}
<HotJournalList type="hot" />
<JournalRecommendList list={recomendList} />
</div>
</main>
);

4
src/components/Category.tsx
Unescape View File

@ -1,9 +1,9 @@
import Link from 'next/link';
import { apiSearchCategory } from '@/services/server/journal';
import { apiSearchCategoryList } from '@/services/server/journal';
const getCategoryList = async () => {
const result = await apiSearchCategory();
const result = await apiSearchCategoryList();
return result.code === 200 ? result.data : [];
};

43
src/components/Journal/HotJournalList.tsx
Unescape View File

@ -1,43 +0,0 @@
import Link from 'next/link';
import HotJournalCard from './HotJournalCard';
import { apiJournalRecommend } from '@/services/server/journal';
interface HotProp {
type: 'hot';
}
interface JournalProp {
type: 'journal';
journalId: string;
}
const getData = async (id: string) => {
const res = await apiJournalRecommend({ id });
return res.code === 200 ? res.data : [];
};
const RecommondJournal = async (prop: HotProp | JournalProp) => {
let journalList: JournalInfo[] = [];
if (prop.type === 'hot') journalList = [];
if (prop.type === 'journal') journalList = await getData(prop.journalId);
return (
<div className="flex flex-col">
{/* 分类 & 电台 */}
<div className="text-[17px] leading-[23.8px]">热门推荐</div>
{/* 期刊 list */}
<div className="flex flex-col gap-[30px] mt-[17px]">
{!!journalList?.length &&
journalList.map((item: JournalInfo) => (
<Link key={item.id} href={`/vol/${item.journalNo}`}>
<HotJournalCard key={item.id} {...item} />
</Link>
))}
</div>
</div>
);
};
export default RecommondJournal;

3
src/components/Journal/JournalItem.tsx
Unescape View File

@ -11,6 +11,7 @@ export default function JournalItem({
haveCollect,
totalCommentReply,
commentList,
userCollectCount,
}: JournalInfo) {
return (
<div className="flex flex-col w-[712px] rounded-[6px] bg-base ">
@ -52,7 +53,7 @@ export default function JournalItem({
unoptimized
/>
<p className="ml-[6px] text-[14px] leading-[16px] text-[rgba(0,0,0,0.4) cursor-pointer hover:text-brand">
{totalCommentReply}
{userCollectCount}
</p>
</div>
</div>

4
src/components/Journal/HotJournalCard.tsx → src/components/Journal/JournalRecommendCard.tsx
Unescape View File

@ -1,6 +1,6 @@
import Image from 'next/image';
export default function JournalItem({ title, image, totalCommentReply }: JournalInfo) {
export default function JournalRecommendCard({ title, image, userCollectCount }: JournalInfo) {
return (
<div className="flex flex-row items-center h-[56px] group">
<Image src={image} alt={title} width={80} height={56} unoptimized className="w-[80px] h-[56px] rounded-[3px]" />{' '}
@ -8,7 +8,7 @@ export default function JournalItem({ title, image, totalCommentReply }: Journal
<p className="w-[200px] text-[15px] leading-[21px] cursor-pointer group-hover:text-brand overflow-hidden whitespace-nowrap truncate">
{title}
</p>
<p className="text-[13px] leading-[18.2px] cursor-pointer group-hover:text-brand">{`${totalCommentReply}人收藏`}</p>
<p className="text-[13px] leading-[18.2px] cursor-pointer group-hover:text-brand">{`${userCollectCount}人收藏`}</p>
</div>
</div>
);

27
src/components/Journal/JournalRecommendList.tsx
Unescape View File

@ -0,0 +1,27 @@
import Link from 'next/link';
import JournalRecommendCard from './JournalRecommendCard';
interface Props {
list: JournalInfo[];
}
const JournalRecommendList = async ({ list }: Props) => {
return (
<div className="flex flex-col">
{/* 分类 & 电台 */}
<div className="text-[17px] leading-[23.8px]">热门推荐</div>
{/* 期刊 list */}
<div className="flex flex-col gap-[30px] mt-[17px]">
{!!list?.length &&
list.map((item: JournalInfo) => (
<Link key={item.id} href={`/vol/${item.journalNo}`}>
<JournalRecommendCard key={item.id} {...item} />
</Link>
))}
</div>
</div>
);
};
export default JournalRecommendList;

4
src/components/index.ts
Unescape View File

@ -14,8 +14,8 @@ export { default as LoginForm } from './Login/LoginForm';
export { default as JournalItem } from './Journal/JournalItem';
export { default as JournalCard } from './Journal/JournalCard';
export { default as JournalList } from './Journal/JournalList';
export { default as HotJournalCard } from './Journal/HotJournalCard';
export { default as HotJournalList } from './Journal/HotJournalList';
export { default as JournalRecommendCard } from './Journal/JournalRecommendCard';
export { default as JournalRecommendList } from './Journal/JournalRecommendList';
// Common
export { default as Input } from './common/Input';

26
src/services/server/journal.ts
Unescape View File

@ -36,7 +36,7 @@ export const apiJournalList: (params: {
/**
* @description 查询标签信息
*/
export const apiSearchCategory: () => Promise<FetchResponse<Category[]>> = async () => {
export const apiSearchCategoryList: () => Promise<FetchResponse<Category[]>> = async () => {
const request = new Request('http://localhost', {
method: 'GET',
headers: {
@ -47,17 +47,33 @@ export const apiSearchCategory: () => Promise<FetchResponse<Category[]>> = async
return res;
};
/**
* @description 根据收藏数推荐8期
* @id 期刊号
*/
export const apiGetJournalRecommendWithCollect: () => Promise<FetchResponse<JournalInfo[]>> = async () => {
const request = new Request('http://localhost', {
method: 'GET',
headers: {
requestUrl: `/music/journal/recommend`,
},
});
const res = await serverHttp.get(request);
return res;
};
/**
* @description 根据当前期刊的期刊号推荐6期类似期刊
* @id 期刊号
*/
export const apiJournalRecommend: (params: { id: string }) => Promise<FetchResponse<JournalInfo[]>> = async ({
id,
}) => {
export const apiGetJournalRecommendById: (params: {
id: string;
limit: number;
}) => Promise<FetchResponse<JournalInfo[]>> = async ({ id, limit }) => {
const request = new Request('http://localhost', {
method: 'GET',
headers: {
requestUrl: `/music/journal/recommend/${id}`,
requestUrl: `/music/journal/recommend/${id}/${limit}`,
},
});
const res = await serverHttp.get(request);

2
src/types/reqeust.d.ts vendored
Unescape View File

@ -85,6 +85,8 @@ declare interface JournalInfo {
totalCommentReply: string;
/** 期刊总评论数 int */
totalCommentReplyInt: number;
/** 期刊总收藏数 int */
userCollectCount: number;
}
/**

Write Preview
Loading…
Cancel
Save