819

src/components/newLesson/share.vue

@@ -3,7 +3,7 @@
     <div class="share-page" id="capture">
       <div class="share-block">
         <div class="content" v-if="userDetail" ref="imageWrapper">
-          <img :src="img_logo" class="imgLogo"/>
+          <img :src="img_logo" class="imgLogo" />
           <div class="main-content">
             <div class="topBox">
               <img class="shareTitle" :src="shareTitle" />
@@ -11,7 +11,7 @@
                 <img :src="userDetail.avatar" />
               </div>
               <div class="content-title">
-                <span class="">{{nickname}}</span>
+                <span class>{{nickname}}</span>
                 <span>家宝宝</span>
               </div>
             </div>
@@ -91,14 +91,13 @@
       </div>
     </div>
     <img class="canvasImg" @touchstart="touchStart" @touchend="touchEnd" :src="canvasData" alt />
-    <div class='test'>
-
-    </div>
+    <div class="test"></div>
     <div class="white-pannel">
       <div class="trs"></div>
     </div>
     <div class="borderDiv"></div>
-    <img class="imgTip" :src="img_show" />>
+    <img :class="{imgMonkey:true,monkeyAnimation:animationBg}"  :src="img_monkey" />
+    <img :class="{imgTip:true,tipAnimation:animationBg}" :src="img_tip" />
     <!-- <div class="share-btn" @click="showShare()">
           <i class="iconfont icon-pengyouquan"></i>&nbsp;&nbsp;
           <span>保存图片·分享至朋友圈</span>
@@ -121,7 +120,8 @@ import great from "../../assets/newLesson/great.png";
 import perfect from "../../assets/newLesson/perfect.png";
 import icon_change from "../../assets/newLesson/icon_change@2x.png";
 import icon_right from "../../assets/newLesson/icon_right@2x.png";
