Home Explore Help
Register Sign In
LImengbo
/
school-answer
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

学前应用登陆联调

Limengbo 6 years ago
parent
4604781308
commit
a4a5cb5153
7 changed files with 131 additions and 63 deletions
Unified View Show Diff Stats
  1. 24 0
      css/activity.css
  2. 7 7
      css/question.css
  3. BIN
      image/activity/activity.jpg
  4. 18 1
      index.html
  5. 8 1
      utils/size.js
  6. 4 2
      view/activity.html
  7. 70 52
      view/question.html

+ 24 - 0
css/activity.css
View File 

@@ -0,0 +1,24 @@
 
+* {
 
+    padding: 0;
 
+    margin: 0;
 
+}
 
+html,
 
+body {
 
+    width: 100%;
 
+    height: 100%;
 
+    box-sizing: border-box;
 
+    overflow: hidden;
 
+}
 
+.activity {
 
+    position: relative;
 
+    width: 100%;
 
+    height: 100%;
 
+    overflow-y: auto;
 
+}
 
+.activity::-webkit-scrollbar {
 
+    width:0;
 
+}
 
+.activity img {
 
+    width: 100%;
 
+    display: block;
 
+}

+ 7 - 7
css/question.css
View File 

@@ -14,7 +14,7 @@ body {
 
     overflow-y: scroll;
 
     overflow-y: scroll;
 
 }
 
 }
 
 .content::-webkit-scrollbar {
 
 .content::-webkit-scrollbar {
 
-    width: 0;
 
+    width:0;
 
 }
 
 }
 
 .question-container {
 
 .question-container {
 
     width: 100%;
 
     width: 100%;
 
@@ -26,7 +26,7 @@ body {
 
 }
 
 }
 
 .title {
 
 .title {
 
     position: absolute;
 
     position: absolute;
 
-    top: 6.8rem;
 
+    top: 6.91rem;
 
     left: 50%;
 
     left: 50%;
 
     transform: translateX(-50%);
 
     transform: translateX(-50%);
 
     width: 7.12rem;
 
     width: 7.12rem;
 
@@ -41,7 +41,7 @@ body {
 
 }
 
 }
 
 .subject {
 
 .subject {
 
     position: absolute;
 
     position: absolute;
 
-    top: 7rem;
 
+    top: 7.14rem;
 
     left: 0;
 
     left: 0;
 
     right: 0;
 
     right: 0;
 
     margin:0 auto;
 
     margin:0 auto;
 
@@ -151,20 +151,20 @@ body {
 
 .popup-content .bg {
 
 .popup-content .bg {
 
     position: absolute;
 
     position: absolute;
 
     left: 15%;
 
     left: 15%;
 
-    top: 10%;
 
+    top: .6rem;
 
     width: 70%;
 
     width: 70%;
 
-    height: 70%;
 
 }
 
 }
 
 
 
 canvas {
 
 canvas {
 
     position: absolute;
 
     position: absolute;
 
     top: -9999px;
 
     top: -9999px;
 
+    left: -9999px;
 
 }
 
 }
 
 
 
 .baocun {
 
 .baocun {
 
     position: absolute;
 
     position: absolute;
 
     left: 50%;
 
     left: 50%;
 
-    bottom: 15%;
 
+    bottom: 1.6rem;
 
     transform: translateX(-50%);
 
     transform: translateX(-50%);
 
     color: #fff;
 
     color: #fff;
 
     font-size: .28rem;
 
     font-size: .28rem;
 
@@ -175,7 +175,7 @@ canvas {
 
     left: 0;
 
     left: 0;
 
     bottom: 0;
 
     bottom: 0;
 
     width: 100%;
 
     width: 100%;
 
-    height: 1.6rem;
 
+    height: 1.4rem;
 
     background: #fff;
 
     background: #fff;
 
     display: flex;
 
     display: flex;
 
     align-items: center;
 
     align-items: center;

BIN
image/activity/activity.jpg
View File


+ 18 - 1
index.html
View File 

@@ -39,7 +39,7 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
         <a href="./view/question.html" class="ceshibtn"></a>
 
         <a href="./view/question.html" class="ceshibtn"></a>
 
-        <a href="./view/awards.html" class="prizebtn"></a>
 
+        <a href="./view/activity.html" class="prizebtn"></a>
 
     </div>
 
     </div>
 
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
     <script src="./js/scroll.js"></script>
 
     <script src="./js/scroll.js"></script>
 
@@ -48,6 +48,23 @@
 
             speed: 40, //数值越大，速度越慢
 
             speed: 40, //数值越大，速度越慢
 
             rowHeight: 26 //li的高度
 
             rowHeight: 26 //li的高度
 
         });
 
         });
 
+        //获取用户信息
 
+        var jionData = {
 
+            "code": GetQueryString('code')
 
+        } 
+        $.ajax({
 
+                url: "https://readertest.lingjiao.cn/activity/wx/ucenter/wxlogin",
 
+                type: 'GEt',
 
+                contentType:'application/json;charset=utf-8',
 
+                data: jionData,
 
+                success: function (userData) {
 
+                    alert(JSON.stringify(userData.data))
 
+                    localStorage.setItem('userData', JSON.stringify(userData.data));
 
+                },
 
+                error: function () {
 
+                    alert('失败')
 
+                }
 
+            });        
     </script>
 
     </script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 8 - 1
utils/size.js
View File 

@@ -13,4 +13,11 @@
 
     if (!doc.addEventListener) return;
 
     if (!doc.addEventListener) return;
 
     win.addEventListener(resizeEvt, recalc, false);
 
     win.addEventListener(resizeEvt, recalc, false);
 
     doc.addEventListener('DOMContentLoaded', recalc, false);
 
     doc.addEventListener('DOMContentLoaded', recalc, false);
 
-})(document, window)
 
+})(document, window)
 
