add 404 page

src/app.config.ts

@@ -10,6 +10,7 @@ export default defineAppConfig({
     'pages/user/member/member',
     'pages/TicketDetail/TicketDetail',
     'pages/TicketList/TicketList',
+    'pages/404/404',
   ],
   window: {
     backgroundTextStyle: 'light',

src/app.ts

@@ -2,29 +2,13 @@ import { PropsWithChildren } from 'react';
 import { useLaunch } from '@tarojs/taro';
 import 'taro-ui/dist/style/index.scss';
 import './app.scss';
-import { checkLogin, checkToken } from './service/checkLogin';
-import wechatUser from './wechat';
-import { loginAte } from './service/login';
-import { getInfo } from './service/getInfo';
 import { pingAte } from './service/pingAte';
 
 function App({ children }: PropsWithChildren<any>) {
   useLaunch(() => {
     console.log('App launched.');
-    pingAte((res) => {
-      if (res) {
-        checkLogin((success) => {
-          if (success) {
-            wechatUser.setToken(checkToken());
-            getInfo();
-          } else {
-            loginAte();
-          }
+    pingAte();
   });
-      }
-    });
-  });
-
   // children 是将要会渲染的页面
   return children;
 }

src/pages/404/404.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  usingComponents: {},
+});

src/pages/404/404.tsx

@@ -0,0 +1,35 @@
+import { Component, ReactNode } from 'react';
+import { View } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import pt from '@/plain-text';
+import PageFooter from '@/components/PageFooter/PageFooter';
+import './404.scss';
+
+export default class NotFoundPage extends Component {
+  componentDidMount(): void {
+    Taro.setNavigationBarTitle({
+      title: pt.get().navBar.notFound,
+    });
+  }
+  render(): ReactNode {
+    return (
+      <View>
+        <View
+          className='page-title'
+          style={{ marginTop: '150rpx', marginBottom: '240rpx' }}
+        >
+          <View className='at-article__h1' style={{ fontWeight: 'bold' }}>
+            {pt.get().notFound.titleZhCn}
+          </View>
+          <View className='at-article__h2'>{pt.get().notFound.descZhCn}</View>
+          <View style={{ height: '150rpx' }}></View>
+          <View className='at-article__h1' style={{ fontWeight: 'bold' }}>
+            {pt.get().notFound.titleEnUs}
+          </View>
+          <View className='at-article__h2'>{pt.get().notFound.descEnUs}</View>
+        </View>
+        <PageFooter />
+      </View>
+    );
+  }
+}

src/plain-text/404.ts

@@ -0,0 +1,14 @@
+export interface NotFoundText {
+  titleZhCn: string;
+  titleEnUs: string;
+  descZhCn: string;
+  descEnUs: string;
+}
+
+export const notFound: NotFoundText = {
+  titleZhCn: '啊哦...请求出错了...',
+  descZhCn: '请确保处于校网环境后，点击右上角 "...-重新进入小程序"！',
+  titleEnUs: 'Oops...Network Error...',
+  descEnUs:
+    'Please make sure you\'re in ZJU\'s school network environment and then click on the top right corner "... - re-enter the applet"!',
+};

src/plain-text/NavBarTitle.ts

@@ -1,4 +1,5 @@
 export interface NavBarTitle {
+  notFound: string;
   ticketDetail: string;
   ticketList: string;
   user: {
@@ -12,6 +13,7 @@ export interface NavBarTitle {
 }
 
 export const navBarTitleZhCn: NavBarTitle = {
+  notFound: '连接失败',
   ticketDetail: '工单详情',
   ticketList: '所有工单',
   user: {
@@ -25,6 +27,7 @@ export const navBarTitleZhCn: NavBarTitle = {
 };
 
 export const navBarTitleEnUs: NavBarTitle = {
+  notFound: 'Failed',
   ticketDetail: 'Ticket Detail',
   ticketList: 'All Tickets',
   user: {

src/plain-text/index.ts

@@ -24,6 +24,7 @@ import {
   actIndicatorEnUs,
   actIndicatorZhCn,
 } from './ActIndicator';
+import { NotFoundText, notFound } from './404';
 
 interface TextRecord {
   common: CommonText;
@@ -44,6 +45,7 @@ interface TextRecord {
   modal: ModalText;
   toast: ToastText;
   actIndicator: ActIndicatorText;
+  notFound: NotFoundText;
 }
 
 const textZhCn: TextRecord = {
@@ -65,6 +67,7 @@ const textZhCn: TextRecord = {
   modal: modalZhCn,
   toast: toastZhCn,
   actIndicator: actIndicatorZhCn,
+  notFound: notFound,
 };
 
 const textEnUs: TextRecord = {
@@ -86,6 +89,7 @@ const textEnUs: TextRecord = {
   modal: modalEnUs,
   toast: toastEnUs,
   actIndicator: actIndicatorEnUs,
+  notFound: notFound,
 };
 
 // type Lang = 'zh_CN' | 'en_US' | ...;

src/service/pingAte.ts

@@ -1,7 +1,11 @@
 import Taro from '@tarojs/taro';
+import wechatUser from '@/wechat';
 import { getUrl } from '.';
+import { checkLogin, checkToken } from './checkLogin';
+import { loginAte } from './login';
+import { getInfo } from './getInfo';
 
-export function pingAte(callback: (success: boolean) => void) {
+export function pingAte() {
   Taro.request({
     url: getUrl('/ping'),
     method: 'GET',
@@ -9,10 +13,19 @@ export function pingAte(callback: (success: boolean) => void) {
   })
     .then((res) => {
       console.log(res.data);
-      callback(true);
+      checkLogin((success) => {
+        if (success) {
+          wechatUser.setToken(checkToken());
+          getInfo();
+        } else {
+          loginAte();
+        }
+      });
     })
     .catch((err) => {
       console.log(err.errMsg);
-      callback(false);
+      Taro.reLaunch({
+        url: '/pages/404/404',
+      });
     });
 }