push

src/components/scoreReport/index.js

@@ -8,6 +8,12 @@ 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"
+
+@connect(state => ({
+        user: state.user
+    }),
+)
 
 class scoreReport extends Component {
 
@@ -18,13 +24,20 @@ class scoreReport extends Component {
             cutIndex: 0,
             myRankList: '',
             imgUrl: '',
-            codeSrc: ''
+            codeSrc: '',
+            avatar_file: ''
         }
     }
 
     componentDidMount() {
-        this.handleFetchInfo(0)
+        const {user, history} = this.props
+        if (user.hasError) {
+            history.push('/passport')
+            return
+        }
+
         this.getCodeWe()
+        this.handleFetchInfo(0)
     }
 
 
@@ -35,14 +48,13 @@ class scoreReport extends Component {
         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);
+            //document.body.appendChild(canvas);
 
             let imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")
             _this.setState({
@@ -54,7 +66,7 @@ class scoreReport extends Component {
 // 获取二维码
     getCodeWe() {
         let _this = this
-        let qrCodeLink = 'www.julyedu.com'
+        let qrCodeLink = '/ai-test'
         return new Promise(resolve => {
             QRCode.toDataURL(qrCodeLink, {}, function (err, url) {
                 _this.setState({
@@ -72,11 +84,50 @@ class scoreReport extends Component {
                 this.setState({
                     myRankList: data
                 })
-                this.getCanvas()
+
+                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
+            })
+        }
+        image.onerror = () => {
+            console.log('onerror')
+            let timeStamp = +new Date()
+            this.getBase64(img + '?' + timeStamp)
+        }
+    }
+
+
     change = (index) => {
         this.setState({
             cutIndex: index
@@ -86,15 +137,14 @@ class scoreReport extends Component {
 
 
     render() {
-        const {tab, cutIndex, myRankList, codeSrc, imgUrl, isshow} = this.state
+        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'}>
                         {
@@ -147,6 +197,7 @@ class scoreReport extends Component {
                             </table>
 
                             <div className="comment text-overflow-4">
+                                <img className={'avatar_file'} src={avatar_file} alt=""/>
                                 {myRankList && myRankList.title && myRankList.title.comment}
                             </div>
 
@@ -163,7 +214,7 @@ class scoreReport extends Component {
                     <div className="tip">长按图片分享给好友，或保存后分享到朋友圈</div>
 
                 </div>
-            </>
+            </div>
         )
     }
 }

src/components/scoreReport/index.scss

 html, body, #root {
   height: 100% !important;
 }
-
-.score-report {
+.score-content {
   width: 100%;
   height: 100%;
   background-color: #09f;
-  padding: 30px 12px 70px 12px;
+}
+.score-report {
+  width: 100%;
+  padding: 30px 12px 45px 12px;
   color: #fff;
 
   .tab-list {
@@ -33,7 +35,7 @@ html, body, #root {
   .imgUrl {
     width: 100%;
     height: 434px;
-    position:absolute;
+    position: absolute;
     left: 0;
     top: 0;
   }
@@ -50,6 +52,7 @@ html, body, #root {
       font-size: 22px;
       color: #000;
       padding-top: 40px;
+
       img {
         width: 16px;
         height: 11px;
@@ -104,13 +107,13 @@ html, body, #root {
       .has {
         color: #09f;
       }
+
       .rank {
         color: #FF2121;
       }
     }
 
     .comment {
-      text-indent: 2em;
       text-align: left;
       color: #333;
       font-size: 14px;
@@ -123,10 +126,12 @@ html, body, #root {
       position: absolute;
       bottom: 40px;
       right: 25px;
+
       img {
         width: 80px;
         height: 80px;
       }
+
       p {
         color: #000;
         font-size: 12px;
@@ -140,5 +145,13 @@ html, body, #root {
     font-size: 16px;
     color: #fff;
   }
+
+  .avatar_file {
+    width: 49px;
+    height: 49px;
+    border-radius: 50%;
+    float: left;
+    margin-right: 10px;
+  }
 }