717

parent 708312f9
...@@ -11,4 +11,4 @@ ...@@ -11,4 +11,4 @@
position: fixed; position: fixed;
background: #f4f4f4; background: #f4f4f4;
} }
/* html{font-size: 1px;} */</style><link href=static/css/app.91d2eea1dfca80994de99748f577fac4.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script></script><script type=text/javascript src=static/js/manifest.07a7a139bbf89685f131.js></script><script type=text/javascript src=static/js/vendor.79c3f4ae5c5bb7637f02.js></script><script type=text/javascript src=static/js/app.aa612340f7b38cb8cf63.js></script></body></html> /* html{font-size: 1px;} */</style><link href=static/css/app.91d2eea1dfca80994de99748f577fac4.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script></script><script type=text/javascript src=static/js/manifest.59745712c8e56030a1d0.js></script><script type=text/javascript src=static/js/vendor.79c3f4ae5c5bb7637f02.js></script><script type=text/javascript src=static/js/app.aa612340f7b38cb8cf63.js></script></body></html>
\ No newline at end of file \ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
!function(e){var a=window.webpackJsonp;window.webpackJsonp=function(c,n,r){for(var b,t,o,i=0,u=[];i<c.length;i++)t=c[i],d[t]&&u.push(d[t][0]),d[t]=0;for(b in n)Object.prototype.hasOwnProperty.call(n,b)&&(e[b]=n[b]);for(a&&a(c,n,r);u.length;)u.shift()();if(r)for(i=0;i<r.length;i++)o=f(f.s=r[i]);return o};var c={},d={52:0};function f(a){if(c[a])return c[a].exports;var d=c[a]={i:a,l:!1,exports:{}};return e[a].call(d.exports,d,d.exports,f),d.l=!0,d.exports}f.e=function(e){var a=d[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var c=new Promise(function(c,f){a=d[e]=[c,f]});a[2]=c;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,f.nc&&r.setAttribute("nonce",f.nc),r.src=f.p+"static/js/"+({0:"vendor-async"}[e]||e)+"."+{0:"97a62935bf96273f674d",1:"ef969fd836b3285eaf40",2:"6a7a5c9644d9e62d7c6a",3:"42dd5125df8b4e1ab158",4:"4f923f4d1ed343ca21d2",5:"0f95a18467651052363a",6:"87758a2455e2e614db38",7:"3415bb9581f597883f1d",8:"c47ed60a95a155b52924",9:"a0ffed9841f8230da3c6",10:"8ea016903e2c67188be6",11:"ec0cd3c0e468bc5aef7c",12:"1a01474c8d22846d815f",13:"d7315f11bdf5c38ea845",14:"8d98d6c4f9546c3e71d4",15:"f467cbd0766276e7ca91",16:"76388e01e74ce7a9c973",17:"c03926a6706106f687bc",18:"f7aebcd26d1359e69d1f",19:"8ba1a9d7c2c892ecdd33",20:"109f646a7537bb65965f",21:"65d9e14392488225b5b6",22:"16a5b7f980750dfc4f9f",23:"c5ff43170e408661632c",24:"9c55ca54630ab63d64a8",25:"065f2f2a6379194b4abf",26:"a1fd8dde8232cac99baa",27:"0634a2e33af51ae44b71",28:"1a66dbd5dab7637da167",29:"8c79842a926bce1d6b5c",30:"11eb2528c67f17a30818",31:"2b5da0bd8a450e556ccc",32:"9b841956d12c3814693d",33:"a1e40d51f0a7bbe0f6bd",34:"66e93ce422847ebef528",35:"a9e8913aa163a0e9a33c",36:"1a53055db508f6e7f695",37:"08d4b1deef3759b4c612",38:"6366efb3e7fa6fbd8e45",39:"3de3bed341623adc0904",40:"895e4da3bab675b0a78e",41:"2a295886cae89b21b058",42:"deb672cc9852b611a242",43:"e2654995557db9d4a9ce",44:"79cfbe6fdaa351b5b9db",45:"0e45eff76c8d5942017a",46:"450fd1d07b1acf24ed4d",47:"478f35a2ebb043bc986a",48:"bdb31144e2254843ea32",49:"6f70a5e57ca051fcb52a"}[e]+".js";var b=setTimeout(t,12e4);function t(){r.onerror=r.onload=null,clearTimeout(b);var a=d[e];0!==a&&(a&&a[1](new Error("Loading chunk "+e+" failed.")),d[e]=void 0)}return r.onerror=r.onload=t,n.appendChild(r),c},f.m=e,f.c=c,f.d=function(e,a,c){f.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:c})},f.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(a,"a",a),a},f.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},f.p="",f.oe=function(e){throw console.error(e),e}}([]); !function(e){var a=window.webpackJsonp;window.webpackJsonp=function(c,n,r){for(var b,t,o,i=0,u=[];i<c.length;i++)t=c[i],d[t]&&u.push(d[t][0]),d[t]=0;for(b in n)Object.prototype.hasOwnProperty.call(n,b)&&(e[b]=n[b]);for(a&&a(c,n,r);u.length;)u.shift()();if(r)for(i=0;i<r.length;i++)o=f(f.s=r[i]);return o};var c={},d={52:0};function f(a){if(c[a])return c[a].exports;var d=c[a]={i:a,l:!1,exports:{}};return e[a].call(d.exports,d,d.exports,f),d.l=!0,d.exports}f.e=function(e){var a=d[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var c=new Promise(function(c,f){a=d[e]=[c,f]});a[2]=c;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,f.nc&&r.setAttribute("nonce",f.nc),r.src=f.p+"static/js/"+({0:"vendor-async"}[e]||e)+"."+{0:"97a62935bf96273f674d",1:"d8d8d26f9849424ac9da",2:"6a7a5c9644d9e62d7c6a",3:"42dd5125df8b4e1ab158",4:"4f923f4d1ed343ca21d2",5:"81b8ae2afcdef1e829ff",6:"87758a2455e2e614db38",7:"3415bb9581f597883f1d",8:"c47ed60a95a155b52924",9:"a0ffed9841f8230da3c6",10:"8ea016903e2c67188be6",11:"ec0cd3c0e468bc5aef7c",12:"1a01474c8d22846d815f",13:"d7315f11bdf5c38ea845",14:"8d98d6c4f9546c3e71d4",15:"f467cbd0766276e7ca91",16:"76388e01e74ce7a9c973",17:"c03926a6706106f687bc",18:"f7aebcd26d1359e69d1f",19:"8ba1a9d7c2c892ecdd33",20:"109f646a7537bb65965f",21:"65d9e14392488225b5b6",22:"16a5b7f980750dfc4f9f",23:"c5ff43170e408661632c",24:"9c55ca54630ab63d64a8",25:"065f2f2a6379194b4abf",26:"a1fd8dde8232cac99baa",27:"0634a2e33af51ae44b71",28:"1a66dbd5dab7637da167",29:"8c79842a926bce1d6b5c",30:"11eb2528c67f17a30818",31:"2b5da0bd8a450e556ccc",32:"9b841956d12c3814693d",33:"a1e40d51f0a7bbe0f6bd",34:"66e93ce422847ebef528",35:"a9e8913aa163a0e9a33c",36:"1a53055db508f6e7f695",37:"08d4b1deef3759b4c612",38:"6366efb3e7fa6fbd8e45",39:"3de3bed341623adc0904",40:"895e4da3bab675b0a78e",41:"2a295886cae89b21b058",42:"deb672cc9852b611a242",43:"e2654995557db9d4a9ce",44:"79cfbe6fdaa351b5b9db",45:"0e45eff76c8d5942017a",46:"450fd1d07b1acf24ed4d",47:"478f35a2ebb043bc986a",48:"bdb31144e2254843ea32",49:"6f70a5e57ca051fcb52a"}[e]+".js";var b=setTimeout(t,12e4);function t(){r.onerror=r.onload=null,clearTimeout(b);var a=d[e];0!==a&&(a&&a[1](new Error("Loading chunk "+e+" failed.")),d[e]=void 0)}return r.onerror=r.onload=t,n.appendChild(r),c},f.m=e,f.c=c,f.d=function(e,a,c){f.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:c})},f.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(a,"a",a),a},f.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},f.p="",f.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file \ No newline at end of file
<template> <template>
<div class="share-page"> <div class="share-page">
<div class="share-block"> <div class="share-block">
<div class="content" v-if="userDetail" ref="imageWrapper" id="capture"> <div class="content" v-if="userDetail" ref="imageWrapper" id="capture">
<!-- <img :src="shareConBg" class="content-black"/> --> <!-- <img :src="shareConBg" class="content-black"/> -->
<div class="main-content"> <div class="main-content">
<div class="topBox"> <div class="topBox">
<img class="shareTitle" :src="shareTitle"/> <img class="shareTitle" :src="shareTitle" />
<div class="head-block"> <div class="head-block">
<img :src="userDetail.avatar"/> <img :src="userDetail.avatar" />
</div>
<div class="content-title" >
{{userDetail.nickname}}家宝宝
</div> </div>
<div class="content-title">{{userDetail.nickname}}家宝宝</div>
</div> </div>
<div class="main-text"> <div class="main-text">
<div v-if="watchDetail" class="item"> <div v-if="watchDetail" class="item">
<div class=""> <img :src="icon_day" alt=""> </div> <div class>
<img :src="icon_day" alt />
</div>
<div class="text1">已在唱唱学习</div> <div class="text1">已在唱唱学习</div>
<div class="text2"> <span>{{watchDetail.total_day}}</span></div> <div class="text2">
<span>{{watchDetail.total_day}}</span>
</div>
</div> </div>
<div v-if="watchDetail" class="item"> <div v-if="watchDetail" class="item">
<div class=""><img :src="icon_min" alt=""></div> <div class>
<img :src="icon_min" alt />
</div>
<div class="text1">今天学习了</div> <div class="text1">今天学习了</div>
<div class="text2"> <span>{{minute}}</span>分钟</div> <div class="text2">
<span>{{minute}}</span>分钟
</div>
</div> </div>
<div v-if="watchDetail" class="item"> <div v-if="watchDetail" class="item">
<div class=""><img :src="icon_baby" alt=""></div> <div class>
<img :src="icon_baby" alt />
</div>
<div class="text1">超过了</div> <div class="text1">超过了</div>
<div class="text2"> <span>{{percent}}%</span><br>同龄人</div> <div class="text2">
<span>{{percent}}%</span>
<br />同龄人
</div>
</div> </div>
</div> </div>
<img class="img_link" :src="img_link" alt=""> <img class="img_link" :src="img_link" alt />
<img class="imgPoint" :src="imgPoint" alt=""> <img class="imgPoint" :src="imgPoint" alt />
</div> </div>
<div class="sing-content"> <div class="sing-content">
<div class="text1">今日童谣主题</div> <div class="text1">今日童谣主题</div>
...@@ -41,518 +52,704 @@ ...@@ -41,518 +52,704 @@
<div class="share-btn" @click="showShare()"> <div class="share-btn" @click="showShare()">
<i class="iconfont icon-pengyouquan"></i> 分享到微信 <i class="iconfont icon-pengyouquan"></i> 分享到微信
</div> </div>
<audio ref="audio" autoplay class='audio' :src="audioPoint"></audio> <audio ref="audio" autoplay class="audio" :src="audioPoint"></audio>
</div> </div>
</div> </div>
<div class="share_close" @click="$emit('closeShare')">×</div> <div class="share_close" @click="$emit('closeShare')">×</div>
<div class="tips" v-if="shareVisible" @click="shareVisible=false"> <div class="tips" v-if="shareVisible" @click="shareVisible=false">
<img :src="share_tips"> <img :src="share_tips" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {Toast} from 'vant' import { Toast } from "vant";
import shareBg from '../../assets/newLesson/shareBg.png' import shareBg from "../../assets/newLesson/shareBg.png";
import shareTitle from '../../assets/newLesson/img_title.png' import shareTitle from "../../assets/newLesson/img_title.png";
import share_close from '../../assets/newLesson/share_close.png' import share_close from "../../assets/newLesson/share_close.png";
import icon_baby from '../../assets/newLesson/icon_baby.png' import icon_baby from "../../assets/newLesson/icon_baby.png";
import icon_day from '../../assets/newLesson/icon_day.png' import icon_day from "../../assets/newLesson/icon_day.png";
import icon_min from '../../assets/newLesson/icon_min.png' import icon_min from "../../assets/newLesson/icon_min.png";
import img_link from '../../assets/newLesson/img_link.png' import img_link from "../../assets/newLesson/img_link.png";
import good from '../../assets/newLesson/good.png' import good from "../../assets/newLesson/good.png";
import great from '../../assets/newLesson/great.png' import great from "../../assets/newLesson/great.png";
import perfect from '../../assets/newLesson/perfect.png' import perfect from "../../assets/newLesson/perfect.png";
import audioGood from '../../assets/udk.mp3' import audioGood from "../../assets/udk.mp3";
import QRCode from 'qrcodejs2' import QRCode from "qrcodejs2";
import html2canvas from 'html2canvas' import html2canvas from "html2canvas";
import {getwechatParam,getUserWatchApi,getShortApi,subUserLessonApi,getCountTimeApi} from "../../service/api"; import {
import share_code_bg from '../../assets/newLesson/share-code-bg.png' getwechatParam,
import share_tips from '../../assets/Bitmap@2x.png' getUserWatchApi,
export default { getShortApi,
name: "share", subUserLessonApi,
data(){ getCountTimeApi
return { } from "../../service/api";
img_link:img_link, import share_code_bg from "../../assets/newLesson/share-code-bg.png";
shareVisible:false, import share_tips from "../../assets/Bitmap@2x.png";
shareBg:shareBg, export default {
share_close:share_close, name: "share",
share_tips:share_tips, data() {
shareTitle:shareTitle, return {
icon_baby:icon_baby, img_link: img_link,
icon_day:icon_day, shareVisible: false,
icon_min:icon_min, shareBg: shareBg,
userDetail:null, share_close: share_close,
dataURL:null, share_tips: share_tips,
watchDetail:null, shareTitle: shareTitle,
share_code_bg:share_code_bg, icon_baby: icon_baby,
lesson:{}, icon_day: icon_day,
domTitle:'', icon_min: icon_min,
imgPoint:good, userDetail: null,
audioPoint:audioGood, dataURL: null,
minute:'', watchDetail: null,
percent:0 share_code_bg: share_code_bg,
} lesson: {},
domTitle: "",
imgPoint: good,
audioPoint: audioGood,
minute: "",
percent: 0
};
},
props: ["contentData"],
mounted() {
// console.log(this.contentData)
Toast.loading({
mask: true,
message: ""
});
this.initPage();
},
methods: {
showShare() {
this.shareVisible = true;
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "分享到微信",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
}, },
props:[ initPage() {
'contentData' // console.log(this.$store.state.watchDetail)
], // debugger
mounted(){ this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
this.lesson.domTitle = this.lesson.domTitle.substring(0, 9);
console.log(this.lesson, 123);
this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
getCountTimeApi().then(res => {
this.minute = (res[0].stay_time / 60).toFixed();
// this.minute = (360/60).toFixed()
if (this.minute < 1) {
this.minute = 1;
}
// this.minute<1?1:1
if (this.minute <= 8) {
this.imgPoint = good;
if (this.minute < 5) {
this.percent = 75 + Math.floor(49 * Math.random()) / 10;
} else {
this.percent = 81 + Math.floor(89 * Math.random()) / 10;
}
} else if (this.minute <= 12) {
this.percent = 91 + Math.floor(39 * Math.random()) / 10;
this.imgPoint = great;
} else {
console.log(Math.floor(39 * Math.random()));
this.percent = 96 + Math.floor(39 * Math.random()) / 10;
this.imgPoint = perfect;
}
Toast.clear();
this.toDataURLBase64(
this.userDetail.avatar.replace("http://", "https://"),
avatar => {
this.toDataURLBase64(this.shareConBg, cal => {
this.shareConBg = cal;
this.userDetail.avatar = avatar;
this.watchDetail = this.$store.state.watchDetail;
this.$nextTick(() => {
// this.$refs.share_image.initPage();
});
Toast.clear();
let obj = {
user_id: this.userDetail.user_id,
minute: this.minute,
percent: this.percent,
title: this.lesson.title,
domTitle: this.lesson.domTitle
};
let URL =
process.env.API_URL +
"#/shareGoods?info=" +
encodeURIComponent(JSON.stringify(obj));
console.log(URL);
this.onShare(URL);
});
}
);
});
// console.log(this.contentData) // console.log(this.contentData)
Toast.loading({ // debugger
mask: true,
message: ''
});
this.initPage()
}, },
methods:{ enableShare: function(option) {
showShare(){ let query = JSON.parse(sessionStorage.getItem("classQuery"));
this.shareVisible = true; let that = this;
this.$sa.track('watchClick',{ getwechatParam({
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), api_list: "onMenuShareAppMessage,onMenuShareTimeline",
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), url: window.location.href.split("#")[0]
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), }).then(wechatRes => {
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, wx.config({
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, debug: false,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, appId: wechatRes.appId,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, timestamp: parseInt(wechatRes.timestamp),
buttonName:'分享到微信', nonceStr: wechatRes.nonceStr,
partName:this.contentData.partName, signature: wechatRes.signature,
elementID:this.$route.query.elementId.toString(), jsApiList: wechatRes.jsApiList
}); });
}, wx.ready(function() {
initPage(){ wx.onMenuShareTimeline({
// console.log(this.$store.state.watchDetail) title: option.product_title, // 分享标题
// debugger desc: option.desc, // 分享描述
this.lesson = JSON.parse(localStorage.getItem("lessonDetail")); link: option.shareUrl, // 分享链接
this.lesson.domTitle = this.lesson.domTitle.substring(0,9) imgUrl:
console.log(this.lesson,123) option.shareIcon ||
this.userDetail = JSON.parse(localStorage.getItem('userDesc')); "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
getCountTimeApi().then(res =>{ success: function() {
this.minute = (res[0].stay_time/60).toFixed() setTimeout(() => {
// this.minute = (360/60).toFixed() that.$sa.track("watchClick", {
if(this.minute<1){ dayModule: JSON.parse(
this.minute = 1 localStorage.getItem("lessonDetail")
} ).domTitle.slice(0, 9),
// this.minute<1?1:1 weekName: JSON.parse(
if(this.minute<=8){ localStorage.getItem("lessonDetail")
this.imgPoint = good ).domTitle.slice(
if(this.minute<5){ 10,
this.percent = 75+Math.floor(49*Math.random())/10 JSON.parse(localStorage.getItem("lessonDetail")).domTitle
}else{ .length
this.percent = 81+Math.floor(89*Math.random())/10 ),
} elementName:
}else if(this.minute<=12){ JSON.parse(
this.percent = 91+Math.floor(39*Math.random())/10 localStorage.getItem("lessonDetail")
this.imgPoint = great ).domTitle.slice(0, 9) +
}else{ "-" +
console.log(Math.floor(39*Math.random())) JSON.parse(
this.percent = 96+Math.floor(39*Math.random())/10 localStorage.getItem("lessonDetail")
this.imgPoint = perfect ).domTitle.slice(
} 10,
Toast.clear() JSON.parse(localStorage.getItem("lessonDetail")).domTitle
this.toDataURLBase64(this.userDetail.avatar.replace('http://','https://'), (avatar) =>{ .length
this.toDataURLBase64(this.shareConBg,(cal)=>{ ),
this.shareConBg = cal; themeID: JSON.parse(localStorage.getItem("lessonDetail"))
this.userDetail.avatar = avatar; .themeID,
this.watchDetail = this.$store.state.watchDetail; themeName: JSON.parse(localStorage.getItem("lessonDetail"))
this.$nextTick(()=>{ .themeName,
// this.$refs.share_image.initPage(); goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
}); .goodsID,
Toast.clear() classID: JSON.parse(localStorage.getItem("lessonDetail"))
let obj = { .classID,
user_id:this.userDetail.user_id, buttonName: "完成分享",
minute:this.minute, partName: that.contentData.partName,
percent:this.percent, elementID: query.elementId.toString()
title:this.lesson.title,
domTitle:this.lesson.domTitle,
}
let URL = process.env.API_URL+'#/shareGoods?info='+ encodeURIComponent(JSON.stringify(obj));
console.log(URL)
this.onShare(URL);
})
});
})
// console.log(this.contentData)
// debugger
},
enableShare: function(option) {
let query = JSON.parse(sessionStorage.getItem('classQuery'))
let that = this;
getwechatParam({
api_list: 'onMenuShareAppMessage,onMenuShareTimeline',
url:window.location.href.split('#')[0]
}).then(wechatRes => {
wx.config({
debug: false,
appId: wechatRes.appId,
timestamp: parseInt(wechatRes.timestamp),
nonceStr: wechatRes.nonceStr,
signature: wechatRes.signature,
jsApiList: wechatRes.jsApiList
});
wx.ready(function() {
wx.onMenuShareTimeline({
title: option.product_title, // 分享标题
desc: option.desc,// 分享描述
link: option.shareUrl, // 分享链接
imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
success: function() {
setTimeout(()=>{
that.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'完成分享',
partName:that.contentData.partName,
elementID:query.elementId.toString(),
});
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let nowTime = Date.parse(new Date());
let json = {
page_type:0,
page_id:4,
stay_time:0,
};
subUserLessonApi(query.elementId,query.category_id,query.periods_id,json).then(res=>{
lessonDetail.total_watch_time = res;
lessonDetail.nowTime = nowTime;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
});
that.$emit('backList')
},500)
},
cancel: function() {
that.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'取消分享',
partName:that.contentData.partName,
elementID:query.elementId.toString(),
}); });
that.$emit('backList') let lessonDetail = JSON.parse(
} localStorage.getItem("lessonDetail")
}); );
wx.onMenuShareAppMessage({
title: option.product_title, // 分享标题
desc: option.desc,// 分享描述
link: option.shareUrl, // 分享链接
imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
success: function() {
that.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'完成分享',
partName:that.contentData.partName,
elementID:query.elementId.toString(),
});
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let nowTime = Date.parse(new Date()); let nowTime = Date.parse(new Date());
let json = { let json = {
page_type:0, page_type: 0,
page_id:4, page_id: 4,
stay_time:0, stay_time: 0
}; };
subUserLessonApi(query.elementId,query.category_id,query.periods_id,json).then(res=>{ subUserLessonApi(
query.elementId,
query.category_id,
query.periods_id,
json
).then(res => {
lessonDetail.total_watch_time = res; lessonDetail.total_watch_time = res;
lessonDetail.nowTime = nowTime; lessonDetail.nowTime = nowTime;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail)); localStorage.setItem(
}); "lessonDetail",
that.$emit('backList') JSON.stringify(lessonDetail)
}, );
cancel: function() {
that.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'取消分享',
partName:that.contentData.partName,
elementID:query.elementId.toString(),
}); });
} that.$emit("backList");
}); }, 500);
}) },
}) cancel: function() {
}, that.$sa.track("watchClick", {
onShare(URL) { dayModule: JSON.parse(
if(this.watchDetail&&this.watchDetail.total_day){ localStorage.getItem("lessonDetail")
this.enableShare({ ).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
),
elementName:
JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9) +
"-" +
JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail"))
.themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
.goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail"))
.classID,
buttonName: "取消分享",
partName: that.contentData.partName,
elementID: query.elementId.toString()
});
that.$emit("backList");
}
});
wx.onMenuShareAppMessage({
title: option.product_title, // 分享标题
desc: option.desc, // 分享描述
link: option.shareUrl, // 分享链接
imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() {
that.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
),
elementName:
JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9) +
"-" +
JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail"))
.themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
.goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail"))
.classID,
buttonName: "完成分享",
partName: that.contentData.partName,
elementID: query.elementId.toString()
});
let lessonDetail = JSON.parse(
localStorage.getItem("lessonDetail")
);
let nowTime = Date.parse(new Date());
let json = {
page_type: 0,
page_id: 4,
stay_time: 0
};
subUserLessonApi(
query.elementId,
query.category_id,
query.periods_id,
json
).then(res => {
lessonDetail.total_watch_time = res;
lessonDetail.nowTime = nowTime;
localStorage.setItem(
"lessonDetail",
JSON.stringify(lessonDetail)
);
});
that.$emit("backList");
},
cancel: function() {
that.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
),
elementName:
JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9) +
"-" +
JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail"))
.themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
.goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail"))
.classID,
buttonName: "取消分享",
partName: that.contentData.partName,
elementID: query.elementId.toString()
});
}
});
});
});
},
onShare(URL) {
if (this.watchDetail && this.watchDetail.total_day) {
this.enableShare({
product_title: `我家宝宝正在【唱唱启蒙英语】唱学英语,已坚持${this.watchDetail.total_day}天`, // 分享标题 product_title: `我家宝宝正在【唱唱启蒙英语】唱学英语,已坚持${this.watchDetail.total_day}天`, // 分享标题
desc: JSON.parse(localStorage.getItem('userDesc')).nickname+`赠您【领取超值课程】特权,来唱唱和百万家庭一起快乐启蒙英语吧!`,// desc:
shareIcon:process.env.IMAGE_URL_HEAD+'new-sing/number_Day'+this.watchDetail.total_day+'.jpg', JSON.parse(localStorage.getItem("userDesc")).nickname +
shareUrl:URL `赠您【领取超值课程】特权,来唱唱和百万家庭一起快乐启蒙英语吧!`, //
}) shareIcon:
} process.env.IMAGE_URL_HEAD +
}, "new-sing/number_Day" +
toDataURLBase64 (src, callback) { this.watchDetail.total_day +
let xhttp = new XMLHttpRequest(); ".jpg",
xhttp.onload = function () { shareUrl: URL
let fileReader = new FileReader(); });
fileReader.onloadend = function () { }
callback(fileReader.result) },
}; toDataURLBase64(src, callback) {
fileReader.readAsDataURL(xhttp.response) let xhttp = new XMLHttpRequest();
xhttp.onload = function() {
let fileReader = new FileReader();
fileReader.onloadend = function() {
callback(fileReader.result);
}; };
xhttp.responseType = 'blob'; fileReader.readAsDataURL(xhttp.response);
xhttp.open('GET', src, true); };
xhttp.send() xhttp.responseType = "blob";
}, xhttp.open("GET", src, true);
getOffsetRect(ele){ xhttp.send();
var box=ele.getBoundingClientRect(); },
var body=document.body, getOffsetRect(ele) {
docElem=document.documentElement; var box = ele.getBoundingClientRect();
//获取页面的scrollTop,scrollLeft(兼容性写法) var body = document.body,
var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop, docElem = document.documentElement;
scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft; //获取页面的scrollTop,scrollLeft(兼容性写法)
var clientTop=docElem.clientTop||body.clientTop, var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
clientLeft=docElem.clientLeft||body.clientLeft; scrollLeft =
var top=box.top+scrollTop-clientTop, window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
left=box.left+scrollLeft-clientLeft; var clientTop = docElem.clientTop || body.clientTop,
return { clientLeft = docElem.clientLeft || body.clientLeft;
//Math.round 兼容火狐浏览器bug var top = box.top + scrollTop - clientTop,
top:Math.round(top), left = box.left + scrollLeft - clientLeft;
left:Math.round(left) return {
} //Math.round 兼容火狐浏览器bug
}, top: Math.round(top),
qrcode(data){ left: Math.round(left)
if(this.QRCodeB){ };
this.QRCodeB.makeCode(data) },
}else{ qrcode(data) {
this.QRCodeB = new QRCode('qrcode', { if (this.QRCodeB) {
width: 70, this.QRCodeB.makeCode(data);
height: 70, // 高度 } else {
text: data, // 二维码内容 this.QRCodeB = new QRCode("qrcode", {
image: '' width: 70,
}); height: 70, // 高度
} text: data, // 二维码内容
}, image: ""
});
}
} }
} }
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.share-page{ .share-page {
position: fixed; position: fixed;
background: url('https://cdn.singsingenglish.com/new-sing/5ee147390f18487738f2a5521110c96057a77731.png'); background: url("https://cdn.singsingenglish.com/new-sing/5ee147390f18487738f2a5521110c96057a77731.png");
background-size:100% ; background-size: 100%;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0;
right: 0;
z-index: 1300;
.share-block {
position: absolute;
border-radius: 8 * @toVw;
top: 20 * @toVw;
left: 20 * @toVw;
right: 20 * @toVw;
// background: white;
bottom: 0; bottom: 0;
right: 0; overflow: auto;
z-index: 1300; .bg-title {
.share-block{
position: absolute; position: absolute;
border-radius: 8*@toVw; top: 0;
top: 20*@toVw; left: 0;
left: 20*@toVw; right: 0;
right: 20*@toVw; height: 60 * @toVw;
// background: white; background-size: 100% 100%;
z-index: -1;
}
.bg-desc {
position: absolute;
top: 58 * @toVw;
left: 0;
right: 0;
bottom: 0; bottom: 0;
overflow: auto; // background: white;
.bg-title{ z-index: -1;
border-radius: 0 0 8 * @toVw 8 * @toVw;
}
#cvs-img {
position: absolute;
width: 100%;
// top: -3*@toVw;
left: 0;
z-index: 1;
}
.content {
width: 100%;
height: (480-53) * @toVw;
padding-top: 110 * @toVw;
// margin-top: 20*@toVw;
background-size: 100% 100%;
position: relative;
.content-black {
position: absolute; position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0; top: 0;
left: 0;
right: 0; right: 0;
height: 60*@toVw;
background-size: 100% 100%;
z-index: -1;
}
.bg-desc{
position: absolute;
top: 58*@toVw;
left: 0; left: 0;
right: 0;
bottom: 0; bottom: 0;
// background: white;
z-index: -1;
border-radius: 0 0 8*@toVw 8*@toVw;
} }
#cvs-img{ }
.audio {
position: fixed;
opacity: 0;
}
.main-content {
width: 322 * @toVw;
height: 201 * @toVw;
background: white;
border-radius: 8 * @toVw;
position: relative;
.img_link {
position: absolute; position: absolute;
width: 100%; width: 260 * @toVw;
// top: -3*@toVw; bottom: -49 * @toVw;
left: 0; left: 33 * @toVw;
z-index: 1;
} }
.content{ .imgPoint {
width: 100%; position: absolute;
height: (480-53)*@toVw; width: 85 * @toVw;
padding-top: 110*@toVw; top: 40 * @toVw;
// margin-top: 20*@toVw; left: 80 * @toVw;
background-size: 100% 100%; opacity: 0;
position: relative; @keyframes pointMove {
.content-black{ from {
position: absolute; top: 40 * @toVw;
z-index: -1; left: 80 * @toVw;
width: 100%; transform: scale(2, 2);
height: 100%; opacity: 0;
top: 0; }
right: 0; to {
left: 0; top: -60 * @toVw;
bottom: 0; left: 229 * @toVw;
transform: scale(1, 1);
opacity: 1;
}
} }
animation: pointMove 0.375s 1s ease;
animation-fill-mode: forwards;
} }
.audio{position: fixed;opacity: 0;} .topBox {
.main-content{ position: absolute;
width: 322*@toVw; top: -34 * @toVw;
height: 201*@toVw; left: 48 * @toVw;
background: white; .shareTitle {
border-radius: 8*@toVw; width: 223 * @toVw;
position: relative;
.img_link{
position: absolute;
width: 260*@toVw;
bottom: -49*@toVw;
left: 33*@toVw;
}
.imgPoint{
position: absolute;
width: 85 * @toVw;
top: 40*@toVw;
left: 80 * @toVw;
opacity: 0;
@keyframes pointMove
{
from {top: 40*@toVw;left: 80 * @toVw;transform:scale(2,2);opacity:0;}
to {top: -60*@toVw;left: 229 * @toVw;transform:scale(1,1);opacity:1;}
}
animation:pointMove 0.375s 1s ease ;
animation-fill-mode:forwards;
}
.topBox{
position: absolute;
top: -34*@toVw;
left: 48*@toVw;
.shareTitle{width: 223*@toVw;}
} }
.main-text{ }
padding-top: 50*@toVw; .main-text {
text-align: center; padding-top: 50 * @toVw;
margin: auto; text-align: center;
margin-bottom: 0; margin: auto;
display: flex; margin-bottom: 0;
.item{ display: flex;
flex: 1; .item {
margin: 0; flex: 1;
.text1{color: #5F696E;font-size: 13*@toVw;margin: 8*@toVw 0;} margin: 0;
img{width: 46*@toVw;} .text1 {
.text2{ color: #5f696e;
font-size: 11*@toVw; font-size: 13 * @toVw;
color: #5F696E; margin: 8 * @toVw 0;
span{color: #EC7E1F;font-size: 22*@toVw;}
}
} }
} img {
.head-block{ width: 46 * @toVw;
position: absolute; }
text-align: center; .text2 {
border-radius: 200*@toVw; font-size: 11 * @toVw;
// left: 50%; color: #5f696e;
width: 100%; span {
text-align: center; color: #ec7e1f;
top: -52*@toVw; font-size: 22 * @toVw;
img{ }
border:8*@toVw solid #72CEFA;
border-radius: 200*@toVw;
width: 62*@toVw;
margin-top: 7*@toVw;
height: 62*@toVw;
} }
} }
.content-title{ }
width: 226*@toVw; .head-block {
height: 54*@toVw; position: absolute;
line-height: 26*@toVw; text-align: center;
margin-top: 40*@toVw; border-radius: 200 * @toVw;
color: #55343A; // left: 50%;
// background: white; width: 100%;
font-size: 14*@toVw; text-align: center;
text-align: center; top: -52 * @toVw;
background-size: 99.99% 99.99%; img {
position: absolute; border: 8 * @toVw solid #72cefa;
top: -14*@toVw; border-radius: 200 * @toVw;
color: white; width: 62 * @toVw;
// left: 50%; margin-top: 7 * @toVw;
// margin-left: -112.5*@toVw; height: 62 * @toVw;
} }
} }
.sing-content{ .content-title {
background: white; width: 226 * @toVw;
border-radius: 10*@toVw; height: 54 * @toVw;
margin-top: 30*@toVw; line-height: 26 * @toVw;
padding: 20*@toVw 0; margin-top: 40 * @toVw;
color: #55343a;
// background: white;
font-size: 14 * @toVw;
text-align: center; text-align: center;
.text1{margin:0 0 20*@toVw;font-size: 13*@toVw;} background-size: 99.99% 99.99%;
.text2{color: #1D6588;font-size: 22*@toVw; position: absolute;
margin-bottom: 10*@toVw;width: 318*@toVw; top: -14 * @toVw;
color: white;
// left: 50%;
// margin-left: -112.5*@toVw;
}
}
.sing-content {
background: white;
border-radius: 10 * @toVw;
margin-top: 30 * @toVw;
padding: 20 * @toVw 0;
text-align: center;
.text1 {
margin: 0 0 20 * @toVw;
font-size: 13 * @toVw;
}
.text2 {
color: #1d6588;
font-size: 22 * @toVw;
font-weight: bold;
margin-bottom: 10 * @toVw;
width: 318 * @toVw;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
}
.text3{color: #1D6588;}
} }
.share-btn{ .text3 {
margin-top: 20*@toVw; color: #1d6588;
text-align: center;
width: 255*@toVw;
height: 44*@toVw;
background:linear-gradient(0deg,rgba(243,180,3,1) 1%,rgba(252,231,171,1) 100%);
text-shadow:0px 3px 3px rgba(170,127,4,0.59);
// box-shadow:0px 3*@toVw 16*@toVw 0px rgba(200,96,37,0.59);
border-radius:22*@toVw;
color: white;
line-height: 44*@toVw;
font-size: 18*@toVw;
box-shadow:0px 3*@toVw 16*@toVw 0px rgba(250,208,88,0.59);
.iconfont{font-size: 18*@toVw;}
img{
width: 270*@toVw;
}
} }
} }
.share_close{ .share-btn {
position: fixed; margin-top: 20 * @toVw;
width: 20*@toVw; text-align: center;
top: 26*@toVw; width: 255 * @toVw;
right: 14*@toVw; height: 44 * @toVw;
z-index: 999; background: linear-gradient(
0deg,
rgba(243, 180, 3, 1) 1%,
rgba(252, 231, 171, 1) 100%
);
text-shadow: 0px 3px 3px rgba(170, 127, 4, 0.59);
// box-shadow:0px 3*@toVw 16*@toVw 0px rgba(200,96,37,0.59);
border-radius: 22 * @toVw;
color: white; color: white;
font-size: 16*@toVw; line-height: 44 * @toVw;
} font-size: 18 * @toVw;
.tips{ box-shadow: 0px 3 * @toVw 16 * @toVw 0px rgba(250, 208, 88, 0.59);
background: rgba(0,0,0,0.8); .iconfont {
position: fixed; font-size: 18 * @toVw;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-right: 19*@toVw;
z-index: 99999999;
text-align: right;
img{
width: 80%;
} }
img {
width: 270 * @toVw;
}
}
}
.share_close {
position: fixed;
width: 20 * @toVw;
top: 26 * @toVw;
right: 14 * @toVw;
z-index: 999;
color: white;
font-size: 16 * @toVw;
}
.tips {
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-right: 19 * @toVw;
z-index: 99999999;
text-align: right;
img {
width: 80%;
} }
} }
}
</style> </style>
...@@ -197,10 +197,12 @@ export default { ...@@ -197,10 +197,12 @@ export default {
justify-content: space-between; justify-content: space-between;
.int{ .int{
width: 170 * @toVw; width: 170 * @toVw;
margin: 0; height: 56 * @toVw;
margin:auto 0;
} }
.btn{ .btn{
margin:auto 0; margin:auto 0;
height: 46 * @toVw;
width: 132 * @toVw; width: 132 * @toVw;
} }
} }
...@@ -366,6 +368,7 @@ export default { ...@@ -366,6 +368,7 @@ export default {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-weight: bold;
} }
.text3 { .text3 {
color: #1d6588; color: #1d6588;
......
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