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 React, { Component } from 'react'
import {Toast} from "antd-mobile" import { HeaderBar } from '@/common'
import {HeaderBar} from '@/common' import { http } from '@/utils'
import {browser, http, getParam, wxShare} 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() {
const {user, history} = this.props const {user, history} = this.props
if (user.hasError) { if (user.hasError) {
history.push('/passport') history.push('/passport')
return return
}
this.getCodeWe()
this.handleFetchInfo(0)
} }
this.getCodeWe()
getCanvas() { this.handleFetchInfo(0)
let _this = this }
var canvas2 = document.createElement("canvas")
let _canvas = document.getElementsByClassName('score-list')[0]
var w = parseInt(window.getComputedStyle(_canvas).width) getCanvas() {
var h = parseInt(window.getComputedStyle(_canvas).height) let _this = this
var scale = window.devicePixelRatio var canvas2 = document.createElement("canvas")
canvas2.width = w * scale let _canvas = document.getElementsByClassName('score-list')[0]
canvas2.height = h * scale var w = parseInt(window.getComputedStyle(_canvas).width)
var h = parseInt(window.getComputedStyle(_canvas).height)
var context = canvas2.getContext("2d") var scale = window.devicePixelRatio
context.scale(1, 1) canvas2.width = w * scale
html2canvas(document.getElementsByClassName('score-list')[0], {canvas: canvas2}).then(function (canvas) { canvas2.height = h * scale
//document.body.appendChild(canvas);
var context = canvas2.getContext("2d")
let imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream") context.scale(1, 1)
_this.setState({ html2canvas(document.getElementsByClassName('score-list')[0], {canvas: canvas2}).then(function (canvas) {
imgUrl: imgUrl, //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 = '/ai-test' let qrCodeLink = '/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) => {
this.setState({ http.get(`${API.home}/sys/at/user_score/${index}`).then(res => {
myRankList: data const {code, data} = res.data
}) if (code === 200) {
this.setState({
let avatar = this.props.user && this.props.user.data.avatar myRankList: data,
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") let avatar = this.props.user && this.props.user.data.avatar
ctx.drawImage(img, 0, 0, img.width, img.height) this.getBase64(avatar)
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase()
var dataURL = canvas.toDataURL("image/" + ext) setTimeout(() => {
return dataURL 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,
})
} }
image.onerror = () => {
getBase64 = (img) => { console.log('onerror')
let base64 = null let timeStamp = +new Date()
let image = new Image() this.getBase64(img + '?' + timeStamp)
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>
}
</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) => { <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>最终排名</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
...@@ -189,7 +189,7 @@ class Scores extends Component { ...@@ -189,7 +189,7 @@ class Scores extends Component {
<tr> <tr>
<th>分数</th> <th>分数</th>
<th>用时</th> <th>用时</th>
<th>排名</th> <th>{index === 0 && '最终'}排名</th>
</tr> </tr>
</thead> </thead>
<tbody> <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