Commit 41d320ec by zhanghaozhe

Merge branch 'problems' into pre

# Conflicts:
#	build/asset-manifest.json
#	build/index.html
#	build/mrstatic/css/ai-test.505c7fc8.chunk.css
#	build/mrstatic/js/ai-test.be54188f.chunk.js
#	build/mrstatic/js/runtime~main.42ba15b1.js
#	build/mrstatic/js/runtime~main.42ba15b1.js.map
#	build/precache-manifest.3b0ceee175772ab67867194c568543a6.js
#	build/service-worker.js
parents d7376451 b7e402e7
......@@ -41,7 +41,7 @@ class HeaderBar extends Component {
<div className="detail-header" style={{...this.props.style}}>
{
!toHref && this.props.arrow &&
<i className='iconfont iconiconfront-68' onClick={this.goBack}></i>
<i className='iconfont iconiconfront-68' onClick={this.props.goBack || this.goBack}></i>
}
{
toHref && typeof toHref === 'function' &&
......
......@@ -23,9 +23,15 @@ class Scores extends Component {
rankList: [],
rankListTabs: [
{title: '日榜'},
{title: '总榜'},
],
/*
rankListTabs: [
{title: '日榜'},
{title: '周榜'},
{title: '总榜'},
],
*/
isExpandRankList: false,
icons: [
require('./rank-1.png'),
......@@ -92,7 +98,7 @@ class Scores extends Component {
}
getRankList = (tab, type) => {
http.get(`${API.home}/sys/at/ranks/${type}`)
http.get(`${API.home}/sys/at/ranks/${type === 0 ? 0 : 2}`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
......@@ -223,12 +229,12 @@ class Scores extends Component {
</tr>
: <tr>
{
userScore.score === '-' ? '-' :
userScore.score === '-' ? <td>'-'</td> :
<td>{userScore.score} <Link to={`/ai-test/analysis/${userScore.r_id}`}>解析</Link></td>
}
<td>{userScore.cost_time}</td>
{
userScore.rank === '-' ? '-' : <td>{userScore.rank}</td>
userScore.rank === '-' ? <td>'-'</td> : <td>{userScore.rank}名</td>
}
</tr>
}
......@@ -291,9 +297,12 @@ class Scores extends Component {
<span className={'score'}>{item.score}</span>/<span>{item.cost_time}</span>
</td>
<td>
<div>
{
item.prize_url ? <a href={`${item.prize_url}#goback`}>{item.prize}</a> : item.prize
}
</div>
</td>
</tr>
})
......
......@@ -50,7 +50,7 @@
background-color: $blue-bg;
}
th{
th {
width: 33.333333%;
}
......@@ -167,12 +167,12 @@
&::before {
@include pseudo;
left: 109px;
left: 28%;
}
&::after {
@include pseudo;
right: 109px;
right: 28%;
transform: scaleX(-1) translateY(-50%);
}
}
......@@ -261,6 +261,20 @@
}
}
td:nth-of-type(3) {
width: 20%;
}
td:nth-of-type(4) {
div {
width: 118px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
&:nth-child(even) {
background: #f6fbff;
}
......@@ -341,12 +355,11 @@
.rule {
position: absolute;
top: 19.7%;
top: 50%;
left: 50%;
transform: translateX(-50%);
transform: translate(-50%, -50%);
width: 300px;
//min-height: 311px;
padding: 18px 25px;
padding: 18px 25px 10px;
background-color: #fff;
border-radius: 5px;
color: #525C65;
......@@ -358,6 +371,9 @@
}
div:nth-child(2) {
max-height: 280px;
overflow: auto;
//height: 100%;
font-size: 14px;
margin-bottom: 16px;
white-space: pre-wrap;
......
import React, { Component } from 'react';
import './index.scss'
import { HeaderBar, CallApp, CaptchaAli } from "@common/index"
import { browser, getParam, http } from "@/utils"
import { Toast } from "antd-mobile";
import { Link } from 'react-router-dom'
class Problems extends Component {
state = {
isShowAnswer: false,
isShowCaptcha: false,
instance: null,
problem: {},
}
componentDidMount() {
this.getProblem()
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.match.params.id !== this.props.match.params.id) {
this.setState({
problem: {},
isShowAnswer: false,
});
this.getProblem()
}
}
onVerify = data => {
http.post(`${API.home}/m/safety`, data)
.then(res => {
const {code} = res.data
if (code === 200) {
this.setState({
isShowCaptcha: false,
})
this.getProblem()
} else {
this.state.instance && this.state.instance.reset()
}
})
}
getInstance = (instance) => {
this.setState({
instance,
});
}
getProblem = () => {
http.get(`${API.home}/m/question/${this.props.match.params.id}`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
problem: data,
});
} else if (code === 1) {
this.setState({
isShowCaptcha: true,
});
} else {
Toast.info(msg)
}
})
}
goBack = () => {
if (document.referrer.includes(API.www)) {
history.go(-1)
} else {
const {state, hash} = this.props.location
if (hash.includes('goback')) {
return window.history.go(-1)
}
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
}
}
}
render() {
const {isShowAnswer, problem: {quesInfo, between}, isShowCaptcha} = this.state
return (
quesInfo || isShowCaptcha ? <article id={'problems'}>
{
!isShowCaptcha ?
<>
<HeaderBar title={quesInfo && quesInfo.category} arrow={true} cart={false}
goBack={this.goBack}></HeaderBar>
<div className="topic">
<span>{quesInfo && quesInfo.order_id}.</span>
<span dangerouslySetInnerHTML={{__html: quesInfo && quesInfo.ques}}></span>
</div>
{
!isShowAnswer &&
<div className="btn" onClick={() => {
this.setState({
isShowAnswer: true,
});
}}>
<button>查看解析 <i className={'iconfont iconiconfront-69'}></i></button>
</div>
}
{
isShowAnswer &&
<div className={`content`}>
<div className={'title'}>解析</div>
<span dangerouslySetInnerHTML={{__html: quesInfo.analysis}}></span>
</div>
}
<footer>
<div className="app">更多题目请 <CallApp text={'前往APP'}/></div>
<div className="op">
{
between && !!between.up && <Link to={`/problems/${between.up}`} replace className={'nav'}>上一题</Link>
}
{
between && !!between.down &&
<Link to={`/problems/${between.down}`} replace className={'nav'}>下一题</Link>
}
</div>
</footer>
</>
: <div className="captcha-container">
<div>亲,系统正忙,滑动一下马上回来</div>
<CaptchaAli getInstance={this.getInstance} onVerify={this.onVerify}/>
</div>
}
</article> : null
);
}
}
export default Problems;
\ No newline at end of file
#problems {
height: 100%;
padding: 58px 0 54px;
overflow-x: hidden;
.detail-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.topic {
padding: 0 13px;
white-space: pre-wrap;
font-size: 16px;
color: #555;
}
.btn {
position: relative;
margin-top: 21px;
button {
position: absolute;
right: 0;
top: 0;
font-size: 12px;
color: #09f;
-webkit-appearance: none;
outline: 0;
border: 0;
background-color: transparent;
}
.iconfont {
font-size: 14px;
}
}
.content {
margin-top: 16px;
padding: 15px 13px;
background-color: #F5F5F5;
font-size: 16px;
color: #333;
white-space: pre-wrap;
word-break: break-all;
.title {
margin-bottom: 5px;
color: #999;
font-size: 14px;
}
}
footer {
position: fixed;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 44px;
padding: 0 12px 0 15px;
border-top: 1px solid #DDD;
background-color: #fff;
font-size: 12px;
color: #09f;
.app {
display: flex;
color: #666;
div {
margin-left: 5px;
color: #09f;
}
}
.nav {
display: inline-block;
width: 60px;
height: 22px;
line-height: 22px;
border: 1px solid rgba(0, 153, 255, 1);
border-radius: 11px;
text-align: center;
&:nth-child(1) {
margin-right: 20px;
}
}
}
.captcha-container{
width: 80%;
padding-top: 50%;
margin: 0 auto;
text-align: center;
font-size: 20px;
div:nth-child(1){
margin-bottom: 10px;
}
}
}
@keyframes slideInDown {
from {
transform: translate3d(0, -10%, 0);
}
to {
transform: translate3d(0, 0, 0);
visibility: visible;
}
}
.slideInDown {
animation: slideInDown .3s both;
}
\ No newline at end of file
......@@ -341,4 +341,9 @@ export default [
isPrivate: true,
component: loadable(() => import(/* webpackChunkName: 'intelligent-recommend' */'@/components/intelligent-recommend')),
},
//题库
{
path: '/problems/:id',
component: loadable(() => import('@/components/problems')),
},
]
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