+//获取地址栏参数
 
+function GetQueryString(name){
 
+    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
 
+    var r = window.location.search.substr(1).match(reg);
 
+    if(r!=null)return  unescape(r[2]); 
+    return null;
 
+}

+ 4 - 2
view/activity.html
View File 

@@ -5,10 +5,12 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
     <title>Document</title>
 
     <title>Document</title>
 
-    <link rel="stylesheet" href="../css/awards.css">
 
+    <link rel="stylesheet" href="../css/activity.css">
 
     <script src="../utils/size.js"></script>
 
     <script src="../utils/size.js"></script>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
-    
+    <div class="activity">
 
+        <img src="../image/activity/activity.jpg" alt="">
 
+    </div>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 70 - 52
view/question.html
View File 

@@ -4,7 +4,7 @@
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-    <title>Document</title>
 
+    <title>无限潜能</title>
 
     <link rel="stylesheet" href="../css/question.css">
 
     <link rel="stylesheet" href="../css/question.css">
 
     <script src="../utils/size.js"></script>
 
     <script src="../utils/size.js"></script>
 
 </head>
 
 </head>
 
@@ -43,18 +43,20 @@
 
     </div>
 
     </div>
 
     <div class="popup">
 
     <div class="popup">
 
         <div class="popup-content">
 
         <div class="popup-content">
 
-            <canvas id="myCanvas" width="255px" height="466px">
 
+            <canvas id="myCanvas" width="750px" height="1334px">
 
                 您的浏览器不支持canvas标签。
 
                 您的浏览器不支持canvas标签。
 
             </canvas>
 
             </canvas>
 
-            <img class="bg" src="../image/question/2.jpg" alt="">
 
+            <img class="bg" src="../image/question/2.jpg" alt=""  crossorigin="anonymous">
 
+            <!--
 
             <div class="baocun">长按保存，并分享至朋友圈</div>
 
             <div class="baocun">长按保存，并分享至朋友圈</div>
 
             <div class="code">
 
             <div class="code">
 
-                <img src="../image/question/2.jpg" alt="">
 
+                <img src="../image/question/code.jpg" alt="">
 
                 <div class="text">
 
                 <div class="text">
 
                     <span>长按识别二维码</span>
 
                     <span>长按识别二维码</span>
 
                     <span>即可获得小学课文朗读配音奖品</span>
 
                     <span>即可获得小学课文朗读配音奖品</span>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
+            -->
 
             <!--
 
             <!--
 
             <img class="head" src="../image/question/头像.jpg" alt="">
 
             <img class="head" src="../image/question/头像.jpg" alt="">
 
             -->
 
             -->
 
@@ -63,20 +65,67 @@
 
     </div>
 
     </div>
 
 </body>
 
 </body>
 
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
-<script>
 
-    var answer = "";
 
-    var questionId = "";
 
-    var requestId = "";
 
+<script> 
+//console.log(localStorage.getItem('userData') == 'undefined')
 
