题库

src/components/problems/index.js

 import React, { Component } from 'react';
 import './index.scss'
-import { HeaderBar, CallApp } from "@common/index"
+import { HeaderBar, CallApp, CaptchaAli } from "@common/index"
+import { isToday } from "date-fns";
+import { http } from "@/utils"
+import { Toast } from "antd-mobile";
+
 
 class Problems extends Component {
+
   state = {
     isShowAnswer: false,
-    answer: '@nishizhen：个人感觉逻辑回归和线性回归首先都是广义的线性回归，\n' +
-      '其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
-      '另外线性回归在整个实数域范围内进行预测，敏感度一致，而分类范围，需要在[0,1]。逻辑回归就是一种减小预测范围，将预测值限定为[0,1]间的一种回归模型，因而对于这类问题来说，逻辑回归的鲁棒性比线性回归的要好。\n' +
-      '@乖乖癞皮狗：逻辑回归的模型本质上是一个线性回归模型，逻辑回归都是以线性回归为理论支持的。但线性回归模型无法做到sigmoid的非线性形式，sigmoid可以轻松处理0/1分类问题。\n' +
-      '                            ',
+    isShowCaptcha: false,
+    instance: null,
+    problem: {},
+  }
+
+  componentDidMount() {
+    this.getProblem()
+  }
+
+  getInstance = () => {
+
+  }
+
+  switchProblem() {
+
   }
 
+  getProblem = () => {
+    http.get(`${API.home}/m/question/${this.props.match.params.id}`)
+      .then(res => {
+        const {code, msg, data} = res.data
+        if (code === 200) {
+
+          this.setState({
+            problem: data,
+          });
+
+        } else if (code === 1) {
+          this.setState({
+            isShowCaptcha: true,
+          });
+        } else {
+          Toast.info(msg)
+        }
+      })
+  }
+
+
   render() {
-    const {isShowAnswer, answer} = this.state
+    const {isShowAnswer, problem: {quesInfo, between}, isShowCaptcha} = this.state
     return (
       <article id={'problems'}>
-        <HeaderBar title='机器学习' arrow={true} cart={false}></HeaderBar>
-        <div className="topic">
-          1.请用python编写函数find_string，从文本中搜索并打印内容，要求支持通配符星号和问号。
-          例子：
-          >>>find_string('hello\nworld\n','wor')
-          ['wor']
-          >>>find_string('hello\nworld\n','l*d')
-          ['ld']
-          >>>find_string('hello\nworld\n','o.')
-          ['or']
-        </div>
-        {
-          !isShowAnswer &&
-          <div className="btn" onClick={() => {
-            this.setState({
-              isShowAnswer: true,
-            });
-          }}>
-            <button>查看解析 <i className={'iconfont iconiconfront-69'}></i></button>
-          </div>
-        }
         {
-          isShowAnswer &&
-          <div className={`content ${isShowAnswer ? 'slideInDown' : ''}`}>
-            <div className={'title'}>解析</div>
-            <span>
-              {answer}
-            </span>
-          </div>
+          !isShowCaptcha ?
+            <>
+              <HeaderBar title='机器学习' arrow={true} cart={false}></HeaderBar>
+              <div className="topic">
+                {quesInfo && quesInfo.ques}
+              </div>
+              {
+                !isShowAnswer &&
+                <div className="btn" onClick={() => {
+                  this.setState({
+                    isShowAnswer: true,
+                  });
+                }}>
+                  <button>查看解析 <i className={'iconfont iconiconfront-69'}></i></button>
+                </div>
+              }
+              {
+                isShowAnswer &&
+                <div className={`content ${isShowAnswer ? 'slideInDown' : ''}`}>
+                  <div className={'title'}>解析</div>
+                  <span>
+                    {quesInfo.analysis}
+                  </span>
+                </div>
+              }
+              <footer>
+                <div className="app">更多题目请 <CallApp text={'前往APP'}/></div>
+                <div className="op">
+                  <a href="javascript:void(0);" className={'nav'}>上一题</a>
+                  <a href="javascript:void(0);" className={'nav'}>下一题</a>
+                </div>
+              </footer>
+            </>
+            : <div className="captcha-container">
+              <CaptchaAli getInstance={this.getInstance}/>
+            </div>
         }
-        <footer>
-          <div className="app">更多题目请 <CallApp text={'前往APP'}/></div>
-          <div className="op">
-            <a href="javascript:void(0);" className={'nav'}>上一题</a>
-            <a href="javascript:void(0);" className={'nav'}>下一题</a>
-          </div>
-        </footer>
       </article>
     );
   }

src/components/problems/index.scss

@@ -91,6 +91,12 @@
       }
     }
   }
+
+  .captcha-container{
+    width: 80%;
+    padding-top: 40%;
+    margin: 0 auto;
+  }
 }
 
 @keyframes slideInDown {

src/router/router-config.js

@@ -337,7 +337,7 @@ export default [
   },
   //题库
   {
-    path: '/problems',
+    path: '/problems/:id',
     component: loadable(() => import('@/components/problems')),
   },
 ]