diff --git a/src/pages/repair/repair.tsx b/src/pages/repair/repair.tsx index 02a3eec..a972e36 100644 --- a/src/pages/repair/repair.tsx +++ b/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; +} + +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) { + 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)} /> + + ); } diff --git a/src/plain-text/RepairPage.ts b/src/plain-text/RepairPage.ts index 2b9779e..576492c 100644 --- a/src/plain-text/RepairPage.ts +++ b/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: '请于评论中详述', + }, + }, }; diff --git a/src/service/submitTicket.ts b/src/service/submitTicket.ts new file mode 100644 index 0000000..18afdf3 --- /dev/null +++ b/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', + }); + }); +}