Skip to content

M
mr-julyedu
Commit 9d34350f by zhanghaozhe
Options

ai-test

parent 1299fa3c
Showing with 240 additions and 218 deletions
src/components/ai-test/report/index.js
import React, {Component} from 'react' import React, { Component } from 'react'
import {HeaderBar} from '@/common' import { HeaderBar } from '@/common'
import {http} from '@/utils' import { http } from '@/utils'
import './index.scss' import './index.scss'
import QRCode from 'qrcode' import QRCode from 'qrcode'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import scoreIconL from '@assets/image/score_icon-l.png' import scoreIconL from '@assets/image/score_icon-l.png'
import scoreIconR from '@assets/image/score_icon-r.png' import scoreIconR from '@assets/image/score_icon-r.png'
import scoreReportBg from '@assets/image/scoreReport_bg.png' import scoreReportBg from '@assets/image/scoreReport_bg.png'
import {connect} from "react-redux" import { connect } from "react-redux"
@connect(state => ({ @connect(state => ({
user: state.user, user: state.user,
}), }),
) )
class scoreReport extends Component { class scoreReport extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
tab: ['当前成绩', '今日最佳', '本月最佳'], tab: ['当前成绩', '今日最佳', '本月最佳'],
cutIndex: 0, cutIndex: 0,
myRankList: '', myRankList: '',
imgUrl: '', imgUrl: '',
codeSrc: '', codeSrc: '',
avatar_file: '' avatar_file: '',
}
} }
}
componentDidMount() { componentDidMount() {
window.onbeforeunload = () => { window.onbeforeunload = () => {
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.scrollTop = 0 document.body.scrollTop = 0
}
this.getCodeWe()
this.handleFetchInfo(0)
} }
this.getCodeWe()
this.handleFetchInfo(0)
}
shouldComponentUpdate(nextProps, nextState, nextContext) { shouldComponentUpdate(nextProps, nextState, nextContext) {
if (this.props.user.data.avatar !== nextProps.user.data.avatar) { if (this.props.user.data.avatar !== nextProps.user.data.avatar) {
this.getCanvas() this.getCanvas()
return false return false
}
return true
} }
return true
}
getCanvas() { getCanvas() {
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.scrollTop = 0 document.body.scrollTop = 0
let _this = this let _this = this
var canvas2 = document.createElement("canvas") var canvas2 = document.createElement("canvas")
let _canvas = document.getElementsByClassName('score-list')[0] let _canvas = document.getElementsByClassName('score-list')[0]
if (!_canvas) { if (!_canvas) {
return return
}
var w = parseInt(window.getComputedStyle(_canvas).width)
var h = parseInt(window.getComputedStyle(_canvas).height)
var scale = window.devicePixelRatio
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);
let imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")
_this.setState({
imgUrl: imgUrl,
})
})
} }
var w = parseInt(window.getComputedStyle(_canvas).width)
var h = parseInt(window.getComputedStyle(_canvas).height)
var scale = window.devicePixelRatio
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);
let imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")
_this.setState({
imgUrl: imgUrl,
})
})
}
// 获取二维码 // 获取二维码
getCodeWe() { getCodeWe() {
let _this = this let _this = this
let qrCodeLink = `${API.m}/ai-test` let qrCodeLink = `${API.m}/ai-test`
return new Promise(resolve => { return new Promise(resolve => {
QRCode.toDataURL(qrCodeLink, {}, function (err, url) { QRCode.toDataURL(qrCodeLink, {}, function (err, url) {
_this.setState({ _this.setState({
codeSrc: url, codeSrc: url,
})
})
resolve()
}) })
} })
resolve()
handleFetchInfo = (index) => { })
http.get(`${API.home}/sys/at/user_score/${index}`).then(res => { }
const {code, data} = res.data
if (code === 200) { handleFetchInfo = (index) => {
const {user, history} = this.props http.get(`${API.home}/sys/at/user_score/${index}`).then(res => {
if (user.hasError) { const {code, data} = res.data
history.push('/passport') if (code === 200) {
return this.setState({
} myRankList: data,
this.setState({
myRankList: data
})
let avatar = this.props.user && this.props.user.data.avatar
this.getBase64(avatar)
setTimeout(() => {
this.getCanvas()
}, 500)
}
}) })
}
let avatar = this.props.user && this.props.user.data.avatar
this.getBase64(avatar)
setTimeout(() => {
this.getCanvas()
}, 500)
} else if (code === 4030) {
const {user, history} = this.props
if (user.hasError) {
history.push('/passport')
}
}
})
}
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({
cutIndex: index,
})
this.handleFetchInfo(index)
}
render() {
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'}>
{
tab.map((item, index) => {
return (
<li key={index} className={cutIndex === index ? 'active' : ''}
onClick={() => this.change(index)}>{item}</li>
)
})
}
</ul>
<div className="score-list-box">
<div className={'score-list'} style={{backgroundImage: `url(${scoreReportBg})`}}>
<div className="title">
<img src={scoreIconL} alt=""/>
成绩报告
<img src={scoreIconR} alt=""/>
</div>
<table border="0" cellSpacing="0" cellPadding="0">
<thead>
<tr>
<td>分数</td>
<td>用时</td>
<td>{cutIndex === 0 && '最终'}排名</td>
</tr>
</thead>
<tbody>
{
myRankList.r_id !== 0 &&
<tr className={'has'}>
<td>{myRankList.score}分</td>
<td>{myRankList.cost_time}</td>
<td className={'rank'}>{myRankList.rank}</td>
</tr>
}
{
myRankList.r_id == 0 &&
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
}
getBase64Image = (img) => { </tbody>
var canvas = document.createElement("canvas") </table>
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext("2d") <div className="comment text-overflow-4">
ctx.drawImage(img, 0, 0, img.width, img.height) <img className={'avatar_file'} src={avatar_file} alt=""/>
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase() {myRankList && myRankList.title && myRankList.title.comment}
var dataURL = canvas.toDataURL("image/" + ext) </div>
return dataURL
}
getBase64 = (img) => { <div className="code">
let base64 = null <img src={codeSrc} alt=""/>
let image = new Image() <p>AI水平测试</p>
let timeStamp = +new Date() </div>
image.setAttribute('crossOrigin', 'anonymous') </div>
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) => { <img className={'imgUrl'} src={imgUrl} alt=""/>
this.setState({ </div>
cutIndex: index,
})
this.handleFetchInfo(index)
}
<div className="tip">长按图片分享给好友，或保存后分享到朋友圈</div>
render() { </div>
const {tab, cutIndex, myRankList, codeSrc, imgUrl, avatar_file} = this.state </div>
return ( )
<div className={'score-content'}> }
<HeaderBar
title='成绩报告'
arrow={true}
home={false}
/>
<div className={'score-report'}>
<ul className={'tab-list'}>
{
tab.map((item, index) => {
return (
<li key={index} className={cutIndex === index ? 'active' : ''}
onClick={() => this.change(index)}>{item}</li>
)
})
}
</ul>
<div className="score-list-box">
<div className={'score-list'} style={{backgroundImage: `url(${scoreReportBg})`}}>
<div className="title">
<img src={scoreIconL} alt=""/>
成绩报告
<img src={scoreIconR} alt=""/>
</div>
<table border="0" cellSpacing="0" cellPadding="0">
<thead>
<tr>
<td>分数</td>
<td>用时</td>
<td>{cutIndex === 0 && '最终'}排名</td>
</tr>
</thead>
<tbody>
{
myRankList.r_id !== 0 &&
<tr className={'has'}>
<td>{myRankList.score}分</td>
<td>{myRankList.cost_time}</td>
<td className={'rank'}>{myRankList.rank}</td>
</tr>
}
{
myRankList.r_id == 0 &&
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
}
</tbody>
</table>
<div className="comment text-overflow-4">
<img className={'avatar_file'} src={avatar_file} alt=""/>
{myRankList && myRankList.title && myRankList.title.comment}
</div>
<div className="code">
<img src={codeSrc} alt=""/>
<p>AI水平测试</p>
</div>
</div>
<img className={'imgUrl'} src={imgUrl} alt=""/>
</div>
<div className="tip">长按图片分享给好友，或保存后分享到朋友圈</div>
</div>
</div>
)
}
} }
......
src/components/ai-test/scores/index.js
...@@ -6,6 +6,7 @@ import storage from 'store2' ...@@ -6,6 +6,7 @@ import storage from 'store2'
import { html } from '@/utils' import { html } from '@/utils'
import { compareDesc } from "date-fns"; import { compareDesc } from "date-fns";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { connect } from "react-redux";
class Scores extends Component { class Scores extends Component {
...@@ -48,8 +49,10 @@ class Scores extends Component { ...@@ -48,8 +49,10 @@ class Scores extends Component {
componentDidMount() { componentDidMount() {
this.getInitialData() this.getInitialData()
this.getRankList(null, 0) this.getRankList(null, 0)
this.getUserScores(0) if (!this.props.user.hasError) {
this.getUserAddress() this.getUserScores(0)
this.getUserAddress()
}
} }
handleChange = (e) => { handleChange = (e) => {
...@@ -171,6 +174,7 @@ class Scores extends Component { ...@@ -171,6 +174,7 @@ class Scores extends Component {
userAddress, userAddress,
entryButtonInRule, entryButtonInRule,
} = this.state } = this.state
const {user, history} = this.props
const _rankList = Array.isArray(rankList) ? isExpandRankList ? rankList : rankList.slice(0, 10) : [] const _rankList = Array.isArray(rankList) ? isExpandRankList ? rankList : rankList.slice(0, 10) : []
return ( return (
<div className={'scores'}> <div className={'scores'}>
...@@ -202,16 +206,24 @@ class Scores extends Component { ...@@ -202,16 +206,24 @@ class Scores extends Component {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> {
{ user.hasError
userScore.score === '-' ? '-' : ? <tr>
<td>{userScore.score} <Link to={`/ai-test/analysis/${userScore.r_id}`}>解析</Link></td> <td>--</td>
} <td>--</td>
<td>{userScore.cost_time}</td> <td>--</td>
{ </tr>
userScore.rank === '-' ? '-' : <td>{userScore.rank}名</td> : <tr>
} {
</tr> userScore.score === '-' ? '-' :
<td>{userScore.score} <Link to={`/ai-test/analysis/${userScore.r_id}`}>解析</Link></td>
}
<td>{userScore.cost_time}</td>
{
userScore.rank === '-' ? '-' : <td>{userScore.rank}名</td>
}
</tr>
}
</tbody> </tbody>
</table> </table>
</div> </div>
...@@ -231,9 +243,13 @@ class Scores extends Component { ...@@ -231,9 +243,13 @@ class Scores extends Component {
<div> <div>
<span>仅显示前50名</span> <span>仅显示前50名</span>
<a href="javascript:void(0);" onClick={() => { <a href="javascript:void(0);" onClick={() => {
this.setState({ if(user.hasError){
isShowUserAddress: true, history.push('/passport')
}) }else {
this.setState({
isShowUserAddress: true,
})
}
}}>收货地址</a> }}>收货地址</a>
</div> </div>
</div> </div>
...@@ -386,4 +402,7 @@ function Rule({neverShow, isNeverShow, rule, close, startTest, entryButtonInRule ...@@ -386,4 +402,7 @@ function Rule({neverShow, isNeverShow, rule, close, startTest, entryButtonInRule
} }
export default Scores; export default connect(
\ No newline at end of file ({user}) => ({user}),
null,
)(Scores);
\ No newline at end of file
src/components/ai-test/scores/index.scss
...@@ -50,6 +50,10 @@ ...@@ -50,6 +50,10 @@
background-color: $blue-bg; background-color: $blue-bg;
} }
th{
width: 33.333333%;
}
} }
th { th {
......
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