Merge branch 'ai-exam' into ai-test-merge

package-lock.json

@@ -4494,9 +4494,9 @@
       }
     },
     "date-fns": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
-      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.14.0.tgz",
+      "integrity": "sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw=="
     },
     "date-now": {
       "version": "0.1.4",
@@ -13980,6 +13980,11 @@
       "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
       "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks="
     },
+    "store2": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/store2/-/store2-2.11.2.tgz",
+      "integrity": "sha512-TQMKs+C6n9idtzLpxluikmDCYiDJrTbbIGn9LFxMg0BVTu+8JZKSlXTWYRpOFKlfKD5HlDWLVpJJyNGZ2e9l1A=="
+    },
     "stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",

package.json

@@ -22,7 +22,7 @@
     "case-sensitive-paths-webpack-plugin": "2.2.0",
     "crypto-js": "^3.1.9-1",
     "css-loader": "1.0.0",
-    "date-fns": "^1.30.1",
+    "date-fns": "^2.14.0",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
     "eslint": "5.12.0",
@@ -82,6 +82,7 @@
     "sass-loader": "^7.1.0",
     "sass-resources-loader": "^2.0.0",
     "socket.io": "^2.2.0",
+    "store2": "^2.11.2",
     "style-loader": "0.23.1",
     "swiper": "^4.5.1",
     "terser-webpack-plugin": "1.2.2",

src/components/ai-test/analysis/index.js

+import React, { Component } from 'react';
+import './index.scss'
+import { HeaderBar } from "@common/index"
+import Question from "@components/ai-test/common/question"
+import Navigation from "@components/ai-test/common/navigation"
+import { withRouter, Link } from "react-router-dom";
+import { html, http } from "@/utils"
+import { Toast } from "antd-mobile";
+import Recommends from '@/components/ai-test/common/recommends'
+
+
+class Analysis extends Component {
+
+  state = {
+    questions: [],
+    activeIndex: 0,
+    userSelect: '',
+    rightAnswer: '',
+    recommends: [],
+  }
+
+  componentDidMount() {
+    this.getAnalysis()
+  }
+
+  getAnalysis = () => {
+    http.post(`${API.home}/sys/get_analysis`, {
+      record_id: this.props.match.params.recordId,
+    }).then(res => {
+      const {code, msg, data} = res.data
+      if (code === 200) {
+
+        this.getRecommends(data[0].type_id)
+        this.setState({
+          questions: data,
+        }, () => {
+          this.getAnswerInfo()
+        });
+
+      } else {
+        Toast.fail(msg, 2, null, false)
+      }
+    })
+  }
+
+  getAnswerInfo = () => {
+    const {questions, activeIndex} = this.state
+    const question = questions[activeIndex]
+    const userAnswerIndex = question.options.findIndex(item => item.user_select)
+    const rightAnswerIndex = question.options.findIndex(item => item.is_ans)
+    this.setState({
+      userSelect: String.fromCharCode(65 + userAnswerIndex),
+      rightAnswer: String.fromCharCode(65 + rightAnswerIndex),
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.activeIndex !== this.state.activeIndex) {
+      this.getAnswerInfo()
+    }
+  }
+
+  getRecommends = (typeId) => {
+    http.post(`${API.home}/sys/get_commend_course`, {
+      type_id: typeId,
+    }).then(res => {
+      const {code, msg, data} = res.data
+      if (code === 200) {
+        this.setState({
+          recommends: data,
+        })
+      } else {
+        Toast.fail(msg, 2, null, msg)
+      }
+    })
+  }
+
+
+  render() {
+    const {questions, activeIndex, userSelect, rightAnswer, recommends} = this.state
+    return (
+      <div className={'analysis-container'}>
+        <HeaderBar title={'AI水平测试'} arrow={true}/>
+        {
+          !!questions.length && <Question activeIndex={activeIndex} question={questions[activeIndex]}/>
+        }
+        <div style={{height: '8px', backgroundColor: '#f5f5f5'}}></div>
+        <Navigation questions={questions} isAnalysis={true} handleClick={(index) => {
+          this.setState({
+            activeIndex: index,
+          });
+        }}/>
+        <div className="analysis">
+          <div className="info">您选择的是{userSelect}，正确答案是{rightAnswer} 回答{userSelect === rightAnswer ? '正确' : '错误'}</div>
+          <div className="content">
+            <div className="head">
+              <i className="icon"></i>
+              <span>解析</span>
+            </div>
+            {
+              !!questions.length &&
+              <div className="analysis-content" dangerouslySetInnerHTML={html(questions[activeIndex].analysis)}></div>
+            }
+          </div>
+        </div>
+        {
+          !!questions.length && questions[activeIndex].type_id && <Recommends typeId={questions[activeIndex].type_id}/>
+        }
+      </div>
+    );
+  }
+}
+
+export default withRouter(Analysis);
\ No newline at end of file

src/components/ai-test/analysis/index.scss

+.analysis-container {
+  padding-bottom: 55px;
+  padding-top: 64px;
+
+  .detail-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #fff;
+    border-bottom: 1px solid #DDD;
+  }
+
+  .analysis {
+    padding: 15px 17px 0;
+
+    .info {
+      margin-bottom: 22px;
+      color: #333;
+      font-size: 14px;
+    }
+
+    .head {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15px;
+
+      .icon {
+        display: block;
+        width: 16px;
+        height: 16px;
+        margin-right: 5px;
+        background: url("./analysis.png") no-repeat;
+        background-size: contain;
+      }
+
+      span {
+        font-size: 14px;
+        color: #09f;
+      }
+    }
+
+    &-content {
+      font-size: 14px;
+      color: #666;
+    }
+  }
+}
\ No newline at end of file

