add repair page

src/pages/repair/repair.tsx

@@ -1,10 +1,22 @@
-import { View, Text } from '@tarojs/components';
+import { View } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
 import Taro from '@tarojs/taro';
+import { AtForm, AtInput, AtButton, AtRadio } from 'taro-ui';
+import pt from '@/plain-text';
 import type CustomTabBar from '../../custom-tab-bar';
 import './repair.scss';
 
 export default class RepairPage extends Component {
+  state = {
+    type: 1,
+    device: '',
+    deviceModel: '',
+    owner: '',
+    phone: '',
+    description: '',
+    isLoading: false,
+    isDisable: false,
+  };
   // 以下是TabBar相关
   pageCtx = Taro.getCurrentInstance().page;
   componentDidShow() {
@@ -13,10 +25,121 @@ export default class RepairPage extends Component {
   }
   // 以上是TabBar相关
 
+  handleTypeChange(type: number) {
+    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;
+  }
+
+  onSubmit() {}
+
   render(): ReactNode {
     return (
       <View>
-        <Text>Repair Page</Text>
+        <AtForm onSubmit={this.onSubmit.bind(this)}>
+          <AtRadio
+            options={[
+              { label: pt.get().repairPage.typeText.appliance, value: 0 },
+              { label: pt.get().repairPage.typeText.computer, value: 1 },
+            ]}
+            value={this.state.type}
+            onClick={this.handleTypeChange.bind(this)}
+          />
+          <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.deviceText.title}
+            type='text'
+            placeholder={pt.get().repairPage.deviceText.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)}
+          />
+          <AtButton
+            loading={this.state.isLoading}
+            formType='submit'
+            type='primary'
+            disabled={this.state.isDisable}
+          >
+            {pt.get().button.buttonText.submit}
+          </AtButton>
+        </AtForm>
       </View>
     );
   }

src/plain-text/RepairPage.ts

@@ -0,0 +1,80 @@
+export interface RepairPageText {
+  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;
+  };
+}
+
+export const repairPageZhCn: RepairPageText = {
+  typeText: {
+    computer: '电脑',
+    appliance: '电器',
+  },
+  deviceText: {
+    title: '设备品牌',
+    placeholder: '如：ROG',
+  },
+  deviceModelText: {
+    title: '设备型号',
+    placeholder: '如：幻 14 2022',
+  },
+  ownerText: {
+    title: '机主姓名',
+    placeholder: '如：晓洋',
+  },
+  phoneText: {
+    title: '联系方式',
+    placeholder: '如：18888888888',
+  },
+  descriptionText: {
+    title: '问题描述',
+    placeholder: '如：ZJUWLAN 无法登入校内网站',
+  },
+};
+
+export const repairPageEnUs: RepairPageText = {
+  typeText: {
+    computer: '电脑',
+    appliance: '电器',
+  },
+  deviceText: {
+    title: '设备品牌',
+    placeholder: 'e.g. ROG',
+  },
+  deviceModelText: {
+    title: '设备型号',
+    placeholder: 'e.g. Zephyrus G14 2022',
+  },
+  ownerText: {
+    title: '机主姓名',
+    placeholder: 'e.g. Dean Ma',
+  },
+  phoneText: {
+    title: '联系方式',
+    placeholder: 'e.g. 18888888888',
+  },
+  descriptionText: {
+    title: '问题描述',
+    placeholder: 'e.g. ZJUWLAN 无法登入校内网站',
+  },
+};

src/plain-text/index.ts

@@ -9,6 +9,7 @@ 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 { RepairPageText, repairPageEnUs, repairPageZhCn } from './RepairPage';
 
 interface TextRecord {
   pageFooter: PageFooterText;
@@ -22,6 +23,7 @@ interface TextRecord {
   memberPage: MemberPageText;
   ticketList: TicketListText;
   navBar: NavBarTitle;
+  repairPage: RepairPageText;
 }
 
 const textZhCn: TextRecord = {
@@ -36,6 +38,7 @@ const textZhCn: TextRecord = {
   memberPage: memberPageZhCn,
   ticketList: ticketListZhCn,
   navBar: navBarTitleZhCh,
+  repairPage: repairPageZhCn,
 };
 
 const textEnUs: TextRecord = {
@@ -50,6 +53,7 @@ const textEnUs: TextRecord = {
   memberPage: memberPageEnUs,
   ticketList: ticketListEnUs,
   navBar: navBarTitleEnUs,
+  repairPage: repairPageEnUs,
 };
 
 // type Lang = 'zh_CN' | 'en_US' | ...;