wrap up detailframework in atcard in repair page

.prettierrc

@@ -5,7 +5,7 @@
   "semi": true,
   "singleQuote": true,
   "proseWrap": "preserve",
-  "arrowParens": "avoid",
+  "arrowParens": "always",
   "bracketSpacing": true,
   "jsxSingleQuote": true,
   "endOfLine": "auto"

README.md

@@ -58,6 +58,7 @@
 ## 主页
 
 1.  信息显示
+    1. 不显示是哪一班，只显示今日值班时间
 2.  （协会成员）相关信息
 3.  提醒事项
 4.  如何联系到协会
@@ -68,8 +69,21 @@
 2.  维修进度提示
 3.  （面向协会成员）维修列表
 
+## 成员
+
+1. 最近七天内未取回的工单列表
+2. 值班组长上传本班相关信息
+3. 现在自己是否要值班（值班时间显示）
+
+
 ## 我的
 
 1.  更改手机号等个人信息（手机号可以填写多个）
 2.  （备选）修改用户名、头像
 3.  设置真名（可帮助预填写工单）
+
+# 主席团管理页面
+
+1. 值班表导入、更新
+2. 成员权限管理
+3. 特殊维修时间（如学园维修）、值班信息更新

mock/api.ts

@@ -1,5 +1,6 @@
 import mytickets from './mytickets.json';
 import ticketInfo from './ticketInfo.json';