src/components/ai-test/assist/index.js

+import React, { Component } from 'react';
+import './index.scss'
+import { HeaderBar } from "@common/index"
+import Question from "@components/ai-test/common/question"
+import { html, http } from "@/utils"
+import { Toast } from "antd-mobile";
+import { withRouter, Link } from "react-router-dom";
+import { connect } from "react-redux";
+import { compose } from "redux";
+import Recommends from "@components/ai-test/common/recommends"
+import classnames from 'classnames'
+
+
+class Assist extends Component {
+  state = {
+    question: null,
+    answer: {},
+    result: null,
+    rightAnswer: '',
+    userAnswer: '',
+  }
+
+  componentDidMount() {
+    this.getData()
+  }
+
+  getData = () => {
+    http.get(`${API.home}/sys/aitest/assist`)
+      .then(res => {
+        const {code, msg, data} = res.data
+        if (code === 200) {
+          const answer = {
+            [data.id]: undefined,
+          }
+          this.setState({
+            question: data,
+            answer,
+          });
+        } else {
+          Toast.fail(msg, 2, null, false)
+        }
+      })
+  }
+
+  selectAnswer = (question, optionId) => {
+    this.setState({
+      answer: {
+        [question.id]: optionId,
+      },
+    });
+  }
+
+  submit = () => {
+    const {question, answer} = this.state
+    if (!answer[question.id]) {
+      Toast.info('请选择后进提交', 2, null, false)
+      return
+    }
+    http.post(`${API.home}/sys/aitest/assistSubmit`, {
+      code: this.props.match.params.assistCode,
+      question_id: question.id,
+      answer_id: answer[question.id],
+    }).then(res => {
+      const {code, msg, data} = res.data
+      this.setAnswer(data.correct_answer)
+      if (code === 200) {
+        this.setState({
+          result: data,
+        });
+      } else {
+        Toast.fail(msg, 2, null, false)
+      }
+    })
+  }
+
+  setAnswer = (rightAnswerId) => {
+    this.setState(state => {
+      let rightAnswer = '', userAnswer = ''
+      const question = {
+        ...state.question, ...{
+          options: state.question.options.map((item, index) => {
+            if (item.id === rightAnswerId) {
+              item.is_ans = 1
+              rightAnswer = String.fromCharCode(65 + index)
+            }
+            if (item.id === state.answer[state.question.id]) {
+              userAnswer = String.fromCharCode(65 + index)
+              item.user_select = 1
+            }
+            return item
+          }),
+        },
+      }
+      return {
+        question,
+        rightAnswer,
+        userAnswer,
+      }
+    });
+  }
+
+  render() {
+    const {question, answer, result, rightAnswer, userAnswer} = this.state
+    return (
+      <div className={'assist'}>
+        <HeaderBar title={'AI水平测试'} arrow={true}/>
+        {
+          question &&
+          <Question question={question} category={'机器学习'} answer={answer} selectAnswer={!result && this.selectAnswer}/>
+        }
+        <div style={{height: '8px', backgroundColor: '#f5f5f5'}}></div>
+        {
+          result && <div className="content">
+            <div class={'info'}>您的选择是{userAnswer}，正确答案是{rightAnswer} 回答{userAnswer === rightAnswer ? '正确' : '错误'}</div>
+            <div className="head">
+              <i className="icon"></i>
+              <span>解析</span>
+            </div>
+            <div className="analysis-content" dangerouslySetInnerHTML={html(result.analysis)}></div>
+          </div>
+        }
+        {
+          result && <>
+            <Recommends typeId={question.type_id}/>
+            <div className={classnames(['status', {
+              end: result.status === 6,
+              success: result.status === 1,
+              error: result.status === 2 || result.status === 3 || result.status === 4 || result.status === 5,
+            }])}>
+              {result.desc}
+            </div>
+          </>
+        }
+
+        <div className="btns">
+          {
+            !result && <button className={'submit'} onClick={this.submit}>提交</button>
+          }
+          {
+            result && (result.status === 6
+              ? <Link to={'/'} class={'home'}>返回首页</Link>
+              : <Link to={'/ai-test/scores'} class={'test'}>我也要测试</Link>)
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+export default compose(
+  connect(
+    state => state.user,
+    null,
+  ),
+  withRouter,
+)(Assist);
\ No newline at end of file

src/components/ai-test/assist/index.scss

+.assist {
+  padding-top: 59px;
+  padding-bottom: 60px;
+
+  .detail-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #fff;
+    border-bottom: 1px solid #DDD;
+  }
+
+  .btns {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    padding: 10px;
+    background-color: #fff;
+    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
+
+    .submit {
+      background-color: #09f;
+      color: #fff;
+      font-size: 18px;
+      width: 100%;
+      height: 100%;
+      border: 0;
+      outline: 0;
+      -webkit-appearance: none;
+    }
+
+    a {
+      display: block;
+      width: 100%;
+      height: 100%;
+      font-size: 18px;
+      line-height: 40px;
+      color: #fff;
+      text-align: center;
+
+      &.home {
+        background-color: #09f;
+      }
+
+      &.test {
+        background-color: #FFAE00;
+      }
+    }
+  }
+
+  .head {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+
+    .icon {
+      display: block;
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+      background: url("../analysis/analysis.png") no-repeat;
+      background-size: contain;
+    }
+
+    span {
+      font-size: 14px;
+      color: #09f;
+    }
+  }
+
+  .content {
+    padding: 15px 17px;
+
+    .info {
+      color: #333;
+      font-size: 14px;
+      margin-bottom: 15px;
+    }
+    .analysis-content{
+      font-size: 14px;
+    }
+  }
+
+  .status {
+    font-size: 14px;
+    text-align: center;
+    color: #333;
+
+    &.success {
+      color: #29C8A0;
+    }
+
+    &.error {
+      color: #FF5A5A;
+    }
+
+    &.end {
+      color: #666;
+    }
+  }
+}
\ No newline at end of file

src/components/ai-test/common/navigation/index.js

+import React from 'react';
+import './index.scss'
+import classnames from 'classnames'
+
+const Navigation = ({questions, answer, handleClick, isAnalysis}) => {
+  return (
+    <div className="navigation">
+      <ul>
+        {
+          !!questions.length && questions.map((item, index) => {
+            return <li key={index} onClick={handleClick.bind(this, index)}
+                       className={classnames({
+                         active: answer && answer[item.id],
+                         correct: isAnalysis && item.options.some(item => item.is_ans && item.user_select),
+                         error: isAnalysis && item.options.some(item => item.user_select && !item.is_ans),
+                       })}>{index + 1}</li>
+          })
+        }
+      </ul>
+    </div>
+  );
+};
+
+export default Navigation;
\ No newline at end of file

src/components/ai-test/common/navigation/index.scss

+.navigation {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 374px;
+  height: 55px;
+  padding: 0 15px;
+  background: #fff;
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
+
+  ul {
+    height: 55px;
+    padding-top: 11px;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  li {
+    display: inline-block;
+    width: 34px;
+    height: 34px;
+    border: 1px solid #09f;
+    border-radius: 50%;
+    margin-right: 20px;
+    color: #09f;
+    font-size: 18px;
+    text-align: center;
+    line-height: 34px;
+
+    &.active {
+      color: #fff;
+      background-color: #09f;
+    }
+
+    &.correct {
+      background-color: #2CDBAF;
+      border-color: #2CDBAF;
+      color: #fff;
+    }
+
+    &.error {
+      border-color: #E64949;
+      color: #E64949;
+      //background-color: #E64949;
+    }
+  }
+}

src/components/ai-test/common/question/index.js

+import React, { Component } from 'react';
+import './index.scss'
+import { html } from "@/utils"
+import classnames from 'classnames'
+
+
+class Question extends Component {
+
+  handleSelect = option => {
+    const {selectAnswer} = this.props
+    if (selectAnswer) {
+      selectAnswer(this.props.question, option.id)
+      this.setState({
+        selectedId: option.id,
+      })
+    }
+  }
+
+  render() {
+    const {question, answer, activeIndex, category} = this.props
+    return (
+      <div className={'question-container'}>
+        {
+          <div className="question">
+            {activeIndex !== undefined && `${activeIndex + 1}.`}
+            {category && <span className={'category'}>{category}</span>}&nbsp;
+            <span dangerouslySetInnerHTML={html(question.ques)}></span>
+          </div>
+        }
+        <ul className={'options'}>
+          {
+            !!question.options.length && question.options.map((item, index) => {
+              return <li key={item.id}
+                         className={classnames({
+                           active: answer && answer[question.id] === item.id,
+                           error: item.user_select && !item.is_ans,
+                           correct: item.is_ans,
+                         })}
+                         onClick={this.handleSelect.bind(this, item)}>
+                <div className={'letter'}>{String.fromCharCode(65 + index)}</div>
+                <div>{item.des}</div>
+              </li>
+            })
+          }
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default Question;
\ No newline at end of file

src/components/ai-test/common/question/index.scss

+.question-container {
+  padding-bottom: 20px;
+
+  .question {
+    font-size: 16px;
+    color: #222;
+    margin-bottom: 21px;
+    padding: 0 17px;
+    white-space: pre-line;
+
+    .category {
+      padding: 2px 5px 3px;
+      border: 1px solid #09f;
+      border-radius: 3px;
+      font-size: 12px;
+      color: #09f;
+    }
+  }
+
+  .options {
+    li {
+      display: flex;
+      min-height: 48px;
+      padding: 0 17px;
+      align-items: center;
+      font-size: 16px;
+      color: #333;
+      margin-bottom: 12px;
+
+      &.active {
+        background: #F8F8FB;
+
+        .letter {
+          color: #09f;
+          border-color: #09f;
+        }
+      }
+
+      &.correct {
+        .letter {
+          background-color: #29C8A0;
+          color: #fff;
+          border: 1px solid #29C8A0;
+        }
+      }
+
+      &.error {
+        .letter {
+          background-color: #FF5A5A;
+          color: #fff;
+          border: 1px solid #FF5A5A;
+        }
+      }
+    }
+  }
+
+  .letter {
+    flex: 0 0 auto;
+    width: 24px;
+    height: 24px;
+    margin-right: 13px;
+    border: 1px solid #999;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 24px;
+  }
+}
\ No newline at end of file

src/components/ai-test/common/recommends/index.js

+import React, { Component } from 'react';
+import './index.scss'
+import { http } from "@/utils"
+import { Toast } from "antd-mobile";
+import { Link } from "react-router-dom";
+
+
+class Recommends extends Component {
+  state = {
+    recommends: [],
+  }
+
+  componentDidMount() {
+    this.props.typeId && this.getRecommends(this.props.typeId)
+  }
+
+  getRecommends = (typeId) => {
+    http.post(`${API.home}/sys/get_commend_course`, {
+      type_id: typeId,
+    }).then(res => {
+      const {code, msg, data} = res.data
+      if (code === 200) {
+        this.setState({
+          recommends: data,
+        })
+      } else {
+        Toast.fail(msg, 2, null, msg)
+      }
+    })
+  }
+
+  render() {
+    const {recommends} = this.state
+    return (
+      <div className="recommends">
+        <div>相关课程</div>
+        <ul>
+          {
+            !!recommends.length && recommends.map(item => {
+              return <li key={item.course_id}>
+                <Link to={`/detail?id=${item.course_id}`}><img src={item.image_name} alt=""/></Link>
+              </li>
+            })
+          }
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default Recommends;
\ No newline at end of file

src/components/ai-test/common/recommends/index.scss

+.recommends {
+  margin-top: 24px;
+  padding: 0 16px;
+
+  div:nth-child(1) {
+    font-size: 14px;
+    color: #09f;
+    margin-bottom: 15px;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  li {
+    margin-right: 13px;
+    margin-bottom: 10px;
+    font-size: 0;
+
+    &:nth-child(2n) {
+      margin-right: 0;
+    }
+  }
+
+  img {
+    width: 165px;
+    height: 119px;
+  }
+}
\ No newline at end of file

src/components/ai-test/exam/index.js

+import React, { Component } from 'react';
+import './index.scss'
+import Question from '../common/question'
+import { HeaderBar } from "@common/index"
+import { browser, getParam, http } from "@/utils"
+import { Toast } from 'antd-mobile'
+import { withRouter } from 'react-router-dom'
+import storage from 'store2'
+import Navigation from "@components/ai-test/common/navigation"
+
+class Exam extends Component {
+
+  store = storage.namespace('aiTestExam')
+  timer = null
+  unlisten = null
+
+  state = {
+    questions: [],
+    activeQuestion: 0,
+    time: {
+      h: 0,
+      m: 0,
+      s: 0,
+    },
+    answer: {},
+    recordId: undefined,
+  }
+
+  componentDidMount() {
+    this.getQuestions()
+    this.unlisten = this.props.history.listen((location, action) => {
+      if (action === 'POP' && location.pathname === '/ai-test/scores') {
+        this.unlisten()
+        this.store.clearAll()
+      }
+    })
+  }
+
+  setCounter = () => {
+    this.timer = setInterval(() => {
+
+      this.setState(state => {
+        const time = state.time
+        if (time.s + 1 >= 60) {
+          time.s = 0
+          if (time.m + 1 >= 60) {
+            time.h = time.h + 1
+            time.m = 0
+          } else {
+            time.m = time.m + 1
+          }
+        } else {
+          time.s = time.s + 1
+        }
+        return {
+          time,
+        }
+      })
+    }, 1000)
+  }
+
+  goBack = () => {
+    const {state} = this.props.location
+    if (browser.isWeixin && getParam('code') && getParam('state')) {
+      window.history.go(-2)
+    }
+    if (state.records && state.records.length > 1) {
+      window.history.go(-1);
+    } else if (state.from && state.from.pathname) {
+      location.replace(`${state.from.pathname}${state.from.search}`)
+    } else {
+      window.location.href = window.location.origin
+    }
+  }
+
+  getQuestions = () => {
+    http.get(`${API.home}/sys/get_question`)
+      .then(res => {
+        const {code, msg, data} = res.data
+        if (code === 200) {
+          let answer = this.store.get('answer') || {}, time = this.store.get('time')
+          if (!answer) {
+            data.forEach(item => {
+              answer[item.id] = undefined
+            })
+          }
+          if (!time) {
+            time = {h: 0, m: 0, s: 0}
+          }
+
+          this.setState({
+            questions: data,
+            answer,
+            time,
+            recordId: data[0].record_id,
+          })
+
+          this.setCounter()
+        } else if (code === 23007) {
+          this.props.history.replace('/ai-test/scores')
+        } else {
+          Toast.fail(msg, 2, null, false)
+        }
+      })
+  }
+
+  selectAnswer = (question, optionId) => {
+    this.setState(state => {
+      const answer = state.answer
+      answer[question.id] = optionId
+      return {
+        answer,
+      }
+    }, () => {
+      const {answer, questions} = this.state
+      const keys = Object.keys(answer)
+      const values = Object.values(answer)
+      if (keys.length === questions.length && values.every(item => item)) {
+        const {history} = this.props
+        clearInterval(this.timer)
+        const {time, answer, recordId} = this.state
+        this.store.setAll({time, answer, recordId})
+        history.push('/ai-test/submit')
+      }
+    })
+  }
+
+  render() {
+    const {questions, activeQuestion, time, answer} = this.state
+    return (
+      <div className={'exam'}>
+        <header>
+          <div className="go-back">
+            <i className='iconfont iconiconfront-68' onClick={this.goBack}></i>
+          </div>
+          <div className="time">
+            <i className={'iconfont iconzhong'}></i>
+            <span>
+              {
+                !!time.h && <>{time.h && time.h.toString().padStart(2, '0')}:</>
+              }
+              {time.m.toString().padStart(2, '0')}:
+              {time.s.toString().padStart(2, '0')}
+            </span>
+          </div>
+          <div className="count">{Object.values(answer).filter(item => item).length}/{questions.length}</div>
+        </header>
+        <div className="banner">
+          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/scores/exam-banner.png" alt=""/>
+        </div>
+        <div className="question-section">
+          {
+            !!questions.length &&
+            <Question activeIndex={activeQuestion} question={questions[activeQuestion]} selectAnswer={this.selectAnswer} answer={answer}></Question>
+          }
+        </div>
+        <Navigation questions={questions} answer={answer} handleClick={(index) => {
+          this.setState({
+            activeQuestion: index,
+          });
+        }}/>
+      </div>
+    );
+  }
+}
+
+export default withRouter(Exam);
\ No newline at end of file

src/components/ai-test/exam/index.scss

+html, body {
+  height: 100%;
+}
+
+body {
+  background-color: #f5f5f5;
+}
+
+.exam {
+  background-color: #fff;
+  padding-bottom: 55px;
+
+  header {
+    display: flex;
+    height: 49px;
+    padding: 0 12px;
+    align-items: center;
+    justify-content: space-between;
+
+    .iconfont {
+      font-size: 16px;
+      color: #222;
+      font-weight: 600;
+    }
+
+    .time {
+      display: flex;
+      align-items: center;
+
+      .iconfont {
+        margin-right: 8px;
+      }
+
+      span {
+        font-size: 18px;
+      }
+    }
+
+    .count {
+      font-size: 14px;
+      color: #09f;
+    }
+  }
+
+  .banner {
+    height: 94px;
+    margin-bottom: 18px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
\ No newline at end of file

src/components/ai-test/index.js

+import React, { Component } from 'react';
+import './index.scss'
+import { Switch, Route } from 'react-router-dom'
+import Scores from './scores'
+import Exam from './exam'
+import SubmitAnswer from "@components/ai-test/submit-answer"
+import Parse from "@components/ai-test/analysis"
+import Assist from "@components/ai-test/assist"
+
+class AiTest extends Component {
+  render() {
+    const {match} = this.props
+    return (
+      <Switch>
+        <Route path={`${match.path}/scores`}>
+          <Scores/>
+        </Route>
+        <Route path={`${match.path}/exam`}>
+          <Exam/>
+        </Route>
+        <Route path={`${match.path}/submit`}>
+          <SubmitAnswer/>
+        </Route>
+        <Route path={`${match.path}/parse/:recordId`}>
+          <Parse/>
+        </Route>
+        <Route path={`${match.path}/assist/:assistCode`}>
+          <Assist/>
+        </Route>
+      </Switch>
+    );
+  }
+}
+
+export default AiTest;
\ No newline at end of file

src/components/ai-test/index.scss

+.ai-test{
+
+}
\ No newline at end of file

src/components/ai-test/scores/index.scss

+.scores {
+  $blue-bg: #e5f5ff;
+  background-color: #2e7ee9;
+  padding: 0 5px 60px;
+
+  .banner {
+    height: 171px;
+    margin: 0 -5px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .info {
+    position: relative;
+    height: 70px;
+    text-align: center;
+    line-height: 70px;
+
+    span {
+      color: $blue-bg;
+      font-size: 15px;
+    }
+
+    a {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      text-decoration: underline;
+      font-size: 14px;
+      color: #fff;
+    }
+  }
+
+  .score-list {
+    border-radius: 6px;
+    overflow: hidden;
+    margin-bottom: 30px;
+
+    .share {
+      height: 40px;
+      text-align: center;
+      font-size: 16px;
+      line-height: 40px;
+      color: #09f;
+      text-decoration: underline;
+      background-color: $blue-bg;
+    }
+
+  }
+
+  th {
+    font-weight: normal;
+  }
+
+  .am-tabs {
+
+    &-tar-bar-wrap {
+      border: 0;
+    }
+
+    &-default-bar {
+      padding: 10px 10px 0;
+      background-color: $blue-bg !important;
+
+      &-tab-active {
+        background-color: #fff;
+        color: #0D75E5;
+      }
+
+      &-tab {
+        width: 80px;
+        height: 40px;
+        border-radius: 4px 4px 0 0;
+
+        &::after {
+          display: none !important;
+        }
+      }
+
+      &-content {
+        padding-top: 2px;
+        line-height: 48px;
+        font-size: 15px;
+        color: #525B65;
+      }
+    }
+
+    .title {
+      display: flex;
+      justify-content: space-around;
+      height: 38px;
+      background-color: #FFD66A;
+      color: #333;
+      font-size: 14px;
+      line-height: 38px;
+    }
+
+    .tab-content {
+      box-sizing: border-box;
+      padding-top: 10px;
+      background-color: #fff;
+    }
+
+    table {
+      width: 100%;
+      margin: 0;
+      text-align: center;
+      border-collapse: collapse;
+
+      a {
+        color: #09f;
+        text-decoration: underline;
+      }
+
+      thead tr {
+        height: 38px;
+        background-color: #FFD66A;
+        color: #333;
+        font-size: 14px;
+        line-height: 38px;
+      }
+
+      tbody tr {
+        height: 50px;
+        line-height: 50px;
+      }
+    }
+  }
+
+  .rank-list {
+    border-radius: 6px;
+    overflow: hidden;
+    margin-bottom: 30px;
+
+    .head {
+      height: 68px;
+      padding-top: 12px;
+      background-color: $blue-bg;
+      text-align: center;
+
+      div:nth-child(1) {
+        font-size: 18px;
+        color: #0E75E6;
+        margin-bottom: 5px;
+      }
+
+      div:nth-child(2) {
+        position: relative;
+
+        span {
+          color: #666;
+          font-size: 12px;
+        }
+
+        a {
+          position: absolute;
+          right: 10px;
+          top: 50%;
+          transform: translateY(-50%);
+          text-decoration: underline;
+          font-size: 14px;
+          color: #077EE8;
+        }
+      }
+    }
+
+    .list {
+      background: #fff;
+      padding-top: 11px;
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        border-spacing: 0;
+        border: none;
+        text-align: center;
+
+        td, th {
+          margin-right: -1px;
+          padding: 0;
+        }
+
+        .avatar {
+          margin-right: 6px;
+        }
+
+        td:nth-of-type(1) {
+          width: 15%;
+        }
+
+        td:nth-of-type(2) {
+          width: 35%;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          text-align: left;
+          //padding-left: 10%;
+        }
+
+        thead tr {
+          height: 38px;
+          line-height: 38px;
+          background-color: #FFD76A;
+          font-size: 14px;
+          color: #333;
+        }
+
+        tbody tr {
+          height: 49px;
+          line-height: 49px;
+          font-size: 12px;
+          color: #333;
+
+          td:nth-of-type(1) {
+            font-size: 16px;
+
+            img {
+              width: 14px;
+              height: 18px;
+            }
+          }
+
+          td:nth-of-type(2) {
+            img {
+              width: 18px;
+              height: 18px;
+              border-radius: 50%;
+            }
+          }
+
+          &:nth-child(even) {
+            background: #f6fbff;
+          }
+
+          img {
+            vertical-align: middle;
+          }
+
+          .score {
+            color: #09f;
+          }
+        }
+      }
+    }
+
+    .expand {
+      height: 49px;
+      line-height: 49px;
+      text-align: center;
+      background: #fff;
+      color: #525C65;
+      font-size: 14px;
+
+      .iconfont {
+        margin-left: 5px;
+      }
+    }
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    background-color: #fff;
+    padding: 10px;
+    color: #fff;
+    font-size: 0;
+
+    button {
+      width: 100%;
+      height: 100%;
+      font-size: 16px;
+      color: #fff;
+      border: none;
+      outline: 0;
+      -webkit-appearance: none;
+
+      &.get-chance {
+        background-color: #FFAE00;
+      }
+
+      &.available {
+        background: linear-gradient(-90deg, rgba(0, 153, 255, 1) 0%, rgba(61, 177, 255, 1) 100%);
+      }
+
+      &.unavailable {
+        background: #525C65;
+      }
+    }
+
+    span {
+      font-size: 12px;
+    }
+  }
+
+  .rule-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, .8);
+    z-index: 100;
+  }
+
+  .rule {
+    position: absolute;
+    top: 19.7%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 300px;
+    height: 311px;
+    padding: 18px 25px;
+    background-color: #fff;
+    border-radius: 5px;
+    color: #525C65;
+    text-align: center;
+
+    div:nth-child(1) {
+      font-size: 16px;
+      margin-bottom: 15px;
+    }
+
+    div:nth-child(2) {
+      font-size: 14px;
+      margin-bottom: 16px;
+    }
+
+    label {
+      font-size: 14px;
+      color: #555;
+      opacity: .8;
+    }
+
+    .option {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 21px;
+    }
+
+    input {
+      position: relative;
+      width: 15px;
+      height: 15px;
+      margin-right: 8px;
+      border: 1px solid #3799ff;
+      border-radius: 2px;
+      -webkit-appearance: none;
+
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 3px;
+        width: 10px;
+        height: 6px;
+        display: none;
+        border-bottom: 1px solid #3799ff;
+        border-left: 1px solid #3799ff;
+        transform-origin: 5px 4px;
+        transform: rotate(-45deg);
+      }
+
+      &:checked {
+        &::after {
+          display: block;
+        }
+      }
+    }
+
+    button {
+      width: 94px;
+      height: 30px;
+      background: #09f;
+      color: #fff;
+      font-size: 14px;
+      border-radius: 15px;
+      -webkit-appearance: none;
+      border: none;
+      outline: 0;
+    }
+
+    .close {
+      position: absolute;
+      bottom: -60px;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #fff;
+      display: block;
+      font-size: 30px;
+    }
+  }
+
+  .user-address-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, .6);
+  }
+
+  .user-address {
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 300px;
+    height: 309px;
+    padding: 18px 26px 0;
+    background: #fff;
+    border-radius: 5px;
+    text-align: center;
+
+    .title {
+      font-size: 16px;
+      color: #525C65;
+      text-align: center;
+      margin-bottom: 17px;
+    }
+
+    .tip {
+      font-size: 12px;
+      color: #FFAE00;
+      margin-bottom: 15px;
+      text-align: left;
+    }
+
+    input {
+      width: 250px;
+      height: 40px;
+      padding-left: 10px;
+      border: 1px solid #DDD;
+      margin-bottom: 10px;
+      font-size: 13px;
+
+      &::placeholder {
+        color: #999;
+      }
+    }
+
+    button {
+      padding: 10px 45px;
+      font-size: 15px;
+      color: #fff;
+      background: rgba(82, 92, 101, .3);
+      border-radius: 17px;
+      border: none;
+      outline: 0;
+      -webkit-appearance: none;
+
+      &.available {
+        background-color: #09f;
+      }
+    }
+
+    .iconfont {
+      position: absolute;
+      bottom: -60px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 30px;
+      color: #fff;
+    }
+  }
+}
\ No newline at end of file

src/components/ai-test/submit-answer/index.js

+import React, { Component } from 'react';
+import './index.scss'
+import { HeaderBar } from "@common/index"
+import storage from 'store2'
+import { Toast } from "antd-mobile";
+import { http } from "@/utils"
+
+class SubmitAnswer extends Component {
+
+  store = storage.namespace('aiTestExam')
+
+  state = {
+    time: this.store.get('time') || {h: 0, m: 0, s: 0},
+    answer: this.store.get('answer'),
+    recordId: this.store.get('recordId'),
+  }
+
+  submit = () => {
+    const {answer, recordId} = this.state
+    http.post(`${API.home}/sys/submit_answer`, {
+      answer: answer,
+      cost_time: this.getCostTime(),
+      record_id: recordId,
+    }).then(res => {
+      const {code, msg, data} = res.data
+      if (code === 200) {
+        this.store.clearAll()
+      } else {
+        Toast.fail(msg, 2, null, false)
+      }
+    })
+  }
+
+  getCostTime = () => {
+    const {time} = this.state
+    return parseInt(time.h) * 60 * 60 * 1000 + parseInt(time.m) * 60 * 1000 + parseInt(time.s) * 1000
+  }
+
+
+  render() {
+    const {time, answer} = this.state
+    return (
+      <div className={'submit-answer'}>
+        <HeaderBar title={'提交试卷'} arrow={true}/>
+        <div className="content">
+          <div className="cost">用时：
+            <span>
+              {
+                !!time.h && <>{time.h && time.h.toString().padStart(2, '0')}:</>
+              }
+              {time.m.toString().padStart(2, '0')}:
+              {time.s.toString().padStart(2, '0')}
+            </span>
+          </div>
+          <ul className={'answers'}>
+            {
+              answer && !!Object.keys(answer).length && Object.keys(answer).map((item, index) => {
+                return <li key={item} className={answer[item] ? 'selected' : ''}>{index + 1}</li>
+              })
+            }
+          </ul>
+          <button onClick={this.submit}>提交</button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SubmitAnswer;
\ No newline at end of file

src/components/ai-test/submit-answer/index.scss

+html, body {
+  height: 100%;
+  background-color: #fff;
+}
+
+.submit-answer {
+  .detail-header {
+    background-color: #fff;
+    border-bottom: 1px solid #DDD;
+  }
+
+  .content {
+    padding: 32px 16px;
+  }
+
+  .cost {
+    position: relative;
+    font-size: 18px;
+    color: #333;
+    text-align: center;
+    margin-bottom: 30px;
+
+    @mixin pseudo {
+      content: '';
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      display: block;
+      width: 16px;
+      height: 11px;
+      background: url("./line.png") no-repeat;
+      background-size: contain;
+    }
+
+    $dis: 25%;
+
+    &::before {
+      @include pseudo;
+      left: $dis;
+    }
+
+    &::after {
+      @include pseudo;
+      transform: scale(-1, 1) translateY(-50%);
+      right: $dis;
+    }
+  }
+
+  .answers {
+    display: flex;
+    flex-wrap: wrap;
+    width: 80%;
+    margin: 0 auto 60px;
+
+    li {
+      $size: 34px;
+      width: $size;
+      height: $size;
+      margin-right: 25px;
+      margin-bottom: 16px;
+      line-height: $size;
+      border-radius: 50%;
+      border: 1px solid #09f;
+      color: #09f;
+      text-align: center;
+      font-size: 18px;
+
+      &:nth-of-type(5n) {
+        margin-right: 0;
+      }
+
+      &.selected {
+        background-color: #09f;
+        color: #fff;
+      }
+    }
+  }
+
+  button {
+    width: 343px;
+    height: 44px;
+    background: #09f;
+    border-radius: 22px;
+    -webkit-appearance: none;
+    outline: 0;
+    border: 0;
+    color: #fff;
+    font-size: 18px;
+  }
+}
\ No newline at end of file