add request to repair page

src/pages/repair/repair.tsx

@@ -1,14 +1,28 @@
 import { View } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
 import Taro from '@tarojs/taro';
-import { AtForm, AtInput, AtButton, AtRadio } from 'taro-ui';
+import { AtForm, AtInput, AtButton, AtRadio, AtCheckbox } from 'taro-ui';
 import pt from '@/plain-text';
-import type CustomTabBar from '../../custom-tab-bar';
+import PageFooter from '@/components/PageFooter/PageFooter';
+import { submitTicket } from '@/service/submitTicket';
+import type CustomTabBar from '@/custom-tab-bar';
 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>;
+}
+
+export default class RepairPage extends Component<{}, RepairPageState> {
   state = {
-    type: 1,
+    type: 1 as 0 | 1,
     device: '',
     deviceModel: '',
     owner: '',
@@ -16,6 +30,7 @@ export default class RepairPage extends Component {
     description: '',
     isLoading: false,
     isDisable: false,
+    checkedList: [0],
   };
   // 以下是TabBar相关
   pageCtx = Taro.getCurrentInstance().page;
@@ -25,7 +40,7 @@ export default class RepairPage extends Component {
   }
   // 以上是TabBar相关
 
-  handleTypeChange(type: number) {
+  handleTypeChange(type: 0 | 1) {
     this.setState({
       type: type,
     });
@@ -67,7 +82,40 @@ export default class RepairPage extends Component {
     return description;
   }
 
-  onSubmit() {}
+  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() {
+    submitTicket(this);
+  }
 
   render(): ReactNode {
     return (
@@ -131,6 +179,11 @@ export default class RepairPage extends Component {
             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'
@@ -140,6 +193,7 @@ export default class RepairPage extends Component {
             {pt.get().button.buttonText.submit}
           </AtButton>
         </AtForm>
+        <PageFooter />
       </View>
     );
   }

src/plain-text/RepairPage.ts

@@ -23,6 +23,16 @@ export interface RepairPageText {
     title: string;
     placeholder: string;
   };
+  checkboxText: {
+    none: string;
+    usbDisk: string;
+    mouseOrReceiver: string;
+    powerAdapter: string;
+    others: {
+      label: string;
+      desc: string;
+    };
+  };
 }
 
 export const repairPageZhCn: RepairPageText = {
@@ -50,6 +60,16 @@ export const repairPageZhCn: RepairPageText = {
     title: '问题描述',
     placeholder: '如：ZJUWLAN 无法登入校内网站',
   },
+  checkboxText: {
+    none: '无附件',
+    usbDisk: 'U 盘',
+    mouseOrReceiver: '鼠标/接收器',
+    powerAdapter: '电源适配器',
+    others: {
+      label: '其他',
+      desc: '请于评论中详述',
+    },
+  },
 };
 
 export const repairPageEnUs: RepairPageText = {
@@ -77,4 +97,14 @@ export const repairPageEnUs: RepairPageText = {
     title: '问题描述',
     placeholder: 'e.g. ZJUWLAN 无法登入校内网站',
   },
+  checkboxText: {
+    none: '无附件',
+    usbDisk: 'U 盘',
+    mouseOrReceiver: '鼠标/接收器',
+    powerAdapter: '电源适配器',
+    others: {
+      label: '其他',
+      desc: '请于评论中详述',
+    },
+  },
 };

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',
+      });
+    });
+}