+window.onload=function(){
 
+    // if(localStorage.getItem('userData') == 'undefined') {
 
+    //     alert('请重新扫码登陆')
 
+    //     window.location.href = '../index.html'
 
+    //     return false;
 
+    // }
 
+
 
+    // var user = JSON.parse(localStorage.getItem('userData'));
 
+    // var uid = user.uid;
 
+    // var avatar = user.avatar ? user.avatar : '';
 
+    // var name = user.wechatName ? user.wechatName : '小朋友';
 
+    var uid = 36;
 
+    //获取Canvas对象(画布)
 
+    var canvas = document.getElementById("myCanvas");
 
     var data = {
 
     var data = {
 
-        "activityId": "1",
 
+        "activityId": "2",
 
         "answer": "",
 
         "answer": "",
 
         "questionId": "",
 
         "questionId": "",
 
         "requestId": ""
 
         "requestId": ""
 
     }
 
     }
 
     var ind = 0;
 
     var ind = 0;
 
     function recursion() {
 
     function recursion() {
 
-        ajaxData("https://readertest.lingjiao.cn/activity/activity", '7', data, function(result){
 
+        ajaxData("https://readertest.lingjiao.cn/activity/activity/xx", uid, data, function(result){
 
+            if(result.code != 200) {
 
+                alert('题目已经答完了')
 
+                return false;
 
+            }
 
+            console.log(result)
 
+            var page = result.data.currentNum;
 
             var length = result.data.questionNum;
 
             var length = result.data.questionNum;
 
+            if( page >= length && result.data.isEnd === 0) {
 
+                alert(result.data.prize)
 
+                // $('.popup').show();
 
+                // //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
 
+                // if(canvas.getContext){  
+                //     //获取对应的CanvasRenderingContext2D对象(画笔)
 
+                //     var ctx = canvas.getContext("2d");
 
+                //     //回调地狱，可优化，暂时这样写
 
+                //     alert(result.data.poster)
 
+                //     canvasImg(ctx, result.data.poster, 0, 0, '750', '1334', function() {
 
+                //         ctx.moveTo(365,20);
 
+                //         ctx.lineTo(365,170);
 
+                //         ctx.fillStyle = '#fff';
 
+                //         ctx.font="36px Arial";
 
+                //         ctx.textAlign="center";
 
+                //         alert(name)
 
+                //         ctx.fillText(name + "学前测评报告",365,370);
 
+                //         alert(avatar)
 
+                //         circleImg(ctx, avatar, 328, 836, 41)
 
+                //     })
 
+                //     ctx.restore();
 
+                // }
 
+                // // 2.5s后生成图片
 
+                // setTimeout(function() {
 
+                //     var dataURL = canvas.toDataURL("image/jpeg",1.0);
 
+                //     $('.bg').attr('src', dataURL)
 
+                // }, 2500)
 
+                return false;
 
+            }
 
             data.questionId = result.data.question.id;
 
             data.questionId = result.data.question.id;
 
             data.requestId = result.data.requestId;
 
             data.requestId = result.data.requestId;
 
             // 一开始创建div 没内容
 
             // 一开始创建div 没内容
 
@@ -87,7 +136,7 @@
 
                     '</div>', // 设置内容 
                     '</div>', // 设置内容 
             }).appendTo($('.question-box')); // 追加到body标签
 
             }).appendTo($('.question-box')); // 追加到body标签
 
             // 初次渲染第一题
 
             // 初次渲染第一题
 
-            renderDiv(ind, result.data.question)
 
+            renderDiv(ind, result.data.question, page)
 
             $('.question').eq(ind).children('ul').find('li').on('click', function() {
 
             $('.question').eq(ind).children('ul').find('li').on('click', function() {
 
                 data.answer = $(this).data('answer');
 
                 data.answer = $(this).data('answer');
 
                 ind++;
 
                 ind++;
 
@@ -95,14 +144,10 @@
 
                 var that = this;
 
                 var that = this;
 
                 recursion();
 
                 recursion();
 
                 setTimeout(function () {
 
                 setTimeout(function () {
 
-                    if( ind >= length) {
 
-                        $('.popup').show();
 
-                        return false;
 
-                    }
 
                     $(that).parents('.question').slideUp('slow', function () {
 
                     $(that).parents('.question').slideUp('slow', function () {
 
-                        $('.question').eq(ind).find('.ind').text(ind + 1);
 
+                        $('.question').eq(ind).find('.ind').text(page + 1);
 
                     });
 
                     });
 
-                }, 500)
 
+                }, 100)
 
             })
 
             })
 
         })
 
         })
 
     }
 
     }
 
