feat: 期刊页面

postcss.config.js

@@ -22,7 +22,7 @@ module.exports = {
       viewportUnit: 'vw',
       fontViewportUnit: 'vw',
       selectorBlackList: [],
-      minPixelValue: 1,
+      minPixelValue: 0,
       mediaQuery: false,
       replace: true,
       exclude: undefined,

src/app/download/page.tsx

@@ -1,3 +1,6 @@
+/**
+ * 下载 App 页面
+ */
 'use client';
 
 import Image from 'next/image';

src/app/journal/page.tsx

@@ -0,0 +1,96 @@
+/**
+ * 期刊页面
+ */
+import Image from 'next/image';
+
+import ArticalWrap from '@/components/ArticalWrap';
+import SongItem from '@/components/SongItem';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = { title: '雀乐期刊' };
+
+async function getJournalInfo(journalId: string) {
+  const res = await fetch(`http://39.103.180.196:9012/luoo-music/journal/${journalId}`);
+  return res.json();
+}
+
+async function getSongList(journalId: string) {
+  const res = await fetch(`http://39.103.180.196: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;
+  return (
+    <main className="max-w-screen-sm min-h-screen mx-auto flex flex-col items-center font-normal text-[#000000f2] bg-white">
+      <div className="flex items-center w-full bg-[#000000f2] text-[#ffffffb2] text-[14px] py-[12px] px-[18px]">
+        <Image className="w-[28px] h-[28px]" width={28} height={28} src="/img/app_icon_white_bg.svg" alt="queyue" />
+        <span className="flex-1 pl-[12px]">邀你一起来【雀乐】听歌</span>
+        <Image className="w-[24px] h-[24px]" width={24} height={24} src="/img/jourrnal_icon-5.svg" alt="right-arrow" />
+      </div>
+
+      {/* 期刊封面图 */}
+      <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]">
+        <Image
+          className="w-[60px] h-[60px] absolute top-[-30px] right-[16px]"
+          width={60}
+          height={60}
+          unoptimized
+          src="/img/icon_pause.png"
+          alt="icon_pause"
+        />
+        <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} />
+
+        <h5 className="mb-[12px] text-[#000000f2] text-[15px] h-[18px]">共{songList?.length}首</h5>
+        {songList?.map((song: ISong) => <SongItem key={song.id} data={song} />)}
+      </section>
+
+      <section className="w-full flex items-center border-t-[1px] border-[#00000019] pt-[14px] pb-[35px] px-[18px]">
+        <div className="w-[294px] h-[38px] rounded-full bg-[#0000000c] px-[24px] flex items-center text-[15px] text-[#000000b2]">
+          说点想说的
+        </div>
+        <div className="relative ml-[14px]">
+          <Image
+            className="w-[24px] h-[24px]"
+            width={24}
+            height={24}
+            unoptimized
+            src="/img/icon_comment.png"
+            alt="icon_comment"
+          />
+          <div className="absolute top-0 left-[100%] text-[8px] text-[#00000066]">{journalInfo?.totalCommentReply}</div>
+        </div>
+      </section>
+    </main>
+  );
+}

src/app/layout.tsx

@@ -1,5 +1,3 @@
-import { RegularFont } from '@/utils/font';
-
 import type { Metadata, Viewport } from 'next';
 
 import './globals.css';
@@ -20,7 +18,7 @@ export const viewport: Viewport = {
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="zn-ch" className={RegularFont.className}>
+    <html lang="zh-cn">
       <body>{children}</body>
     </html>
   );

src/app/page.tsx

@@ -6,6 +6,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 import AppLogo from '@/components/AppLogo';
+import WXShareBtn from '@/components/WXComponent/WXShareBtn';
 
 import { download } from '@/utils/download';
 
@@ -15,10 +16,6 @@ export default function Home() {
   const firstScreenRef = useRef<HTMLDivElement>(null);
   const { inWX } = useUA();
 
-  const handleShare = () => {
-    alert('正在开发中，敬请期待');
-  };
-
   const handleDownload = () => {
     download();
   };
@@ -28,6 +25,7 @@ export default function Home() {
   };
 
   return (
+    <>
       <main className="max-w-screen-sm min-h-screen mx-auto flex flex-col items-center text-white font-normal">
         {/* 首屏 */}
         <div
@@ -41,19 +39,9 @@ export default function Home() {
           <AppLogo className="absolute top-[22%]" />
 
           <div className="w-full flex flex-col items-center absolute bottom-0">
-          <button
+            {/* 分享 */}
-            className="w-[283px] h-[48px] flex items-center justify-center bg-[#000000f2] font-medium text-[17px] rounded-full mb-[16px]"
+            <WXShareBtn />
-            onClick={handleShare}
+            {/* 下载 */}
-          >
-            <Image
-              className="w-[24px] h-[24px] mr-[6px]"
-              width={24}
-              height={24}
-              src="/img/index_weChatIcon.svg"
-              alt="wx-share"
-            />
-            <span>分享给好友</span>
-          </button>
             <button
               className="w-[283px] h-[48px] flex items-center justify-center bg-[#B44343] font-medium text-[17px] rounded-full mb-[16px]"
               onClick={handleDownload}
@@ -171,5 +159,6 @@ export default function Home() {
           </div>
         </div>
       </main>
+    </>
   );
 }

src/components/ArticalWrap/index.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useState } from 'react';
+
+import Image from 'next/image';
+
+const Icon = ({ name }: { name: string }) => (
+  <Image
+    className="w-[24px] h-[24px] ml-[1px]"
+    width={24}
+    height={24}
+    unoptimized
+    src={`/img/${name}.png`}
+    alt={name}
+  />
+);
+
+export default function ArticalWrap(props: { content?: any }) {
+  const { content } = props;
+  const [isFold, setIsFold] = useState(true);
+  const handleToggle = () => {
+    setIsFold(!isFold);
+  };
+  return (
+    <div className="relative text-[#000000b2] text-[15px] mt-[15px] mb-[36px]">
+      <article
+        className={`leading-[25px] overflow-hidden ${isFold && 'h-[96px]'}`}
+        dangerouslySetInnerHTML={{ __html: content }}
+      />
+      {isFold && (
+        <div className="absolute w-full h-[96px] top-0 left-0 bg-gradient-to-b from-[#ffffff00] to-[#fffffff2]" />
+      )}
+      <div className="relative flex items-center text-[15px] pt-[17px]" onClick={handleToggle}>
+        {isFold ? (
+          <>
+            展开
+            <Icon name="icon_arrow_down" />
+          </>
+        ) : (
+          <>
+            收起
+            <Icon name="icon_arrow_up" />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/SongItem/index.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import Image from 'next/image';
+
+export default function SongItem(props: { data: ISong }) {
+  const { pic, title, artist } = props?.data || {};
+  const handleClick = () => {
+    // TODO:
+  };
+  return (
+    <div className="flex items-center py-[12px]" onClick={handleClick}>
+      <Image className="w-[48px] h-[48px]" width={48} height={48} unoptimized src={pic} alt="歌曲封面" />
+      <div className="flex flex-1 flex-col pl-[15px] pr-[15px] overflow-hidden">
+        <div className="font-medium text-[15px] leading-[21px] mb-[2px] text-[#000000f2] truncate">{title}</div>
+        <div className="text-[12px] leading-[16.8px] text-[#000000b2] truncate">{artist}</div>
+      </div>
+      <Image className="w-[24px] h-[24px]" width={24} height={24} unoptimized src="/img/icon_song_dot.png" alt="dot" />
+    </div>
+  );
+}

src/components/WXComponent/WXShareBtn.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import Image from 'next/image';
+
+// import { APPID } from '@/const';
+import useUA from '@/hooks/useUA';
+
+export default function WXShareBtn() {
+  const { inWX } = useUA();
+
+  const handleShare = () => {
+    alert('敬请期待');
+  };
+
+  useEffect(() => {
+    if (!inWX) return;
+    const { searchParams } = new URL(window.location.href);
+    const code = searchParams.get('code');
+    if (code) {
+      // 已授权
+      // wx.config({
+      //   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+      //   appId: '', // 必填，公众号的唯一标识
+      //   timestamp: 0, // 必填，生成签名的时间戳
+      //   nonceStr: '', // 必填，生成签名的随机串
+      //   signature: '', // 必填，签名
+      //   jsApiList: [wx.updateAppMessageShareData], // 必填，需要使用的JS接口列表
+      // });
+      // wx.ready(function () {
+      //   //需在用户可能点击分享按钮前就先调用
+      //   wx.updateAppMessageShareData({
+      //     title: '', // 分享标题
+      //     desc: '', // 分享描述
+      //     link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+      //     imgUrl: '', // 分享图标
+      //     success: function () {
+      //       // 设置成功
+      //     },
+      //   });
+      // });
+    } else {
+      // 未授权
+      // window.location.replace(
+      //   `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_base&state=code#wechat_redirect`,
+      // );
+    }
+  }, [inWX]);
+
+  return (
+    <button
+      className="w-[283px] h-[48px] flex items-center justify-center bg-[#000000f2] font-medium text-[17px] rounded-full mb-[16px]"
+      onClick={handleShare}
+    >
+      <Image
+        className="w-[24px] h-[24px] mr-[6px]"
+        width={24}
+        height={24}
+        src="/img/index_weChatIcon.svg"
+        alt="wx-share"
+      />
+      <span>分享给好友</span>
+    </button>
+  );
+}

src/const/index.ts

@@ -0,0 +1 @@
+export const APPID = 'wxae6fb76efa147314';

src/types/index.d.ts

@@ -1 +1,12 @@
-declare module 'lib-flexible';
+interface ISong {
+  id: string;
+  title: string;
+  artist: string;
+  album: string;
+  src: string;
+  pic: string;
+  lrc: string;
+  journalNo: string;
+  songNo: number;
+  haveCollect: boolean;
+}