+import uncompleted from './uncompleted.json';
 
 export default {
   'GET /dutyinfo': {
@@ -38,7 +39,7 @@ export default {
     success: true,
     data: mytickets,
   },
-  'GET /tickets/info/': {
+  'GET /tickets/info': {
     success: true,
     data: ticketInfo,
   },
@@ -51,4 +52,8 @@ export default {
   'POST /member/login': {
     data: {},
   },
+  'GET /member/tickets/uncompleted': {
+    success: true,
+    data: uncompleted,
+  },
 };

mock/mytickets.json

@@ -3,7 +3,7 @@
     {
       "id": 6830,
       "type": 1,
-      "status": 5,
+      "status": 2,
       "device": "主机",
       "deviceModel": "技嘉",
       "owner": "武技栏",

mock/ticketInfo.json

@@ -1,5 +1,5 @@
 {
-  "id": 6847,
+  "id": 6830,
   "type": 1,
   "device": "华硕",
   "deviceModel": "灵耀X14",
@@ -8,7 +8,7 @@
   "description": "清灰",
   "workers": [],
   "createdTime": "2024-03-07T19:52:48.523303",
-  "status": 5,
+  "status": 2,
   "isConfirmed": false,
   "notes": [
     {

mock/uncompleted.json

@@ -0,0 +1,15 @@
+{
+  "list": [
+    {
+      "id": 6832,
+      "type": 1,
+      "status": 2,
+      "device": "ROG",
+      "deviceModel": "幻 14 2022",
+      "owner": "晓洋",
+      "phone": "18888888887",
+      "createdTime": "2024-03-07T11:45:14.191981",
+      "isConfirmed": false
+    }
+  ]
+}

src/app.ts

@@ -1,26 +1,13 @@
 import { PropsWithChildren } from 'react';
-import Taro, { useLaunch } from '@tarojs/taro';
-import { getUrl } from '@/service';
-import pt from '@/plain-text';
+import { useLaunch } from '@tarojs/taro';
 import 'taro-ui/dist/style/index.scss';
 import './app.scss';
+import { getLocaleData } from './service/localeData';
 
 function App({ children }: PropsWithChildren<any>) {
   useLaunch(() => {
     console.log('App launched.');
-    Taro.request({
-      url: getUrl('/user/locale/get'),
-      method: 'GET',
-      data: {
-        token: 'token_test',
-      },
-    }).then(res => {
-      console.log(res.data);
-      pt.setLang(res.data.data.lang);
-      Taro.reLaunch({
-        url: '/pages/index/index',
-      });
-    });
+    getLocaleData();
   });
 
   // children 是将要会渲染的页面

src/assets/icons/RepairPage/repair.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710232513408" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4296" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><path d="M816.672 937.344c-8.192 0-16.384-3.136-22.624-9.376l-213.952-213.952c-12.512-12.512-12.512-32.736 0-45.248s32.736-12.512 45.248 0l191.328 191.328 33.408-33.376-190.848-190.848c-12.512-12.512-12.512-32.736 0-45.248s32.736-12.512 45.248 0l213.472 213.472c6.016 6.016 9.376 14.112 9.376 22.624s-3.36 16.64-9.376 22.624l-78.656 78.624C833.024 934.208 824.832 937.344 816.672 937.344z" fill="#5C636E" p-id="4297"></path><path d="M590.752 128c0-0.032 0-0.064 0-0.064 1.472-4.16 2.048-8.352 1.792-12.512 0 0 0 0 0 0 0 0-0.032-0.064-0.032-0.096-0.256-4.128-1.312-8.096-3.104-11.776-0.352-0.704-0.896-1.248-1.28-1.92-1.632-2.848-3.456-5.472-5.952-7.712-0.928-0.864-2.08-1.376-3.136-2.112-1.92-1.376-3.616-3.008-5.888-3.968-0.608-0.256-1.248-0.384-1.888-0.608-0.032 0-0.064-0.032-0.096-0.032-114.144-46.624-243.808-20.704-331.072 66.592C239.328 154.528 239.04 155.584 238.336 156.416 237.472 157.12 236.448 157.408 235.648 158.208L73.664 319.552c-6.016 6.016-9.408 14.144-9.408 22.656s3.36 16.64 9.376 22.656l98.304 98.304c6.016 6.016 14.144 9.376 22.624 9.376s16.64-3.36 22.624-9.376l56.032-56.032 68.192 68.224c6.24 6.24 14.432 9.376 22.624 9.376s16.384-3.136 22.624-9.376c12.512-12.48 12.512-32.736 0-45.248l-90.816-90.848c-12.512-12.512-32.736-12.512-45.248 0L194.56 395.296l-52.992-53.024 139.264-138.72c0.832-0.8 1.12-1.888 1.824-2.752 0.864-0.704 1.92-0.992 2.72-1.824 40-39.936 91.296-63.072 144.864-68.768-2.208 1.664-4.384 3.392-6.56 5.12-8.96 6.784-17.632 14.016-25.664 22.048-0.544 0.544-0.736 1.248-1.216 1.824-19.232 19.36-35.936 41.024-49.568 64.512-2.464 4.224-4.768 8.448-7.008 12.736l0.416 0.224c-12.288 24.64-12.288 53.664 0.48 78.144 1.536 2.944 3.52 5.504 5.76 7.744 0.768 0.96 1.088 2.112 1.984 2.976l70.432 70.464c6.24 6.24 14.432 9.376 22.624 9.376s16.384-3.136 22.624-9.376c12.512-12.48 12.512-32.736 0-45.248l-67.072-67.072c-2.624-6.112-2.688-13.024 0.448-18.976 0.16-0.288 0.128-0.608 0.256-0.896 1.44-2.656 2.848-5.344 4.384-7.968 11.008-18.944 24.48-36.448 40.064-52.032 4.096-4.096 8.608-7.648 12.96-11.456 30.144-25.28 67.232-40.864 106.816-43.136 0.576-0.032 1.056-0.352 1.632-0.416 3.616-0.384 7.104-1.184 10.368-2.72 0.512-0.256 0.896-0.64 1.376-0.896 3.168-1.696 6.048-3.776 8.512-6.496 0.256-0.288 0.384-0.64 0.608-0.928 2.08-2.464 4.128-4.928 5.44-8.064C590.624 129.12 590.528 128.544 590.752 128z" fill="#5C636E" p-id="4298"></path><path d="M289.536 960.032c-28.384 0-56.928-6.368-82.624-18.432-9.408-4.448-16.096-13.184-17.888-23.456-1.792-10.24 1.504-20.736 8.896-28.128l88.064-88.096-33.056-33.024-87.52 87.488c-7.424 7.424-18.048 10.848-28.384 8.832-10.336-1.888-19.104-8.704-23.392-18.304-32.736-72.64-17.088-159.072 38.944-215.104 50.048-50.08 126.048-68.384 193.952-47.04l238.688-238.72c-21.28-67.712-3.648-143.264 47.04-193.952 36.128-36.16 84.256-56.064 135.456-56.064 27.264 0 54.816 5.92 79.648 17.12 9.568 4.32 16.448 13.056 18.304 23.392 1.92 10.336-1.408 20.96-8.832 28.384l-88.8 88.8 33.024 33.056 89.376-89.344c7.392-7.392 17.92-10.72 28.128-8.896 10.272 1.792 19.04 8.48 23.456 17.888 34.496 73.376 19.424 160.96-37.536 217.92-36.096 36.096-84.128 56-135.296 56-20.704 0-41.536-3.392-61.216-9.952l-237.12 237.12c22.688 68.48 5.44 145.024-46.048 196.544C388.736 940.16 340.672 960.032 289.536 960.032zM282.592 895.84c36.352 2.112 71.36-11.392 96.992-37.024 37.952-37.952 47.936-96.384 24.864-145.408-5.76-12.224-3.232-26.72 6.336-36.256l266.816-266.848c9.536-9.536 24.032-12.032 36.256-6.336 47.936 22.56 108 12.544 145.408-24.864 25.952-25.92 38.784-61.408 36.992-96.96l-72.576 72.544c-6.016 6.016-14.112 9.376-22.624 9.376l0 0c-8.512 0-16.64-3.36-22.624-9.376L700.16 276.416c-12.512-12.512-12.512-32.736 0-45.248l71.04-71.04c-35.072-0.896-68.8 12.384-93.696 37.28-37.92 37.92-48.064 94.272-25.856 143.552 5.44 12.128 2.848 26.368-6.56 35.776l-267.936 267.968c-9.376 9.376-23.648 11.936-35.776 6.56-47.68-21.504-106.624-11.104-143.584 25.856-25.504 25.536-38.464 59.392-37.408 93.856l69.92-69.92c12.512-12.512 32.736-12.512 45.248 0l78.304 78.272c6.016 6.016 9.376 14.112 9.376 22.624 0 8.48-3.36 16.64-9.376 22.624L282.592 895.84z" fill="#5C636E" p-id="4299"></path></svg>

src/common.ts

@@ -0,0 +1 @@
+export type FixStatus = 1 | 2 | 3 | 4 | 5;

src/components/DetailFramework/DetailFramework.config.ts

@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};

src/components/DetailFramework/DetailFramework.tsx

@@ -0,0 +1,155 @@
+import { View } from '@tarojs/components';
+import { Component, ReactNode } from 'react';
+import Taro from '@tarojs/taro';
+import {
+  ShowElements,
+  TicketInfo,
+  TicketNote,
+} from '@/pages/TicketDetail/TicketNote';
+import pt from '@/plain-text';
+import { RequestState } from '@/service';
+import { getTicketInfo } from '@/service/ticketsInfo';
+import { FixStatus } from '@/common';
+import { AtCard, AtSteps } from 'taro-ui';
+import NoteList from '../NoteList/NoteList';
+
+interface StepItemData {
+  title: string;
+}
+
+const mapStatusStep: Map<FixStatus, 0 | 1 | 2 | 3> = new Map([
+  [1, 0],
+  [2, 1],
+  [3, 2],
+  [4, 2],
+  [5, 3],
+]);
+
+interface DetailFrameworkState {
+  current: number;
+  items: Array<StepItemData>;
+  ticketInfo: TicketInfo;
+  notes: Array<TicketNote>;
+  rs: RequestState;
+}
+
+interface DetailFrameworkProps {
+  middleButton: JSX.Element;
+  id: number;
+  isInfoShow: { [key: string]: boolean };
+}
+
+export default class DetailFramework extends Component<
+  DetailFrameworkProps,
+  DetailFrameworkState
+> {
+  state = {
+    current: 0,
+    items: [],
+    ticketInfo: new TicketInfo(),
+    notes: [new TicketNote()],
+    rs: new RequestState(),
+  };
+
+  componentDidMount(): void {
+    const navBar = pt.get().navBar;
+    Taro.setNavigationBarTitle({
+      title: navBar.ticketDetail,
+    });
+    getTicketInfo(this, this.props.id);
+  }
+
+  props: Readonly<DetailFrameworkProps> = {
+    middleButton: <View></View>,
+    id: 0,
+    isInfoShow: {
+      device: true,
+      createdTime: true,
+      description: true,
+      current: true,
+      notelist: true,
+      showAllNotes: true,
+    },
+  };
+
+  render(): ReactNode {
+    if (this.state.rs.loading) {
+      return <View>Loading</View>;
+    } else if (!this.state.rs.success) {
+      return <View>Request failed</View>;
+    }
+
+    const status = this.state.ticketInfo.status;
+    this.setState({
+      current: mapStatusStep.get(status) || 0,
+      items: pt.get().ticketDetail.stepItems,
+    });
+
+    const elements: ShowElements = {
+      device: this.props.isInfoShow['device'] ? (
+        <View className='at-article__h1'>
+          {this.state.ticketInfo.device +
+            ' ' +
+            this.state.ticketInfo.deviceModel}
+        </View>
+      ) : (
+        <View></View>
+      ),
+      createdTime: this.props.isInfoShow['createdTime'] ? (
+        <View className='at-article__info'>
+          {pt.get().common.createdAtText(this.state.ticketInfo.createdTime)}
+        </View>
+      ) : (
+        <View></View>
+      ),
+      description: this.props.isInfoShow['description'] ? (
+        <View style={{ marginTop: 10, marginBottom: 10 }}>
+          <AtCard title={pt.get().ticketDetail.descTitle}>
+            <View className='at-article__h3'>
+              {this.state.ticketInfo.description}
+            </View>
+          </AtCard>
+        </View>
+      ) : (
+        <View></View>
+      ),
+      current: this.props.isInfoShow['current'] ? (
+        <View style={{ padding: 10 }}>
+          <AtSteps
+            items={this.state.items}
+            current={this.state.current}
+            onChange={() => {}}
+          />
+        </View>
+      ) : (
+        <View></View>
+      ),
+      notelist: this.props.isInfoShow['notelist'] ? (
+        this.props.isInfoShow['showAllNotes'] ? (
+          <View style={{ padding: 10 }}>
+            <NoteList noteList={this.state.notes} />
+          </View>
+        ) : (
+          <View style={{ padding: 10 }}>
+            <NoteList
+              noteList={[this.state.notes[this.state.notes.length - 1]]}
+            />
+          </View>
+        )
+      ) : (
+        <View></View>
+      ),
+    };
+
+    return (
+      <View>
+        {elements.device}
+        {elements.createdTime}
+        {elements.description}
+        {elements.current}
+        {this.props.middleButton}
+        {elements.notelist}
+      </View>
+    );
+  }
+}

src/components/NoteCard/NoteCard.config.ts

@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};

src/components/NoteCard/NoteCard.tsx

@@ -0,0 +1,49 @@
+import { View } from '@tarojs/components';
+import { Component, ReactNode } from 'react';
+import { TicketNote, StatusStr } from '@/pages/TicketDetail/TicketNote';
+import pt from '@/plain-text';
+import { timeFormat } from '@/utils';
+import { AtDivider } from 'taro-ui';
+import './NoteCard.scss';
+
+interface NoteCardProps {
+  note: TicketNote;
+}
+
+export default class NoteCard extends Component<NoteCardProps, {}> {
+  props: Readonly<NoteCardProps> = {
+    note: new TicketNote(),
+  };
+
+  render(): ReactNode {
+    var message = '';
+    const note = this.props.note;
+    const td = pt.get().ticketDetail;
+    const createMessage = td.createTicketMessage;
+    const modifyMessage = td.statusModifyMessage;
+    const prefix = td.statusModifyPrefix;
+
+    switch (note.type) {
+      case 0:
+        message = createMessage;
+        break;
+      case 1:
+        message = note.content;
+        break;
+      case 2:
+        message = prefix + modifyMessage.get(note.content as StatusStr) || '';
+        break;
+    }
+
+    return (
+      <View>
+        <View className='at-article__h2'>{note.op}</View>
+        <View className='at-article__info'>
+          {note.createdTime.format(timeFormat)}
+        </View>
+        <View className='at-article__p'>{message}</View>
+        <AtDivider />
+      </View>
+    );
+  }
+}

src/components/NoteList/NoteList.config.ts

@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};

src/components/NoteList/NoteList.tsx

@@ -0,0 +1,25 @@
+import { Component, ReactNode } from 'react';
+import NoteCard from '@/components/NoteCard/NoteCard';
+import { TicketNote } from '@/pages/TicketDetail/TicketNote';
+import { View } from '@tarojs/components';
+
+interface NoteListProps {
+  noteList: Array<TicketNote>;
+}
+
+export default class NoteList extends Component<NoteListProps, {}> {
+  props: Readonly<NoteListProps> = {
+    noteList: [],
+  };
+  render(): ReactNode {
+    return (
+      <View>
+        {this.props.noteList.map((note, idx) => (
+          <View key={idx}>
+            <NoteCard note={note} />
+          </View>
+        ))}
+      </View>
+    );
+  }
+}

src/components/TicketListItem/TicketListItem.config.ts

@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};

src/components/TicketListItem/TicketListItem.tsx

@@ -0,0 +1,57 @@
+import { AtListItem } from 'taro-ui';
+import repair from '@/assets/icons/MyTickets/repair.svg';
+import finished from '@/assets/icons/MyTickets/finished.svg';
+import tick from '@/assets/icons/MyTickets/tick.svg';
+import fail from '@/assets/icons/MyTickets/fail.svg';
+import pt from '@/plain-text';
+import Taro from '@tarojs/taro';
+
+type FixStatus = 1 | 2 | 3 | 4 | 5;
+
+export class TicketListItem {
+  id: number;
+  brand: string;
+  model: string;
+  status: FixStatus;
+  createAt: moment.Moment;
+  iconMap: Map<FixStatus, string>;
+
+  constructor(
+    id: number,
+    brand: string,
+    model: string,
+    status: FixStatus,
+    createAt: moment.Moment,
+  ) {
+    this.id = id;
+    this.brand = brand;
+    this.model = model;
+    this.status = status;
+    this.createAt = createAt;
+    this.iconMap = new Map<FixStatus, string>([
+      [1, repair],
+      [2, repair],
+      [3, finished],
+      [4, tick],
+      [5, fail],
+    ]);
+  }
+
+  render(): JSX.Element {
+    const tl = pt.get().ticketList;
+    return (
+      <AtListItem
+        title={this.brand + ' ' + this.model}
+        note={tl.createdAt(this.createAt.format('YYYY-MM-DD HH:mm'))}
+        extraText={tl.statusMap.get(this.status)}
+        arrow='right'
+        thumb={this.iconMap.get(this.status)}
+        onClick={() => {
+          Taro.navigateTo({
+            url: '/pages/TicketDetail/TicketDetail?id=' + this.id,
+          });
+        }}
+      />
+    );
+  }
+}

src/pages/TicketDetail/TicketDetail.tsx

@@ -1,25 +1,67 @@
 import { Component, ReactNode } from 'react';
 import { View } from '@tarojs/components';
 import { getCurrentInstance } from '@tarojs/runtime';
-import Taro from '@tarojs/taro';
 import pt from '@/plain-text';
+import { AtButton } from 'taro-ui';
+import DetailFramework from '@/components/DetailFramework/DetailFramework';
+import PageFooter from '@/components/PageFooter/PageFooter';
 
-export default class TicketDetail extends Component {
-  state = {
+interface TicketDetailState {
+  id: number;
+}
+
+export default class TicketDetail extends Component<{}, TicketDetailState> {
+  state: Readonly<TicketDetailState> = {
     id: 0,
   };
+
   componentDidMount(): void {
-    const navBar = pt.get().navBar;
-    Taro.setNavigationBarTitle({
-      title: navBar.ticketDetail,
-    });
     const { router } = getCurrentInstance();
-    const id = router?.params.id;
+    const id = router?.params.id as number;
     this.setState({
       id: id,
     });
   }
+
   render(): ReactNode {
-    return <View>TicketDetail: {this.state.id}</View>;
+    const middleButton = (
+      <View
+        className='at-row'
+        style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
+      >
+        <View
+          className='at-col'
+          style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
+        >
+          <AtButton type='primary'>{pt.get().ticketDetail.tookAway}</AtButton>
+        </View>
+        <View
+          className='at-col'
+          style={{ marginRight: 10, paddingLeft: 5, width: '50%' }}
+        >
+          <AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
+        </View>
+      </View>
+    );
+
+    const isInfoShow = {
+      device: true,
+      createdTime: true,
+      description: true,
+      current: true,
+      notelist: true,
+      showAllNotes: true,
+    };
+
+    return (
+      <View>
+        <DetailFramework
+          middleButton={middleButton}
+          id={this.state.id}
+          isInfoShow={isInfoShow}
+        />
+        <PageFooter />
+      </View>
+    );
   }
 }

src/pages/TicketDetail/TicketNote.ts

@@ -0,0 +1,29 @@
+import { FixStatus } from '@/common';
+
+export class TicketInfo {
+  id: number;
+  type: 0 | 1;
+  device: string;
+  deviceModel: string;
+  description: string;
+  createdTime: moment.Moment;
+  status: FixStatus;
+}
+
+export class TicketNote {
+  id: number;
+  op: string;
+  type: 0 | 1 | 2;
+  content: string;
+  createdTime: moment.Moment;
+}
+
+export class ShowElements {
+  device: JSX.Element;
+  createdTime: JSX.Element;
+  description: JSX.Element;
+  current: JSX.Element;
+  notelist: JSX.Element;
+}
+
+export type StatusStr = '1' | '2' | '3' | '4' | '5';

src/pages/index/DutyInfo.tsx

@@ -15,10 +15,10 @@ export class DutyData {
   }
 
   isInDuty: boolean;
-  inDutyCnt: number;
-  currentDuty: 'off' | '1' | '2' | '3';
-  offDutyReason: string; // from backend
-  dutyRecoverTime: string; // from backend
+  inDutyCnt?: number;
+  currentDuty?: 'off' | '1' | '2' | '3';
+  offDutyReason?: string;
+  dutyRecoverTime?: string;
 }
 
 class Card extends Component {
@@ -49,7 +49,8 @@ class Card extends Component {
           <View
             style={{
               marginLeft: 10,
-              fontSize: 36,
+              fontSize: 30,
+              fontWeight: 'bold',
             }}
           >
             {title}
@@ -73,8 +74,8 @@ export class DutyInfo extends Component {
         <Card isInDuty={data.isInDuty} />
         <AtTimeline
           items={[
-            { title: od.reason(data.offDutyReason) },
-            { title: od.recoverTime(data.dutyRecoverTime) },
+            { title: od.reason(data.offDutyReason as string) },
+            { title: od.recoverTime(data.dutyRecoverTime as string) },
           ]}
         />
       </View>
@@ -89,8 +90,8 @@ export class DutyInfo extends Component {
         <Card isInDuty={data.isInDuty} />
         <AtTimeline
           items={[
-            { title: id.currentDutyText(data.currentDuty) },
-            { title: id.inDutyCnt(data.inDutyCnt) },
+            { title: id.currentDutyText(data.currentDuty || 'off') },
+            { title: id.inDutyCnt(data.inDutyCnt as number) },
           ]}
         />
       </View>

src/pages/index/TitleCard.tsx

@@ -1,14 +1,26 @@
 import React from 'react';
-import { View } from '@tarojs/components';
+import { View, Image } from '@tarojs/components';
 import pt from '@/plain-text';
+import logo from '@/assets/images/UserPage/logo.png';
 
 export default class TitleCard extends React.Component {
   render(): React.ReactNode {
     const mainPage = pt.get().mainPage;
     return (
-      <View className='page-title'>
-        <View className='at-article__h1'>{mainPage.mainTitleLine}</View>
-        <View className='at-article__h2'>{mainPage.subTitleLine}</View>
+      <View className='at-row at-row__align--center'>
+        <View className='at-col at-col-1 at-col--auto'>
+          <Image
+            style='width: 50px; height: 50px; margin-left: 15px;'
+            src={logo}
+            mode='aspectFit'
+          />
+        </View>
+        <View className='page-title'>
+          <View className='at-article__h1' style={{ fontWeight: 'bold' }}>
+            {mainPage.mainTitleLine}
+          </View>
+          <View className='at-article__h2'>{mainPage.subTitleLine}</View>
+        </View>
       </View>
     );
   }

src/pages/index/index.tsx

@@ -5,7 +5,7 @@ import { AtCard, AtAccordion } from 'taro-ui';
 import type CustomTabBar from '@/custom-tab-bar';
 import PageFooter from '@/components/PageFooter/PageFooter';
 import pt from '@/plain-text';
-import { getUrl } from '@/service';
+import { getDutyInfo } from '@/service/dutyInfo';
 import './index.scss';
 import TitleCard from './TitleCard';
 import { DutyInfo, DutyData } from './DutyInfo';
@@ -56,67 +56,40 @@ class ExpandItem extends Component {
   }
 }
 
-export default class Index extends Component {
+interface MainPageState {
+  dutyData: DutyData;
+  dutyInfoCard: CardContent;
+  stepInfoCard: CardContent;
+  tipsInfoCard: CardContent;
+  //rs: RequestState;
+}
+
+export default class MainPage extends Component<{}, MainPageState> {
   state = {
     dutyData: new DutyData(),
     dutyInfoCard: {
       title: pt.get().mainPage.cardTitle.dutyInfo,
-      note: 'Tips',
-      extra: '额外信息',
+      note: pt.get().mainPage.cardTips.dutyInfo,
+      extra: pt.get().mainPage.extraInfo.dutyInfo,
       content: () => <DutyInfo data={this.state.dutyData} />,
     },
     stepInfoCard: {
       title: pt.get().mainPage.cardTitle.stepInfo,
-      note: 'Tips 请在20:30以前取走自己的物品哦',
-      extra: '额外信息',
+      note: pt.get().mainPage.cardTips.stepInfo,
+      extra: pt.get().mainPage.extraInfo.dutyInfo,
       content: () => <StepInfo />,
     },
     tipsInfoCard: {
       title: pt.get().mainPage.cardTitle.tipsInfo,
-      note: 'Tips',
-      extra: '额外信息',
+      note: pt.get().mainPage.cardTips.tipsInfo,
+      extra: pt.get().mainPage.extraInfo.dutyInfo,
       content: () => <TipsInfo />,
     },
+    // rs: new RequestState(),
   };
 
   componentDidMount(): void {
-    Taro.request({
-      url: getUrl('/dutyinfo'),
-      method: 'GET',
-      data: {
-        token: 'token_test',
-      },
-    })
-      .then(res => {
-        const data = res.data.data;
-        if (data.isInDuty) {
-          this.setState({
-            dutyData: {
-              isInDuty: data.isInDuty,
-              inDutyCnt: data.inDutyCnt,
-              currentDuty: data.currentDuty,
-            },
-          });
-        } else {
-          this.setState({
-            dutyData: {
-              isInDuty: data.isInDuty,
-              offDutyReason: data.offDutyReason,
-              dutyRecoverTime: data.dutyRecoverTime,
-            },
-          });
-        }
-      })
-      .catch(err => {
-        console.log(err);
-        this.setState({
-          dutyData: {
-            isInDuty: false,
-            offDutyReason: '获取失败！Network Error!',
-            dutyRecoverTime: '获取失败！Network Error!',
-          },
-        });
-      });
+    getDutyInfo(this);
   }
 
   // 以下是TabBar相关

src/pages/repair/repair.tsx

@@ -1,10 +1,74 @@
-import { View, Text } from '@tarojs/components';
+import { View } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
 import Taro from '@tarojs/taro';
-import type CustomTabBar from '../../custom-tab-bar';
+import {
+  AtForm,
+  AtInput,
+  AtButton,
+  AtCheckbox,
+  AtCard,
+  AtSegmentedControl,
+  AtMessage,
+} from 'taro-ui';
+import pt from '@/plain-text';
+import PageFooter from '@/components/PageFooter/PageFooter';
+import { submitTicket } from '@/service/submitTicket';
+import type CustomTabBar from '@/custom-tab-bar';
+import repairLogo from '@/assets/icons/RepairPage/repair.svg';
+import DetailFramework from '@/components/DetailFramework/DetailFramework';
+import { getCurrentTicket } from '@/service/currentTicket';
 import './repair.scss';
 
-export default class RepairPage extends Component {
+interface RepairPageState {
+  type: 0 | 1;
+  device: string;
+  deviceModel: string;
+  owner: string;
+  phone: string;
+  description: string;
+  isLoading: boolean;
+  isDisable: boolean;
+  checkedList: Array<number>;
+  currentTicketsId: Array<number>;
+}
+
+const submitInterval = 5000;
+
+const middleButton = <View></View>;
+
+const isInfoShow = {
+  device: true,
+  createdTime: true,
+  description: false,
+  current: true,
+  notelist: true,
+  showAllNotes: false,
+};
+
+export default class RepairPage extends Component<{}, RepairPageState> {
+  state = {
+    type: 1 as 0 | 1,
+    device: '',
+    deviceModel: '',
+    owner: '',
+    phone: '',
+    description: '',
+    isLoading: false,
+    isDisable: true,
+    checkedList: [0],
+    currentTicketsId: [] as Array<number>,
+  };
+
+  componentDidMount(): void {
+    getCurrentTicket(this, middleButton, isInfoShow);
+
+    setTimeout(() => {
+      this.setState({
+        isDisable: false,
+      });
+    }, submitInterval);
+  }
+
   // 以下是TabBar相关
   pageCtx = Taro.getCurrentInstance().page;
   componentDidShow() {
@@ -13,10 +77,185 @@ export default class RepairPage extends Component {
   }
   // 以上是TabBar相关
 
+  handleTypeChange(type: 0 | 1) {
+    this.setState({
+      type: type,
+    });
+    return type;
+  }
+
+  handleDeviceChange(device: string) {
+    this.setState({
+      device: device,
+    });
+    return device;
+  }
+
+  handleDeviceModelChange(deviceModel: string) {
+    this.setState({
+      deviceModel: deviceModel,
+    });
+    return deviceModel;
+  }
+
+  handleOwnerChange(owner: string) {
+    this.setState({
+      owner: owner,
+    });
+    return owner;
+  }
+
+  handlePhoneChange(phone: string) {
+    this.setState({
+      phone: phone,
+    });
+    return phone;
+  }
+
+  handleDescriptionChange(description: string) {
+    this.setState({
+      description: description,
+    });
+    return description;
+  }
+
+  checkboxOption = [
+    {
+      value: 0,
+      label: pt.get().repairPage.checkboxText.none,
+    },
+    {
+      value: 1,
+      label: pt.get().repairPage.checkboxText.usbDisk,
+    },
+    {
+      value: 2,
+      label: pt.get().repairPage.checkboxText.mouseOrReceiver,
+    },
+    {
+      value: 3,
+      label: pt.get().repairPage.checkboxText.powerAdapter,
+    },
+    {
+      value: 4,
+      label: pt.get().repairPage.checkboxText.others.label,
+      desc: pt.get().repairPage.checkboxText.others.desc,
+    },
+  ];
+
+  handleCheckboxChange(checkedList: Array<number>) {
+    this.setState({
+      checkedList: checkedList,
+    });
+    return checkedList;
+  }
+
+  onSubmit() {
+    this.setState({
+      isLoading: true,
+      isDisable: true,
+    });
+    submitTicket(this);
+    Taro.reLaunch({
+      url: '/pages/repair/repair',
+    });
+  }
+
   render(): ReactNode {
+    const ticketsRenderer = this.state.currentTicketsId.map((id, idx) => (
+      <AtCard key={idx}>
+        <DetailFramework
+          id={id}
+          isInfoShow={isInfoShow}
+          middleButton={middleButton}
+        />
+      </AtCard>
+    ));
+    console.log(ticketsRenderer);
     return (
       <View>
-        <Text>Repair Page</Text>
+        <AtMessage />
+        {ticketsRenderer}
+        <AtCard
+          note={pt.get().repairPage.cardText.note}
+          title={pt.get().repairPage.cardText.title}
+          thumb={repairLogo}
+        >
+          <AtForm onSubmit={this.onSubmit.bind(this)}>
+            <AtSegmentedControl
+              values={[
+                pt.get().repairPage.typeText.appliance,
+                pt.get().repairPage.typeText.computer,
+              ]}
+              onClick={this.handleTypeChange.bind(this)}
+              current={this.state.type}
+            />
+            <AtInput
+              clear
+              required
+              name='device'
+              title={pt.get().repairPage.deviceText.title}
+              type='text'
+              placeholder={pt.get().repairPage.deviceText.placeholder}
+              value={this.state.device}
+              onChange={this.handleDeviceChange.bind(this)}
+            />
+            <AtInput
+              clear
+              required
+              name='deviceModel'
+              title={pt.get().repairPage.deviceModelText.title}
+              type='text'
+              placeholder={pt.get().repairPage.deviceModelText.placeholder}
+              value={this.state.deviceModel}
+              onChange={this.handleDeviceModelChange.bind(this)}
+            />
+            <AtInput
+              clear
+              required
+              name='owner'
+              title={pt.get().repairPage.ownerText.title}
+              type='text'
+              placeholder={pt.get().repairPage.ownerText.placeholder}
+              value={this.state.owner}
+              onChange={this.handleOwnerChange.bind(this)}
+            />
+            <AtInput
+              clear
+              required
+              name='phone'
+              title={pt.get().repairPage.phoneText.title}
+              type='number'
+              placeholder={pt.get().repairPage.phoneText.placeholder}
+              value={this.state.phone}
+              onChange={this.handlePhoneChange.bind(this)}
+            />
+            <AtInput
+              clear
+              required
+              name='description'
+              title={pt.get().repairPage.descriptionText.title}
+              type='text'
+              placeholder={pt.get().repairPage.descriptionText.placeholder}
+              value={this.state.description}
+              onChange={this.handleDescriptionChange.bind(this)}
+            />
+            <AtCheckbox
+              options={this.checkboxOption}
+              selectedList={this.state.checkedList}
+              onChange={this.handleCheckboxChange.bind(this)}
+            />
+            <AtButton
+              loading={this.state.isLoading}
+              formType='submit'
+              type='primary'
+              disabled={this.state.isDisable}
+            >
+              {pt.get().button.buttonText.submit}
+            </AtButton>
+          </AtForm>
+        </AtCard>
+        <PageFooter />
       </View>
     );
   }

src/pages/user/about/about.tsx

@@ -4,7 +4,7 @@ import Taro from '@tarojs/taro';
 import pt from '@/plain-text';
 import './about.scss';
 
-export default class SettingsPage extends Component {
+export default class AboutPage extends Component {
   componentDidMount(): void {
     Taro.setNavigationBarTitle({
       title: pt.get().navBar.user.about,

src/pages/user/inform/inform.tsx

@@ -1,9 +1,9 @@
 import { Component, ReactNode } from 'react';
 import { AtForm, AtInput, AtButton, AtMessage } from 'taro-ui';
 import { View } from '@tarojs/components';
-import { getUrl } from '@/service';
 import Taro from '@tarojs/taro';
 import pt from '@/plain-text';
+import { updateUserInfo } from '@/service/userData';
 import './inform.scss';
 
 const submitInterval = 5000;
@@ -40,32 +40,7 @@ export default class InformPage extends Component {
       isDisable: true,
     });
     console.log(this.state.name, this.state.phone);
-    Taro.request({
-      url: getUrl('/user/update'),
-      method: 'POST',
-      data: {
-        token: 'token_test',
-        name: this.state.name,
-        phone: this.state.phone,
-      },
-    })
-      .then(res => {
-        console.log(res.data);
-        Taro.atMessage({
-          message: pt.get().button.submitText.success,
-          type: 'success',
-        });
-      })
-      .catch(err => {
-        console.log(err);
-        Taro.atMessage({
-          message: pt.get().button.submitText.error + err.toString(),
-          type: 'error',
-        });
-      });
-    this.setState({
-      isLoading: false,
-    });
+    updateUserInfo(this);
     setTimeout(() => {
       this.setState({
         isDisable: false,

src/pages/user/member/member.tsx

@@ -46,14 +46,14 @@ export default class MemberPage extends Component {
         passwd: this.state.passwd,
       },
     })
-      .then(res => {
+      .then((res) => {
         console.log(res.data);
         Taro.atMessage({
           message: pt.get().button.loginText.success,
           type: 'success',
         });
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
         Taro.atMessage({
           message: pt.get().button.loginText.error + err.toString(),

src/pages/user/myTicket/myTicket.tsx

@@ -1,124 +1,40 @@
 import { Component, ReactNode } from 'react';
 import { View } from '@tarojs/components';
-import { AtList, AtListItem } from 'taro-ui';
+import { AtList } from 'taro-ui';
 import Taro from '@tarojs/taro';
 import moment from 'moment';
-import repair from '@/assets/icons/MyTickets/repair.svg';
-import finished from '@/assets/icons/MyTickets/finished.svg';
-import tick from '@/assets/icons/MyTickets/tick.svg';
-import fail from '@/assets/icons/MyTickets/fail.svg';
 import pt from '@/plain-text';
-import { getUrl } from '@/service';
+import { RequestState } from '@/service';
+import { getMyTicketList } from '@/service/myTicket';
+import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
 import './myTicket.scss';
 
-type FixStatus = 1 | 2 | 3 | 4 | 5;
-
-class TicketListItem {
-  id: number;
-  brand: string;
-  model: string;
-  status: FixStatus;
-  createAt: moment.Moment;
-  iconMap: Map<FixStatus, string>;
-
-  constructor(
-    id: number,
-    brand: string,
-    model: string,
-    status: FixStatus,
-    createAt: moment.Moment,
-  ) {
-    this.id = id;
-    this.brand = brand;
-    this.model = model;
-    this.status = status;
-    this.createAt = createAt;
-    this.iconMap = new Map<FixStatus, string>([
-      [1, repair],
-      [2, repair],
-      [3, finished],
-      [4, tick],
-      [5, fail],
-    ]);
-  }
-
-  render(): JSX.Element {
-    const tl = pt.get().ticketList;
-    return (
-      <AtListItem
-        title={this.brand + ' ' + this.model}
-        note={tl.createdAt(this.createAt.format('YYYY-MM-DD HH:mm'))}
-        extraText={tl.statusMap.get(this.status)}
-        arrow='right'
-        thumb={this.iconMap.get(this.status)}
-        onClick={() => {
-          Taro.navigateTo({
-            url: '/pages/TicketDetail/TicketDetail?id=' + this.id,
-          });
-        }}
-      />
-    );
-  }
+interface MyTicketState {
+  fixList: Array<TicketListItem>;
+  rs: RequestState;
 }
 
-export default class SettingsPage extends Component {
+export default class MyTicketPage extends Component<{}, MyTicketState> {
   state = {
-    loading: true,
-    success: false,
     fixList: [new TicketListItem(0, '', '', 1, moment())],
+    rs: new RequestState(),
   };
 
   componentDidMount(): void {
     Taro.setNavigationBarTitle({
       title: pt.get().navBar.user.myTicket,
     });
-    Taro.request({
-      url: getUrl('/user/mytickets'),
-      method: 'GET',
-      data: {
-        token: 'token_test',
-      },
-    })
-      .then(res => {
-        if (!res.data.success) {
-          this.setState({
-            loading: false,
-            success: false,
-          });
-          return;
-        }
-        this.setState({
-          loading: false,
-          success: true,
-          fixList: res.data.data.list.map(
-            item =>
-              new TicketListItem(
-                item.id,
-                item.device,
-                item.deviceModel,
-                item.status,
-                moment(),
-              ),
-          ),
-        });
-      })
-      .catch(reason => {
-        this.setState({
-          loading: false,
-          success: false,
-        });
-        console.log(reason);
-      });
+    getMyTicketList(this);
   }
 
   render(): ReactNode {
-    if (this.state.loading) {
+    if (this.state.rs.loading) {
       return <View>loading</View>;
     }
-    if (!this.state.success) {
+    if (!this.state.rs.success) {
       return <View>Failed</View>;
     }
-    const fixListRenderer = this.state.fixList.map(item => item.render());
+    const fixListRenderer = this.state.fixList.map((item) => item.render());
     return (
       <View>
         <AtList>{fixListRenderer}</AtList>

src/pages/user/report/report.tsx

@@ -7,7 +7,7 @@ import './report.scss';
 
 const submitInterval = 5000;
 
-export default class SettingsPage extends Component {
+export default class ReportPage extends Component {
   state = {
     report: '',
     isLoading: false,
@@ -39,14 +39,14 @@ export default class SettingsPage extends Component {
         report: this.state.report,
       },
     })
-      .then(res => {
+      .then((res) => {
         console.log(res.data);
         Taro.atMessage({
           message: pt.get().button.submitText.success,
           type: 'success',
         });
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
         Taro.atMessage({
           message: pt.get().button.submitText.error + err.toString(),

src/pages/user/user.tsx

@@ -1,7 +1,6 @@
 import { AtList, AtListItem, AtToast } from 'taro-ui';
 import { Component, ReactNode } from 'react';
 import { View, Picker, Image, Text } from '@tarojs/components';
-import { getUrl } from '@/service';
 import Taro from '@tarojs/taro';
 import type CustomTabBar from '@/custom-tab-bar';
 import PageFooter from '@/components/PageFooter/PageFooter';
@@ -9,6 +8,7 @@ import aboutIcon from '@/assets/icons/AboutPage/about.svg';
 import pt, { Lang } from '@/plain-text';
 import wechatUser from '@/wechat';
 import logo from '@/assets/images/UserPage/logo.png';
+import { setLocaleData } from '@/service/localeData';
 import './user.scss';
 
 const listLangInterval = 20;
@@ -70,16 +70,7 @@ export default class UserPage extends Component {
     });
     let currentLang = this.showLangDict[this.state.selector[e.detail.value]];
     pt.setLang(currentLang);
-    Taro.request({
-      url: getUrl('/user/locale/update'),
-      method: 'POST',
-      data: {
-        token: 'token_test',
-        lang: currentLang,
-      },
-    }).then(res => {
-      console.log(res.data);
-    });
+    setLocaleData(currentLang);
     Taro.reLaunch({
       url: '/pages/user/user',
     });
@@ -120,6 +111,7 @@ export default class UserPage extends Component {
             onTap={this.onTapImage}
             style='width: 100px;height: 100px;'
             src={logo}
+            mode='aspectFit'
           />
         </View>
         <AtToast

src/plain-text/Button.ts

@@ -41,7 +41,7 @@ export const buttonEnUs: ButtonText = {
     error: 'Error: ',
   },
   loginText: {
-    success: '登录成功',
-    error: '登录失败',
+    success: 'Login Success',
+    error: 'Login Failed',
   },
 };

src/plain-text/InformPage.ts

@@ -23,10 +23,10 @@ export const informPageZhCn: InformPageText = {
 export const informPageEnUs: InformPageText = {
   phoneText: {
     title: 'Phone',
-    placeholder: '便于查询工单',
+    placeholder: 'Used for querying tickets',
   },
   nameText: {
     title: 'Real Name',
-    placeholder: '必填，与工单绑定',
+    placeholder: '(Required) Bounded to your ticket',
   },
 };

src/plain-text/MainPage.ts

@@ -6,6 +6,16 @@ export interface MainPageText {
     stepInfo: string;
     tipsInfo: string;
   };
+  cardTips: {
+    dutyInfo: string;
+    stepInfo: string;
+    tipsInfo: string;
+  };
+  extraInfo: {
+    dutyInfo: string;
+    stepInfo: string;
+    tipsInfo: string;
+  };
   expandTitle: {
     stepInfo: string;
     tipsInfo: string;
@@ -31,35 +41,45 @@ export const mainPageZhCn: MainPageText = {
   mainTitleLine: '您好，这里是E志者协会',
   subTitleLine: '维修请至【东三-204】实验室',
   cardTitle: {
-    dutyInfo: '204值班情况',
+    dutyInfo: '204 值班情况',
     stepInfo: '维修步骤',
     tipsInfo: '注意事项',
   },
+  cardTips: {
+    dutyInfo: '提示：可以先前往【维修】页面在线上预填写工单！',
+    stepInfo: '提示：请在 20:30 之前取走自己的物品哦！',
+    tipsInfo: '',
+  },
+  extraInfo: {
+    dutyInfo: '',
+    stepInfo: '',
+    tipsInfo: '',
+  },
   expandTitle: {
     stepInfo: '查看维修步骤',
     tipsInfo: '查看注意事项',
   },
   stepList: [
     { title: '线上填写工单' },
-    { title: '去`东三-204`实验室维修电脑' },
+    { title: '去【东三-204】实验室维修电脑' },
     { title: '等待电脑维修' },
     { title: '维修结束，取回电脑' },
   ],
   tipsList: [
-    { title: '戴尔、Surface、外星人、苹果电脑不能拆机哦~' },
+    { title: '戴尔/外星人、Surface、苹果电脑不能拆机哦~' },
     { title: '数据无价，请随时做好数据备份哦~' },
-    { title: '204也是实验室，请遵守实验室纪律，请勿饮食~' },
-    { title: '我们是志愿服务，不收任何礼物哦~' },
+    { title: '204 也是实验室，请勿在内饮食~' },
+    { title: '我们是志愿服务，不收取任何礼物哦~' },
   ],
   dutyCard: {
     offDuty: {
       title: '未值班',
-      reason: s => '值班停止原因：' + s,
-      recoverTime: t => '恢复值班时间：' + t,
+      reason: (s) => '值班停止原因：' + s,
+      recoverTime: (t) => '恢复值班时间：' + t,
     },
     inDuty: {
       title: '值班中',
-      currentDutyText: c => {
+      currentDutyText: (c) => {
         switch (c) {
           case 'off':
             return '当前未值班';
@@ -71,56 +91,66 @@ export const mainPageZhCn: MainPageText = {
             return '第三班 18:00-20:30';
         }
       },
-      inDutyCnt: n => '当前值班人数：' + n,
+      inDutyCnt: (n) => '当前值班人数：' + n,
     },
   },
 };
 
 export const mainPageEnUs: MainPageText = {
-  mainTitleLine: '您好，这里是E志者协会',
-  subTitleLine: '维修请至【东三-204】实验室',
+  mainTitleLine: 'Hi! This is EVA.',
+  subTitleLine: 'For maintenance, please go to [204 Lab, E3 building]',
   cardTitle: {
-    dutyInfo: '204值班情况',
-    stepInfo: '维修步骤',
-    tipsInfo: '注意事项',
+    dutyInfo: 'Duty Situation',
+    stepInfo: 'Maintenance Steps',
+    tipsInfo: 'Tips',
+  },
+  cardTips: {
+    dutyInfo: 'Tips: Please go to [Repair] and filling out tickets online.',
+    stepInfo: 'Tips: Please retrieve your devices before 20:30!',
+    tipsInfo: '',
   },
   expandTitle: {
-    stepInfo: '查看维修步骤',
-    tipsInfo: '查看注意事项',
+    stepInfo: 'Check for maintenance steps',
+    tipsInfo: 'Check for tips',
+  },
+  extraInfo: {
+    dutyInfo: '',
+    stepInfo: '',
+    tipsInfo: '',
   },
   stepList: [
-    { title: '线上填写工单' },
-    { title: '去`东三-204`实验室维修电脑' },
-    { title: '等待电脑维修' },
-    { title: '维修结束，取回电脑' },
+    { title: 'Filling out tickets online' },
+    { title: 'Go to [204 Lab, E3 building] for maintenance' },
+    { title: 'Waiting for the device maintenance' },
+    { title: 'The maintenance is over, retrieve the device' },
   ],
   tipsList: [
-    { title: '戴尔、Surface、外星人、苹果电脑不能拆机哦~' },
-    { title: '数据无价，请随时做好数据备份哦~' },
-    { title: '204也是实验室，请遵守实验室纪律，请勿饮食~' },
-    { title: '我们是志愿服务，不收任何礼物哦~' },
+    { title: 'Dell/Alienware, Surface, Apple cannot be dissassembled.' },
+    { title: 'Data is priceless, please backup your data at any time!' },
+    { title: '204 is also a laboratory. Do not eat inside.' },
+    { title: 'We are volunteers and do not take any gifts.' },
   ],
   dutyCard: {
     offDuty: {
-      title: '未值班',
-      reason: s => '值班停止原因：' + s,
-      recoverTime: t => '恢复值班时间：' + t,
+      title: 'Off Duty',
+      reason: (s) => 'Reason for cessation of duty: ' + s,
+      recoverTime: (t) => 'Resumption of duty: ' + t,
     },
     inDuty: {
-      title: '值班中',
-      currentDutyText: c => {
+      title: 'On Duty',
+      currentDutyText: (c) => {
         switch (c) {
           case 'off':
-            return '当前未值班';
+            return 'Currently not on duty';
           case '1':
-            return '第一班 13:30-16:00';
+            return '1st Shift 13:30-16:00';
           case '2':
-            return '第二班 16:00-18:00';
+            return '2nd Shift 16:00-18:00';
           case '3':
-            return '第三班 18:00-20:30';
+            return '3rd Shift 18:00-20:30';
         }
       },
-      inDutyCnt: n => '当前值班人数：' + n,
+      inDutyCnt: (n) => 'EVA members on duty: ' + n,
     },
   },
 };

src/plain-text/MemberPage.ts

@@ -23,10 +23,10 @@ export const memberPageZhCn: MemberPageText = {
 export const memberPageEnUs: MemberPageText = {
   stuidText: {
     title: 'Student ID',
-    placeholder: '与统一身份认证学号一致',
+    placeholder: 'Consistent with EVA Auth',
   },
   passwdText: {
     title: 'Password',
-    placeholder: '与 EVA 统一身份认证一致',
+    placeholder: 'Consistent with EVA Auth',
   },
 };

src/plain-text/NavBarTitle.ts

@@ -9,7 +9,7 @@ export interface NavBarTitle {
   };
 }
 
-export const navBarTitleZhCh: NavBarTitle = {
+export const navBarTitleZhCn: NavBarTitle = {
   ticketDetail: '工单详情',
   user: {
     myTicket: '我的工单',

src/plain-text/RepairPage.ts

@@ -0,0 +1,140 @@
+export interface RepairPageText {
+  currentTicket: {
+    errorMessage: string;
+    title: string;
+    note: string;
+    extra: string;
+  };
+  typeText: {
+    computer: string;
+    appliance: string;
+  };
+  deviceText: {
+    title: string;
+    placeholder: string;
+  };
+  deviceModelText: {
+    title: string;
+    placeholder: string;
+  };
+  ownerText: {
+    title: string;
+    placeholder: string;
+  };
+  phoneText: {
+    title: string;
+    placeholder: string;
+  };
+  descriptionText: {
+    title: string;
+    placeholder: string;
+  };
+  checkboxText: {
+    none: string;
+    usbDisk: string;
+    mouseOrReceiver: string;
+    powerAdapter: string;
+    others: {
+      label: string;
+      desc: string;
+    };
+  };
+  cardText: {
+    note: string;
+    title: string;
+  };
+}
+
+export const repairPageZhCn: RepairPageText = {
+  currentTicket: {
+    errorMessage: '未获取到工单！',
+    title: '',
+    note: '',
+    extra: '',
+  },
+  typeText: {
+    computer: '电脑',
+    appliance: '电器',
+  },
+  deviceText: {
+    title: '设备品牌',
+    placeholder: '如：ROG',
+  },
+  deviceModelText: {
+    title: '设备型号',
+    placeholder: '如：幻 14 2022',
+  },
+  ownerText: {
+    title: '机主姓名',
+    placeholder: '如：晓洋',
+  },
+  phoneText: {
+    title: '联系方式',
+    placeholder: '如：18888888888',
+  },
+  descriptionText: {
+    title: '问题描述',
+    placeholder: '如：ZJUWLAN 无法登入校内网站',
+  },
+  checkboxText: {
+    none: '无附件',
+    usbDisk: 'U 盘',
+    mouseOrReceiver: '鼠标/接收器',
+    powerAdapter: '电源适配器',
+    others: {
+      label: '其他',
+      desc: '请于评论中详述',
+    },
+  },
+  cardText: {
+    note: '工单描述请尽量简短哦！',
+    title: '预填写工单',
+  },
+};
+
+export const repairPageEnUs: RepairPageText = {
+  currentTicket: {
+    errorMessage: '未获取到工单！',
+    title: '',
+    note: '',
+    extra: '',
+  },
+  typeText: {
+    computer: 'Computer',
+    appliance: 'Appliance',
+  },
+  deviceText: {
+    title: 'Brand',
+    placeholder: 'e.g. ROG',
+  },
+  deviceModelText: {
+    title: 'Device Model',
+    placeholder: 'e.g. Zephyrus G14 2022',
+  },
+  ownerText: {
+    title: 'Name',
+    placeholder: 'e.g. Dean Ma',
+  },
+  phoneText: {
+    title: 'Tel',
+    placeholder: 'e.g. 18888888888',
+  },
+  descriptionText: {
+    title: 'Problem Description',
+    placeholder: 'e.g. ZJUWLAN inaccessable',
+  },
+  checkboxText: {
+    none: 'None',
+    usbDisk: 'USB Disk',
+    mouseOrReceiver: 'Mouse/Receiver',
+    powerAdapter: 'Power Adapter',
+    others: {
+      label: 'Others',
+      desc: 'Please elaborate in the comments',
+    },
+  },
+  cardText: {
+    note: 'Please keep the ticket description as short as possible',
+    title: 'Pre-filling working tickets',
+  },
+};

src/plain-text/ReportPage.ts

@@ -9,5 +9,5 @@ export const reportPageZhCn: ReportPageText = {
 
 export const reportPageEnUs: ReportPageText = {
   placeHolderText:
-    '无论是有关于小程序的建议，还是关于E志者协会的建议，都可以提出来哦！',
+    'Feel free to post your suggestions about the weapp or about us!',
 };

src/plain-text/TicketDetail.ts

@@ -0,0 +1,57 @@
+interface StepItem {
+  title: string;
+}
+
+type StatusStr = '1' | '2' | '3' | '4' | '5';
+
+export interface TicketDetailText {
+  stepItems: Array<StepItem>;
+  createTicketMessage: string;
+  statusModifyPrefix: string;
+  statusModifyMessage: Map<StatusStr, string>;
+  descTitle: string;
+  tookAway: string;
+  addNote: string;
+}
+
+export const ticketDetailZhCn: TicketDetailText = {
+  stepItems: [
+    { title: '创建成功' },
+    { title: '维修中' },
+    { title: '待取回' },
+    { title: '工单完成' },
+  ],
+  createTicketMessage: '创建了维修',
+  statusModifyPrefix: '将维修状态更改为：',
+  statusModifyMessage: new Map<StatusStr, string>([
+    ['1', '维修中'],
+    ['2', '2(?)'],
+    ['3', '3(?)'],
+    ['4', '维修成功待取回'],
+    ['5', '维修成功已取回'],
+  ]),
+  descTitle: '问题描述',
+  tookAway: '已取回',
+  addNote: '添加评论',
+};
+
+export const ticketDetailEnUs: TicketDetailText = {
+  stepItems: [
+    { title: 'Created' },
+    { title: 'Repairing' },
+    { title: 'Finished' },
+    { title: 'Retrieved' },
+  ],
+  createTicketMessage: 'Created ticket',
+  statusModifyPrefix: 'Modified repair status to: ',
+  statusModifyMessage: new Map<StatusStr, string>([
+    ['1', 'Repairing'],
+    ['2', '2(?)'],
+    ['3', '3(?)'],
+    ['4', 'Device to be retrieved'],
+    ['5', 'Ticket finished'],
+  ]),
+  descTitle: 'Problem description',
+  tookAway: 'Already retrieved',
+  addNote: 'Add a comment',
+};

src/plain-text/TicketList.ts

@@ -6,7 +6,7 @@ export interface TicketListText {
 }
 
 export const ticketListZhCn: TicketListText = {
-  createdAt: time => {
+  createdAt: (time) => {
     return '创建于' + ' ' + time;
   },
   statusMap: new Map([
@@ -19,14 +19,14 @@ export const ticketListZhCn: TicketListText = {
 };
 
 export const ticketListEnUs: TicketListText = {
-  createdAt: time => {
-    return '创建于' + ' ' + time;
+  createdAt: (time) => {
+    return 'Created at' + ' ' + time;
   },
   statusMap: new Map([
-    [1, '创建成功'],
-    [2, '维修中'],
-    [3, '待取回'],
-    [4, '已取回'],
-    [5, '已取回'],
+    [1, 'Created'],
+    [2, 'Repairing'],
+    [3, 'Pending Retrieval'],
+    [4, 'Retrieved'],
+    [5, 'Retrieved'],
   ]),
 };

src/plain-text/UserPage.ts

@@ -54,27 +54,27 @@ export const userPageZhCn: UserPageText = {
 
 export const userPageEnUs: UserPageText = {
   memberEntry: {
-    front: '再点击 ',
-    behind: ' 次以进入协会成员登录页面',
+    front: 'Click ',
+    behind: ' more times to enter member login page',
   },
   ticketColumn: {
-    title: '我的工单',
-    note: '在这里查看历史工单！',
+    title: 'My Tickets',
+    note: 'View the history of your tickets here!',
   },
   infoColumn: {
-    title: '我的信息',
-    note: '能帮助亦可更好地找到你哦！',
+    title: 'My Information',
+    note: 'It will help us contact you!',
   },
   settingsColumn: {
     title: 'Settings',
-    note: '在这里配置小程序',
+    note: 'Configure the applet here!',
   },
   reportColumn: {
-    title: '意见反馈',
-    note: '有什么想说的都可以告诉亦可哦！',
+    title: 'Report',
+    note: 'Let us know if you have any suggestions!',
   },
   aboutColumn: {
-    title: '关于我们',
-    note: '查看开发者信息',
+    title: 'About Us',
+    note: 'View developer information.',
   },
 };

src/plain-text/common.ts

@@ -0,0 +1,17 @@
+import { Moment } from 'moment';
+
+export interface CommonText {
+  createdAtText(time: Moment): string;
+}
+
+export const commonTextZhCn: CommonText = {
+  createdAtText(time: Moment): string {
+    return '创建于 ' + time.format('YYYY-MM-DD HH:mm');
+  },
+};
+
+export const commonTextEnUs: CommonText = {
+  createdAtText(time: Moment): string {
+    return 'Created at ' + time.format('YYYY-MM-DD HH:mm');
+  },
+};

src/plain-text/index.ts

@@ -8,9 +8,17 @@ import { AboutPageText, aboutPageEnUs, aboutPageZhCn } from './AboutPage';
 import { ButtonText, buttonEnUs, buttonZhCn } from './Button';
 import { MemberPageText, memberPageEnUs, memberPageZhCn } from './MemberPage';
 import { TicketListText, ticketListEnUs, ticketListZhCn } from './TicketList';
-import { NavBarTitle, navBarTitleEnUs, navBarTitleZhCh } from './NavBarTitle';
+import { NavBarTitle, navBarTitleEnUs, navBarTitleZhCn } from './NavBarTitle';
+import { RepairPageText, repairPageEnUs, repairPageZhCn } from './RepairPage';
+import {
+  TicketDetailText,
+  ticketDetailEnUs,
+  ticketDetailZhCn,
+} from './TicketDetail';
+import { CommonText, commonTextEnUs, commonTextZhCn } from './common';
 
 interface TextRecord {
+  common: CommonText;
   pageFooter: PageFooterText;
   mainPage: MainPageText;
   userPage: UserPageText;
@@ -22,9 +30,12 @@ interface TextRecord {
   memberPage: MemberPageText;
   ticketList: TicketListText;
   navBar: NavBarTitle;
+  repairPage: RepairPageText;
+  ticketDetail: TicketDetailText;
 }
 
 const textZhCn: TextRecord = {
+  common: commonTextZhCn,
   pageFooter: pageFooterZhCn,
   mainPage: mainPageZhCn,
   userPage: userPageZhCn,
@@ -35,10 +46,13 @@ const textZhCn: TextRecord = {
   button: buttonZhCn,
   memberPage: memberPageZhCn,
   ticketList: ticketListZhCn,
-  navBar: navBarTitleZhCh,
+  navBar: navBarTitleZhCn,
+  repairPage: repairPageZhCn,
+  ticketDetail: ticketDetailZhCn,
 };
 
 const textEnUs: TextRecord = {
+  common: commonTextEnUs,
   pageFooter: pageFooterEnUs,
   mainPage: mainPageEnUs,
   userPage: userPageEnUs,
@@ -50,6 +64,8 @@ const textEnUs: TextRecord = {
   memberPage: memberPageEnUs,
   ticketList: ticketListEnUs,
   navBar: navBarTitleEnUs,
+  repairPage: repairPageEnUs,
+  ticketDetail: ticketDetailEnUs,
 };
 
 // type Lang = 'zh_CN' | 'en_US' | ...;

src/service/currentTicket.ts

@@ -0,0 +1,35 @@
+import RepairPage from '@/pages/repair/repair';
+import Taro from '@tarojs/taro';
+import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
+import pt from '@/plain-text';
+import DetailFramework from '@/components/DetailFramework/DetailFramework';
+import { getUrl } from '.';
+
+export function getCurrentTicket(that: RepairPage, middleButton, isInfoShow) {
+  Taro.request({
+    url: getUrl('/user/mytickets'),
+    method: 'GET',
+    data: {
+      token: 'token_test',
+    },
+  })
+    .then((res) => {
+      const data = res.data.data;
+      let newIdList: Array<number> = [];
+      data.list.map((ticket: TicketListItem) => {
+        if (ticket['status'] !== 5) {
+          newIdList.push(ticket.id);
+        }
+      });
+      that.setState({
+        currentTicketsId: newIdList,
+      });
+    })
+    .catch((err) => {
+      console.log(err);
+      Taro.atMessage({
+        message: pt.get().button.submitText.error + err.toString(),
+        type: 'error',
+      });
+    });
+}

src/service/dutyInfo.ts

@@ -0,0 +1,43 @@
+import MainPage from '@/pages/index';
+import Taro from '@tarojs/taro';
+import { getUrl } from '.';
+
+export function getDutyInfo(that: MainPage) {
+  Taro.request({
+    url: getUrl('/dutyinfo'),
+    method: 'GET',
+    data: {
+      token: 'token_test',
+    },
+  })
+    .then((res) => {
+      const data = res.data.data;
+      if (data.isInDuty) {
+        that.setState({
+          dutyData: {
+            isInDuty: data.isInDuty,
+            inDutyCnt: data.inDutyCnt,
+            currentDuty: data.currentDuty,
+          },
+        });
+      } else {
+        that.setState({
+          dutyData: {
+            isInDuty: data.isInDuty,
+            offDutyReason: data.offDutyReason,
+            dutyRecoverTime: data.dutyRecoverTime,
+          },
+        });
+      }
+    })
+    .catch((err) => {
+      console.log(err);
+      that.setState({
+        dutyData: {
+          isInDuty: false,
+          offDutyReason: '获取失败！Network Error!',
+          dutyRecoverTime: '获取失败！Network Error!',
+        },
+      });
+    });
+}

src/service/index.ts

@@ -1,5 +1,34 @@
 import process from 'process';
 
+/**
+ * State machine for request
+ *
+ * @example
+ *
+ * let former = this.state.rs;
+ * this.setState({
+ *   rs: former.trans(true),
+ * })
+ */
+export class RequestState {
+  loading: boolean;
+  success: boolean;
+  constructor() {
+    this.loading = true;
+    this.success = false;
+  }
+
+  trans(success: boolean): RequestState {
+    if (this.loading) {
+      this.loading = false;
+      this.success = success;
+    } else {
+      console.error('calling trans on not loading state');
+    }
+    return this;
+  }
+}
+
 /**
  * Get URL of backend
  * @param path Relative path to base url, begins with `/`

src/service/localeData.ts

@@ -0,0 +1,32 @@
+import Taro from '@tarojs/taro';
+import pt, { Lang } from '@/plain-text';
+import { getUrl } from '.';
+
+export function setLocaleData(lang: Lang) {
+  Taro.request({
+    url: getUrl('/user/locale/update'),
+    method: 'POST',
+    data: {
+      token: 'token_test',
+      lang: lang,
+    },
+  }).then((res) => {
+    console.log(res.data);
+  });
+}
+
+export function getLocaleData() {
+  Taro.request({
+    url: getUrl('/user/locale/get'),
+    method: 'GET',
+    data: {
+      token: 'token_test',
+    },
+  }).then((res) => {
+    console.log(res.data);
+    pt.setLang(res.data.data.lang);
+    Taro.reLaunch({
+      url: '/pages/index/index',
+    });
+  });
+}

src/service/myTicket.ts

@@ -0,0 +1,44 @@
+import MyTicketPage from '@/pages/user/myTicket/myTicket';
+import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
+import Taro from '@tarojs/taro';
+import moment from 'moment';
+import { getUrl } from '.';
+
+export function getMyTicketList(that: MyTicketPage) {
+  Taro.request({
+    url: getUrl('/user/mytickets'),
+    method: 'GET',
+    data: {
+      token: 'token_test',
+    },
+  })
+    .then((res) => {
+      let former = that.state.rs;
+      if (!res.data.success) {
+        that.setState({
+          rs: former.trans(false),
+        });
+        return;
+      }
+      that.setState({
+        rs: former.trans(true),
+        fixList: res.data.data.list.map(
+          (item) =>
+            new TicketListItem(
+              item.id,
+              item.device,
+              item.deviceModel,
+              item.status,
+              moment(),
+            ),
+        ),
+      });
+    })
+    .catch((reason) => {
+      let former = that.state.rs;
+      that.setState({
+        rs: former.trans(false),
+      });
+      console.log(reason);
+    });
+}

src/service/submitTicket.ts

@@ -0,0 +1,44 @@
+import RepairPage from '@/pages/repair/repair';
+import Taro from '@tarojs/taro';
+import pt from '@/plain-text';
+import { getUrl } from '.';
+
+export function submitTicket(that: RepairPage) {
+  that.setState({
+    isLoading: true,
+  });
+  Taro.request({
+    url: getUrl('/tickets/create'),
+    method: 'POST',
+    data: {
+      token: 'token_test',
+      type: that.state.type,
+      device: that.state.device,
+      deviceModel: that.state.deviceModel,
+      owner: that.state.owner,
+      phone: that.state.phone,
+      description: that.state.description,
+      accessories: that.state.checkedList,
+    },
+  })
+    .then((res) => {
+      console.log(res.data);
+      that.setState({
+        isLoading: false,
+      });
+      Taro.atMessage({
+        message: pt.get().button.submitText.success,
+        type: 'success',
+      });
+    })
+    .catch((err) => {
+      console.log(err);
+      that.setState({
+        isLoading: false,
+      });
+      Taro.atMessage({
+        message: pt.get().button.submitText.error + err.toString(),
+        type: 'error',
+      });
+    });
+}

src/service/ticketsInfo.ts

@@ -0,0 +1,56 @@
+import { TicketInfo, TicketNote } from '@/pages/TicketDetail/TicketNote';
+import DetailFramework from '@/components/DetailFramework/DetailFramework';
+import Taro from '@tarojs/taro';
+import moment from 'moment';
+import { getUrl } from '.';
+
+export function getTicketInfo(that: DetailFramework, id: number) {
+  Taro.request({
+    url: getUrl('/tickets/info'),
+    method: 'GET',
+    data: {
+      id: id,
+    },
+  })
+    .then((res) => {
+      let former = that.state.rs;
+      if (!res.data.success) {
+        that.setState({
+          rs: former.trans(false),
+        });
+      } else {
+        const data = res.data.data;
+        const ticketDetail: TicketInfo = {
+          id: data.id,
+          type: data.type,
+          device: data.device,
+          deviceModel: data.deviceModel,
+          description: data.description,
+          createdTime: moment(data.createdTime as string),
+          status: data.status,
+        };
+        const notes: Array<TicketNote> = [];
+        data.notes.map((item) => {
+          notes.push({
+            id: item.id,
+            op: item.op,
+            type: item.type,
+            content: item.content,
+            createdTime: moment(item.createdTime as string),
+          });
+        });
+        that.setState({
+          ticketInfo: ticketDetail,
+          notes: notes,
+          rs: former.trans(true),
+        });
+      }
+    })
+    .catch((reason) => {
+      let former = that.state.rs;
+      that.setState({
+        rs: former.trans(false),
+      });
+      console.error(reason);
+    });
+}

src/service/userData.ts

@@ -0,0 +1,39 @@
+import InformPage from '@/pages/user/inform/inform';
+import Taro from '@tarojs/taro';
+import pt from '@/plain-text';
+import { getUrl } from '.';
+
+export function updateUserInfo(that: InformPage) {
+  that.setState({
+    isLoading: true,
+  });
+  Taro.request({
+    url: getUrl('/user/update'),
+    method: 'POST',
+    data: {
+      token: 'token_test',
+      name: that.state.name,
+      phone: that.state.phone,
+    },
+  })
+    .then((res) => {
+      console.log(res.data);
+      that.setState({
+        isLoading: false,
+      });
+      Taro.atMessage({
+        message: pt.get().button.submitText.success,
+        type: 'success',
+      });
+    })
+    .catch((err) => {
+      console.log(err);
+      that.setState({
+        isLoading: false,
+      });
+      Taro.atMessage({
+        message: pt.get().button.submitText.error + err.toString(),
+        type: 'error',
+      });
+    });
+}

src/utils/index.ts

@@ -0,0 +1,3 @@
+import * as Time from './time';
+
+export const timeFormat = Time.timeFormat;

src/utils/time.ts

@@ -0,0 +1 @@
+export const timeFormat = 'YYYY-MM-DD HH:mm';