Skip to content

M
mr-julyedu
Commit ccaecd7a by zhanghaozhe
Options

Merge branch 'ai-test-merge' into dev

parents 15b5e926 beaf67be
Showing with 191 additions and 194 deletions
src/components/ai-test/report/index.js
import React, {Component} from 'react'
import {Toast} from "antd-mobile"
import {HeaderBar} from '@/common'
import {browser, http, getParam, wxShare} 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() {
const {user, history} = this.props
if (user.hasError) {
history.push('/passport')
return
}
this.getCodeWe()
this.handleFetchInfo(0)
componentDidMount() {
const {user, history} = this.props
if (user.hasError) {
history.push('/passport')
return
}
getCanvas() {
let _this = this
var canvas2 = document.createElement("canvas")
let _canvas = document.getElementsByClassName('score-list')[0]
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,
})
})
}
this.getCodeWe()
this.handleFetchInfo(0)
}
getCanvas() {
let _this = this
var canvas2 = document.createElement("canvas")
let _canvas = document.getElementsByClassName('score-list')[0]
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 = '/ai-test'
return new Promise(resolve => {
QRCode.toDataURL(qrCodeLink, {}, function (err, url) {
_this.setState({
codeSrc: url
})
})
resolve()
getCodeWe() {
let _this = this
let qrCodeLink = '/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) {
this.setState({
myRankList: data
})
let avatar = this.props.user && this.props.user.data.avatar
this.getBase64(avatar)
setTimeout(()=> {
this.getCanvas()
},100)
}
})
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,
})
}
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
let avatar = this.props.user && this.props.user.data.avatar
this.getBase64(avatar)
setTimeout(() => {
this.getCanvas()
}, 100)
}
})
}
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,
})
}
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)
}
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>
}
</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>
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>最终排名</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
......@@ -189,7 +189,7 @@ class Scores extends Component {
<tr>
<th>分数</th>
<th>用时</th>
<th>排名</th>
<th>{index === 0 && '最终'}排名</th>
</tr>
</thead>
<tbody>
......
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