题库适配

src/components/problems/index.js

@@ -10,7 +10,7 @@ class Problems extends Component {
 
   state = {
     isShowAnswer: false,
-    isShowCaptcha: false,
+    isShowCaptcha: true,
     instance: null,
     problem: {},
   }
@@ -19,12 +19,35 @@ class Problems extends Component {
     this.getProblem()
   }
 
-  getInstance = () => {
-
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.match.params.id !== this.props.match.params.id) {
+      this.setState({
+        problem: {},
+      });
+      this.getProblem()
+    }
   }
 
-  switchProblem() {
 
+  onVerify = data => {
+    http.post(`${API.home}/m/safety`, data)
+      .then(res => {
+        const {code} = res.data
+        if (code === 200) {
+          this.setState({
+            isShowCaptcha: false,
+          })
+          this.getProblem()
+        } else {
+          this.state.instance && this.state.instance.reset()
+        }
+      })
+  }
+
+  getInstance = (instance) => {
+    this.setState({
+      instance,
+    });
   }
 
   getProblem = () => {
@@ -51,7 +74,7 @@ class Problems extends Component {
   render() {
     const {isShowAnswer, problem: {quesInfo, between}, isShowCaptcha} = this.state
     return (
-      <article id={'problems'}>
+      quesInfo || isShowCaptcha ? <article id={'problems'}>
         {
           !isShowCaptcha ?
             <>
@@ -90,10 +113,12 @@ class Problems extends Component {
               </footer>
             </>
             : <div className="captcha-container">
-              <CaptchaAli getInstance={this.getInstance}/>
+              <div>亲，系统正忙，滑动一下马上回来</div>
+              <CaptchaAli getInstance={this.getInstance} onVerify={this.onVerify}/>
             </div>
         }
-      </article>
+      </article> : null
+
     );
   }
 }

src/components/problems/index.scss

@@ -45,6 +45,7 @@
     font-size: 16px;
     color: #333;
     white-space: pre-wrap;
+    word-break: break-all;
 
     .title {
       margin-bottom: 5px;
@@ -95,8 +96,13 @@
 
   .captcha-container{
     width: 80%;
-    padding-top: 40%;
+    padding-top: 50%;
     margin: 0 auto;
+    text-align: center;
+    font-size: 20px;
+    div:nth-child(1){
+      margin-bottom: 10px;
+    }
   }
 }