Merge branch 'yhy' into dev

mock/api.ts

@@ -38,7 +38,7 @@ export default {
     success: true,
     data: mytickets,
   },
-  'GET /tickets/info/': {
+  'GET /tickets/info': {
     success: true,
     data: ticketInfo,
   },

src/pages/TicketDetail/TicketDetail.tsx

@@ -4,15 +4,43 @@ import { getCurrentInstance } from '@tarojs/runtime';
 import Taro from '@tarojs/taro';
 import pt from '@/plain-text';
 import { AtSteps } from 'taro-ui';
+import moment from 'moment';
+import { RequestState } from '@/service';
+import { getTicketInfo } from '@/service/ticketsInfo';
 
 interface StepItemData {
   title: string;
 }
 
+export class TicketInfo {
+  id: number;
+  type: 0 | 1;
+  device: string;
+  deviceModel: string;
+  description: string;
+  createdTime: moment.Moment;
+  status: 1 | 2 | 3 | 4 | 5;
+}
+
+export class TicketNote {
+  id: number;
+  op: string;
+  type: 0 | 1 | 2;
+  content: string;
+  createdTime: moment.Moment;
+}
+
+function renderNote(n: TicketNote): JSX.Element {
+  return <View>{n.id}</View>;
+}
+
 interface TicketDetailState {
   id: number;
   current: number;
   items: Array<StepItemData>;
+  ticketInfo: TicketInfo;
+  notes: Array<TicketNote>;
+  rs: RequestState;
 }
 
 export default class TicketDetail extends Component<{}, TicketDetailState> {
@@ -20,7 +48,11 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
     id: 0,
     current: 0,
     items: [],
+    ticketInfo: new TicketInfo(),
+    notes: [new TicketNote()],
+    rs: new RequestState(),
   };
+
   componentDidMount(): void {
     const navBar = pt.get().navBar;
     Taro.setNavigationBarTitle({
@@ -33,16 +65,27 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
       id: id,
       items: items,
     });
+
+    getTicketInfo(this);
   }
+
   render(): ReactNode {
+    if (this.state.rs.loading) {
+      return <View>Loading</View>;
+    } else if (!this.state.rs.success) {
+      return <View>Request failed</View>;
+    }
+
     return (
       <View>
+        <View>{this.state.ticketInfo.deviceModel}</View>
         <AtSteps
           items={this.state.items}
           current={this.state.current}
           onChange={() => {}}
         />
         <View>TicketDetail: {this.state.id}</View>
+        <View>{this.state.notes.map(item => renderNote(item))}</View>
       </View>
     );
   }

src/pages/repair/repair.tsx

@@ -1,10 +1,37 @@
-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, AtRadio, AtCheckbox } 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 './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 as 0 | 1,
+    device: '',
+    deviceModel: '',
+    owner: '',
+    phone: '',
+    description: '',
+    isLoading: false,
+    isDisable: false,
+    checkedList: [0],
+  };
   // 以下是TabBar相关
   pageCtx = Taro.getCurrentInstance().page;
   componentDidShow() {
@@ -13,10 +40,160 @@ 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() {
+    submitTicket(this);
+  }
+
   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)}
+          />
+          <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>
+        <PageFooter />
       </View>
     );
   }

src/plain-text/RepairPage.ts

@@ -0,0 +1,110 @@
+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;
+  };
+  checkboxText: {
+    none: string;
+    usbDisk: string;
+    mouseOrReceiver: string;
+    powerAdapter: string;
+    others: {
+      label: string;
+      desc: 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 无法登入校内网站',
+  },
+  checkboxText: {
+    none: '无附件',
+    usbDisk: 'U 盘',
+    mouseOrReceiver: '鼠标/接收器',
+    powerAdapter: '电源适配器',
+    others: {
+      label: '其他',
+      desc: '请于评论中详述',
+    },
+  },
+};
+
+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 无法登入校内网站',
+  },
+  checkboxText: {
+    none: '无附件',
+    usbDisk: 'U 盘',
+    mouseOrReceiver: '鼠标/接收器',
+    powerAdapter: '电源适配器',
+    others: {
+      label: '其他',
+      desc: '请于评论中详述',
+    },
+  },
+};

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';
 import {
   TicketDetailText,
   ticketDetailEnUs,
@@ -27,6 +28,7 @@ interface TextRecord {
   memberPage: MemberPageText;
   ticketList: TicketListText;
   navBar: NavBarTitle;
+  repairPage: RepairPageText;
   ticketDetail: TicketDetailText;
 }
 
@@ -42,6 +44,7 @@ const textZhCn: TextRecord = {
   memberPage: memberPageZhCn,
   ticketList: ticketListZhCn,
   navBar: navBarTitleZhCh,
+  repairPage: repairPageZhCn,
   ticketDetail: ticketDetailZhCn,
 };
 
@@ -57,6 +60,7 @@ const textEnUs: TextRecord = {
   memberPage: memberPageEnUs,
   ticketList: ticketListEnUs,
   navBar: navBarTitleEnUs,
+  repairPage: repairPageEnUs,
   ticketDetail: ticketDetailEnUs,
 };
 

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,65 @@
+import TicketDetail, {
+  TicketInfo,
+  TicketNote,
+} from '@/pages/TicketDetail/TicketDetail';
+import Taro from '@tarojs/taro';
+import moment from 'moment';
+import { getUrl } from '.';
+
+export function getTicketInfo(that: TicketDetail) {
+  Taro.request({
+    url: getUrl('/tickets/info'),
+    method: 'GET',
+    data: {
+      id: that.state.id,
+    },
+  })
+    .then(res => {
+      if (!res.data.success) {
+        that.setState({
+          rs: {
+            loading: false,
+            success: 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(),
+          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(),
+          });
+        });
+        that.setState({
+          ticketInfo: ticketDetail,
+          notes: notes,
+          rs: {
+            loading: false,
+            success: true,
+          },
+        });
+      }
+    })
+    .catch(reason => {
+      that.setState({
+        rs: {
+          loading: false,
+          success: false,
+        },
+      });
+      console.log(reason);
+    });
+}