Merge pull request #88 from MuxiKeStack/spzy-dev

✨ feat：新增官方消息静态

src/app.config.ts

@@ -47,8 +47,7 @@ export default defineAppConfig({
     'pages/personalPage/index',
     'pages/myCollection/index',
     'pages/evaluateCourseHistory/index',
-    'pages/messageNotification/index',
-    'pages/officialNotification/index',
+    'pages/notification/index',
     'pages/feedback/index',
     'pages/evaluate/evaluate',
     'pages/myclass/myclass',
@@ -64,7 +63,7 @@ export default defineAppConfig({
         pagePath: 'pages/main/index',
         text: 'Home',
       },
-      { pagePath: 'pages/messageNotification/index', text: 'Massage' },
+      { pagePath: 'pages/notification/index', text: 'Massage' },
       { pagePath: 'pages/personalPage/index', text: 'Profile' },
     ],
   },

src/custom-tab-bar/index.tsx

@@ -15,7 +15,7 @@ const TAB_LIST: Array<{ pagePath: string; name: string; icon?: string }> = [
   { pagePath: '/pages/main/index', name: 'Home', icon: 'streaming' },
   { pagePath: '/pages/main/index', name: 'Download', icon: 'download-cloud' },
   { pagePath: '/pages/main/index', name: '+' },
-  { pagePath: '/pages/messageNotification/index', name: 'Massage', icon: 'message' },
+  { pagePath: '/pages/notification/index', name: 'Massage', icon: 'message' },
   { pagePath: '/pages/personalPage/index', name: 'Profile', icon: 'user' },
 ];
 

src/pages/messageNotification/index.tsx → src/pages/notification/index.tsx

@@ -7,17 +7,22 @@ import './index.scss';
 // eslint-disable-next-line import/first
 import uniqueKeyUtil from '@/common/utils/keyGen';
 
-type Notification = {
+type Message = {
   username: string;
   eventType: boolean;
   description: string;
   comment: string;
   timestamp: string;
 };
 
-interface MessageNotificationProps {}
+interface OfficialProps {
+  title: string;
+  description?: string;
+}
+
+interface NotificationProps {}
 
-interface MessageProps extends Notification {}
+interface MessageProps extends Message {}
 
 interface TabBarProps {
   tab: string;
@@ -39,37 +44,6 @@ const Tabs: { name: string; icon: string }[] = [
   },
 ];
 
-const MessageNotification: React.FC<MessageNotificationProps> = memo(() => {
-  const [tab, setTab] = useState<string>('提问');
-  const [notification, setNotification] = useState<Notification>({
-    username: '昵称',
-    eventType: true,
-    description: '我正在回复你的评论',
-    comment: '这里是原评论内容',
-    timestamp: '2023年1月1日',
-  });
-
-  return (
-    <View className="flex h-[95vh] w-full flex-col items-center gap-4 overflow-y-scroll px-4 pt-2">
-      <TabBar tab={tab} setTab={setTab} />
-      <Message
-        username={notification.username}
-        eventType={notification.eventType}
-        description={notification.description}
-        comment={notification.comment}
-        timestamp={notification.timestamp}
-      />
-      <Message
-        username={notification.username}
-        eventType={false}
-        description={notification.description}
-        comment={notification.comment}
-        timestamp={notification.timestamp}
-      />
-    </View>
-  );
-});
-
 const TabBar: React.FC<TabBarProps> = memo(({ tab, setTab }) => (
   <View className="mb-2 flex w-full justify-evenly">
     {Tabs.map((item) => (
@@ -116,4 +90,79 @@ const Message: React.FC<MessageProps> = memo(
   )
 );
 
-export default MessageNotification;
+const ImageOfficial: React.FC<OfficialProps> = ({ title, description }) => (
+  <View className="flex h-[30vh] w-full flex-col overflow-hidden rounded-lg bg-[#f9f9f2]">
+    <View className="flex-[4] border-b-2 border-[#ffd777]"></View>
+    <View className="flex flex-1 flex-col gap-1 px-4 py-2">
+      <Text className="text-md">{title}</Text>
+      <Text className="text-sm text-[#565552]">{description}</Text>
+    </View>
+  </View>
+);
+
+const AlertOfficial: React.FC<OfficialProps> = ({ title }) => (
+  <View className="flex w-full items-center rounded-l-full rounded-r-full bg-[#f9f9f2] p-4 text-sm">
+    <Text className="text-sm text-[#f18900]">{title}</Text>
+  </View>
+);
+
+const Notification: React.FC<NotificationProps> = memo(() => {
+  const [tab, setTab] = useState<string>('提问');
+  const [notification, setNotification] = useState<Message>({
+    username: '昵称',
+    eventType: true,
+    description: '我正在回复你的评论',
+    comment: '这里是原评论内容',
+    timestamp: '2023年1月1日',
+  });
+  const [isImageDetail] = useState(true);
+  const [notificationTime] = useState('07:25');
+  const [notificationTitle] = useState('评课活动要开始了');
+  const [notificationDescription] = useState('摘要');
+  const [notificationAlert] = useState('您在高等数学下方的评论违规，请注意您的发言');
+
+  return (
+    <View className="flex h-[95vh] w-full flex-col items-center gap-4 overflow-y-scroll px-4 pt-2">
+      <TabBar tab={tab} setTab={setTab} />
+      {tab === '提问' && (
+        <Message
+          username={notification.username}
+          eventType={notification.eventType}
+          description={notification.description}
+          comment={notification.comment}
+          timestamp={notification.timestamp}
+        />
+      )}
+      {tab === '点赞' && (
+        <Message
+          username={notification.username}
+          eventType={false}
+          description={notification.description}
+          comment={notification.comment}
+          timestamp={notification.timestamp}
+        />
+      )}
+      {tab === '官方' && (
+        <>
+          <View className="flex w-full flex-col items-center gap-4">
+            <View className="text-xs text-gray-500">{notificationTime}</View>
+            {isImageDetail ? (
+              <ImageOfficial
+                title={notificationTitle}
+                description={notificationDescription}
+              />
+            ) : (
+              <AlertOfficial title={notificationAlert} />
+            )}
+          </View>
+          <View className="flex w-full flex-col items-center gap-4">
+            <View className="text-xs text-gray-500">{notificationTime}</View>
+            <AlertOfficial title={notificationAlert} />
+          </View>
+        </>
+      )}
+    </View>
+  );
+});
+
+export default Notification;