Merge branch 'problems' into dev

src/components/problems/index.js

+import React, { Component } from 'react';
+import './index.scss'
+import { HeaderBar, CallApp, CaptchaAli } from "@common/index"
+import { http } from "@/utils"
+import { Toast } from "antd-mobile";
+import { Link } from 'react-router-dom'
+
+
+class Problems extends Component {
+
+  state = {
+    isShowAnswer: false,
+    isShowCaptcha: true,
+    instance: null,
+    problem: {},
+  }
+
+  componentDidMount() {
+    this.getProblem()
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.match.params.id !== this.props.match.params.id) {
+      this.setState({
+        problem: {},
+      });
+      this.getProblem()
+    }
+  }
+
+
+  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 = () => {
+    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, problem: {quesInfo, between}, isShowCaptcha} = this.state
+    return (
+      quesInfo || isShowCaptcha ? <article id={'problems'}>
+        {
+          !isShowCaptcha ?
+            <>
+              <HeaderBar title={quesInfo && quesInfo.category} arrow={true} cart={false}></HeaderBar>
+              <div className="topic">
+                <span>{quesInfo && quesInfo.order_id}.</span>
+                <span dangerouslySetInnerHTML={{__html: quesInfo && quesInfo.ques}}></span>
+              </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 dangerouslySetInnerHTML={{__html: quesInfo.analysis}}></span>
+                </div>
+              }
+              <footer>
+                <div className="app">更多题目请 <CallApp text={'前往APP'}/></div>
+                <div className="op">
+                  {
+                    between && !!between.up && <Link to={`/problems/${between.up}`} className={'nav'}>上一题</Link>
+                  }
+                  {
+                    between && !!between.down && <Link to={`/problems/${between.down}`} className={'nav'}>下一题</Link>
+                  }
+                </div>
+              </footer>
+            </>
+            : <div className="captcha-container">
+              <div>亲，系统正忙，滑动一下马上回来</div>
+              <CaptchaAli getInstance={this.getInstance} onVerify={this.onVerify}/>
+            </div>
+        }
+      </article> : null
+
+    );
+  }
+}
+
+export default Problems;
\ No newline at end of file

src/components/problems/index.scss

+#problems {
+  height: 100%;
+  padding: 58px 0 54px;
+  overflow-x: hidden;
+
+  .detail-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  .topic {
+    padding: 0 13px;
+    white-space: pre-wrap;
+    font-size: 16px;
+    color: #555;
+  }
+
+  .btn {
+    position: relative;
+    margin-top: 21px;
+
+    button {
+      position: absolute;
+      right: 0;
+      top: 0;
+      font-size: 12px;
+      color: #09f;
+      -webkit-appearance: none;
+      outline: 0;
+      border: 0;
+      background-color: transparent;
+    }
+
+    .iconfont {
+      font-size: 14px;
+    }
+  }
+
+  .content {
+    margin-top: 16px;
+    padding: 15px 13px;
+    background-color: #F5F5F5;
+    font-size: 16px;
+    color: #333;
+    white-space: pre-wrap;
+    word-break: break-all;
+
+    .title {
+      margin-bottom: 5px;
+      color: #999;
+      font-size: 14px;
+    }
+  }
+
+  footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 44px;
+    padding: 0 12px 0 15px;
+    border-top: 1px solid #DDD;
+    background-color: #fff;
+    font-size: 12px;
+    color: #09f;
+
+    .app {
+      display: flex;
+      color: #666;
+
+      div {
+        margin-left: 5px;
+        color: #09f;
+      }
+    }
+
+    .nav {
+      display: inline-block;
+      width: 60px;
+      height: 22px;
+      line-height: 22px;
+      border: 1px solid rgba(0, 153, 255, 1);
+      border-radius: 11px;
+      text-align: center;
+
+      &:nth-child(1) {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .captcha-container{
+    width: 80%;
+    padding-top: 50%;
+    margin: 0 auto;
+    text-align: center;
+    font-size: 20px;
+    div:nth-child(1){
+      margin-bottom: 10px;
+    }
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    transform: translate3d(0, -10%, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    visibility: visible;
+  }
+}
+
+.slideInDown {
+  animation: slideInDown .3s both;
+}
\ No newline at end of file

src/router/router-config.js

@@ -341,4 +341,9 @@ export default [
     isPrivate: true,
     component: loadable(() => import(/* webpackChunkName: 'intelligent-recommend' */'@/components/intelligent-recommend')),
   },
+  //题库
+  {
+    path: '/problems/:id',
+    component: loadable(() => import('@/components/problems')),
+  },
 ]