-import img_show from "../../assets/newLesson/img_show@2x.png";
+import img_monkey from "../../assets/newLesson/img_monkey@2x.png";
+import img_tip from "../../assets/newLesson/img_tip@2x.png";
 import QRCode from "qrcodejs2";
 import html2canvas from "html2canvas";
 import {
@@ -138,6 +138,8 @@ export default {
   name: "share",
   data() {
     return {
+      img_monkey: img_monkey,
+      img_tip: img_tip,
       oimgPoint: false,
       canvasData: "",
       QRCodeB: "",
@@ -150,7 +152,6 @@ export default {
       icon_baby: icon_baby,
       icon_day: icon_day,
       icon_min: icon_min,
-      img_show: img_show,
       userDetail: null,
       dataURL: null,
       watchDetail: null,
@@ -168,8 +169,9 @@ export default {
       htmlContent: "",
       icon_right: icon_right,
       timeout: "",
-      nickname:'',
-      img_logo:img_logo
+      nickname: "",
+      img_logo: img_logo,
+      animationBg:false
     };
   },
   props: ["contentData"],
@@ -308,9 +310,9 @@ export default {
       this.lastTime = Date.parse(new Date());
       clearInterval(this.$store.state.timeout);
       this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
-      this.nickname = this.userDetail.nickname
-      if(this.nickname.length>=6){
-        this.nickname = this.nickname.slice(0,4)+'...'
+      this.nickname = this.userDetail.nickname;
+      if (this.nickname.length >= 6) {
+        this.nickname = this.nickname.slice(0, 4) + "...";
       }
       this.minute = (this.watchDetail.stay_time / 60).toFixed();
       // this.minute = (600/60).toFixed()
@@ -383,7 +385,9 @@ export default {
               logging: true
             })
               .then(canvas => {
-                this.divShow = false;
+                setTimeout(() => {
+                  this.animationBg = true;
+                },1000)
                 let dataURL = canvas.toDataURL("image/jpg", 1.0);
                 this.canvasData = dataURL;
               })
@@ -701,8 +705,8 @@ export default {
 @import "../../util/public";
 @tocurrentvw : 1/2 * @toVw;
 @tocurrentvh : 1/2 * @toVh;
-.test{
-  position:fixed;
+.test {
+  position: fixed;
 }
 .share_close {
   position: fixed;
@@ -713,13 +717,73 @@ export default {
   color: white;
   font-size: 16 * @toVw;
 }
+.imgMonkey {
+  position: fixed;
+  top: 482 * @toVw;
+  left: -60 * @toVw;
+  z-index: 1301;
+  width: 55 * @toVw;
+  pointer-events: none;
+  @keyframes imgMonkey {
+    from {
+      top: 482 * @toVw;
+      left: -60 * @toVw;
+    }
+    to {
+      top: 482 * @toVw;
+      left: 20 * @toVw;
+    }
+  }
+  
+}
+.monkeyAnimation{
+ animation: imgMonkey 0.375s ease;
+ animation-fill-mode: forwards;
+}
 .imgTip {
   position: fixed;
-  top: 511 * @toVw;
-  left: 91 * @toVw;
+  top: 452 * @toVw;
+  left: 86 * @toVw;
   z-index: 1301;
-  width: 190 * @toVw;
+  width: 0;
   pointer-events: none;
+  @keyframes imgTip {
+    0% {
+      left: 66 * @toVw;
+      width: 0;
+      top: 452 * @toVw;
+    }
+    30%{
+      left: 86 * @toVw;
+      width: 267 * @toVw;
+      top: 482 * @toVw;
+    }
+    70%{
+      left: 86 * @toVw;
+      width: 267 * @toVw;
+      top: 482 * @toVw;
+    }
+    80% {
+      left: 80 * @toVw;
+      width: 267 * @toVw;
+      top: 482 * @toVw;
+    }
+    90% {
+       left: 90 * @toVw;
+       width: 267 * @toVw;
+       top: 482 * @toVw;
+    }
+    100% {
+       left: 86 * @toVw;
+       width: 267 * @toVw;
+       top: 482 * @toVw;
+    }
+  }
+  animation-fill-mode: forwards;
+}
+.tipAnimation{
+ animation: imgTip 0.975s 0.375s ease;
+ animation-fill-mode: forwards;
 }
 .share-btn {
   position: fixed;
@@ -810,11 +874,11 @@ export default {
   right: 0;
   min-height: 650 * @toVw;
   z-index: 1300;
-  .imgLogo{
-    position:fixed;
-    top:15 * @toVw;
-    left:15 * @toVw;
-    width:48 * @toVw;
+  .imgLogo {
+    position: fixed;
+    top: 15 * @toVw;
+    left: 15 * @toVw;
+    width: 48 * @toVw;
   }
   .share-block {
     position: absolute;
@@ -1055,9 +1119,8 @@ export default {
         display: inline-block;
         border: 3px solid white;
         // background:white;
-        font-size:0;
-        img{
-        
+        font-size: 0;
+        img {
         }
       }
     }
@@ -1151,7 +1214,7 @@ export default {
 }
 </style>
 <style lang="">
- /* body{
+/* body{
   pointer-events: none;
 }  */
 </style>
\ No newline at end of file

src/components/newLesson/video.vue

@@ -120,7 +120,6 @@
         <no-finish-dia />
       </div>
     </mt-popup>
-
     <div v-if="share_show">
       <share-page @backList="backList()" @closeShare="closeShare()" :contentData="contentData" />
     </div>
@@ -225,7 +224,7 @@ export default {
     },
     changeClarity(a) {
       let that  = this
-      // this.currentTime = this.$refs.videoDom.currentTime 
+      this.currentTime = this.$refs.videoDom.currentTime 
       if (a == "1280") {
         this.clarityType = 1280;
         localStorage.setItem("clarityType", this.clarityType);
@@ -428,8 +427,8 @@ export default {
     },
     videoPlay() {
       // 神策埋点 点击操作
+      console.log(this.currentTime,431)
       // if(this.currentTime){
-      
       // }
       // this.$refs.videoDom.addEventListener("loadedmetadata", ()=>
       //   {