add report page; optimize style

src/app.config.ts

@@ -5,6 +5,7 @@ export default defineAppConfig({
     'pages/user/user',
     'pages/user/inform/inform',
     'pages/user/settings/settings',
+    'pages/user/report/report',
   ],
   window: {
     backgroundTextStyle: 'light',

src/pages/user/inform/inform.tsx

@@ -6,6 +6,7 @@ export default class InformPage extends Component {
   state = {
     phone: '',
     name: '',
+    isLoading: false,
   };
   handleChangePhone(phone: string) {
     this.setState({
@@ -20,7 +21,13 @@ export default class InformPage extends Component {
     return name;
   }
   onSubmit() {
+    this.setState({
+      isLoading: true,
+    });
     console.log(this.state.name, this.state.phone);
+    this.setState({
+      isLoading: false,
+    });
   }
   onReset() {
     this.setState({
@@ -52,8 +59,16 @@ export default class InformPage extends Component {
           value={this.state.name}
           onChange={this.handleChangeName.bind(this)}
         />
-        <AtButton formType='submit'>提交</AtButton>
-        <AtButton formType='reset'>重置</AtButton>
+        <AtButton
+          loading={this.state.isLoading}
+          formType='submit'
+          type='primary'
+        >
+          提交
+        </AtButton>
+        <AtButton formType='reset' type='secondary'>
+          清空
+        </AtButton>
       </AtForm>
     );
   }

src/pages/user/report/report.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  usingComponents: {},
+});

src/pages/user/report/report.tsx

@@ -0,0 +1,54 @@
+import { AtTextarea, AtButton, AtForm } from 'taro-ui';
+import { Component, ReactNode } from 'react';
+import './report.scss';
+
+export default class SettingsPage extends Component {
+  state = {
+    report: '',
+    isLoading: false,
+  };
+  handleChange(report: string) {
+    this.setState({
+      report,
+    });
+  }
+  onSubmit() {
+    this.setState({
+      isLoading: true,
+    });
+    console.log(this.state.report);
+    this.setState({
+      isLoading: false,
+    });
+  }
+  onReset() {
+    this.setState({
+      Report: '',
+    });
+  }
+  render(): ReactNode {
+    return (
+      <AtForm
+        onSubmit={this.onSubmit.bind(this)}
+        onReset={this.onReset.bind(this)}
+      >
+        <AtTextarea
+          value={this.state.report}
+          onChange={this.handleChange.bind(this)}
+          maxLength={200}
+          placeholder='无论是有关于小程序的建议，还是关于E志者协会的建议，都可以提出来哦！'
+        />
+        <AtButton
+          loading={this.state.isLoading}
+          formType='submit'
+          type='primary'
+        >
+          提交
+        </AtButton>
+        <AtButton formType='reset' type='secondary'>
+          清空
+        </AtButton>
+      </AtForm>
+    );
+  }
+}

src/pages/user/settings/settings.tsx

@@ -1,10 +1,16 @@
-import { View } from '@tarojs/components';
+import { AtButton } from 'taro-ui';
 import { Component, ReactNode } from 'react';
-import Taro from '@tarojs/taro';
 import './settings.scss';
 
 export default class SettingsPage extends Component {
+  handleQuit() {
+    console.log('Quit');
+  }
   render(): ReactNode {
-    return <View></View>;
+    return (
+      <AtButton type='primary' onClick={this.handleQuit.bind(this)}>
+        退出账号
+      </AtButton>
+    );
   }
 }

src/pages/user/user.tsx

@@ -26,6 +26,12 @@ export default class UserPage extends Component {
     });
   }
 
+  reportPage() {
+    Taro.navigateTo({
+      url: '/pages/user/report/report',
+    });
+  }
+
   render(): ReactNode {
     return (
       <View>
@@ -45,6 +51,14 @@ export default class UserPage extends Component {
             iconInfo={{ size: 25, color: '#FF4949', value: 'filter' }}
             onClick={this.settingsPage}
           />
+          <AtListItem
+            title='意见反馈'
+            note='有什么想说的都可以告诉我们哦！'
+            extraText=''
+            arrow='right'
+            iconInfo={{ size: 25, color: '#E69966', value: 'message' }}
+            onClick={this.reportPage}
+          />
         </AtList>
       </View>
     );