@@ -119,12 +164,8 @@
 
         });
 
         });
 
     }
 
     }
 
     // 渲染元素
 
     // 渲染元素
 
-    function renderDiv (ind, datas) {
 
+    function renderDiv (ind, datas, page) {
 
         var renders =  '<div class="audio">' + 
         var renders =  '<div class="audio">' + 
-                    '<audio src="'+ datas.audio +'">' +
 
-                            '您的浏览器不支持 audio 标签。' +
 
-                        '</audio>' +
 
-                        '<img class="audiobtn" src="../image/question/audiobtn.png" alt="audiobtn">' +
 
                         '<div>'+ datas.content +'</div>' +
 
                         '<div>'+ datas.content +'</div>' +
 
                     '</div>' +
 
                     '</div>' +
 
                     '<div class="question-photo">'+
 
                     '<div class="question-photo">'+
 
@@ -135,33 +176,13 @@
 
                         '<li data-answer="B">'+ datas.optionB +'</li>' +
 
                         '<li data-answer="B">'+ datas.optionB +'</li>' +
 
                         '<li data-answer="C">'+ datas.optionC +'</li>' +
 
                         '<li data-answer="C">'+ datas.optionC +'</li>' +
 
                     '</ul>'
 
                     '</ul>'
 
-        $('.question').eq(ind).prepend(renders)         
-    }
 
-
 
-    //canvas绘制图片
 
-    //获取Canvas对象(画布)
 
-    var canvas = document.getElementById("myCanvas");
 
-    //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
 
-    if(canvas.getContext){  
-        //获取对应的CanvasRenderingContext2D对象(画笔)
 
-        var ctx = canvas.getContext("2d");
 
-        //回调地狱，可优化，暂时这样写
 
-        canvasImg('../image/question/2.jpg', 0, 0, '255', '466', function() {
 
-            canvasImg('../image/question/2.jpg', 200, 400, '50', '50', function() {
 
-                ctx.moveTo(125,20);
 
-                ctx.lineTo(125,170);
 
-                ctx.fillStyle = '#fff';
 
-                ctx.font="14px Arial";
 
-                ctx.textAlign="center";
 
-                ctx.fillText("王丽丽王丽丽丽丽学前测评报告",125,120);
 
-                circleImg('../image/question/2.jpg', 110, 290, 15)
 
-            })
 
-        })
 
-        ctx.restore();
 
+        $('.question').eq(ind).prepend(renders);
 
+        $('.question').eq(ind).find('.ind').text(page);  
     }
 
     }
 
-    function canvasImg (url, x, y, w, h, success) {
 
+    function canvasImg (ctx, url, x, y, w, h, success) {
 
         //创建新的图片对象
 
         //创建新的图片对象
 
         var img = new Image();
 
         var img = new Image();
 
+        img.setAttribute('crossOrigin', 'anonymous');
 
         //指定图片的URL
 
         //指定图片的URL
 
         img.src = url;
 
         img.src = url;
 
         //浏览器加载图片完毕后再绘制图片
 
         //浏览器加载图片完毕后再绘制图片
 
@@ -172,9 +193,10 @@
 
         };
 
         };
 
     }
 
     }
 
     // 封装了一个简单截取头像的方法
 
     // 封装了一个简单截取头像的方法
 
-    function circleImg(url, x, y, r) {
 
+    function circleImg(ctx, url, x, y, r) {
 
         //创建新的图片对象
 
         //创建新的图片对象
 
         var img = new Image();
 
         var img = new Image();
 
+        img.setAttribute('crossOrigin', 'anonymous');
 
         //指定图片的URL
 
         //指定图片的URL
 
         img.src = url;
 
         img.src = url;
 
         ctx.save();
 
         ctx.save();
 
@@ -188,10 +210,6 @@
 
             ctx.drawImage(img, x, y, d, d);             
             ctx.drawImage(img, x, y, d, d);             
         };
 
         };
 
     }
 
     }
 
-  //0.5s后生成图片
 
-    setTimeout(function() {
 
-        var dataURL = canvas.toDataURL("image/png",1.0);
 
-        $('.bg').attr('src', dataURL)
 
-    }, 500)
 
+}
 
 </script>
 
 </script>
 
 </html>
 
 </html>