Merge branch 'ai-test-merge' into dev

# Conflicts:
#	src/router/router-config.js

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

@@ -23,7 +23,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",
@@ -83,6 +83,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 { 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: '',
+    userUnselect: false,
+  }
+
+  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.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),
+      userUnselect: userAnswerIndex < 0,
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.activeIndex !== this.state.activeIndex) {
+      this.getAnswerInfo()
+    }
+  }
+
+  render() {
+    const {questions, activeIndex, userSelect, rightAnswer, userUnselect} = 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>
+        <div className="analysis">
+          {
+            userUnselect
+              ? <div className={'info'}>您未作答</div>
+              : <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}/>
+        }
+        <Navigation questions={questions} isAnalysis={true} handleClick={(index) => {
+          this.setState({
+            activeIndex: index,
+          });
+        }}/>
+      </div>
+    );
+  }
+}
+
+export default 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 { Link } from "react-router-dom";
+import { connect } from "react-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 {history, user} = this.props
+    if (user.hasError) {
+      history.push('/passport')
+      return
+    }
+    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 connect(
+  state => state.user,
+  null,
+)(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) => {
+            const userSelectIndex = item.options.findIndex(item => item.user_select)
+            const rightAnswerIndex = item.options.findIndex(item => item.is_ans)
+            return <li key={index} onClick={handleClick.bind(this, index)}
+                       className={classnames({
+                         active: answer && answer[item.id],
+                         correct: isAnalysis && userSelectIndex === rightAnswerIndex,
+                         error: isAnalysis && userSelectIndex >= 0 && userSelectIndex !== rightAnswerIndex,
+                         unselect: isAnalysis && userSelectIndex < 0,
+                       })}>{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: #fff;
+      background-color: #E64949;
+    }
+
+    &.unselect {
+      border: 1px solid #E64949;
+      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 { browser, getParam, http } from "@/utils"
+import { Toast } from 'antd-mobile'
+import storage from 'store2'
+import Navigation from "@components/ai-test/common/navigation"
+import { differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays, lightFormat } from "date-fns";
+import { isEmpty } from 'lodash'
+
+
+class Exam extends Component {
+
+  store = storage.namespace('aiTestExam')
+  timer = null
+  unlisten = null
+
+  state = {
+    questions: [],
+    activeQuestion: 0,
+    time: {
+      d: 0,
+      h: 0,
+      m: 0,
+      s: 0,
+    },
+    elapsed: 0,
+    answer: {},
+    recordId: undefined,
+  }
+
+  componentDidMount() {
+    if (this.store.get('submitted')) {
+      this.store.remove('submitted')
+      this.props.history.replace('/ai-test')
+    }
+    this.getQuestions()
+    this.unlisten = this.props.history.listen((location, action) => {
+      if (action === 'POP') {
+        this.store.clearAll()
+      }
+      this.unlisten()
+    })
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timer)
+  }
+
+
+  setCounter = () => {
+    this.timer = setInterval(() => {
+      this.setState(state => {
+        const s = state.elapsed + 1
+        return {
+          time: {
+            d: Math.floor(s / (60 * 60 * 24)),
+            h: Math.floor(s / (60 * 60)) % 24,
+            m: Math.floor(s / 60) % 60,
+            s: s % 60,
+          },
+          elapsed: s,
+        }
+      })
+    }, 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') || {}
+          if (isEmpty(answer)) {
+            data.forEach(item => {
+              answer[item.id] = 0
+            })
+          }
+          this.setState({
+            questions: data,
+            answer,
+            recordId: data[0].record_id,
+          })
+          this.getStartTime(data[0].create_time)
+          this.setCounter()
+        } else if (code === 23007) {
+          this.props.history.replace('/ai-test/scores')
+        } else {
+          Toast.fail(msg, 2, null, false)
+        }
+      })
+  }
+
+  getStartTime = (timestamp) => {
+    const now = new Date()
+    const createTime = new Date(timestamp * 1000)
+    this.setState({
+      time: {
+        d: differenceInDays(now, createTime),
+        h: differenceInHours(now, createTime) % 24,
+        m: differenceInMinutes(now, createTime) % 60,
+        s: differenceInSeconds(now, createTime) % 60,
+      },
+      elapsed: differenceInSeconds(now, createTime),
+    });
+  }
+
+  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)) {
+        this.storeData()
+      }
+    })
+  }
+
+  storeData = () => {
+    const {answer, time, recordId, elapsed} = this.state
+    const {history} = this.props
+    clearInterval(this.timer)
+    this.store.setAll({time, answer, recordId, elapsed})
+    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.d && time.d
+              }
+              {
+                !!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="time">
+            <i className={'iconfont iconzhong'}></i>
+            <span>
+              {
+                !!time.d && time.d
+              }
+              {
+                !!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"
+               onClick={this.storeData}>{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 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 Analysis from "@components/ai-test/analysis"
+import Assist from "@components/ai-test/assist"
+import Help from '@components/ai-test/share'
+import Report from '@components/ai-test/report'
+
+class AiTest extends Component {
+  render() {
+    const {match} = this.props
+    return (
+      <Switch>
+        <Route path={`${match.path}/exam`} render={props => <Exam {...props}/>}/>
+        <Route path={`${match.path}/submit`} render={props => <SubmitAnswer {...props}/>}/>
+        <Route path={`${match.path}/analysis/:recordId`} render={props => <Analysis {...props}/>}/>
+        <Route path={`${match.path}/assist/:assistCode`} render={props => <Assist {...props}/>}/>
+        <Route path={`${match.path}/share`} render={props => <Help {...props}/>}/>
+        <Route path={`${match.path}/report`} render={props => <Report {...props}/>}/>
+        <Route render={(props) => <Scores {...props}/>}/>
+      </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/scoreReport/index.js → src/components/ai-test/report/index.js

@@ -8,6 +8,12 @@ import html2canvas from 'html2canvas'
 import scoreIconL from '@assets/image/score_icon-l.png'
 import scoreIconR from '@assets/image/score_icon-r.png'
 import scoreReportBg from '@assets/image/scoreReport_bg.png'
+import {connect} from "react-redux"
+
+@connect(state => ({
+        user: state.user
+    }),
+)
 
 class scoreReport extends Component {
 
@@ -18,13 +24,20 @@ class scoreReport extends Component {
             cutIndex: 0,
             myRankList: '',
             imgUrl: '',
-            codeSrc: ''
+            codeSrc: '',
+            avatar_file: ''
         }
     }
 
     componentDidMount() {
-        this.handleFetchInfo(0)
+        const {user, history} = this.props
+        if (user.hasError) {
+            history.push('/passport')
+            return
+        }
+
         this.getCodeWe()
+        this.handleFetchInfo(0)
     }
 
 
@@ -35,14 +48,13 @@ class scoreReport extends Component {
         var w = parseInt(window.getComputedStyle(_canvas).width)
         var h = parseInt(window.getComputedStyle(_canvas).height)
         var scale = window.devicePixelRatio
-        //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
         canvas2.width = w * scale
         canvas2.height = h * scale
 
         var context = canvas2.getContext("2d")
         context.scale(1, 1)
         html2canvas(document.getElementsByClassName('score-list')[0], {canvas: canvas2}).then(function (canvas) {
-            // document.body.appendChild(canvas);
+            //document.body.appendChild(canvas);
 
             let imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")
             _this.setState({
@@ -54,7 +66,7 @@ class scoreReport extends Component {
 // 获取二维码
     getCodeWe() {
         let _this = this
-        let qrCodeLink = 'www.julyedu.com'
+        let qrCodeLink = '/ai-test'
         return new Promise(resolve => {
             QRCode.toDataURL(qrCodeLink, {}, function (err, url) {
                 _this.setState({
@@ -72,10 +84,49 @@ class scoreReport extends Component {
                 this.setState({
                     myRankList: data
                 })
+
+                let avatar = this.props.user && this.props.user.data.avatar
+                this.getBase64(avatar)
+
+                setTimeout(()=> {
                     this.getCanvas()
+                },100)
+            }
+        })
+    }
+
+
+    getBase64Image = (img) => {
+        var canvas = document.createElement("canvas")
+        canvas.width = img.width
+        canvas.height = img.height
+
+        var ctx = canvas.getContext("2d")
+        ctx.drawImage(img, 0, 0, img.width, img.height)
+        var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase()
+        var dataURL = canvas.toDataURL("image/" + ext)
+        return dataURL
     }
+
+    getBase64 = (img) => {
+        let base64 = null
+        let image = new Image()
+        let timeStamp = +new Date()
+        image.setAttribute('crossOrigin', 'anonymous')
+        image.src = img + '?' + timeStamp
+        image.onload = () => {
+            base64 = this.getBase64Image(image)
+            this.setState({
+                avatar_file: base64
             })
         }
+        image.onerror = () => {
+            console.log('onerror')
+            let timeStamp = +new Date()
+            this.getBase64(img + '?' + timeStamp)
+        }
+    }
+
 
     change = (index) => {
         this.setState({
@@ -86,15 +137,14 @@ class scoreReport extends Component {
 
 
     render() {
-        const {tab, cutIndex, myRankList, codeSrc, imgUrl, isshow} = this.state
+        const {tab, cutIndex, myRankList, codeSrc, imgUrl, avatar_file} = this.state
         return (
-            <>
+            <div className={'score-content'}>
                 <HeaderBar
                     title='成绩报告'
                     arrow={true}
                     home={false}
                 />
-
                 <div className={'score-report'}>
                     <ul className={'tab-list'}>
                         {
@@ -147,6 +197,7 @@ class scoreReport extends Component {
                             </table>
 
                             <div className="comment text-overflow-4">
+                                <img className={'avatar_file'} src={avatar_file} alt=""/>
                                 {myRankList && myRankList.title && myRankList.title.comment}
                             </div>
 
@@ -163,7 +214,7 @@ class scoreReport extends Component {
                     <div className="tip">长按图片分享给好友，或保存后分享到朋友圈</div>
 
                 </div>
-            </>
+            </div>
         )
     }
 }

src/components/scoreReport/index.scss → src/components/ai-test/report/index.scss

 html, body, #root {
   height: 100% !important;
 }
-
-.score-report {
+.score-content {
   width: 100%;
   height: 100%;
   background-color: #09f;
-  padding: 30px 12px 70px 12px;
+}
+.score-report {
+  width: 100%;
+  padding: 30px 12px 45px 12px;
   color: #fff;
 
   .tab-list {
@@ -33,7 +35,7 @@ html, body, #root {
   .imgUrl {
     width: 100%;
     height: 434px;
-    position:absolute;
+    position: absolute;
     left: 0;
     top: 0;
   }
@@ -50,6 +52,7 @@ html, body, #root {
       font-size: 22px;
       color: #000;
       padding-top: 40px;
+
       img {
         width: 16px;
         height: 11px;
@@ -104,13 +107,13 @@ html, body, #root {
       .has {
         color: #09f;
       }
+
       .rank {
         color: #FF2121;
       }
     }
 
     .comment {
-      text-indent: 2em;
       text-align: left;
       color: #333;
       font-size: 14px;
@@ -123,10 +126,12 @@ html, body, #root {
       position: absolute;
       bottom: 40px;
       right: 25px;
+
       img {
         width: 80px;
         height: 80px;
       }
+
       p {
         color: #000;
         font-size: 12px;
@@ -140,5 +145,13 @@ html, body, #root {
     font-size: 16px;
     color: #fff;
   }
+
+  .avatar_file {
+    width: 49px;
+    height: 49px;
+    border-radius: 50%;
+    float: left;
+    margin-right: 10px;
+  }
 }
 

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/share/index.js

+import React, {Component} from 'react'
+import {CopyToClipboard} from 'react-copy-to-clipboard'
+import {browser, http, wxShare} from '@/utils'
+import './index.scss'
+import {Toast} from "antd-mobile"
+
+
+class aiTestHelp extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            code: '',
+            total_num: '',
+            isshowYindao: false
+        }
+    }
+
+    componentDidMount() {
+        this.handleFetchInfo()
+    }
+
+    share = () => {
+        wxShare({
+            title: '全国AI水平测试开始了，看看你能答对几道题？',
+            desc: '',
+            link: `${API.m}/ai-test/assist/${this.state.code}`,
+            imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/share-img.png',
+        })
+        this.setState({
+            isshowYindao: true
+        })
+    }
+
+    copyToSuccess = () => {
+        Toast.info('链接已复制，快去发送给好友吧~')
+    }
+
+    handleFetchInfo = () => {
+        http.get(`${API.home}/sys/aitest/invitation`).then(res => {
+            const {code, data, msg} = res.data
+            if (code === 200) {
+                this.setState({
+                    total_num: data.total_num,
+                    code: data.code
+                })
+            } else if (code === 4030) {
+                this.props.history.push('/passport/login')
+            } else {
+                Toast.info(msg)
+            }
+        })
+    }
+
+
+    render() {
+        const {code, total_num, isshowYindao} = this.state
+        return (
+            <div className={'ai-test-help'}>
+                <div className="banner">
+                    <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/text2.png" alt=""/>
+                    <span>{total_num}</span>
+                    <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/text1.png" alt=""/>
+                </div>
+
+                <p className={'tip-l'}>分享给好友</p>
+                <p className={'tip-s'}>每个好友只能助力1次哦~</p>
+                <p className={'tip-m'}>好友答题为你助力，答题正确你将获得</p>
+                <p className={'tip-num'}>一次测试机会</p>
+
+                {
+                    !browser.isWeixin &&
+                    <CopyToClipboard
+                        text={`${API.m}/ai-test/assist/${code}`}
+                        onCopy={this.copyToSuccess}
+                    >
+                        <div className={'share-btn'}>
+                            邀请好友助力
+                        </div>
+                    </CopyToClipboard>
+                }
+                {
+                    browser.isWeixin &&
+                    <div className={'share-btn'} onClick={this.share}>
+                        邀请好友助力
+                    </div>
+                }
+
+                {
+                    isshowYindao &&
+                        <div className={'share'}>
+                            <div className="content">
+                                <p className="test">点击右上角，分享给好友</p>
+                                <i className="iconfont"></i>
+                            </div>
+                        </div>
+                }
+            </div>
+        )
+    }
+}
+
+
+export default aiTestHelp
\ No newline at end of file

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

+html, body, #root {
+  height: 100% !important;
+}
+
+.ai-test-help {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  letter-spacing: 1px;
+
+  .banner {
+    width: 100%;
+    height: 282px;
+    background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/help-banner.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    padding-top: 60px;
+
+    img {
+      height: 18px;
+    }
+
+    span {
+      font-size: 25px;
+      font-weight: 400;
+      color: #FFCA28;
+      margin: 0 9px;
+    }
+  }
+
+  .tip-s {
+    margin-top: 10px;
+    font-weight: 400;
+    font-size: 12px;
+    color: #FF5F83;
+  }
+
+  .tip-m {
+    margin-top: 30px;
+    color: #525C65;
+    font-weight: 400;
+    font-size: 14px;
+  }
+
+  .tip-l {
+    margin-top: 30px;
+    color: #FF5F83;
+    font-weight: 500;
+    font-size: 18px;
+  }
+
+  .tip-num {
+    margin-top: 15px;
+    color: #09f;
+    font-weight: 600;
+    font-size: 20px;
+
+    &:before, &:after {
+      width: 13px;
+      height: 12px;
+      display: inline-block;
+      content: '';
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      vertical-align: text-top;
+      margin: 0 20px;
+    }
+
+    &:before {
+      background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/mark_icon_l.png");
+    }
+
+    &:after {
+      background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/mark_icon_r.png");
+    }
+  }
+
+  .share-btn {
+    height: 40px;
+    line-height: 40px;
+    border-radius: 5px;
+    position: fixed;
+    right: 10px;
+    left: 10px;
+    bottom: 5px;
+    background-color: #FFAE00;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 400;
+    text-align: center;
+  }
+
+  .share {
+    position: fixed;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    background: rgba(0, 0, 0, .6);
+    color: #fff;
+
+    .content {
+      position: relative;
+      height: 100px;
+      padding-top: 36px;
+      box-sizing: border-box;
+      font-size: 16px;
+
+      .iconfont {
+        position: absolute;
+        top: 10px;
+        right: 40px;
+        font-size: 38px;
+        color: #fff;
+        width: 50px;
+        height: 38px;
+        background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/share_arrow.png') center center no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+
+
+

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"
+import classnames from 'classnames'
+import { Link } from "react-router-dom";
+import { isEmpty } from 'lodash'
+
+
+class SubmitAnswer extends Component {
+
+  store = storage.namespace('aiTestExam')
+  timer = null
+
+  state = {
+    time: this.store.get('time') || {d: 0, h: 0, m: 0, s: 0},
+    answer: this.store.get('answer'),
+    recordId: this.store.get('recordId'),
+    analysis: [],
+    results: [],
+    elapsed: this.store.get('elapsed'),
+  }
+
+  componentDidMount() {
+    this.setCounter()
+    if (isEmpty(this.state.answer) || !this.state.recordId) {
+      this.props.history.replace('/ai-test')
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timer)
+  }
+
+
+  setCounter = () => {
+    this.timer = setInterval(() => {
+      this.setState(state => {
+        const s = state.elapsed + 1
+        return {
+          time: {
+            d: Math.floor(s / (60 * 60 * 24)),
+            h: Math.floor(s / (60 * 60)) % 24,
+            m: Math.floor(s / 60) % 60,
+            s: s % 60,
+          },
+          elapsed: s,
+        }
+      })
+    }, 1000)
+  }
+
+
+  submit = () => {
+    const {answer, recordId} = this.state
+    http.post(`${API.home}/sys/submit_answer`, {
+      answer: JSON.stringify(answer),
+      cost_time: this.state.elapsed,
+      record_id: recordId,
+    }).then(res => {
+      const {code, msg, data} = res.data
+      if (code === 200) {
+        this.store.clearAll()
+        this.store.set('submitted', true)
+        clearInterval(this.timer)
+        this.getAnalysis()
+      } else {
+        Toast.fail(msg, 2, null, false)
+      }
+    })
+  }
+
+  getAnalysis = () => {
+    http.post(`${API.home}/sys/get_analysis`, {
+      record_id: this.state.recordId,
+    }).then(res => {
+      const {code, msg, data} = res.data
+      if (code === 200) {
+        this.setState({
+          analysis: data,
+        });
+      } else {
+        Toast.fail(msg, 2, null, false)
+      }
+    })
+  }
+
+  render() {
+    const {time, answer, analysis, recordId} = this.state
+    return (
+      <div className={'submit-answer'}>
+        <HeaderBar title={'提交试卷'} arrow={true}/>
+        <div className="content">
+          <div className="cost">用时：
+            <span>
+              {
+                !!time.d && time.d
+              }
+              {
+                !!time.h && <>{time.h && time.h.toString().padStart(2, '0')}:</>
+              }
+              {time.m.toString().padStart(2, '0')}:
+              {time.s.toString().padStart(2, '0')}
+            </span>
+          </div>
+          {
+            analysis.length
+              ? <>
+                <ul className={'answers'}>
+                  {
+                    analysis.map((item, index) => {
+                      const userSelectIndex = item.options.findIndex(item => item.user_select)
+                      const rightAnswerIndex = item.options.findIndex(item => item.is_ans)
+                      return <li key={item.id}
+                                 className={classnames({
+                                   correct: userSelectIndex === rightAnswerIndex,
+                                   wrong: userSelectIndex >= 0 && userSelectIndex !== rightAnswerIndex,
+                                   unselect: userSelectIndex < 0,
+                                 })}>{index + 1}</li>
+                    })
+                  }
+                </ul>
+                {
+                  !!analysis.length && <div className={'score'}>总分：{analysis[0].score}分</div>
+                }
+                <Link to={`/ai-test/analysis/${recordId}`}>
+                  <button>查看解析</button>
+                </Link>
+              </>
+              : <>
+                <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;
+      }
+
+      &.wrong {
+        background-color: #E64949;
+        border-color: #E64949;
+        color: #fff;
+      }
+
+      &.unselect {
+        border: 1px solid #E64949;
+        color: #E64949;
+      }
+
+      &.correct {
+        background-color: #2CDBAF;
+        border-color: #2CDBAF;
+        color: #fff;
+      }
+    }
+  }
+
+  .score {
+    margin-bottom: 30px;
+    font-size: 21px;
+    color: #09f;
+    text-align: center;
+  }
+
+  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