index.js 5.69 KB
Newer Older
zhanghaozhe committed
1 2
import React, { Component } from "react"
import "./index.scss"
zhanghaozhe committed
3 4 5
import { HeaderBar } from "src/common/index"
import Question from "src/components/ai-test/common/question"
import { html, http, browser } from "src/utils"
zhanghaozhe committed
6 7 8
import { Toast } from "antd-mobile"
import { Link } from "react-router-dom"
import { connect } from "react-redux"
zhanghaozhe committed
9
import Recommends from "src/components/ai-test/common/recommends"
zhanghaozhe committed
10 11
import classnames from "classnames"
import storage from "store2"
zhanghaozhe committed
12 13

class Assist extends Component {
zhanghaozhe committed
14
  store = storage.namespace("aiTestAssist")
zhanghaozhe committed
15

zhanghaozhe committed
16
  state = {
zhanghaozhe committed
17 18
    question: this.store.session.get("question"),
    answer: this.store.session.get("answer"),
zhanghaozhe committed
19
    result: null,
zhanghaozhe committed
20 21
    rightAnswer: "",
    userAnswer: "",
zhanghaozhe committed
22 23 24
  }

  componentDidMount() {
zhanghaozhe committed
25
    if (!this.store.session.get("question")) {
zhanghaozhe committed
26 27
      this.getData()
    }
zhanghaozhe committed
28 29 30
  }

  getData = () => {
zhanghaozhe committed
31 32 33 34 35
    http.get(`${API.home}/sys/aitest/assist`).then((res) => {
      const { code, msg, data } = res.data
      if (code === 200) {
        const answer = {
          [data.id]: 0,
zhanghaozhe committed
36
        }
zhanghaozhe committed
37 38 39 40 41 42 43 44 45 46
        this.store.session.set("question", data)
        this.store.session.set("answer", answer)
        this.setState({
          question: data,
          answer,
        })
      } else {
        Toast.fail(msg, 2, null, false)
      }
    })
zhanghaozhe committed
47 48 49 50 51 52 53
  }

  selectAnswer = (question, optionId) => {
    this.setState({
      answer: {
        [question.id]: optionId,
      },
zhanghaozhe committed
54
    })
zhanghaozhe committed
55 56 57
  }

  submit = () => {
zhanghaozhe committed
58
    const { history, user } = this.props
zhanghaozhe committed
59
    if (user.hasError) {
zhanghaozhe committed
60
      if (browser.isWeixin) {
zhanghaozhe committed
61
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=${encodeURIComponent(
zhanghaozhe committed
62
          `${window.location.origin}${window.location.pathname}?aa=bb`
zhanghaozhe committed
63
        )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
zhanghaozhe committed
64
      } else {
zhanghaozhe committed
65
        history.push("/passport")
zhanghaozhe committed
66
      }
zhanghaozhe committed
67 68
      return
    }
zhanghaozhe committed
69
    const { question, answer } = this.state
zhanghaozhe committed
70
    if (!answer[question.id]) {
zhanghaozhe committed
71
      Toast.info("请选择后进提交", 2, null, false)
zhanghaozhe committed
72 73
      return
    }
zhanghaozhe committed
74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
    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
        if (answer[question.id] === data.correct_answer) {
          Toast.info("回答正确", 2, null, false)
        } else {
          Toast.info("回答错误", 2, null, false)
        }
        this.setAnswer(data.correct_answer)
        if (code === 200) {
          this.setState({
            result: data,
          })
          this.store.session.clearAll()
        } else {
          Toast.fail(msg, 2, null, false)
        }
      })
zhanghaozhe committed
97 98 99
  }

  setAnswer = (rightAnswerId) => {
zhanghaozhe committed
100 101 102
    this.setState((state) => {
      let rightAnswer = "",
        userAnswer = ""
zhanghaozhe committed
103
      const question = {
zhanghaozhe committed
104 105
        ...state.question,
        ...{
zhanghaozhe committed
106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
          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,
      }
zhanghaozhe committed
124
    })
zhanghaozhe committed
125 126 127
  }

  render() {
zhanghaozhe committed
128
    const { question, answer, result, rightAnswer, userAnswer } = this.state
zhanghaozhe committed
129
    return (
zhanghaozhe committed
130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
      <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 className={"info"}>
              您的选择是{userAnswer},正确答案是{rightAnswer} 回答
              {userAnswer === rightAnswer ? "正确" : "错误"}
            </div>
zhanghaozhe committed
147 148 149 150
            <div className="head">
              <i className="icon"></i>
              <span>解析</span>
            </div>
zhanghaozhe committed
151 152 153 154
            <div
              className="analysis-content"
              dangerouslySetInnerHTML={html(result.analysis)}
            ></div>
zhanghaozhe committed
155
          </div>
zhanghaozhe committed
156 157 158 159
        )}
        {result && question.commend_course && question.commend_course.length && (
          <>
            <Recommends recommends={question.commend_course} />
zhanghaozhe committed
160
          </>
zhanghaozhe committed
161
        )}
zhanghaozhe committed
162 163

        <div className="btns">
zhanghaozhe committed
164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
          {result && (
            <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,
                },
              ])}
            >
zhanghaozhe committed
179 180
              {result.desc}
            </div>
zhanghaozhe committed
181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196
          )}
          {!result && (
            <button className={"submit"} onClick={this.submit}>
              提交
            </button>
          )}
          {result &&
            (result.status === 6 ? (
              <Link to={"/"} className={"home"}>
                返回首页
              </Link>
            ) : (
              <Link to={"/ai-test/scores"} className={"test"}>
                我也要测试
              </Link>
            ))}
zhanghaozhe committed
197 198
        </div>
      </div>
zhanghaozhe committed
199
    )
zhanghaozhe committed
200 201 202
  }
}

zhanghaozhe committed
203
export default connect(({ user }) => ({ user }), null)(Assist)