Skip to content

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

71

parents 244ae216 85af8177
Hide whitespace changes
Inline Side-by-side
Showing with 704 additions and 852 deletions
src/components/mine/address.vue
View file @ 9337be67
......@@ -24,11 +24,16 @@
<div class="text">
<p>地址修改时间：{{deliverDetail.updated_at}}</p>
<p v-if="deliverDetail.express_no">发货时间：{{deliverDetail.deliver_at}}</p>
<div v-if="deliverDetail.express_no">
物流信息：{{deliverDetail.express_name}} {{deliverDetail.express_no}}
<div v-if="deliverDetail.express_no && deliverDetail.status === '1'" class="express-no">
<span>物流信息：</span>
<span style="flex: 1;">{{deliverDetail.express_name}} {{deliverDetail.express_no}}</span>
<van-button round size="small" @click="search(1)" type="info">查看物流</van-button>
</div>
<div v-if="!deliverDetail.express_no">物流信息：- -</div>
<div v-if="deliverDetail.express_no && deliverDetail.status === '0'" class="express-no">
<span>物流信息：</span>
<span style="flex: 1;">待发货</span>
</div>
<!-- <div v-if="!deliverDetail.express_no">物流信息：- -</div> -->
</div>
</div>
</div>
......@@ -56,12 +61,21 @@
<div class="timeInfo">
<div class="text">
<p>地址修改时间：{{noDeliverDetail.updated_at}}</p>
<p v-if="!noDeliverDetail.express_no">预计发货时间：{{noDeliverDetail.deliver_start_at}}</p>
<div v-if="noDeliverDetail.express_no">
<p
v-if="!noDeliverDetail.express_no"
>预计发货时间：{{noDeliverDetail.deliver_start_at}}-{{noDeliverDetail.deliver_end_at}}</p>
<div
v-if="noDeliverDetail.express_no && noDeliverDetail.status === '1'"
style="justify-content:space-between;"
>
物流信息：{{noDeliverDetail.express_name}} {{noDeliverDetail.express_no}}
<van-button round size="small" @click="search(2)" type="info">查看物流</van-button>
</div>
<div v-if="!noDeliverDetail.express_no">物流信息：- -</div>
<div
v-if="noDeliverDetail.express_no && noDeliverDetail.status === '0'"
style="justify-content:space-between;"
>物流信息：待发货</div>
<!-- <div v-if="!noDeliverDetail.express_no">物流信息：- -</div> -->
</div>
</div>
</div>
......@@ -75,7 +89,7 @@
style="text-align: center;padding-top: 20vh;font-size: 5vw;"
>{{addressInfo.msg}}</div>
</div>
<!-- <div class="address2">
<!-- <div class="address2">
<div class="content">
<div class="top">
<span>{{addressInfo.receive_name}}</span>
......@@ -90,7 +104,7 @@
<p>(最新地址修改时间：{{addressInfo.updated_at}})</p>
<p>*若要修改收货地址，请联系您的专属班主任老师</p>
</div>
</div> -->
</div>-->
</template>
<script>
......@@ -190,6 +204,10 @@ export default {
background: #f5f5f9;
.van-button {
margin-left: 20 * @toVw;
margin-right: 20 * @toVw;
}
.van-button__text {
padding: 10 * @toVw;
}
.head {
i {
......@@ -241,13 +259,18 @@ export default {
font-size: 12 * @toVw;
margin-left: 0;
line-height: 26 * @toVw;
width: 100%;
.express-no {
display: flex;
justify-content: space-between;
}
}
.right {
margin-top: 43 * @toVw;
}
.van-button--info {
background: white;
width: 74 * @toVw;
// width: 74 * @toVw;
color: #60adf0;
border-color: #60adf0;
}
......@@ -264,7 +287,8 @@ export default {
-webkit-transform: scale(1, 0.5);
}
.tip {
padding: 10 * @toVw 20 * @toVw;
width: 90%;
margin: 10 * @toVw auto;
color: #999999;
font-size: 12 * @toVw;
line-height: 23 * @toVw;
......
src/components/mine/index.vue
View file @ 9337be67
......@@ -74,7 +74,7 @@ import { mineImage } from "../../util/imgUrl";
import { Cell, Toast } from "vant";
import {
getStarSumberApi,
// getUserAdressApi,
getUserAdressApi,
getNewestAddressListAPi,
getUserDetailApi
} from "../../service/api";
......@@ -86,7 +86,7 @@ export default {
},
data() {
return {
isShowAddress: true,
isShowAddress: false,
noDeliverDetail: null, //下期收货地址
deliverDetail: null, //本期收货地址
image: mineImage,
......@@ -109,32 +109,47 @@ export default {
// getUserAdressApi().then(res => {
// this.addressInfo = res;
// });
getNewestAddressListAPi().then(res => {
if (res) {
if (res.deliver_detail && res.deliver_detail.length > 0) {
this.deliverDetail = res.deliver_detail;
}
if (res.no_deliver_detail && res.no_deliver_detail.length > 0) {
this.noDeliverDetail = res.no_deliver_detail;
}
if (!this.deliverDetail && !this.noDeliverDetail) {
this.isShowAddress = false;
}
if (this.deliverDetail && this.noDeliverDetail) {
if (
this.deliverDetail.express_no &&
this.deliverDetail.express_no.length === 0
) {
getNewestAddressListAPi()
.then(res => {
if (res) {
if (res.deliver_detail && res.deliver_detail.length > 0) {
this.deliverDetail = res.deliver_detail[0];
}
if (res.no_deliver_detail && res.no_deliver_detail.length > 0) {
this.noDeliverDetail = res.no_deliver_detail[0];
}
if (!this.deliverDetail && !this.noDeliverDetail) {
this.isShowAddress = false;
}
if (this.deliverDetail && this.noDeliverDetail) {
if (
this.noDeliverDetail.express_no &&
this.noDeliverDetail.express_no.length === 0
(this.deliverDetail.express_no &&
this.deliverDetail.express_no.length > 0) ||
(this.noDeliverDetail.express_no &&
this.noDeliverDetail.express_no.length > 0)
) {
this.isShowAddress = false;
this.isShowAddress = true;
}
if (
this.deliverDetail.express_no &&
this.deliverDetail.express_no.length === 0
) {
if (
this.noDeliverDetail.express_no &&
this.noDeliverDetail.express_no.length === 0
) {
this.isShowAddress = false;
}
}
}
}
}
});
})
.then(res => {
console.log(res);
})
.catch(error => {
console.log(JSON.stringify(error));
});
if (this.userDetail.mobile) {
this.phoneNumber = this.userDetail.mobile;
}
......
src/components/newLesson/index.vue
View file @ 9337be67
......@@ -10,521 +10,721 @@
<!--横屏导航-->
<div class="header-h" v-if="!nowLesson.old">
<i :class="{headerHP:true, defaultLook:nowShow !== 1,lookHP:nowShow===1}" @click="type=1">
<img :src="HP.look2" alt="">
<img :src="HP.look2" alt />
</i>
<i :class="{headerHP:true, defaultPlay:nowShow !== 2,playHP:nowShow===2}" @click="type=2">
<img :src="HP.play2" alt="">
<img :src="HP.play2" alt />
</i>
<i :class="{headerHP:true, defaultFun:nowShow !== 3,funHP:nowShow===3}" @click="type=3">
<img :src="HP.listen1" alt="">
<img :src="HP.listen1" alt />
</i>
<i class="headerHP home" @click="backList">
<img :src="HP.back" alt="">
<img :src="HP.back" alt />
</i>
</div>
<!--老课包返回按钮-->
<img :src="backUrl" v-if="nowLesson.old" @click="backList" class="backImg">
<img :src="backUrl" v-if="nowLesson.old" @click="backList" class="backImg" />
<!--内容-->
<div :class="{'index-content-block':true,radius:nowShow !== 1 || nowLesson.old}">
<look-block v-if="nowLesson.type === 'text'" :contentData="nowLesson" @backList="backList" />
<video-block v-if="nowLesson.type === 'video'" :contentData="nowLesson" :nowShow="nowShow" @backList="backList"/>
<audio-block v-if="nowLesson.type === 'audio'" :contentData="nowLesson" @backList="backList" />
<video-block
v-if="nowLesson.type === 'video'"
:contentData="nowLesson"
:nowShow="nowShow"
@backList="backList"
/>
<audio-block v-if="nowLesson.type === 'audio'" :contentData="nowLesson" @backList="backList" />
</div>
</div>
</template>
<script>
import {subUserLessonApi,getUserWatchApi,getwechatParam} from "../../service/api";
import {Toast} from 'vant'
import lookBlock from './look'
import videoBlock from './video'
import backUrl from '../../assets/newLesson/back.png'
import {HP} from '../../util/imgUrl.js'
import audioBlock from './audio'
export default {
name: "index",
data(){
let query
console.log(this.$store.state.classQuery.periods_id)
if(this.$store.state.classQuery.periods_id){
query = this.$store.state.classQuery
}else{
// debugger
query = JSON.parse(sessionStorage.getItem('classQuery'))
}
import {
subUserLessonApi,
getUserWatchApi,
getwechatParam
} from "../../service/api";
import { Toast } from "vant";
import lookBlock from "./look";
import videoBlock from "./video";
import backUrl from "../../assets/newLesson/back.png";
import { HP } from "../../util/imgUrl.js";
import audioBlock from "./audio";
export default {
name: "index",
data() {
let query;
console.log(this.$store.state.classQuery.periods_id);
if (this.$store.state.classQuery.periods_id) {
query = this.$store.state.classQuery;
} else {
// debugger
return {
backUrl:backUrl,
periods_id:query.periods_id,
category_id:query.category_id,
elementId:query.elementId,
lesson:null,
nowShow:0,
page_id :1,
stillTime:0,
watchDetail:null,
timeInterval:null,
nowLesson:{
type:'',
content:null,
age:1,
},
HP:HP,
type:1
}
},
watch: {
type() {
this.changeTitle(this.type)
}
},
components:{
lookBlock,
videoBlock,
audioBlock
},
mounted(){
this.initPage();
},
methods:{
enableShare: function(option) {
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() {
// debugger
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let nowTime = Date.parse(new Date());
let json = {
page_type:0,
page_id:6,
stay_time:0,
};
subUserLessonApi(that.elementId,that.category_id,that.periods_id,json).then(res=>{
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
});
},
cancel: function() {
}
});
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() {
console.log(that.elementId)
// debugger
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let nowTime = Date.parse(new Date());
let json = {
page_type:0,
page_id:6,
stay_time:0,
};
subUserLessonApi(that.elementId,that.category_id,that.periods_id,json).then(res=>{
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
});
},
cancel: function() {
}
});
})
})
},
onShare(URL) {
this.enableShare({
product_title: `我家宝宝正在【唱唱启蒙英语】挑战童谣，已坚持${this.watchDetail.total_day}天`, // 分享标题
desc: JSON.parse(localStorage.getItem('userDesc')).nickname+`赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`,//
shareIcon:'https://cdn.singsingenglish.com/logo/logo.jpg',
shareUrl:URL
})
},
backList(){
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime- lessonDetail.nowTime)/1000;
console.log(this.lesson)
this.$sa.track('watchClick',{
buttonName:'返回课程列表',
partName:this.nowShow == 1 ? '爸妈看一看' : this.nowShow == 2 ? '宝贝玩一玩' : this.nowShow == 3 ? '磨磨小耳朵' : '',
elementID:this.lesson.id.toString(),
dayModule:this.lesson.domTitle.slice(0,9),
weekName:this.lesson.domTitle.slice(10,this.lesson.domTitle.length),
elementName:this.lesson.domTitle.slice(0,9) + '-'+ this.lesson.domTitle.slice(10,this.lesson.domTitle.length),
themeID:this.lesson.themeID,
themeName:this.lesson.themeName,
goodsID:this.lesson.goodsID,
classID:this.lesson.classID
});
let json = {
page_type:0,
page_id:this.page_id,
stay_time:lookTime,
};
subUserLessonApi(this.elementId,this.category_id,this.periods_id,json).then(res=>{
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
let query={
periods_id:this.periods_id,
course_type:this.course_type,
parent_category_id:this.parent_category_id,
back_id:this.category_id
};
console.log(query)
// debugger
this.$router.push({name:'map',query:query})
});
query = JSON.parse(sessionStorage.getItem("classQuery"));
}
// debugger
return {
backUrl: backUrl,
periods_id: query.periods_id,
category_id: query.category_id,
elementId: query.elementId,
lesson: null,
nowShow: 0,
page_id: 1,
stillTime: 0,
watchDetail: null,
timeInterval: null,
nowLesson: {
type: "",
content: null,
age: 1
},
changeTitle(type){
// if(type==type)
Toast.loading({
mask: true,
message: ''
});
this.nowShow = type;
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime- lessonDetail.nowTime)/1000;
let json = {
page_type:0,
page_id:this.page_id,
stay_time:lookTime,
};
console.log(lookTime)
subUserLessonApi(this.elementId,this.category_id,this.periods_id,json).then(res=>{
Toast.clear()
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
HP: HP,
type: 1
};
},
watch: {
type() {
this.changeTitle(this.type);
}
},
components: {
lookBlock,
videoBlock,
audioBlock
},
mounted() {
// this.changeTitle(this.type);
this.initPage();
},
methods: {
enableShare: function(option) {
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
});
switch (type) {
case 1:
// 神策埋点 板块切换
this.$sa.track('learnPart',{
partName:'爸妈看一看',
elementID:this.lesson.id.toString(),
dayModule:this.lesson.domTitle.slice(0,9),
weekName:this.lesson.domTitle.slice(10,this.lesson.domTitle.length),
elementName:this.lesson.domTitle.slice(0,9) + '-'+ this.lesson.domTitle.slice(10,this.lesson.domTitle.length),
themeID:this.lesson.themeID,
themeName:this.lesson.themeName,
goodsID:this.lesson.goodsID,
classID:this.lesson.classID,
is_view_today:!!new Date().setHours(0, 0, 0, 0) === new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
this.page_id = 1;
this.nowLesson = {
type:'text',
title:1,
partName:'爸妈看一看',
content:this.lesson.content.look,
age:this.nowLesson.age
};
// debugger
break;
case 2:
// 神策埋点 板块切换
this.$sa.track('learnPart',{
partName:'宝贝玩一玩',
elementID:this.lesson.id.toString(),
dayModule:this.lesson.domTitle.slice(0,9),
weekName:this.lesson.domTitle.slice(10,this.lesson.domTitle.length),
elementName:this.lesson.domTitle.slice(0,9) + '-'+ this.lesson.domTitle.slice(10,this.lesson.domTitle.length),
themeID:this.lesson.themeID,
themeName:this.lesson.themeName,
goodsID:this.lesson.goodsID,
classID:this.lesson.classID,
is_view_today:!!new Date().setHours(0, 0, 0, 0) === new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
this.page_id = 2;
if(this.lesson.content.play.type){
this.nowLesson = {
type:'audio',
title:2,
partName:'宝贝玩一玩',
content:this.lesson.content.play,
age:this.nowLesson.age
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() {
// debugger
let lessonDetail = JSON.parse(
localStorage.getItem("lessonDetail")
);
let nowTime = Date.parse(new Date());
let json = {
page_type: 0,
page_id: 6,
stay_time: 0
};
}else{
this.nowLesson = {
type:'video',
title:2,
partName:'宝贝玩一玩',
content:this.lesson.content.play,
age:this.nowLesson.age
};
}
break;
case 3:
this.$sa.track('learnPart',{
partName:'磨磨小耳朵',
elementID:this.lesson.id.toString(),
dayModule:this.lesson.domTitle.slice(0,9),
weekName:this.lesson.domTitle.slice(10,this.lesson.domTitle.length),
elementName:this.lesson.domTitle.slice(0,9) + '-'+ this.lesson.domTitle.slice(10,this.lesson.domTitle.length),
themeID:this.lesson.themeID,
themeName:this.lesson.themeName,
goodsID:this.lesson.goodsID,
classID:this.lesson.classID,
is_view_today:!!new Date().setHours(0, 0, 0, 0) === new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
this.page_id = 5;
if(this.lesson.content.fun.type){
this.nowLesson = {
type:'audio',
title:3,
partName:'磨磨小耳朵',
content:this.lesson.content.fun,
age:this.nowLesson.age
};
}else{
this.nowLesson = {
type:'video',
partName:'磨磨小耳朵',
title:3,
content:this.lesson.content.fun,
age:this.nowLesson.age
subUserLessonApi(
that.elementId,
that.category_id,
that.periods_id,
json
).then(res => {
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem(
"lessonDetail",
JSON.stringify(lessonDetail)
);
});
},
cancel: function() {}
});
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() {
let lessonDetail = JSON.parse(
localStorage.getItem("lessonDetail")
);
let nowTime = Date.parse(new Date());
let json = {
page_type: 0,
page_id: 6,
stay_time: 0
};
}
break;
}
},
initPage(){
Toast.loading({
mask: true,
message: ''
subUserLessonApi(
that.elementId,
that.category_id,
that.periods_id,
json
).then(res => {
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem(
"lessonDetail",
JSON.stringify(lessonDetail)
);
});
},
cancel: function() {}
});
});
console.log(this.$store.state.classQuery)
this.parent_category_id = this.$route.query.parent_category_id
this.course_type = this.$route.query.course_type
// debugger
getUserWatchApi().then(res=>{
this.watchDetail = res;
this.$store.dispatch('setWatchDetail',this.watchDetail)
let URL = process.env.API_URL+'#/shareGoods?userID='+ JSON.parse(localStorage.getItem('userDesc')).user_id;
this.onShare(URL);
this.lesson = JSON.parse(localStorage.getItem('lessonDetail'));
this.nowShow = 1;
document.title =`${this.lesson.domTitle}`;
});
},
onShare(URL) {
this.enableShare({
product_title: `我家宝宝正在【唱唱启蒙英语】挑战童谣，已坚持${this.watchDetail.total_day}天`, // 分享标题
desc:
JSON.parse(localStorage.getItem("userDesc")).nickname +
`赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`, //
shareIcon: "https://cdn.singsingenglish.com/logo/logo.jpg",
shareUrl: URL
});
},
backList() {
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
console.log(this.lesson);
this.$sa.track("watchClick", {
buttonName: "返回课程列表",
partName:
this.nowShow == 1
? "爸妈看一看"
: this.nowShow == 2
? "宝贝玩一玩"
: this.nowShow == 3
? "磨磨小耳朵"
: "",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID
});
let json = {
page_type: 0,
page_id: this.page_id,
stay_time: lookTime
};
subUserLessonApi(
this.elementId,
this.category_id,
this.periods_id,
json
).then(res => {
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
let query = {
periods_id: this.periods_id,
course_type: this.course_type,
parent_category_id: this.parent_category_id,
back_id: this.category_id
};
console.log(query);
// debugger
this.$router.push({ name: "map", query: query });
});
},
changeTitle(type) {
// if(type==type)
Toast.loading({
mask: true,
message: ""
});
this.nowShow = type;
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
let json = {
page_type: 0,
page_id: this.page_id,
stay_time: lookTime
};
console.log(lookTime);
subUserLessonApi(
this.elementId,
this.category_id,
this.periods_id,
json
).then(res => {
Toast.clear();
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
});
switch (type) {
case 1:
// 神策埋点 板块切换
this.$sa.track("learnPart", {
partName: "爸妈看一看",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(
10,
this.lesson.domTitle.length
),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
this.page_id = 1;
this.nowLesson = {
type:'text',
partName:'爸妈看一看',
title:1,
content:this.lesson.content.look,
age:this.nowLesson.age
};
let json = {
page_type:0,
page_id:1,
stay_time:1,
type: "text",
title: 1,
partName: "爸妈看一看",
content: this.lesson.content.look,
age: this.nowLesson.age
};
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let nowTime = Date.parse(new Date());
subUserLessonApi(this.elementId,this.category_id,this.periods_id,json).then(res=>{
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
Toast.clear()
// debugger
break;
case 2:
// 神策埋点 板块切换
this.$sa.track("learnPart", {
partName: "宝贝玩一玩",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(
10,
this.lesson.domTitle.length
),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
this.$sa.track('learnPart',{
partName:'爸妈看一看',
elementID:this.lesson.id.toString(),
dayModule:this.lesson.domTitle.slice(0,9),
weekName:this.lesson.domTitle.slice(10,this.lesson.domTitle.length),
elementName:this.lesson.domTitle.slice(0,9) + '-'+ this.lesson.domTitle.slice(10,this.lesson.domTitle.length),
themeID:this.lesson.themeID,
themeName:this.lesson.themeName,
goodsID:this.lesson.goodsID,
classID:this.lesson.classID,
is_view_today:!!new Date().setHours(0, 0, 0, 0) === new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
this.page_id = 2;
if (this.lesson.content.play.type) {
this.nowLesson = {
type: "audio",
title: 2,
partName: "宝贝玩一玩",
content: this.lesson.content.play,
age: this.nowLesson.age
};
} else {
this.nowLesson = {
type: "video",
title: 2,
partName: "宝贝玩一玩",
content: this.lesson.content.play,
age: this.nowLesson.age
};
}
break;
case 3:
this.$sa.track("learnPart", {
partName: "磨磨小耳朵",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(
10,
this.lesson.domTitle.length
),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
if(this.lesson.content.play.video.length < 1 && this.lesson.content.play.audio.length < 1 ){
this.nowLesson.old=true
this.page_id = 5;
if (this.lesson.content.fun.type) {
this.nowLesson = {
type: "audio",
title: 3,
partName: "磨磨小耳朵",
content: this.lesson.content.fun,
age: this.nowLesson.age
};
} else {
this.nowLesson = {
type: "video",
partName: "磨磨小耳朵",
title: 3,
content: this.lesson.content.fun,
age: this.nowLesson.age
};
}
})
break;
}
},
initPage() {
Toast.loading({
mask: true,
message: ""
});
console.log(this.$store.state.classQuery);
this.parent_category_id = this.$route.query.parent_category_id;
this.course_type = this.$route.query.course_type;
// debugger
getUserWatchApi().then(res => {
this.watchDetail = res;
this.$store.dispatch("setWatchDetail", this.watchDetail);
let URL =
process.env.API_URL +
"#/shareGoods?userID=" +
JSON.parse(localStorage.getItem("userDesc")).user_id;
this.onShare(URL);
this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
console.log(this.lesson);
this.nowShow = 1;
document.title = `${this.lesson.domTitle}`;
this.nowLesson = {
type: "text",
partName: "爸妈看一看",
title: 1,
content: this.lesson.content.look,
age: this.nowLesson.age
};
let json = {
page_type: 0,
page_id: 1,
stay_time: 1
};
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let nowTime = Date.parse(new Date());
subUserLessonApi(
this.elementId,
this.category_id,
this.periods_id,
json
).then(res => {
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
Toast.clear();
});
this.$sa.track("learnPart", {
partName: "爸妈看一看",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
if (
this.lesson.content.play.video.length < 1 &&
this.lesson.content.play.audio.length < 1
) {
this.nowLesson.old = true;
}
});
}
}
};
</script>
<style scoped lang="less">
@import "../../util/public";
.lessonHeader{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/lessonHeader3.png?v=2') no-repeat;background-size:102*@toVw 334*@toVw;display: inline-block}
.header-h{display: none}
.home{height:46*@toVw;width:46*@toVw;background-position:0 0;}
.play{height:48*@toVw;width:102*@toVw;background-position:0 -46*@toVw;}
.look{height:48*@toVw;width:102*@toVw;background-position:0 -94*@toVw;}
.fun{height:48*@toVw;width:102*@toVw;background-position:0 -142*@toVw;}
.defaultFun{height:48*@toVw;width:102*@toVw;background-position:0 -190*@toVw;}
.defaultLook{height:48*@toVw;width:102*@toVw;background-position:0 -238*@toVw;}
.defaultPlay{height:48*@toVw;width:102*@toVw;background-position:0 -286*@toVw;}
.header{
display: flex;
display: -webkit-flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 5*@toVw 0;
z-index: 2;
background:rgba(255,255,255,1);
box-shadow:0*@toVw 2*@toVw 3*@toVw 0*@toVw rgba(0,0,0,0.1);
}
.newLesson{
background: #f8f8f8;
}
.backImg{
position: fixed;
bottom: 40*@toVw;
right: 20*@toVw;
z-index: 99999999;
width: 60*@toVw;
}
.lessonHeader {
background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/lessonHeader3.png?v=2")
no-repeat;
background-size: 102 * @toVw 334 * @toVw;
display: inline-block;
}
.header-h {
display: none;
}
.home {
height: 46 * @toVw;
width: 46 * @toVw;
background-position: 0 0;
}
.play {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -46 * @toVw;
}
.look {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -94 * @toVw;
}
.fun {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -142 * @toVw;
}
.defaultFun {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -190 * @toVw;
}
.defaultLook {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -238 * @toVw;
}
.defaultPlay {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -286 * @toVw;
}
.header {
display: flex;
display: -webkit-flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 5 * @toVw 0;
z-index: 2;
background: rgba(255, 255, 255, 1);
box-shadow: 0 * @toVw 2 * @toVw 3 * @toVw 0 * @toVw rgba(0, 0, 0, 0.1);
}
.newLesson {
background: #f8f8f8;
}
.backImg {
position: fixed;
bottom: 40 * @toVw;
right: 20 * @toVw;
z-index: 99999999;
width: 60 * @toVw;
}
@media screen and (orientation: landscape) {
@toVw:100/667vw;
.backImg{
@toVw: 100/667vw;
.backImg {
position: fixed;
bottom: 40*@toVw;
right: 20*@toVw;
bottom: 40 * @toVw;
right: 20 * @toVw;
z-index: 99999999;
width: 60*@toVw;
width: 60 * @toVw;
}
.lessonHeader{
.lessonHeader {
display: none;
}
.header{
.header {
display: none;
}
.actBanKuai{
.actBanKuai {
background-color: white;
border: 1*@toVw solid transparent;
border: 1 * @toVw solid transparent;
border-left-color: black;
border-top-color: black;
border-bottom-color: black;
border-radius: 8*@toVw 0 0 8*@toVw;
border-radius: 8 * @toVw 0 0 8 * @toVw;
}
.headerHP {
background-size: 62 * @toVw 434 * @toVw;
display: inline-block;
}
.home {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 0;
}
.lookHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -62 * @toVw;
.actBanKuai;
}
.playHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -124 * @toVw;
.actBanKuai;
}
.funHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -186 * @toVw;
.actBanKuai;
}
.headerHP{background-size:62*@toVw 434*@toVw;display: inline-block}
.home{height:62*@toVw;width:62*@toVw;background-position:0 0;}
.lookHP{height:62*@toVw;width:62*@toVw;background-position:0 -62*@toVw;.actBanKuai}
.playHP{height:62*@toVw;width:62*@toVw;background-position:0 -124*@toVw;.actBanKuai}
.funHP{height:62*@toVw;width:62*@toVw;background-position:0 -186*@toVw;.actBanKuai}
.defaultFun{height:62*@toVw;width:62*@toVw;background-position:0 -248*@toVw;}
.defaultLook{height:62*@toVw;width:62*@toVw;background-position:0 -310*@toVw;}
.defaultPlay{height:62*@toVw;width:62*@toVw;background-position:0 -372*@toVw;}
.header-h{
.defaultFun {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -248 * @toVw;
}
.defaultLook {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -310 * @toVw;
}
.defaultPlay {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -372 * @toVw;
}
.header-h {
display: block;
width: 62*@toVw;
width: 62 * @toVw;
position: absolute;
left: 17.5*@toVw;
top: 20*@toVw;
left: 17.5 * @toVw;
top: 20 * @toVw;
z-index: 2;
.headerHP{
.headerHP {
display: block;
img{width:42*@toVw;margin-left: 10*@toVw;margin-top: 5*@toVw; }
img {
width: 42 * @toVw;
margin-left: 10 * @toVw;
margin-top: 5 * @toVw;
}
}
}
.index-content-block{
.index-content-block {
position: absolute;
top: 20*@toVw;
left: 80*@toVw;
right: 20*@toVw;
bottom: 20*@toVw;
top: 20 * @toVw;
left: 80 * @toVw;
right: 20 * @toVw;
bottom: 20 * @toVw;
background: white;
border: 1*@toVw solid #000;
border-radius: 0 8*@toVw 8*@toVw 8*@toVw;
&.radius{
border-radius: 8*@toVw;
border: 1 * @toVw solid #000;
border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
&.radius {
border-radius: 8 * @toVw;
}
}
}
@media screen and (min-aspect-ratio: ~"20/8"){
@toVw:100/900vw;
.backImg{
@media screen and (min-aspect-ratio: ~"20/8") {
@toVw: 100/900vw;
.backImg {
position: fixed;
bottom: 40*@toVw;
right: 20*@toVw;
bottom: 40 * @toVw;
right: 20 * @toVw;
z-index: 99999999;
width: 60*@toVw;
width: 60 * @toVw;
}
.lessonHeader{
.lessonHeader {
display: none;
}
.header{
.header {
display: none;
}
.actBanKuai{
.actBanKuai {
background-color: white;
border: 1*@toVw solid transparent;
border: 1 * @toVw solid transparent;
border-left-color: black;
border-top-color: black;
border-bottom-color: black;
border-radius: 8*@toVw 0 0 8*@toVw;
border-radius: 8 * @toVw 0 0 8 * @toVw;
}
.headerHP{
.headerHP {
// background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index-h.png?v=2') no-repeat;
background-size:62*@toVw 434*@toVw;
background-size: 62 * @toVw 434 * @toVw;
display: inline-block;
&.lookHP{height:62*@toVw;width:62*@toVw;background-position:0 0;.actBanKuai}
&.defaultPlay{height:62*@toVw;width:62*@toVw;background-position:0 -62*@toVw;}
&.playHP{height:62*@toVw;width:62*@toVw;background-position:0 -124*@toVw;.actBanKuai}
&.defaultLook{height:62*@toVw;width:62*@toVw;background-position:0 -186*@toVw;}
&.home{height:62*@toVw;width:62*@toVw;background-position:0 -248*@toVw;}
&.defaultFun{height:62*@toVw;width:62*@toVw;background-position:0 -310*@toVw;}
&.funHP{height:62*@toVw;width:62*@toVw;background-position:0 -372*@toVw;.actBanKuai}
&.lookHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 0;
.actBanKuai;
}
&.defaultPlay {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -62 * @toVw;
}
&.playHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -124 * @toVw;
.actBanKuai;
}
&.defaultLook {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -186 * @toVw;
}
&.home {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -248 * @toVw;
}
&.defaultFun {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -310 * @toVw;
}
&.funHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -372 * @toVw;
.actBanKuai;
}
}
.header-h{
.header-h {
display: block;
width: 62*@toVw;
width: 62 * @toVw;
position: absolute;
left: 17.5*@toVw;
top: 20*@toVw;
left: 17.5 * @toVw;
top: 20 * @toVw;
z-index: 2;
.headerHP{
.headerHP {
display: block;
img{width:42*@toVw;margin-left: 10*@toVw;margin-top: 5*@toVw; }
img {
width: 42 * @toVw;
margin-left: 10 * @toVw;
margin-top: 5 * @toVw;
}
}
}
.index-content-block{
.index-content-block {
position: absolute;
top: 20*@toVw;
left: 80*@toVw;
right: 20*@toVw;
bottom: 20*@toVw;
top: 20 * @toVw;
left: 80 * @toVw;
right: 20 * @toVw;
bottom: 20 * @toVw;
background: white;
border: 1*@toVw solid #000;
border-radius: 0 8*@toVw 8*@toVw 8*@toVw;
&.radius{
border-radius: 8*@toVw;
border: 1 * @toVw solid #000;
border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
&.radius {
border-radius: 8 * @toVw;
}
}
}
......
src/components/newLesson/shareGoods - 副本.vue deleted 100644 → 0
View file @ 244ae216
<template>
<div>
<div class="share-good-page" ref="share_page">
<div class="share-good-head" v-if="userDetail" >
<img :src="shareGoodsBg" alt="">
<img class="head" :src="userDetail.user_info.avatar">
<div class="tip2"><p v-if="nickname">{{userDetail.user_info.nickname}}家宝宝</p><p>在「唱唱启蒙英语」累计学习</p></div>
<!-- <div class="title" :style="{backgroundImage:`url('${title_share_goods}')`}" >
{{userDetail.user_info.nickname}}
</div> -->
<div class="day">
{{userDetail.total_day}}
<p>
Days
</p>
</div>
<div class="textBox">
<!-- <p class="top">继续坚持</p> -->
<p class="btn">学无涯 行必知</p>
</div>
<!-- <div class="iknow" v-if="goodsDetail.current_price!=0" @click="toBuy(1)">
<img :src="btncoin" alt="">
</div>
<div class="iknow" v-if="goodsDetail.current_price==0" @click="toBuy(3)">
<img :src="btnfree" alt="">
</div> -->
<div class="Fml"><p>邀您一起带宝宝学习</p> <div>「<span>100万+</span>家庭推荐的哈佛英语启蒙课」</div>
<div class="line"></div>
</div>
<div class="nav" @click="move" v-if="goodsDetail">
<img class="move" :src="icon_point" alt="">
课程详情
<img class="move" :src="icon_point" alt="">
</div>
</div>
<div class="good-content" v-if="goodsDetail&&goodsDetail.desc&&goodsDetail.desc.detail">
<div class="content" v-html="goodsDetail.desc.detail">
</div>
<div class="btn-block" ref="btn_block">
<div class="lastTime">
距优惠结束仅剩 {{lastTime.day}} 天 {{lastTime.hour}} 时 {{lastTime.min}} 分 {{lastTime.second}} 秒
</div>
<div class="btn" @click="toBuy(2)" v-if="goodsDetail.current_price>100">
正在疯抢 · 超值VIP课程
</div>
<div class="btn" @click="toBuy(2)" v-if="goodsDetail.current_price==100">
1元领取 · 超值VIP课程
</div>
</div>
</div>
<!-- <div class="good-content" v-if="goodsDetail&&goodsDetail.goods_type==2">
<div class="content" v-html="goodsDetail.desc.detail">
</div>
<div class="btn-block" ref="btn_block">
<div class="lastTime">
优惠倒计时 {{lastTime.day}} 天 {{lastTime.hour}} 时 {{lastTime.min}} 分 {{lastTime.second}} 秒
</div>
<div class="btnBox">
<div class="btn slg" @click="toBuy(1)">
单独购&nbsp;&nbsp;￥{{goodsDetail.original_price/100}}
</div>
<div class="btn grp" @click="toBuy(3)">
{{goodsDetail.desc.group_number}}人团&nbsp;&nbsp;￥{{goodsDetail.current_price/100}}
</div>
</div>
</div>
</div> -->
</div>
<login-page v-if="goodsDetail" :bind-mobile="bindMobile" :groupDetail="goodsDetail" @goToBuyPage="goToBuyPage"></login-page>
</div>
</template>
<script>
import shareGoodsBg from '../../assets/newLesson/shareGoodsBg5.png'
import title_share_goods from '../../assets/newLesson/title-share-goods.png'
import btncoin from '../../assets/newLesson/btncoin.png'
import btnfree from '../../assets/newLesson/btnfree.png'
import icon_point from '../../assets/newLesson/icon_point@2x.png'
import {getOtherUserWatchApi,getShareGoodsApi} from "../../service/api";
import loginPage from '../buy/login'
import {Toast} from 'vant'
export default {
name: "shareGoods",
components: {loginPage},
data(){
return {
shareGoodsBg:shareGoodsBg,
title_share_goods:title_share_goods,
userDetail:null,
bindMobile:{
show:false,
mobile:'',
img_code:'',
verify_code:''
},
btncoin:btncoin,
btnfree:btnfree,
icon_point:icon_point,
shopId:null,
goodsDetail:null,
lastTime:localStorage.getItem('lastTimeShare')?JSON.parse(localStorage.getItem('lastTimeShare')):{day:0,hour:8,min:0,second:0},
nickname:""
}
},
methods:{
move(){
let moneyDom = document.getElementsByClassName('nav');
if(moneyDom.length>0){
console.log(moneyDom[0].offsetTop)
window.scrollTo(0,moneyDom[0].offsetTop);
}
// window.scrollTo(100,1200)
},
lastTimeOut(){
if(this.lastTime.second === 0 ){
this.lastTime.second = 59;
if(this.lastTime.min === 0 ){
this.lastTime.min = 59;
if(this.lastTime.hour === 0 ){
this.lastTime.hour = 8;
}else{
this.lastTime.hour--;
}
}else{
this.lastTime.min--;
}
}else{
this.lastTime.second--;
}
localStorage.setItem('lastTimeShare',JSON.stringify(this.lastTime))
},
initPage(){
Toast.loading({
mask: true,
message: ''
});
this.$sa.track('ViewInvitation',{
salesID:this.$route.query.userID,
});
console.log(JSON.parse(localStorage.getItem('userDesc')))
this.nickname = JSON.parse(localStorage.getItem('userDesc')).nickname
getOtherUserWatchApi(this.$route.query.userID).then(res=>{
res.user_info.avatar = res.user_info.avatar.replace('http://','https://');
this.userDetail = res
this.nickname= res.user_info.nickname
});
// this.shopId
getShareGoodsApi().then(res=>{
this.shopId = res.id;
res.desc = JSON.parse(res.desc)
res.goods_desc = JSON.parse(res.goods_desc);
this.goodsDetail = res
console.log(res)
setTimeout(() => {
this.goodsDetail = {}
this.goodsDetail = res
Toast.clear()
}, 500);
// debugger
// getGoodsDetailApi(this.shopId).then(res=>{
// res.desc = JSON.parse(res.desc)
// res.goods_desc = JSON.parse(res.goods_desc);
// this.goodsDetail = res
// })
})
},
goToBuyPage(type){
if(type==1){
window.location.href = `${process.env.API_URL}#/buy?shopId=${this.shopId}&type=single&invite_code=CC-UDK-${this.$route.query.userID}`
}else{
window.location.href = `${process.env.API_URL}#/buy?shopId=${this.shopId}&invite_code=CC-UDK-${this.$route.query.userID}`
}
},
toBuy(type){
if(this.goodsDetail.current_price==100){
this.$sa.track('buttonClick',{
tabTitle:'打卡商品页',
moduleTitle:'功能按钮',
buttonType:'购买',
buttonName:'1元领取 · 超值VIP课程'
});
}else{
this.$sa.track('buttonClick',{
tabTitle:'打卡商品页',
moduleTitle:'功能按钮',
buttonType:'购买',
buttonName:'正在疯抢.超值VIP课程'
});
}
if(!JSON.parse(localStorage.getItem('userDesc')).mobile|| JSON.parse(localStorage.getItem('userDesc')).mobile === ''){
this.bindMobile.show = true;
setTimeout(()=>{
this.$sa.track('ViewRegisterpage',{});
},1000)
}else{
this.goToBuyPage(type);
}
}
},
mounted(){
let that = this
this.initPage();
setInterval(()=>{this.lastTimeOut(
)},1000);
window.onscroll= ()=>{
//变量t是滚动条滚动时，距离顶部的距离
let t = document.documentElement.scrollTop||document.body.scrollTop;
if( this.$refs.btn_block){
if(t>500){
this.$refs.btn_block.style.opacity = 1
}else{
this.$refs.btn_block.style.opacity = 0
}
}
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
@-webkit-keyframes spin {
from {
-webkit-transform: translateY(-3*@toVw);
}
to {
-webkit-transform: translateY(3*@toVw);
}
}
@keyframes spin {
from {
transform: translateY(-3*@toVw);
}
to {
transform: translateY(3*@toVw);
}
}
.move{-webkit-animation: spin 2s linear 1s 5 alternate;animation: spin 2s linear infinite;}
.share-good-page{
// position: absolute;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
.share-good-head{
width: 100vw;
// height: 584*@toVw;
// margin-top: -64*@toVw;
// background-size: 100% 100%;
position: relative;
.textBox{position: absolute;top: 265*@toVw;left:142*@toVw ;text-align: center;color: #746D6E; font-size: 15*@toVw;
.top{ font-size: 17*@toVw;}
.btn{ font-size: 15*@toVw;}
}
.iknow{
position: absolute;
top: 415*@toVw;
width: 265*@toVw;
// height: 44*@toVw;
left: 58*@toVw;
}
.head{
position: absolute;
width: 60*@toVw;
height: 60*@toVw;
top: 42*@toVw;
left: 159*@toVw;
border-radius: 100*@toVw;
}
.tip2{
position: absolute;
width: 350*@toVw;
color: #746D6E;
font-size: 15*@toVw;
text-align: center;
top: 110*@toVw;
left: 13*@toVw;
}
.title{
position: absolute;
width: 225*@toVw;
height: 54*@toVw;
background-size: 100% 100%;
top: 175*@toVw;
left: 75*@toVw;
text-align: center;
color: white;
font-size: 20*@toVw;
line-height: 48*@toVw;
}
.day{
position: absolute;
top: 176*@toVw;
width: 100%;
text-align: center;
color: white;
font-size:40*@toVw;
font-family:PingFangSC-Semibold;
font-weight:bold;
p{
font-size:15*@toVw;
font-family:PingFangSC-Semibold;
// font-weight:bold;
line-height: 16*@toVw;
font-weight:300;
color:white;
}
}
.Fml{position: absolute;top:314*@toVw;left:56*@toVw;font-size: 15*@toVw;color: #55343A;
text-align: center;
p{line-height: 36*@toVw;color: #55343A;}
div{color: #6A3028;font-weight: bold; }
.line{width: 95%;height: 4*@toVw;background: #F6C9A2;opacity: 0.44;position: relative;top: -5*@toVw;}
span{color: #E17640;}
}
.nav{position: absolute;top:412*@toVw;left: 108*@toVw;
img{width: 10*@toVw;}
width: 157*@toVw;height: 30*@toVw;
line-height: 30*@toVw;
border-radius: 15*@toVw;
background: #F98F55;
text-align: center;
color: white;}
}
.good-content{
background: #F4CAA2;
padding: 0 15*@toVw 80*@toVw 15*@toVw;
position: relative;
top: -5*@toVw;
.content{
// background: white;
border-radius: 8*@toVw;
overflow: hidden;
// padding: 10*@toVw;
};
}
.btn-block{
position: fixed;
padding: 10*@toVw 0 ;
left: 0;
width: 100%;
background: white;
opacity: 0;
transition: all 0.5s;
bottom: 0;
.lastTime{
top: -30*@toVw;
height: 30*@toVw;
line-height: 30*@toVw;
color: #FF785D;
background: #FFE543;
position: absolute;
text-align: center;
left: 0;
width: 100%;
}
.btnBox{
display: flex;
padding:0 29*@toVw;
.slg{background: white;color: #666666;border: 1px solid #666666;box-sizing: border-box;margin-right: 10*@toVw;}
}
.btn{
width: 287*@toVw;
height: 44*@toVw;
margin: auto;
background: #FF785D;
border-radius: 100*@toVw;
color: white;
line-height: 44*@toVw;
text-align: center;
font-size:18*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
}
}
</style>
<style>
img{
max-width: 100% !important;
}
</style>
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