Skip to content

M
mr-julyedu
Commit 69dd72c9 by xuzhenghua
Options

share

parent b6adfec5
Showing with 357 additions and 30 deletions
package-lock.json
......@@ -4170,6 +4170,21 @@
"postcss-selector-parser": "^5.0.0-rc.4"
}
},
"css-line-break": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
"integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
"requires": {
"base64-arraybuffer": "^0.2.0"
},
"dependencies": {
"base64-arraybuffer": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
"integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
}
}
},
"css-loader": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.0.tgz",
......@@ -6267,8 +6282,7 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"aproba": {
"version": "1.2.0",
......@@ -6286,13 +6300,11 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"optional": true
"bundled": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -6305,18 +6317,15 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -6419,8 +6428,7 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"optional": true
"bundled": true
},
"ini": {
"version": "1.3.5",
......@@ -6430,7 +6438,6 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -6443,20 +6450,17 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"optional": true
"bundled": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -6473,7 +6477,6 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -6546,8 +6549,7 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"object-assign": {
"version": "4.1.1",
......@@ -6557,7 +6559,6 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -6633,8 +6634,7 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"optional": true
"bundled": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -6664,7 +6664,6 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -6682,7 +6681,6 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -6721,13 +6719,11 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"optional": true
"bundled": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"optional": true
"bundled": true
}
}
},
......@@ -7293,6 +7289,14 @@
"util.promisify": "1.0.0"
}
},
"html2canvas": {
"version": "1.0.0-rc.5",
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.5.tgz",
"integrity": "sha512-DtNqPxJNXPoTajs+lVQzGS1SULRI4GQaROeU5R41xH8acffHukxRh/NBVcTBsfCkJSkLq91rih5TpbEwUP9yWA==",
"requires": {
"css-line-break": "1.1.1"
}
},
"htmlparser2": {
"version": "3.10.1",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
......
package.json
......@@ -37,6 +37,7 @@
"fs-extra": "7.0.1",
"hammerjs": "^2.0.8",
"html-webpack-plugin": "4.0.0-alpha.2",
"html2canvas": "^1.0.0-rc.5",
"http-proxy-middleware": "^0.19.1",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
......
src/components/scoreReport/index.js 0 → 100755
import React, {Component} from 'react'
import {Toast} from "antd-mobile"
import {HeaderBar} from '@/common'
import {browser, http, getParam, wxShare} 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'
class scoreReport extends Component {
constructor(props) {
super(props)
this.state = {
tab: ['当前成绩', '今日最佳', '本月最佳'],
cutIndex: 0,
myRankList: '',
imgUrl: '',
codeSrc: ''
}
}
componentDidMount() {
this.handleFetchInfo(0)
this.getCodeWe()
}
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
//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
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 = 'www.julyedu.com'
return new Promise(resolve => {
QRCode.toDataURL(qrCodeLink, {}, function (err, url) {
_this.setState({
codeSrc: url
})
})
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
})
this.getCanvas()
}
})
}
change = (index) => {
this.setState({
cutIndex: index
})
this.handleFetchInfo(index)
}
render() {
const {tab, cutIndex, myRankList, codeSrc, imgUrl, isshow} = this.state
return (
<>
<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">
{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>
</>
)
}
}
export default scoreReport
\ No newline at end of file
src/components/scoreReport/index.scss 0 → 100755
html, body, #root {
height: 100% !important;
}
.score-report {
width: 100%;
height: 100%;
background-color: #09f;
padding: 30px 12px 70px 12px;
color: #fff;
.tab-list {
display: flex;
justify-content: space-around;
font-size: 18px;
li {
padding-bottom: 6px;
}
.active {
border-bottom: 2px solid #FFF;
}
}
.score-list-box {
width: 100%;
height: 434px;
position: relative;
margin-top: 20px;
}
.imgUrl {
width: 100%;
height: 434px;
position:absolute;
left: 0;
top: 0;
}
.score-list {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
text-align: center;
.title {
font-size: 22px;
color: #000;
padding-top: 40px;
img {
width: 16px;
height: 11px;
margin: 0 20px;
position: relative;
top: -1px;
}
}
table {
margin: 15px 33px 0;
text-align: center;
border: 1px solid #E5E5E5;
border-radius: 4px;
background-color: #fff;
tr {
height: 40px;
line-height: 40px;
}
thead {
color: #525C65;
font-size: 16px;
font-weight: 400;
}
tbody {
color: #525C65;
font-size: 16px;
font-weight: 500;
td {
border-top: 1px solid #E5E5E5;
}
}
td {
border-left: 1px solid #E5E5E5;
width: 80px;
&:first-child {
border-left: none;
}
&:nth-of-type(2) {
width: 124px;
}
}
.has {
color: #09f;
}
.rank {
color: #FF2121;
}
}
.comment {
text-indent: 2em;
text-align: left;
color: #333;
font-size: 14px;
line-height: 21px;
margin: 15px 33px 0;
}
.code {
width: 80px;
position: absolute;
bottom: 40px;
right: 25px;
img {
width: 80px;
height: 80px;
}
p {
color: #000;
font-size: 12px;
}
}
}
.tip {
text-align: center;
margin-top: 20px;
font-size: 16px;
color: #fff;
}
}
src/router/router-config.js
......@@ -330,4 +330,9 @@ export default [
path: '/mlShare',
component: loadable(() => import('@/components/mlShare'))
},
// AI水平测试 成绩报告
{
path: '/scoreReport',
component: loadable(() => import('@/components/scoreReport'))
}
]
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