optimize pt structure

src/app.config.ts

@@ -6,6 +6,7 @@ export default defineAppConfig({
     'pages/user/myTicket/myTicket',
     'pages/user/inform/inform',
     'pages/user/settings/settings',
+    'pages/user/settings/about/about',
     'pages/user/report/report',
   ],
   window: {

src/custom-tab-bar/index.tsx

@@ -3,19 +3,20 @@ import { AtTabBar } from 'taro-ui';
 import Taro from '@tarojs/taro';
 import 'taro-ui/dist/style/index.scss';
 import './index.scss';
+import pt from '@/plain-text';
 
 const navList: Array<Taro.TabBarItem> = [
   {
     pagePath: '/pages/index/index',
-    text: '主页',
+    text: pt.get().tabBar.indexText,
   },
   {
     pagePath: '/pages/repair/repair',
-    text: '维修',
+    text: pt.get().tabBar.repairText,
   },
   {
     pagePath: '/pages/user/user',
-    text: '我的',
+    text: pt.get().tabBar.userText,
   },
 ];
 
@@ -24,15 +25,15 @@ export default class Index extends Component {
     selected: 0,
     tabList: [
       {
-        title: '主页',
+        title: pt.get().tabBar.indexText,
         iconType: 'home',
       },
       {
-        title: '维修',
+        title: pt.get().tabBar.repairText,
         iconType: 'settings',
       },
       {
-        title: '我的',
+        title: pt.get().tabBar.userText,
         iconType: 'user',
       },
     ],

src/pages/user/inform/inform.tsx

@@ -1,12 +1,15 @@
 import { Component, ReactNode } from 'react';
-import { AtForm, AtInput, AtButton } from 'taro-ui';
+import { AtForm, AtInput, AtButton, AtMessage } from 'taro-ui';
 import './inform.scss';
+import Taro from '@tarojs/taro';
+import pt from '@/plain-text';
 
 export default class InformPage extends Component {
   state = {
     phone: '',
     name: '',
     isLoading: false,
+    isDisable: false,
   };
   handleChangePhone(phone: string) {
     this.setState({
@@ -23,11 +26,21 @@ export default class InformPage extends Component {
   onSubmit() {
     this.setState({
       isLoading: true,
+      isDisable: true,
     });
     console.log(this.state.name, this.state.phone);
     this.setState({
       isLoading: false,
     });
+    Taro.atMessage({
+      message: pt.get().informPage.submitText.success,
+      type: 'success',
+    });
+    setTimeout(() => {
+      this.setState({
+        isDisable: false,
+      });
+    }, 5000);
   }
   onReset() {
     this.setState({
@@ -42,20 +55,21 @@ export default class InformPage extends Component {
         onSubmit={this.onSubmit.bind(this)}
         onReset={this.onReset.bind(this)}
       >
+        <AtMessage />
         <AtInput
           name='phone'
-          title='手机号码'
+          title={pt.get().informPage.phoneText.title}
           type='text'
-          placeholder='便于查询工单'
+          placeholder={pt.get().informPage.phoneText.placeholder}
           value={this.state.phone}
           onChange={this.handleChangePhone.bind(this)}
         />
         <AtInput
           required
           name='name'
-          title='真实姓名'
+          title={pt.get().informPage.nameText.title}
           type='text'
-          placeholder='必填，与工单绑定'
+          placeholder={pt.get().informPage.nameText.placeholder}
           value={this.state.name}
           onChange={this.handleChangeName.bind(this)}
         />
@@ -63,11 +77,12 @@ export default class InformPage extends Component {
           loading={this.state.isLoading}
           formType='submit'
           type='primary'
+          disabled={this.state.isDisable}
         >
-          提交
+          {pt.get().informPage.buttonText.submit}
         </AtButton>
         <AtButton formType='reset' type='secondary'>
-          清空
+          {pt.get().informPage.buttonText.reset}
         </AtButton>
       </AtForm>
     );

src/pages/user/report/report.tsx

@@ -1,11 +1,14 @@
-import { AtTextarea, AtButton, AtForm } from 'taro-ui';
+import { AtTextarea, AtButton, AtForm, AtMessage } from 'taro-ui';
 import { Component, ReactNode } from 'react';
 import './report.scss';
+import Taro from '@tarojs/taro';
+import pt from '@/plain-text';
 
 export default class SettingsPage extends Component {
   state = {
     report: '',
     isLoading: false,
+    isDisable: false,
   };
   handleChange(report: string) {
     this.setState({
@@ -15,11 +18,21 @@ export default class SettingsPage extends Component {
   onSubmit() {
     this.setState({
       isLoading: true,
+      isDisable: true,
     });
     console.log(this.state.report);
     this.setState({
       isLoading: false,
     });
+    Taro.atMessage({
+      message: '提交成功',
+      type: 'success',
+    });
+    setTimeout(() => {
+      this.setState({
+        isDisable: false,
+      });
+    }, 5000);
   }
   onReset() {
     this.setState({
@@ -32,21 +45,23 @@ export default class SettingsPage extends Component {
         onSubmit={this.onSubmit.bind(this)}
         onReset={this.onReset.bind(this)}
       >
+        <AtMessage />
         <AtTextarea
           value={this.state.report}
           onChange={this.handleChange.bind(this)}
           maxLength={200}
-          placeholder='无论是有关于小程序的建议，还是关于E志者协会的建议，都可以提出来哦！'
+          placeholder={pt.get().reportPage.placeHolderText}
         />
         <AtButton
           loading={this.state.isLoading}
           formType='submit'
           type='primary'
+          disabled={this.state.isDisable}
         >
-          提交
+          {pt.get().reportPage.buttonText.submit}
         </AtButton>
         <AtButton formType='reset' type='secondary'>
-          清空
+          {pt.get().reportPage.buttonText.reset}
         </AtButton>
       </AtForm>
     );

src/pages/user/settings/about/about.config.ts

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

src/pages/user/settings/about/about.tsx

@@ -0,0 +1,9 @@
+import { Component, ReactNode } from 'react';
+import './about.scss';
+import { View } from '@tarojs/components';
+
+export default class SettingsPage extends Component {
+  render(): ReactNode {
+    return <View></View>;
+  }
+}

src/pages/user/settings/settings.tsx

@@ -1,16 +1,70 @@
-import { AtButton } from 'taro-ui';
+import { AtButton, AtList, AtListItem } from 'taro-ui';
 import { Component, ReactNode } from 'react';
 import './settings.scss';
+import Taro from '@tarojs/taro';
+import { View, Picker } from '@tarojs/components';
+import pt, { Lang } from '@/plain-text';
 
 export default class SettingsPage extends Component {
+  showLangDict: Record<string, Lang> = {
+    简体中文: 'zh_CN',
+    English: 'en_US',
+  };
+
+  reversedShowLangDict: Record<Lang, string> = {
+    zh_CN: '简体中文',
+    en_US: 'English',
+  };
+
+  state = {
+    selector: ['简体中文', 'English'],
+    selectorChecked: this.reversedShowLangDict[pt.getCurLang()],
+  };
+
+  onSelect = (e: { detail: { value: string | number } }) => {
+    this.setState({
+      selectorChecked: this.state.selector[e.detail.value],
+    });
+    pt.setLang(this.showLangDict[this.state.selector[e.detail.value]]);
+    Taro.reLaunch({
+      url: '/pages/index/index',
+    });
+  };
+
   handleQuit() {
     console.log('Quit');
   }
+
+  handleAbout() {
+    Taro.navigateTo({
+      url: '/pages/user/settings/about/about',
+    });
+  }
   render(): ReactNode {
     return (
-      <AtButton type='primary' onClick={this.handleQuit.bind(this)}>
-        退出账号
+      <View>
+        <View>
+          <Picker
+            mode='selector'
+            range={this.state.selector}
+            onChange={this.onSelect}
+          >
+            <AtList>
+              <AtListItem
+                title='语言 / Language'
+                extraText={this.state.selectorChecked}
+              />
+            </AtList>
+          </Picker>
+        </View>
+        <AtButton type='secondary' onClick={this.handleAbout.bind(this)}>
+          {pt.get().settingsPage.aboutText}
         </AtButton>
+
+        <AtButton type='primary' onClick={this.handleQuit.bind(this)}>
+          {pt.get().settingsPage.quitText}
+        </AtButton>
+      </View>
     );
   }
 }

src/pages/user/user.tsx

@@ -4,6 +4,8 @@ import Taro from '@tarojs/taro';
 import type CustomTabBar from '../../custom-tab-bar';
 import './user.scss';
 import { AtList, AtListItem } from 'taro-ui';
+import PageFooter from '@/components/PageFooter/PageFooter';
+import pt from '@/plain-text';
 
 export default class UserPage extends Component {
   // 以下是TabBar相关
@@ -43,36 +45,37 @@ export default class UserPage extends Component {
       <View>
         <AtList>
           <AtListItem
-            title='我的工单'
-            note='在这里查看历史工单！'
+            title={pt.get().userPage.ticketColumn.title}
+            note={pt.get().userPage.ticketColumn.note}
             arrow='right'
             iconInfo={{ size: 25, color: '#E69966', value: 'clock' }}
             onClick={this.myTicketPage}
           />
           <AtListItem
-            title='我的信息'
-            note='能帮助亦可更好地找到你哦！'
+            title={pt.get().userPage.infoColumn.title}
+            note={pt.get().userPage.infoColumn.note}
             arrow='right'
             iconInfo={{ size: 25, color: '#78A4FA', value: 'user' }}
             onClick={this.informPage}
           />
           <AtListItem
-            title='设置'
-            note='配置小程序'
+            title={pt.get().userPage.settingsColumn.title}
+            note={pt.get().userPage.settingsColumn.note}
             extraText=''
             arrow='right'
             iconInfo={{ size: 25, color: '#808080', value: 'filter' }}
             onClick={this.settingsPage}
           />
           <AtListItem
-            title='意见反馈'
-            note='有什么想说的都可以告诉我们哦！'
+            title={pt.get().userPage.reportColumn.title}
+            note={pt.get().userPage.reportColumn.note}
             extraText=''
             arrow='right'
             iconInfo={{ size: 25, color: '#9ACD32', value: 'message' }}
             onClick={this.reportPage}
           />
         </AtList>
+        <PageFooter />
       </View>
     );
   }

src/plain-text/InformPage.ts

@@ -0,0 +1,53 @@
+export interface InformPageText {
+  submitText: {
+    success: string;
+  };
+  phoneText: {
+    title: string;
+    placeholder: string;
+  };
+  nameText: {
+    title: string;
+    placeholder: string;
+  };
+  buttonText: {
+    submit: string;
+    reset: string;
+  };
+}
+
+export const informPageZhCn: InformPageText = {
+  submitText: {
+    success: '提交成功',
+  },
+  phoneText: {
+    title: '手机号码',
+    placeholder: '便于查询工单',
+  },
+  nameText: {
+    title: '真实姓名',
+    placeholder: '必填，与工单绑定',
+  },
+  buttonText: {
+    submit: '提交',
+    reset: '清空',
+  },
+};
+
+export const informtPageEnUs: InformPageText = {
+  submitText: {
+    success: 'Success',
+  },
+  phoneText: {
+    title: 'Phone',
+    placeholder: '便于查询工单',
+  },
+  nameText: {
+    title: 'Real Name',
+    placeholder: '必填，与工单绑定',
+  },
+  buttonText: {
+    submit: 'Submit',
+    reset: 'Reset',
+  },
+};

src/plain-text/MainPage.ts

@@ -75,3 +75,52 @@ export const mainPageZhCn: MainPageText = {
     },
   },
 };
+
+export const mainPageEnUs: MainPageText = {
+  mainTitleLine: '您好，这里是E志者协会',
+  subTitleLine: '维修请至【东三-204】实验室',
+  cardTitle: {
+    dutyInfo: '204值班情况',
+    stepInfo: '维修步骤',
+    tipsInfo: '注意事项',
+  },
+  expandTitle: {
+    stepInfo: '查看维修步骤',
+    tipsInfo: '查看注意事项',
+  },
+  stepList: [
+    { title: '线上填写工单' },
+    { title: '去`东三-204`实验室维修电脑' },
+    { title: '等待电脑维修' },
+    { title: '维修结束，取回电脑' },
+  ],
+  tipsList: [
+    { title: '戴尔、Surface、外星人、苹果电脑不能拆机哦~' },
+    { title: '数据无价，请随时做好数据备份哦~' },
+    { title: '204也是实验室，请遵守实验室纪律，请勿饮食~' },
+    { title: '我们是志愿服务，不收任何礼物哦~' },
+  ],
+  dutyCard: {
+    offDuty: {
+      title: '未值班',
+      reason: s => '值班停止原因：' + s,
+      recoverTime: t => '恢复值班时间：' + t,
+    },
+    inDuty: {
+      title: '值班中',
+      currentDutyText: c => {
+        switch (c) {
+          case 'off':
+            return '当前未值班';
+          case '1':
+            return '第一班 13:30-16:00';
+          case '2':
+            return '第二班 16:00-18:00';
+          case '3':
+            return '第三班 18:00-20:30';
+        }
+      },
+      inDutyCnt: n => '当前值班人数：' + n,
+    },
+  },
+};

src/plain-text/PageFooter.ts

@@ -5,3 +5,7 @@ export interface PageFooterText {
 export const pageFooterZhCn: PageFooterText = {
   dividerText: 'EVA Notify',
 };
+
+export const pageFooterEnUs: PageFooterText = {
+  dividerText: 'EVA Notify',
+};

src/plain-text/ReportPage.ts

@@ -0,0 +1,25 @@
+export interface ReportPageText {
+  placeHolderText: string;
+  buttonText: {
+    submit: string;
+    reset: string;
+  };
+}
+
+export const reportPageZhCn: ReportPageText = {
+  placeHolderText:
+    '无论是有关于小程序的建议，还是关于E志者协会的建议，都可以提出来哦！',
+  buttonText: {
+    submit: '提交',
+    reset: '清空',
+  },
+};
+
+export const reportPageEnUs: ReportPageText = {
+  placeHolderText:
+    '无论是有关于小程序的建议，还是关于E志者协会的建议，都可以提出来哦！',
+  buttonText: {
+    submit: 'Submit',
+    reset: 'Reset',
+  },
+};

src/plain-text/SettingsPage.ts

@@ -0,0 +1,14 @@
+export interface SettingsPageText {
+  aboutText: string;
+  quitText: string;
+}
+
+export const settingsPageZhCn: SettingsPageText = {
+  aboutText: '关于 EVA Notify',
+  quitText: '退出账号',
+};
+
+export const settingsPageEnUs: SettingsPageText = {
+  aboutText: 'About EVA Notify',
+  quitText: 'Log Out',
+};

src/plain-text/TabBar.ts

@@ -0,0 +1,17 @@
+export interface TabBarText {
+  indexText: string;
+  repairText: string;
+  userText: string;
+}
+
+export const tabBarZhCn: TabBarText = {
+  indexText: '主页',
+  repairText: '维修',
+  userText: '我的',
+};
+
+export const tabBarEnUs: TabBarText = {
+  indexText: 'Home',
+  repairText: 'Repair',
+  userText: 'Account',
+};

src/plain-text/UserPage.ts

@@ -0,0 +1,62 @@
+export interface UserPageText {
+  mainTitleLine: string;
+  subTitleLine: string;
+  ticketColumn: {
+    title: string;
+    note: string;
+  };
+  infoColumn: {
+    title: string;
+    note: string;
+  };
+  settingsColumn: {
+    title: string;
+    note: string;
+  };
+  reportColumn: {
+    title: string;
+    note: string;
+  };
+}
+
+export const userPageZhCn: UserPageText = {
+  mainTitleLine: '您好，这里是E志者协会',
+  subTitleLine: '维修请至【东三-204】实验室',
+  ticketColumn: {
+    title: '我的工单',
+    note: '在这里查看历史工单！',
+  },
+  infoColumn: {
+    title: '我的信息',
+    note: '能帮助亦可更好地找到你哦！',
+  },
+  settingsColumn: {
+    title: '应用设置',
+    note: '在这里配置小程序',
+  },
+  reportColumn: {
+    title: '意见反馈',
+    note: '有什么想说的都可以告诉亦可哦！',
+  },
+};
+
+export const userPageEnUs: UserPageText = {
+  mainTitleLine: '您好，这里是E志者协会',
+  subTitleLine: '维修请至【东三-204】实验室',
+  ticketColumn: {
+    title: '我的工单',
+    note: '在这里查看历史工单！',
+  },
+  infoColumn: {
+    title: '我的信息',
+    note: '能帮助亦可更好地找到你哦！',
+  },
+  settingsColumn: {
+    title: 'Settings',
+    note: '在这里配置小程序',
+  },
+  reportColumn: {
+    title: '意见反馈',
+    note: '有什么想说的都可以告诉亦可哦！',
+  },
+};

src/plain-text/index.ts

@@ -1,25 +1,56 @@
-import { PageFooterText, pageFooterZhCn } from './PageFooter';
-import { MainPageText, mainPageZhCn } from './MainPage';
+import { PageFooterText, pageFooterZhCn, pageFooterEnUs } from './PageFooter';
+import { MainPageText, mainPageZhCn, mainPageEnUs } from './MainPage';
+import { UserPageText, userPageZhCn, userPageEnUs } from './UserPage';
+import { TabBarText, tabBarEnUs, tabBarZhCn } from './TabBar';
+import {
+  SettingsPageText,
+  settingsPageEnUs,
+  settingsPageZhCn,
+} from './SettingsPage';
+import { ReportPageText, reportPageEnUs, reportPageZhCn } from './ReportPage';
+import { InformPageText, informPageZhCn, informtPageEnUs } from './InformPage';
 
 interface TextRecord {
   pageFooter: PageFooterText;
   mainPage: MainPageText;
+  userPage: UserPageText;
+  tabBar: TabBarText;
+  settingsPage: SettingsPageText;
+  reportPage: ReportPageText;
+  informPage: InformPageText;
 }
 
 const textZhCn: TextRecord = {
   pageFooter: pageFooterZhCn,
   mainPage: mainPageZhCn,
+  userPage: userPageZhCn,
+  tabBar: tabBarZhCn,
+  settingsPage: settingsPageZhCn,
+  reportPage: reportPageZhCn,
+  informPage: informPageZhCn,
+};
+
+const textEnUs: TextRecord = {
+  pageFooter: pageFooterEnUs,
+  mainPage: mainPageEnUs,
+  userPage: userPageEnUs,
+  tabBar: tabBarEnUs,
+  settingsPage: settingsPageEnUs,
+  reportPage: reportPageEnUs,
+  informPage: informtPageEnUs,
 };
 
 // type Lang = 'zh_CN' | 'en_US' | ...;
-type Lang = 'zh_CN';
+export type Lang = 'zh_CN' | 'en_US';
 
 class PlainText {
   private readonly textZhCn: TextRecord;
+  private readonly textEnUs: TextRecord;
   private lang: Lang;
 
   constructor() {
     this.textZhCn = textZhCn;
+    this.textEnUs = textEnUs;
     this.lang = 'zh_CN';
   }
 
@@ -30,9 +61,15 @@ class PlainText {
   get(): TextRecord {
     if (this.lang == 'zh_CN') {
       return this.textZhCn;
+    } else if (this.lang == 'en_US') {
+      return this.textEnUs;
     }
     return this.textZhCn;
   }
+
+  getCurLang(): Lang {
+    return this.lang;
+  }
 }
 
 const pt = new PlainText();