Skip to content

H
h5-base
Commit 75b198b6 authored by chenyishuai@singsingenglish.com's avatar chenyishuai@singsingenglish.com
Browse files
Options

717

parent 708312f9
Hide whitespace changes
Inline Side-by-side
Showing with 677 additions and 476 deletions
dev/index.html
View file @ 75b198b6
......@@ -11,4 +11,4 @@
position: fixed;
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>
\ No newline at end of file
/* 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
dev/static/js/1.d8d8d26f9849424ac9da.js 0 → 100644
View file @ 75b198b6
This source diff could not be displayed because it is too large. You can view the blob instead.
dev/static/js/1.ef969fd836b3285eaf40.js deleted 100644 → 0
View file @ 708312f9
This source diff could not be displayed because it is too large. You can view the blob instead.
dev/static/js/5.0f95a18467651052363a.js → dev/static/js/5.81b8ae2afcdef1e829ff.js
View file @ 75b198b6
This source diff could not be displayed because it is too large. You can view the blob instead.
dev/static/js/manifest.07a7a139bbf89685f131.js → dev/static/js/manifest.59745712c8e56030a1d0.js
View file @ 75b198b6
!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}}([]);
\ No newline at end of file
!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
src/components/newLesson/share.vue
View file @ 75b198b6
<template>
<div class="share-page">
<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"/> -->
<div class="main-content">
<div class="topBox">
<img class="shareTitle" :src="shareTitle"/>
<img class="shareTitle" :src="shareTitle" />
<div class="head-block">
<img :src="userDetail.avatar"/>
</div>
<div class="content-title" >
{{userDetail.nickname}}家宝宝
<img :src="userDetail.avatar" />
</div>
<div class="content-title">{{userDetail.nickname}}家宝宝</div>
</div>
<div class="main-text">
<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="text2"> <span>{{watchDetail.total_day}}</span>天</div>
<div class="text2">
<span>{{watchDetail.total_day}}</span>天
</div>
</div>
<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="text2"> <span>{{minute}}</span>分钟</div>
<div class="text2">
<span>{{minute}}</span>分钟
</div>
</div>
<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="text2"> <span>{{percent}}%</span><br>同龄人</div>
<div class="text2">
<span>{{percent}}%</span>
<br />同龄人
</div>
</div>
</div>
<img class="img_link" :src="img_link" alt="">
<img class="imgPoint" :src="imgPoint" alt="">
<img class="img_link" :src="img_link" alt />
<img class="imgPoint" :src="imgPoint" alt />
</div>
<div class="sing-content">
<div class="text1">今日童谣主题</div>
......@@ -41,518 +52,704 @@
<div class="share-btn" @click="showShare()">
<i class="iconfont icon-pengyouquan"></i> 分享到微信
</div>
<audio ref="audio" autoplay class='audio' :src="audioPoint"></audio>
<audio ref="audio" autoplay class="audio" :src="audioPoint"></audio>
</div>
</div>
<div class="share_close" @click="$emit('closeShare')">×</div>
<div class="tips" v-if="shareVisible" @click="shareVisible=false">
<img :src="share_tips">
<img :src="share_tips" />
</div>
</div>
</template>
<script>
import {Toast} from 'vant'
import shareBg from '../../assets/newLesson/shareBg.png'
import shareTitle from '../../assets/newLesson/img_title.png'
import share_close from '../../assets/newLesson/share_close.png'
import icon_baby from '../../assets/newLesson/icon_baby.png'
import icon_day from '../../assets/newLesson/icon_day.png'
import icon_min from '../../assets/newLesson/icon_min.png'
import img_link from '../../assets/newLesson/img_link.png'
import good from '../../assets/newLesson/good.png'
import great from '../../assets/newLesson/great.png'
import perfect from '../../assets/newLesson/perfect.png'
import audioGood from '../../assets/udk.mp3'
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import {getwechatParam,getUserWatchApi,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",
data(){
return {
img_link:img_link,
shareVisible:false,
shareBg:shareBg,
share_close:share_close,
share_tips:share_tips,
shareTitle:shareTitle,
icon_baby:icon_baby,
icon_day:icon_day,
icon_min:icon_min,
userDetail:null,
dataURL:null,
watchDetail:null,
share_code_bg:share_code_bg,
lesson:{},
domTitle:'',
imgPoint:good,
audioPoint:audioGood,
minute:'',
percent:0
}
import { Toast } from "vant";
import shareBg from "../../assets/newLesson/shareBg.png";
import shareTitle from "../../assets/newLesson/img_title.png";
import share_close from "../../assets/newLesson/share_close.png";
import icon_baby from "../../assets/newLesson/icon_baby.png";
import icon_day from "../../assets/newLesson/icon_day.png";
import icon_min from "../../assets/newLesson/icon_min.png";
import img_link from "../../assets/newLesson/img_link.png";
import good from "../../assets/newLesson/good.png";
import great from "../../assets/newLesson/great.png";
import perfect from "../../assets/newLesson/perfect.png";
import audioGood from "../../assets/udk.mp3";
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
import {
getwechatParam,
getUserWatchApi,
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",
data() {
return {
img_link: img_link,
shareVisible: false,
shareBg: shareBg,
share_close: share_close,
share_tips: share_tips,
shareTitle: shareTitle,
icon_baby: icon_baby,
icon_day: icon_day,
icon_min: icon_min,
userDetail: null,
dataURL: null,
watchDetail: null,
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:[
'contentData'
],
mounted(){
initPage() {
// console.log(this.$store.state.watchDetail)
// debugger
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)
Toast.loading({
mask: true,
message: ''
});
this.initPage()
// debugger
},
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(),
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
});
},
initPage(){
// console.log(this.$store.state.watchDetail)
// debugger
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)
// 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(),
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()
});
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 lessonDetail = JSON.parse(
localStorage.getItem("lessonDetail")
);
let nowTime = Date.parse(new Date());
let json = {
page_type:0,
page_id:4,
stay_time:0,
page_type: 0,
page_id: 4,
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.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(),
localStorage.setItem(
"lessonDetail",
JSON.stringify(lessonDetail)
);
});
}
});
})
})
},
onShare(URL) {
if(this.watchDetail&&this.watchDetail.total_day){
this.enableShare({
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");
}
});
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}天`, // 分享标题
desc: JSON.parse(localStorage.getItem('userDesc')).nickname+`赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`,//
shareIcon:process.env.IMAGE_URL_HEAD+'new-sing/number_Day'+this.watchDetail.total_day+'.jpg',
shareUrl:URL
})
}
},
toDataURLBase64 (src, callback) {
let xhttp = new XMLHttpRequest();
xhttp.onload = function () {
let fileReader = new FileReader();
fileReader.onloadend = function () {
callback(fileReader.result)
};
fileReader.readAsDataURL(xhttp.response)
desc:
JSON.parse(localStorage.getItem("userDesc")).nickname +
`赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`, //
shareIcon:
process.env.IMAGE_URL_HEAD +
"new-sing/number_Day" +
this.watchDetail.total_day +
".jpg",
shareUrl: URL
});
}
},
toDataURLBase64(src, callback) {
let xhttp = new XMLHttpRequest();
xhttp.onload = function() {
let fileReader = new FileReader();
fileReader.onloadend = function() {
callback(fileReader.result);
};
xhttp.responseType = 'blob';
xhttp.open('GET', src, true);
xhttp.send()
},
getOffsetRect(ele){
var box=ele.getBoundingClientRect();
var body=document.body,
docElem=document.documentElement;
//获取页面的scrollTop,scrollLeft(兼容性写法)
var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
var clientTop=docElem.clientTop||body.clientTop,
clientLeft=docElem.clientLeft||body.clientLeft;
var top=box.top+scrollTop-clientTop,
left=box.left+scrollLeft-clientLeft;
return {
//Math.round 兼容火狐浏览器bug
top:Math.round(top),
left:Math.round(left)
}
},
qrcode(data){
if(this.QRCodeB){
this.QRCodeB.makeCode(data)
}else{
this.QRCodeB = new QRCode('qrcode', {
width: 70,
height: 70, // 高度
text: data, // 二维码内容
image: ''
});
}
},
fileReader.readAsDataURL(xhttp.response);
};
xhttp.responseType = "blob";
xhttp.open("GET", src, true);
xhttp.send();
},
getOffsetRect(ele) {
var box = ele.getBoundingClientRect();
var body = document.body,
docElem = document.documentElement;
//获取页面的scrollTop,scrollLeft(兼容性写法)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
scrollLeft =
window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop,
clientLeft = docElem.clientLeft || body.clientLeft;
var top = box.top + scrollTop - clientTop,
left = box.left + scrollLeft - clientLeft;
return {
//Math.round 兼容火狐浏览器bug
top: Math.round(top),
left: Math.round(left)
};
},
qrcode(data) {
if (this.QRCodeB) {
this.QRCodeB.makeCode(data);
} else {
this.QRCodeB = new QRCode("qrcode", {
width: 70,
height: 70, // 高度
text: data, // 二维码内容
image: ""
});
}
}
}
};
</script>
<style scoped lang="less">
@import "../../util/public";
.share-page{
position: fixed;
background: url('https://cdn.singsingenglish.com/new-sing/5ee147390f18487738f2a5521110c96057a77731.png');
background-size:100% ;
top: 0;
left: 0;
@import "../../util/public";
.share-page {
position: fixed;
background: url("https://cdn.singsingenglish.com/new-sing/5ee147390f18487738f2a5521110c96057a77731.png");
background-size: 100%;
top: 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;
right: 0;
z-index: 1300;
.share-block{
overflow: auto;
.bg-title {
position: absolute;
border-radius: 8*@toVw;
top: 20*@toVw;
left: 20*@toVw;
right: 20*@toVw;
// background: white;
top: 0;
left: 0;
right: 0;
height: 60 * @toVw;
background-size: 100% 100%;
z-index: -1;
}
.bg-desc {
position: absolute;
top: 58 * @toVw;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
.bg-title{
// background: white;
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;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
height: 60*@toVw;
background-size: 100% 100%;
z-index: -1;
}
.bg-desc{
position: absolute;
top: 58*@toVw;
left: 0;
right: 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;
width: 100%;
// top: -3*@toVw;
left: 0;
z-index: 1;
width: 260 * @toVw;
bottom: -49 * @toVw;
left: 33 * @toVw;
}
.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;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
.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;
}
.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;
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;}
.topBox {
position: absolute;
top: -34 * @toVw;
left: 48 * @toVw;
.shareTitle {
width: 223 * @toVw;
}
.main-text{
padding-top: 50*@toVw;
text-align: center;
margin: auto;
margin-bottom: 0;
display: flex;
.item{
flex: 1;
margin: 0;
.text1{color: #5F696E;font-size: 13*@toVw;margin: 8*@toVw 0;}
img{width: 46*@toVw;}
.text2{
font-size: 11*@toVw;
color: #5F696E;
span{color: #EC7E1F;font-size: 22*@toVw;}
}
}
.main-text {
padding-top: 50 * @toVw;
text-align: center;
margin: auto;
margin-bottom: 0;
display: flex;
.item {
flex: 1;
margin: 0;
.text1 {
color: #5f696e;
font-size: 13 * @toVw;
margin: 8 * @toVw 0;
}
}
.head-block{
position: absolute;
text-align: center;
border-radius: 200*@toVw;
// left: 50%;
width: 100%;
text-align: center;
top: -52*@toVw;
img{
border:8*@toVw solid #72CEFA;
border-radius: 200*@toVw;
width: 62*@toVw;
margin-top: 7*@toVw;
height: 62*@toVw;
img {
width: 46 * @toVw;
}
.text2 {
font-size: 11 * @toVw;
color: #5f696e;
span {
color: #ec7e1f;
font-size: 22 * @toVw;
}
}
}
.content-title{
width: 226*@toVw;
height: 54*@toVw;
line-height: 26*@toVw;
margin-top: 40*@toVw;
color: #55343A;
// background: white;
font-size: 14*@toVw;
text-align: center;
background-size: 99.99% 99.99%;
position: absolute;
top: -14*@toVw;
color: white;
// left: 50%;
// margin-left: -112.5*@toVw;
}
.head-block {
position: absolute;
text-align: center;
border-radius: 200 * @toVw;
// left: 50%;
width: 100%;
text-align: center;
top: -52 * @toVw;
img {
border: 8 * @toVw solid #72cefa;
border-radius: 200 * @toVw;
width: 62 * @toVw;
margin-top: 7 * @toVw;
height: 62 * @toVw;
}
}
.sing-content{
background: white;
border-radius: 10*@toVw;
margin-top: 30*@toVw;
padding: 20*@toVw 0;
.content-title {
width: 226 * @toVw;
height: 54 * @toVw;
line-height: 26 * @toVw;
margin-top: 40 * @toVw;
color: #55343a;
// background: white;
font-size: 14 * @toVw;
text-align: center;
.text1{margin:0 0 20*@toVw;font-size: 13*@toVw;}
.text2{color: #1D6588;font-size: 22*@toVw;
margin-bottom: 10*@toVw;width: 318*@toVw;
background-size: 99.99% 99.99%;
position: absolute;
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;
text-overflow: ellipsis;
white-space: nowrap;
}
.text3{color: #1D6588;}
}
.share-btn{
margin-top: 20*@toVw;
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;
}
.text3 {
color: #1d6588;
}
}
.share_close{
position: fixed;
width: 20*@toVw;
top: 26*@toVw;
right: 14*@toVw;
z-index: 999;
.share-btn {
margin-top: 20 * @toVw;
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;
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%;
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 {
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>
src/components/newLesson/shareGoods.vue
View file @ 75b198b6
......@@ -197,10 +197,12 @@ export default {
justify-content: space-between;
.int{
width: 170 * @toVw;
margin: 0;
height: 56 * @toVw;
margin:auto 0;
}
.btn{
margin:auto 0;
height: 46 * @toVw;
width: 132 * @toVw;
}
}
......@@ -366,6 +368,7 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: bold;
}
.text3 {
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