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 {HeaderBar} from '@/common'
import {http} from '@/utils'
import React, { Component } from 'react'
import { HeaderBar } from '@/common'
import { http } from '@/utils'
import './index.scss'
import QRCode from 'qrcode'
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"
import { connect } from "react-redux"
@connect(state => ({
user: state.user,
}),
user: state.user,
}),
)
class scoreReport extends Component {
constructor(props) {
super(props)
this.state = {
tab: ['当前成绩', '今日最佳', '本月最佳'],
cutIndex: 0,
myRankList: '',
imgUrl: '',
codeSrc: '',
avatar_file: ''
}
constructor(props) {
super(props)
this.state = {
tab: ['当前成绩', '今日最佳', '本月最佳'],
cutIndex: 0,
myRankList: '',
imgUrl: '',
codeSrc: '',
avatar_file: '',
}
}
componentDidMount() {
window.onbeforeunload = () => {
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
}
this.getCodeWe()
this.handleFetchInfo(0)
componentDidMount() {
window.onbeforeunload = () => {
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
}
this.getCodeWe()
this.handleFetchInfo(0)
}
shouldComponentUpdate(nextProps, nextState, nextContext) {
if (this.props.user.data.avatar !== nextProps.user.data.avatar) {
this.getCanvas()
return false
}
return true
shouldComponentUpdate(nextProps, nextState, nextContext) {
if (this.props.user.data.avatar !== nextProps.user.data.avatar) {
this.getCanvas()
return false
}
return true
}
getCanvas() {
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
getCanvas() {
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
let _this = this
var canvas2 = document.createElement("canvas")
let _canvas = document.getElementsByClassName('score-list')[0]
if (!_canvas) {
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,
})
})
let _this = this
var canvas2 = document.createElement("canvas")
let _canvas = document.getElementsByClassName('score-list')[0]
if (!_canvas) {
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,
})
})
}
// 获取二维码
getCodeWe() {
let _this = this
let qrCodeLink = `${API.m}/ai-test`
return new Promise(resolve => {
QRCode.toDataURL(qrCodeLink, {}, function (err, url) {
_this.setState({
codeSrc: url,
})
})
resolve()
getCodeWe() {
let _this = this
let qrCodeLink = `${API.m}/ai-test`
return new Promise(resolve => {
QRCode.toDataURL(qrCodeLink, {}, function (err, url) {
_this.setState({
codeSrc: url,
})
}
handleFetchInfo = (index) => {
http.get(`${API.home}/sys/at/user_score/${index}`).then(res => {
const {code, data} = res.data
if (code === 200) {
const {user, history} = this.props
if (user.hasError) {
history.push('/passport')
return
}
this.setState({
myRankList: data
})
let avatar = this.props.user && this.props.user.data.avatar
this.getBase64(avatar)
setTimeout(() => {
this.getCanvas()
}, 500)
}
})
resolve()
})
}
handleFetchInfo = (index) => {
http.get(`${API.home}/sys/at/user_score/${index}`).then(res => {
const {code, data} = res.data
if (code === 200) {
this.setState({
myRankList: data,
})
}
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) => {
var canvas = document.createElement("canvas")
canvas.width = img.width
canvas.height = img.height
</tbody>
</table>
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
}
<div className="comment text-overflow-4">
<img className={'avatar_file'} src={avatar_file} alt=""/>
{myRankList && myRankList.title && myRankList.title.comment}
</div>
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)
}
}
<div className="code">
<img src={codeSrc} alt=""/>
<p>AI水平测试</p>
</div>
</div>
change = (index) => {
this.setState({
cutIndex: index,
})
this.handleFetchInfo(index)
}
<img className={'imgUrl'} src={imgUrl} alt=""/>
</div>
<div className="tip">长按图片分享给好友，或保存后分享到朋友圈</div>
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>
}
</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>
)
}
</div>
</div>
)
}
}
......
src/components/ai-test/scores/index.js
......@@ -6,6 +6,7 @@ import storage from 'store2'
import { html } from '@/utils'
import { compareDesc } from "date-fns";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
class Scores extends Component {
......@@ -48,8 +49,10 @@ class Scores extends Component {
componentDidMount() {
this.getInitialData()
this.getRankList(null, 0)
this.getUserScores(0)
this.getUserAddress()
if (!this.props.user.hasError) {
this.getUserScores(0)
this.getUserAddress()
}
}
handleChange = (e) => {
......@@ -171,6 +174,7 @@ class Scores extends Component {
userAddress,
entryButtonInRule,
} = this.state
const {user, history} = this.props
const _rankList = Array.isArray(rankList) ? isExpandRankList ? rankList : rankList.slice(0, 10) : []
return (
<div className={'scores'}>
......@@ -202,16 +206,24 @@ class Scores extends Component {
</tr>
</thead>
<tbody>
<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>
{
user.hasError
? <tr>
<td>--</td>
<td>--</td>
<td>--</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>
</table>
</div>
......@@ -231,9 +243,13 @@ class Scores extends Component {
<div>
<span>仅显示前50名</span>
<a href="javascript:void(0);" onClick={() => {
this.setState({
isShowUserAddress: true,
})
if(user.hasError){
history.push('/passport')
}else {
this.setState({
isShowUserAddress: true,
})
}
}}>收货地址</a>
</div>
</div>
......@@ -386,4 +402,7 @@ function Rule({neverShow, isNeverShow, rule, close, startTest, entryButtonInRule
}
export default Scores;
\ No newline at end of file
export default connect(
({user}) => ({user}),
null,
)(Scores);
\ No newline at end of file
src/components/ai-test/scores/index.scss
......@@ -50,6 +50,10 @@
background-color: $blue-bg;
}
th{
width: 33.333333%;
}
}
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