Commit d1908c5b by zhanghaozhe

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

parents acb9011f 03ca1ffd
......@@ -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",
......
......@@ -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",
......
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
.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
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
.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
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
.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;
}
}
}
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
.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
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
.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
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
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
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
.ai-test{
}
\ No newline at end of file
import React, { Component } from 'react';
import './index.scss'
import { Tabs, Toast } from "antd-mobile";
import { http } from "@/utils"
import storage from 'store2'
import { html } from '@/utils'
import { compareDesc } from "date-fns";
import { withRouter, Link } from "react-router-dom";
class Scores extends Component {
store = storage.namespace('aiTestEntry')
state = {
tabs: [
{title: '当前成绩'},
{title: '今日最佳'},
{title: '本月最佳'},
],
rankList: [],
isExpandRankList: false,
type: 2,
icons: [
require('./rank-1.png'),
require('./rank-2.png'),
require('./rank-3.png'),
],
isShowRule: false,
isNeverShow: this.store.get('isNeverShow'),
pageState: {},
availableTestNum: 0,
userScore: {},
userAddress: {
name: '',
phone: '',
address: '',
},
isShowUserAddress: false,
}
componentDidMount() {
this.getInitialData()
this.getRankList()
this.getUserScores(0)
this.getUserAddress()
}
handleChange = (e) => {
const isNeverSHow = e.target.checked
this.setState({
isNeverSHow,
})
this.store.set('isNeverShow', isNeverSHow)
}
startTest = () => {
this.props.history.push('/ai-test/exam')
}
getInitialData = () => {
http.get(`${API.home}/sys/activity_data`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
pageState: data,
})
} else {
Toast.fail(msg, 2, null, false)
}
})
}
getRankList = () => {
http.get(`${API.home}/sys/at/ranks/${this.state.type}`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
rankList: data,
})
} else {
Toast.fail(msg, 2, null, false)
}
})
}
getUserScores = (type) => {
http.get(`${API.home}/sys/at/user_score/${type}`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
userScore: data,
})
} else {
Toast.fail(msg, 2, null, false)
}
})
}
getUserAddress = () => {
http.get(`${API.home}/sys/user_address_info`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
userAddress: data,
})
}
})
}
inputText = e => {
const key = e.target.name
const value = e.target.value
this.setState(state => {
return {
userAddress: {
...state.userAddress, ...{
[key]: value,
},
},
}
})
}
submitForm = (e) => {
e.preventDefault()
const {userAddress} = this.state
if (!Object.values(userAddress).every(item => !!item)) {
Toast.info('请填写完整')
return
}
http.post(`${API.home}/sys/update_address`, userAddress)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
Toast.success('提交成功', 2, null, false)
this.setState({
isShowUserAddress: false,
})
} else {
Toast.fail(msg, 2, null, false)
}
})
}
render() {
const {
tabs,
rankList,
icons,
isExpandRankList,
isShowRule,
isNeverShow,
pageState,
userScore,
isShowUserAddress,
userAddress,
} = this.state
const _rankList = isExpandRankList ? rankList : rankList.slice(0, 10)
return (
<div className={'scores'}>
<div className="banner">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/scores/banner.png" alt=""/>
</div>
<div className="info">
<span>已有{pageState.join_num}人参加测试</span>
<a href="javascript:void(0);" onClick={() => {
this.setState({
isShowRule: true,
})
}}>规则</a>
</div>
{
!!userScore.r_id &&
<div className="score-list">
<Tabs tabs={tabs} tabBarUnderlineStyle={{display: 'none'}} onChange={(tab, i) => {
this.getUserScores(i)
}}>
{
tabs.map((tab, index) => {
return <div className={'tab-content'} key={index}>
<table>
<thead>
<tr>
<th>分数</th>
<th>用时</th>
<th>最终排名</th>
</tr>
</thead>
<tbody>
<tr>
<td>{userScore.score} <Link to={`/ai-test/parse/${userScore.r_id}`}>解析</Link></td>
<td>{userScore.cost_time}</td>
<td>{userScore.rank}</td>
</tr>
</tbody>
</table>
</div>
})
}
</Tabs>
<div className="share">
<a href="javascript:void(0);">分享</a>
</div>
</div>
}
<div className="rank-list">
<div className="head">
<div>
测试排行榜
</div>
<div>
<span>仅显示前50</span>
<a href="javascript:void(0);" onClick={() => {
this.setState({
isShowUserAddress: true,
})
}}>收货地址</a>
</div>
</div>
<div className="list">
<table>
<thead>
<tr>
<th>名次</th>
<th>昵称</th>
<th>成绩</th>
<th>奖品</th>
</tr>
</thead>
<tbody>
{
!!_rankList.length && _rankList.map((item, index) => {
return <tr key={index}>
<td>
{
index < 3 ? <img src={icons[index]} alt=""/> : index + 1
}
</td>
<td>
<img src={item.avatar} className={'avatar'} alt=""/>
{item.user_name}
</td>
<td>
<span className={'score'}>{item.score}</span>/<span>{item.cost_time}</span>
</td>
<td>
{
item.prize_url ? <a href={item.prize_url}>{item.prize}</a> : item.prize
}
</td>
</tr>
})
}
</tbody>
</table>
{
!isExpandRankList ?
<div className="expand" onClick={() => {
this.setState({
isExpandRankList: true,
})
}}>
<span>
展开更多
<i className={'iconfont iconiconfront-69'}></i>
</span>
</div>
:
<div className="expand" onClick={() => {
this.setState({
isExpandRankList: false,
})
}}>
<span>
收起
<i className={'iconfont iconiconfront-71'}></i>
</span>
</div>
}
</div>
</div>
<div className="btn">
{
compareDesc(new Date(), pageState.stop_time * 1000) > 0 ?
pageState.daily_test_num > 0
? <button className={'available'} onClick={() => {
isNeverShow ? this.startTest() : this.setState({
isShowRule: true,
})
}}>开始测试<span>(今日可测试{pageState.daily_test_num}次)</span></button>
: <button className={'get-chance'}>获取测试机会<span>(今日可测试0次)</span></button>
: <button className={'unavailable'}>活动已结束</button>
}
</div>
{
isShowRule &&
<Rule rule={pageState.rule} startTest={this.startTest} neverShow={this.handleChange} isNeverShow={isNeverShow}
close={() => {
this.setState({
isShowRule: false,
})
}}/>
}
{
isShowUserAddress &&
<div className="user-address-wrapper">
<div className="user-address">
<div className="title">收货信息</div>
<div className="tip">获奖用户(以最终榜单为准)请及时填写收货信息</div>
<form action="" onSubmit={this.submitForm}>
<input type="text" placeholder={'收件人'} name={'name'} onChange={this.inputText}
value={userAddress.name}/>
<input type="tel" placeholder={'联系方式'} name={'phone'} onChange={this.inputText}
value={userAddress.phone}/>
<input type="text" placeholder={'收货地址'} name={'address'} onChange={this.inputText}
value={userAddress.address}/>
<button type={'submit'}
className={Object.values(userAddress).every(value => !!value) ? 'available' : ''}>提交
</button>
</form>
<i className={'close iconfont iconiconfront-2'} onClick={() => {
this.setState({
isShowUserAddress: false,
})
}}/>
</div>
</div>
}
</div>
);
}
}
function Rule({neverShow, isNeverShow, rule, close, startTest}) {
return <div className="rule-mask">
<div className="rule">
<div>测试规则</div>
<div dangerouslySetInnerHTML={html(rule)}></div>
<div className="option">
<input id={'never-show'} type="checkbox" onChange={neverShow} checked={isNeverShow}/>
<label htmlFor="never-show">不再提示</label>
</div>
<button onClick={startTest}>进入测试</button>
<i className={'close iconfont iconiconfront-2'} onClick={close}/>
</div>
</div>
}
export default withRouter(Scores);
\ No newline at end of file
.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
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
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
......@@ -40,188 +40,188 @@ export default [
{
path: '/',
exact: true,
component: Index
component: Index,
},
{
path: '/vip/newvip',
component: NewVip
component: NewVip,
},
{
path: '/classify',
component: Classify
component: Classify,
},
{
path: '/study',
component: Study
component: Study,
},
{
path: '/my',
component: My
component: My,
},
{
path: '/myedit',
component: MyEdit,
isPrivate: true
isPrivate: true,
},
{
path: '/courselist',
component: CourseList
component: CourseList,
},
{
path: '/preferential',
component: Preferential
component: Preferential,
},
{
path: '/search',
exact: true,
component: Search
component: Search,
},
{
path: '/search-result',
component: SearchResult
component: SearchResult,
},
{
path: '/order',
component: Order,
isPrivate: true
isPrivate: true,
},
{
path: '/orderinfo',
component: Orderinfo
component: Orderinfo,
},
{
path: '/detail',
component: Detail
component: Detail,
},
{
path: '/getDetail',
component: Detail
component: Detail,
},
{
path: '/examination',
component: Examination
component: Examination,
},
{
path: '/coupons',
component: Coupons,
isPrivate: true
isPrivate: true,
},
{
path: '/shopcart',
component: ShopCart,
isPrivate: true
isPrivate: true,
},
{
path: '/bargain-middle-page',
component: BargainMiddlePage
component: BargainMiddlePage,
},
{
path: '/passport',
component: Passport
component: Passport,
},
{
path: '/play',
component: Video,
isPrivate: true
isPrivate: true,
},
{
path: '/scholarship',
component: Scholarship
component: Scholarship,
},
{
path: '/document',
component: DrawDocument
component: DrawDocument,
},
{
path: '/shareposter',
component: sharePoster,
isPrivate: true
isPrivate: true,
},
{
path: '/myorders',
component: myOrders,
isPrivate: true
isPrivate: true,
},
{
path: '/purchased',
component: Purchased,
isPrivate: true
isPrivate: true,
},
{
path: '/payOrder',
component: PayOrder
component: PayOrder,
},
{
path: '/campTest',
component: CampTest
component: CampTest,
},
{
path: '/campResolve',
component: CampResolve
component: CampResolve,
},
// 分享领红包课程列表页
{
path: '/ShareCourse',
component: ShareCourse
component: ShareCourse,
},
// 区号
{
path: '/country',
component: Country
component: Country,
},
{
path: '/togroup',
component: ToGroup
component: ToGroup,
},
{
path: '/aist-share',
component: loadable(() => import(/* webpackChunkName: 'aist-share'*/'@/components/share-page/aist-share'))
component: loadable(() => import(/* webpackChunkName: 'aist-share'*/'@/components/share-page/aist-share')),
},
{
path: '/blessingRank',
component: loadable(() => import(/* webpackChunkName: 'blessing-rank' */'@/components/blessingRank/index'))
component: loadable(() => import(/* webpackChunkName: 'blessing-rank' */'@/components/blessingRank/index')),
},
{
path: '/blessingPreheat',
component: loadable(() => import(/* webpackChunkName: 'blessing-preheat' */'@/components/blessingPreheat/index'))
component: loadable(() => import(/* webpackChunkName: 'blessing-preheat' */'@/components/blessingPreheat/index')),
},
{
path: '/blessingGetPrize',
component: loadable(() => import(/* webpackChunkName: 'blessing-getPrize' */'@/components/blessingGetPrize/index'))
component: loadable(() => import(/* webpackChunkName: 'blessing-getPrize' */'@/components/blessingGetPrize/index')),
},
{
path: '/prize-winner-list',
component: loadable(() => import(/* webpackChunkName: 'prize-winner-list' */'@/components/activity/1111/prize-winner-list'))
component: loadable(() => import(/* webpackChunkName: 'prize-winner-list' */'@/components/activity/1111/prize-winner-list')),
},
//定金订单页面
{
path: '/deposit-order',
component: loadable(() => import(/* webpackChunkName: 'deposit-order' */ '@components/order/deposit/deposit-order'))
component: loadable(() => import(/* webpackChunkName: 'deposit-order' */ '@components/order/deposit/deposit-order')),
},
//定金支付页面
{
path: '/deposit-pay-order',
component: loadable(() => import(/* webpackChunkName: 'deposit-pay-order' */ '@components/order/deposit/deposit-pay-order'))
component: loadable(() => import(/* webpackChunkName: 'deposit-pay-order' */ '@components/order/deposit/deposit-pay-order')),
},
//尾款支付页面
{
path: '/final-deposit-order',
component: loadable(() => import(/* webpackChunkName: 'deposit-pay-order' */ '@components/order/deposit/final-order'))
component: loadable(() => import(/* webpackChunkName: 'deposit-pay-order' */ '@components/order/deposit/final-order')),
},
// 定金支付之后
{
path: '/expand/callback',
component: ExpandCallback
component: ExpandCallback,
},
// 定金-邀请好友助力
{
path: '/expand/index',
component: ExpandShare
component: ExpandShare,
},
{
path: '/toAppDemo',
component: loadable(() => import(/* webpackChunkName: 'aist-share'*/'@/components/blessingPreheat/toAppDemo'))
component: loadable(() => import(/* webpackChunkName: 'aist-share'*/'@/components/blessingPreheat/toAppDemo')),
},
{
path: '/activity',
......@@ -236,79 +236,79 @@ export default [
//双旦活动
{
path: '/activity/newyear-2019/landing',
component: loadable(() => import(/* webpackChunkName: 'newyear-2019-landing'*/ '@components/activity/newyear-2019/landing/index'))
component: loadable(() => import(/* webpackChunkName: 'newyear-2019-landing'*/ '@components/activity/newyear-2019/landing/index')),
},
// 双旦活动预热页面
{
path: '/year/yearIndex',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/preheat/index'))
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/preheat/index')),
},
// 我的宝箱
{
path: '/year/yearTreasure',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/myTreasure/index'))
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/myTreasure/index')),
}
,
// 双旦心愿单
{
path: '/year/yearWish',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/year-wish/index'))
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/year-wish/index')),
},
// python 小课页面
{
path: '/python',
component: loadable(() => import(/* webpackChunkName: 'python-class'*/'@/components/python'))
component: loadable(() => import(/* webpackChunkName: 'python-class'*/'@/components/python')),
},
{
path: '/pythonShare',
component: loadable(() => import('@/components/pythonShare'))
component: loadable(() => import('@/components/pythonShare')),
},
{
path: '/pythonStudy',
component: loadable(() => import('@/components/python/pythonStudy'))
component: loadable(() => import('@/components/python/pythonStudy')),
},
// 赠一得一
{
path: '/active/givecourse',
component: loadable(() => import(/* activity-give-courses */'@components/activity/give-courses/index'))
component: loadable(() => import(/* activity-give-courses */'@components/activity/give-courses/index')),
},
{
path: '/active/assistance',
component: loadable(() => import(/* activity-give-courses-assistance */'@components/activity/give-courses/assistance/index'))
component: loadable(() => import(/* activity-give-courses-assistance */'@components/activity/give-courses/assistance/index')),
},
{
path: '/active/to',
component: loadable(() => import(/* activity-give-courses-share */'@components/activity/give-courses/share-content/index'))
component: loadable(() => import(/* activity-give-courses-share */'@components/activity/give-courses/share-content/index')),
},
{
path: '/wxerr',
component: loadable(() => import(/* wx-err */ '@components/wxerr/index'))
component: loadable(() => import(/* wx-err */ '@components/wxerr/index')),
},
// 助学计划落地页
{
path: '/college',
exact: true,
component: loadable(() => import('@/components/college'))
component: loadable(() => import('@/components/college')),
},
// 助学计划落地页
{
path: '/college/:id',
exact: true,
component: loadable(() => import('@/components/college/courseList'))
component: loadable(() => import('@/components/college/courseList')),
},
//限时免费落地页
{
path: '/free',
exact: true,
component: loadable(() => import(/*limit-free*/'@/components/limit-free'))
component: loadable(() => import(/*limit-free*/'@/components/limit-free')),
},
// 新的开宝箱活动-活动页
{
path: '/box/boxActive',
component: loadable(() => import(/* webpackChunkName: 'treasure-box-home' */ '@components/activity/treasure-box/preheat/index'))
component: loadable(() => import(/* webpackChunkName: 'treasure-box-home' */ '@components/activity/treasure-box/preheat/index')),
},
// 新的开宝箱活动-我的宝箱
{
......@@ -318,17 +318,22 @@ export default [
// 新的开宝箱活动-扫码、分享页
{
path: '/box/landing',
component: loadable(() => import(/* webpackChunkName: 'newyear-2019-landing'*/ '@components/activity/treasure-box/landing/index'))
component: loadable(() => import(/* webpackChunkName: 'newyear-2019-landing'*/ '@components/activity/treasure-box/landing/index')),
},
//ML小课
{
path: '/ml',
exact: true,
component: loadable(() => import(/* ml */'@/components/ml'))
component: loadable(() => import(/* ml */'@/components/ml')),
},
{
path: '/mlShare',
component: loadable(() => import('@/components/mlShare'))
component: loadable(() => import('@/components/mlShare')),
},
//ai水平测试
{
path: '/ai-test',
component: loadable(() => import('@/components/ai-test')),
},
// AI水平测试 成绩报告
{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment