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
...@@ -5,33 +5,44 @@ ...@@ -5,33 +5,44 @@
<!-- <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,148 +52,174 @@ ...@@ -41,148 +52,174 @@
<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,
subUserLessonApi,
getCountTimeApi
} from "../../service/api";
import share_code_bg from "../../assets/newLesson/share-code-bg.png";
import share_tips from "../../assets/Bitmap@2x.png";
export default {
name: "share", name: "share",
data(){ data() {
return { return {
img_link:img_link, img_link: img_link,
shareVisible:false, shareVisible: false,
shareBg:shareBg, shareBg: shareBg,
share_close:share_close, share_close: share_close,
share_tips:share_tips, share_tips: share_tips,
shareTitle:shareTitle, shareTitle: shareTitle,
icon_baby:icon_baby, icon_baby: icon_baby,
icon_day:icon_day, icon_day: icon_day,
icon_min:icon_min, icon_min: icon_min,
userDetail:null, userDetail: null,
dataURL:null, dataURL: null,
watchDetail:null, watchDetail: null,
share_code_bg:share_code_bg, share_code_bg: share_code_bg,
lesson:{}, lesson: {},
domTitle:'', domTitle: "",
imgPoint:good, imgPoint: good,
audioPoint:audioGood, audioPoint: audioGood,
minute:'', minute: "",
percent:0 percent: 0
} };
}, },
props:[ props: ["contentData"],
'contentData' mounted() {
],
mounted(){
// console.log(this.contentData) // console.log(this.contentData)
Toast.loading({ Toast.loading({
mask: true, mask: true,
message: '' message: ""
}); });
this.initPage() this.initPage();
}, },
methods:{ methods: {
showShare(){ showShare() {
this.shareVisible = true; this.shareVisible = true;
this.$sa.track('watchClick',{ this.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'分享到微信', JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
partName:this.contentData.partName, ),
elementID:this.$route.query.elementId.toString(), 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()
}); });
}, },
initPage(){ initPage() {
// console.log(this.$store.state.watchDetail) // console.log(this.$store.state.watchDetail)
// debugger // debugger
this.lesson = JSON.parse(localStorage.getItem("lessonDetail")); this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
this.lesson.domTitle = this.lesson.domTitle.substring(0,9) this.lesson.domTitle = this.lesson.domTitle.substring(0, 9);
console.log(this.lesson,123) console.log(this.lesson, 123);
this.userDetail = JSON.parse(localStorage.getItem('userDesc')); this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
getCountTimeApi().then(res =>{ getCountTimeApi().then(res => {
this.minute = (res[0].stay_time/60).toFixed() this.minute = (res[0].stay_time / 60).toFixed();
// this.minute = (360/60).toFixed() // this.minute = (360/60).toFixed()
if(this.minute<1){ if (this.minute < 1) {
this.minute = 1 this.minute = 1;
} }
// this.minute<1?1:1 // this.minute<1?1:1
if(this.minute<=8){ if (this.minute <= 8) {
this.imgPoint = good this.imgPoint = good;
if(this.minute<5){ if (this.minute < 5) {
this.percent = 75+Math.floor(49*Math.random())/10 this.percent = 75 + Math.floor(49 * Math.random()) / 10;
}else{ } else {
this.percent = 81+Math.floor(89*Math.random())/10 this.percent = 81 + Math.floor(89 * Math.random()) / 10;
} }
}else if(this.minute<=12){ } else if (this.minute <= 12) {
this.percent = 91+Math.floor(39*Math.random())/10 this.percent = 91 + Math.floor(39 * Math.random()) / 10;
this.imgPoint = great this.imgPoint = great;
}else{ } else {
console.log(Math.floor(39*Math.random())) console.log(Math.floor(39 * Math.random()));
this.percent = 96+Math.floor(39*Math.random())/10 this.percent = 96 + Math.floor(39 * Math.random()) / 10;
this.imgPoint = perfect this.imgPoint = perfect;
} }
Toast.clear() Toast.clear();
this.toDataURLBase64(this.userDetail.avatar.replace('http://','https://'), (avatar) =>{ this.toDataURLBase64(
this.toDataURLBase64(this.shareConBg,(cal)=>{ this.userDetail.avatar.replace("http://", "https://"),
avatar => {
this.toDataURLBase64(this.shareConBg, cal => {
this.shareConBg = cal; this.shareConBg = cal;
this.userDetail.avatar = avatar; this.userDetail.avatar = avatar;
this.watchDetail = this.$store.state.watchDetail; this.watchDetail = this.$store.state.watchDetail;
this.$nextTick(()=>{ this.$nextTick(() => {
// this.$refs.share_image.initPage(); // this.$refs.share_image.initPage();
}); });
Toast.clear() Toast.clear();
let obj = { let obj = {
user_id:this.userDetail.user_id, user_id: this.userDetail.user_id,
minute:this.minute, minute: this.minute,
percent:this.percent, percent: this.percent,
title:this.lesson.title, title: this.lesson.title,
domTitle:this.lesson.domTitle, domTitle: this.lesson.domTitle
} };
let URL = process.env.API_URL+'#/shareGoods?info='+ encodeURIComponent(JSON.stringify(obj)); let URL =
console.log(URL) process.env.API_URL +
"#/shareGoods?info=" +
encodeURIComponent(JSON.stringify(obj));
console.log(URL);
this.onShare(URL); this.onShare(URL);
})
}); });
}) }
);
});
// console.log(this.contentData) // console.log(this.contentData)
// debugger // debugger
}, },
enableShare: function(option) { enableShare: function(option) {
let query = JSON.parse(sessionStorage.getItem('classQuery')) let query = JSON.parse(sessionStorage.getItem("classQuery"));
let that = this; let that = this;
getwechatParam({ getwechatParam({
api_list: 'onMenuShareAppMessage,onMenuShareTimeline', api_list: "onMenuShareAppMessage,onMenuShareTimeline",
url:window.location.href.split('#')[0] url: window.location.href.split("#")[0]
}).then(wechatRes => { }).then(wechatRes => {
wx.config({ wx.config({
debug: false, debug: false,
...@@ -195,214 +232,336 @@ import {Toast} from 'vant' ...@@ -195,214 +232,336 @@ import {Toast} from 'vant'
wx.ready(function() { wx.ready(function() {
wx.onMenuShareTimeline({ wx.onMenuShareTimeline({
title: option.product_title, // 分享标题 title: option.product_title, // 分享标题
desc: option.desc,// 分享描述 desc: option.desc, // 分享描述
link: option.shareUrl, // 分享链接 link: option.shareUrl, // 分享链接
imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标 imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() { success: function() {
setTimeout(()=>{ setTimeout(() => {
that.$sa.track('watchClick',{ that.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'完成分享', JSON.parse(localStorage.getItem("lessonDetail")).domTitle
partName:that.contentData.partName, .length
elementID:query.elementId.toString(), ),
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 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",
JSON.stringify(lessonDetail)
);
}); });
that.$emit('backList') that.$emit("backList");
},500) }, 500);
}, },
cancel: function() { cancel: function() {
that.$sa.track('watchClick',{ that.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'取消分享', JSON.parse(localStorage.getItem("lessonDetail")).domTitle
partName:that.contentData.partName, .length
elementID:query.elementId.toString(), ),
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') that.$emit("backList");
} }
}); });
wx.onMenuShareAppMessage({ wx.onMenuShareAppMessage({
title: option.product_title, // 分享标题 title: option.product_title, // 分享标题
desc: option.desc,// 分享描述 desc: option.desc, // 分享描述
link: option.shareUrl, // 分享链接 link: option.shareUrl, // 分享链接
imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标 imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() { success: function() {
that.$sa.track('watchClick',{ that.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'完成分享', JSON.parse(localStorage.getItem("lessonDetail")).domTitle
partName:that.contentData.partName, .length
elementID:query.elementId.toString(), ),
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 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",
JSON.stringify(lessonDetail)
);
}); });
that.$emit('backList') that.$emit("backList");
}, },
cancel: function() { cancel: function() {
that.$sa.track('watchClick',{ that.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'取消分享', JSON.parse(localStorage.getItem("lessonDetail")).domTitle
partName:that.contentData.partName, .length
elementID:query.elementId.toString(), ),
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) { onShare(URL) {
if(this.watchDetail&&this.watchDetail.total_day){ if (this.watchDetail && this.watchDetail.total_day) {
this.enableShare({ 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" +
this.watchDetail.total_day +
".jpg",
shareUrl: URL
});
} }
}, },
toDataURLBase64 (src, callback) { toDataURLBase64(src, callback) {
let xhttp = new XMLHttpRequest(); let xhttp = new XMLHttpRequest();
xhttp.onload = function () { xhttp.onload = function() {
let fileReader = new FileReader(); let fileReader = new FileReader();
fileReader.onloadend = function () { fileReader.onloadend = function() {
callback(fileReader.result) callback(fileReader.result);
}; };
fileReader.readAsDataURL(xhttp.response) fileReader.readAsDataURL(xhttp.response);
}; };
xhttp.responseType = 'blob'; xhttp.responseType = "blob";
xhttp.open('GET', src, true); xhttp.open("GET", src, true);
xhttp.send() xhttp.send();
}, },
getOffsetRect(ele){ getOffsetRect(ele) {
var box=ele.getBoundingClientRect(); var box = ele.getBoundingClientRect();
var body=document.body, var body = document.body,
docElem=document.documentElement; docElem = document.documentElement;
//获取页面的scrollTop,scrollLeft(兼容性写法) //获取页面的scrollTop,scrollLeft(兼容性写法)
var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop, var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft; scrollLeft =
var clientTop=docElem.clientTop||body.clientTop, window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
clientLeft=docElem.clientLeft||body.clientLeft; var clientTop = docElem.clientTop || body.clientTop,
var top=box.top+scrollTop-clientTop, clientLeft = docElem.clientLeft || body.clientLeft;
left=box.left+scrollLeft-clientLeft; var top = box.top + scrollTop - clientTop,
left = box.left + scrollLeft - clientLeft;
return { return {
//Math.round 兼容火狐浏览器bug //Math.round 兼容火狐浏览器bug
top:Math.round(top), top: Math.round(top),
left:Math.round(left) left: Math.round(left)
} };
}, },
qrcode(data){ qrcode(data) {
if(this.QRCodeB){ if (this.QRCodeB) {
this.QRCodeB.makeCode(data) this.QRCodeB.makeCode(data);
}else{ } else {
this.QRCodeB = new QRCode('qrcode', { this.QRCodeB = new QRCode("qrcode", {
width: 70, width: 70,
height: 70, // 高度 height: 70, // 高度
text: data, // 二维码内容 text: data, // 二维码内容
image: '' 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; bottom: 0;
right: 0; right: 0;
z-index: 1300; z-index: 1300;
.share-block{ .share-block {
position: absolute; position: absolute;
border-radius: 8*@toVw; border-radius: 8 * @toVw;
top: 20*@toVw; top: 20 * @toVw;
left: 20*@toVw; left: 20 * @toVw;
right: 20*@toVw; right: 20 * @toVw;
// background: white; // background: white;
bottom: 0; bottom: 0;
overflow: auto; overflow: auto;
.bg-title{ .bg-title {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 60*@toVw; height: 60 * @toVw;
background-size: 100% 100%; background-size: 100% 100%;
z-index: -1; z-index: -1;
} }
.bg-desc{ .bg-desc {
position: absolute; position: absolute;
top: 58*@toVw; top: 58 * @toVw;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
// background: white; // background: white;
z-index: -1; z-index: -1;
border-radius: 0 0 8*@toVw 8*@toVw; border-radius: 0 0 8 * @toVw 8 * @toVw;
} }
#cvs-img{ #cvs-img {
position: absolute; position: absolute;
width: 100%; width: 100%;
// top: -3*@toVw; // top: -3*@toVw;
left: 0; left: 0;
z-index: 1; z-index: 1;
} }
.content{ .content {
width: 100%; width: 100%;
height: (480-53)*@toVw; height: (480-53) * @toVw;
padding-top: 110*@toVw; padding-top: 110 * @toVw;
// margin-top: 20*@toVw; // margin-top: 20*@toVw;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
.content-black{ .content-black {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
...@@ -413,146 +572,184 @@ import {Toast} from 'vant' ...@@ -413,146 +572,184 @@ import {Toast} from 'vant'
bottom: 0; bottom: 0;
} }
} }
.audio{position: fixed;opacity: 0;} .audio {
.main-content{ position: fixed;
width: 322*@toVw; opacity: 0;
height: 201*@toVw; }
.main-content {
width: 322 * @toVw;
height: 201 * @toVw;
background: white; background: white;
border-radius: 8*@toVw; border-radius: 8 * @toVw;
position: relative; position: relative;
.img_link{ .img_link {
position: absolute; position: absolute;
width: 260*@toVw; width: 260 * @toVw;
bottom: -49*@toVw; bottom: -49 * @toVw;
left: 33*@toVw; left: 33 * @toVw;
} }
.imgPoint{ .imgPoint {
position: absolute; position: absolute;
width: 85 * @toVw; width: 85 * @toVw;
top: 40*@toVw; top: 40 * @toVw;
left: 80 * @toVw;
opacity: 0;
@keyframes pointMove {
from {
top: 40 * @toVw;
left: 80 * @toVw; left: 80 * @toVw;
transform: scale(2, 2);
opacity: 0; 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 ; to {
animation-fill-mode:forwards; top: -60 * @toVw;
left: 229 * @toVw;
transform: scale(1, 1);
opacity: 1;
}
} }
.topBox{ animation: pointMove 0.375s 1s ease;
animation-fill-mode: forwards;
}
.topBox {
position: absolute; position: absolute;
top: -34*@toVw; top: -34 * @toVw;
left: 48*@toVw; left: 48 * @toVw;
.shareTitle{width: 223*@toVw;} .shareTitle {
width: 223 * @toVw;
}
} }
.main-text{ .main-text {
padding-top: 50*@toVw; padding-top: 50 * @toVw;
text-align: center; text-align: center;
margin: auto; margin: auto;
margin-bottom: 0; margin-bottom: 0;
display: flex; display: flex;
.item{ .item {
flex: 1; flex: 1;
margin: 0; margin: 0;
.text1{color: #5F696E;font-size: 13*@toVw;margin: 8*@toVw 0;} .text1 {
img{width: 46*@toVw;} color: #5f696e;
.text2{ font-size: 13 * @toVw;
font-size: 11*@toVw; margin: 8 * @toVw 0;
color: #5F696E; }
span{color: #EC7E1F;font-size: 22*@toVw;} img {
width: 46 * @toVw;
}
.text2 {
font-size: 11 * @toVw;
color: #5f696e;
span {
color: #ec7e1f;
font-size: 22 * @toVw;
} }
} }
} }
.head-block{ }
.head-block {
position: absolute; position: absolute;
text-align: center; text-align: center;
border-radius: 200*@toVw; border-radius: 200 * @toVw;
// left: 50%; // left: 50%;
width: 100%; width: 100%;
text-align: center; text-align: center;
top: -52*@toVw; top: -52 * @toVw;
img{ img {
border:8*@toVw solid #72CEFA; border: 8 * @toVw solid #72cefa;
border-radius: 200*@toVw; border-radius: 200 * @toVw;
width: 62*@toVw; width: 62 * @toVw;
margin-top: 7*@toVw; margin-top: 7 * @toVw;
height: 62*@toVw; height: 62 * @toVw;
} }
} }
.content-title{ .content-title {
width: 226*@toVw; width: 226 * @toVw;
height: 54*@toVw; height: 54 * @toVw;
line-height: 26*@toVw; line-height: 26 * @toVw;
margin-top: 40*@toVw; margin-top: 40 * @toVw;
color: #55343A; color: #55343a;
// background: white; // background: white;
font-size: 14*@toVw; font-size: 14 * @toVw;
text-align: center; text-align: center;
background-size: 99.99% 99.99%; background-size: 99.99% 99.99%;
position: absolute; position: absolute;
top: -14*@toVw; top: -14 * @toVw;
color: white; color: white;
// left: 50%; // left: 50%;
// margin-left: -112.5*@toVw; // margin-left: -112.5*@toVw;
} }
} }
.sing-content{ .sing-content {
background: white; background: white;
border-radius: 10*@toVw; border-radius: 10 * @toVw;
margin-top: 30*@toVw; margin-top: 30 * @toVw;
padding: 20*@toVw 0; padding: 20 * @toVw 0;
text-align: center; text-align: center;
.text1{margin:0 0 20*@toVw;font-size: 13*@toVw;} .text1 {
.text2{color: #1D6588;font-size: 22*@toVw; margin: 0 0 20 * @toVw;
margin-bottom: 10*@toVw;width: 318*@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;} .text3 {
color: #1d6588;
}
} }
.share-btn{ .share-btn {
margin-top: 20*@toVw; margin-top: 20 * @toVw;
text-align: center; text-align: center;
width: 255*@toVw; width: 255 * @toVw;
height: 44*@toVw; height: 44 * @toVw;
background:linear-gradient(0deg,rgba(243,180,3,1) 1%,rgba(252,231,171,1) 100%); background: linear-gradient(
text-shadow:0px 3px 3px rgba(170,127,4,0.59); 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); // box-shadow:0px 3*@toVw 16*@toVw 0px rgba(200,96,37,0.59);
border-radius:22*@toVw; border-radius: 22 * @toVw;
color: white; color: white;
line-height: 44*@toVw; line-height: 44 * @toVw;
font-size: 18*@toVw; font-size: 18 * @toVw;
box-shadow:0px 3*@toVw 16*@toVw 0px rgba(250,208,88,0.59); box-shadow: 0px 3 * @toVw 16 * @toVw 0px rgba(250, 208, 88, 0.59);
.iconfont{font-size: 18*@toVw;} .iconfont {
img{ font-size: 18 * @toVw;
width: 270*@toVw;
} }
img {
width: 270 * @toVw;
} }
} }
.share_close{ }
.share_close {
position: fixed; position: fixed;
width: 20*@toVw; width: 20 * @toVw;
top: 26*@toVw; top: 26 * @toVw;
right: 14*@toVw; right: 14 * @toVw;
z-index: 999; z-index: 999;
color: white; color: white;
font-size: 16*@toVw; font-size: 16 * @toVw;
} }
.tips{ .tips {
background: rgba(0,0,0,0.8); background: rgba(0, 0, 0, 0.8);
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
padding-right: 19*@toVw; padding-right: 19 * @toVw;
z-index: 99999999; z-index: 99999999;
text-align: right; text-align: right;
img{ img {
width: 80%; 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