add card-viewer to repair page

src/pages/repair/repair.tsx

@@ -1,11 +1,19 @@
 import { View } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
 import Taro from '@tarojs/taro';
-import { AtForm, AtInput, AtButton, AtRadio, AtCheckbox } from 'taro-ui';
+import {
+  AtForm,
+  AtInput,
+  AtButton,
+  AtRadio,
+  AtCheckbox,
+  AtCard,
+} 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 './repair.scss';
 
 interface RepairPageState {
@@ -20,6 +28,8 @@ interface RepairPageState {
   checkedList: Array<number>;
 }
 
+const submitInterval = 5000;
+
 export default class RepairPage extends Component<{}, RepairPageState> {
   state = {
     type: 1 as 0 | 1,
@@ -114,85 +124,100 @@ export default class RepairPage extends Component<{}, RepairPageState> {
   }
 
   onSubmit() {
+    this.setState({
+      isLoading: true,
+      isDisable: true,
+    });
     submitTicket(this);
+    setTimeout(() => {
+      this.setState({
+        isDisable: false,
+      });
+    }, submitInterval);
   }
 
   render(): ReactNode {
     return (
       <View>
-        <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>
+        <AtCard
+          note={pt.get().repairPage.cardText.note}
+          title={pt.get().repairPage.cardText.title}
+          thumb={repairLogo}
+        >
+          <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>
+        </AtCard>
         <PageFooter />
       </View>
     );