Skip to content

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

828

parent e02d0aa4
Show whitespace changes
Inline Side-by-side
Showing with 410 additions and 1 deletion
src/components/activity/extensionV1.vue 0 → 100644
View file @ 907a61a1
<template>
<div class="ly-activity-page">
<img class="bg" :src="Bgimg" alt>
<div class="news" v-if="username">
<div class="shadow"></div>
<div class="text">
<span class="name">{{username}}</span> <span>获得{{goods[goodsIndex]}}</span>
</div>
</div>
<div class="luckBox">
<img :class="{swin:playFlag,swinThirty:playFlag3,radius}" :src="radius" alt>
<img class="imgLight" :src="light?imgLight:imgLight2" alt>
<img class="point" :src="point" alt>
<div @click="begin" ref="frist" v-if="pointStatus==1" class="text frist">
<p>点击</p>
<p>抽奖</p>
</div>
<div v-if="pointStatus==2" class="text">
<p>正在</p>
<p>抽奖</p>
</div>
<div @click="showDialog" ref="goindex" v-if="pointStatus==3" class="text goindex">
<p>查看</p>
<p>奖励</p>
</div>
<div @click="secBegin" ref="second" v-if="pointStatus==4" class="text second">
<p>再抽</p>
<p>一次</p>
</div>
</div>
<div class="textBox1">
<p>你有{{count}}次抽奖机会，100%中奖哦!</p>
<p>已有{{total}}人领取了礼物</p>
</div>
<div class="textBox2">
<p>1. 活动截止时间：6月3日23:59:59；</p>
<p>2. 活动期间有2次抽奖机会，每次都是100%中奖率；</p>
<p>3. 抽中实体礼品的用户，请至【我的订单】点击所获礼品，填写收货地址领取礼品，领取有效期为30天，过期则视为自动放弃礼品；</p>
<p>4. 100首精选童谣、迪士尼英文动漫为电子资源，请抽中电子资源的用户按照抽中后指引去领取下载；</p>
<p>5. 奖学金优惠券有效期为3天，请抽中优惠券的用户尽量在3天内使用，过期作废，优惠券适用于报名21天训练营；</p>
<p>6. 活动最终解释权归唱唱启蒙英语所有。</p>
</div>
<van-popup v-model="show" position='top' :overlayStyle="overlay" :overlay="true">
<img class="close" @click="closeFn" :src="close" alt>
<div class="content">
<img class="main" :src="lydialog" alt>
<div v-if="pointStatus==4" class="price">
<span>10</span>元
</div>
<div v-if="pointStatus==3" class="price">
<span>30</span>元
</div>
<div @click="goDetail" ref="toShopD" class="btn toShopD">立即使用</div>
</div>
</van-popup>
</div>
</template>
<script>
import Bgimg from "../../assets/activity/img_bgLY.png";
import radius from "../../assets/activity/radius.png";
import point from "../../assets/activity/point.png";
import close from "../../assets/activity/close.png";
import lydialog from "../../assets/activity/lydialog.png";
import imgLight from "../../assets/activity/light@2x.png";
import imgLight2 from "../../assets/activity/light2@2x.png";
import {
getCourseInfoApi,
getLuckDrawApi,
getLuckDrawStatusApi,
getLuckDrawRamdomsApi
} from "../../service/api";
import { Notify, Popup, Toast } from "vant";
export default {
name: "index",
data() {
return {
Bgimg: Bgimg,
radius: radius,
point: point,
close: close,
lydialog: lydialog,
imgLight: imgLight,
imgLight2: imgLight2,
overlay: {
opacity: 0.97
},
show: false,
playFlag: false,
playFlag3: false,
pointStatus: "1",
userCourse: {},
light: false,
count: "",
goods:[
'迪士尼英文动漫',
'30元奖学金',
'儿童水彩笔套装',
'100首精选童谣',
'10元奖学金',
'小猪佩奇绘本'
],
goodsIndex:1,
userArr:[],
username:'',
total:''
};
},
components: {
[Popup.name]: Popup
},
methods: {
onBridgeReady() {
WeixinJSBridge.call("hideOptionMenu");
},
goDetail() {
this.$sa.quick("trackHeatMap", this.$refs.toShopD);
this.$router.push({
name: "buyDetail",
query: {
shopId: this.userCourse.goods_id,
invite_code: this.userCourse.invite_code
}
});
},
closeFn() {
this.show = false;
},
showDialog() {
// this.show=true;
// this.$router.push()
this.$sa.quick('trackHeatMap',this.$refs.goindex)
this.$store.dispatch('setCouponShadow',true)
this.$router.push({
name: "index"
});
},
initPage() {
getLuckDrawRamdomsApi().then(res =>{
this.userArr = res.user
this.total = res.number
setInterval(()=>{
this.goodsIndex = Math.floor(Math.random() * this.goods.length)
this.username = this.userArr[Math.floor(Math.random() * this.userArr.length)].nickname
},3000)
})
Toast.loading({
mask: true,
message: ""
});
getCourseInfoApi().then(res => {
this.userCourse = res;
localStorage.setItem("userCourse", JSON.stringify(this.userCourse));
});
getLuckDrawStatusApi().then(res => {
console.log(res);
this.count = res.times;
if (res.times == 2) {
this.pointStatus = 1;
} else if (res.times == 1) {
this.pointStatus = 4;
} else {
this.pointStatus = 3;
}
Toast.clear();
});
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener(
"WeixinJSBridgeReady",
this.onBridgeReady,
false
);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady);
document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady);
}
} else {
this.onBridgeReady();
}
console.log(JSON.parse(localStorage.getItem("userCourse")));
this.userCourse = JSON.parse(localStorage.getItem("userCourse"));
let lightBegin = setInterval(() => {
this.light = !this.light;
// console.log(this.light)
}, 200);
},
begin() {
this.playFlag = true;
let that = this;
// Pointer
this.$sa.quick('trackHeatMap',this.$refs.frist)
getLuckDrawApi().then(res => {});
this.pointStatus = "2";
// let lightBegin = setInterval(() => {
// this.light = !this.light;
// }, 200);
setTimeout(function() {
that.pointStatus = "4";
// that.playFlag = false
// clearInterval(lightBegin);
}, 5000);
setTimeout(function() {
that.show = true;
that.$sa.track("viewprizewindow", {});
}, 5000);
getLuckDrawStatusApi().then(res => {
console.log(res);
this.count = res.times;
});
},
secBegin() {
this.$sa.quick('trackHeatMap',this.$refs.second)
this.playFlag3 = true;
let that = this;
getLuckDrawApi().then(res => {});
this.pointStatus = "2";
// let lightBegin = setInterval(() => {
// this.light = !this.light;
// }, 200);
setTimeout(function() {
that.pointStatus = "3";
}, 5000);
setTimeout(function() {
that.show = true;
that.$sa.track("viewprizewindow", {});
}, 5000);
getLuckDrawStatusApi().then(res => {
console.log(res);
this.count = res.times;
Toast.clear();
});
}
},
mounted() {
this.initPage();
this.$sa.track("view61page", {
});
}
};
</script>
<style scoped lang="less">
@import "../../util/public";
@-webkit-keyframes ten {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(3780deg);
}
}
@-webkit-keyframes thirty {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(3600deg);
}
}
.swin {
-webkit-animation: ten 4s ease;
-webkit-animation-fill-mode: forwards;
}
.swinThirty {
-webkit-animation: thirty 4s ease;
-webkit-animation-fill-mode: forwards;
}
.ly-activity-page {
background: #fff5e5;
overflow: hidden;
width: 100%;
// padding-top: 203 * @toVw;
.news {
position: absolute;
width: 170 * @toVw;
height: 19 * @toVw;
top: 10 * @toVw;
line-height: 19 * @toVw;
border-radius: 19 * @toVw;
overflow: hidden;
text-align: center;
left: 102 * @toVw;
font-size: 10 * @toVw;
.shadow {
position: absolute;
width: 170 * @toVw;
height: 19 * @toVw;
top: 0;
left: 0;
background: rgba(25, 38, 99, 1);
opacity: 0.3;
}
.text {
color: white;
position: relative;
z-index: 1;
// display: flex;
.name {
display: inline-block;
max-width: 50 * @toVw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
span{display: inline-block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
// div{display: inline-block;position: relative;top: -5* @toVw;}
}
}
.bg {
width: 100%;
}
.luckBox {
width: 100%;
position: absolute;
top: 203 * @toVw;
text-align: center;
overflow: hidden;
img {
width: 320 * @toVw;
}
.radius{-webkit-transform:rotate(30deg); }
.point {
position: absolute;
top: 103 * @toVw;
width: 98 * @toVw;
// height: 102 * @toVw;
left: 139 * @toVw;
}
.text {
position: absolute;
top: 137 * @toVw;
width: 98 * @toVw;
left: 139 * @toVw;
font-size: 19 * @toVw;
color: white;
font-weight: bold;
}
.imgLight {
width: 318 * @toVw;
position: absolute;
top: 2 * @toVw;
left: 30 * @toVw;
}
}
.textBox1 {
color: #b4513e;
font-size: 14 * @toVw;
position: absolute;
top: 533 * @toVw;
width: 100%;
text-align: center;
}
.textBox2 {
position: absolute;
top: 669 * @toVw;
text-align: left;
width: 100%;
font-size: 12 * @toVw;
color: #424242;
p {
width: 277 * @toVw;
margin-bottom: 16 * @toVw;
line-height: 18 * @toVw;
}
}
.van-popup {
background: transparent;
width: 100%;
.close {
position: absolute;
right: 40 * @toVw;
width: 25 * @toVw;
top: 70 * @toVw;
}
.main {
width: 100%;
}
.price {
position: absolute;
left: 150 * @toVw;
top: 290 * @toVw;
color: #eb4e2c;
font-weight: bold;
span {
font-size: 50 * @toVw;
}
}
.btn {
display: inline-block;
position: absolute;
left: 84 * @toVw;
top: 440 * @toVw;
width: 205 * @toVw;
height: 42 * @toVw;
text-align: center;
line-height: 42 * @toVw;
background: #f9ea7e;
font-weight: bold;
color: #eb4e2c;
border-radius: 90 * @toVw;
}
}
}
</style>
src/components/buy/spcShop.vue
View file @ 907a61a1
...@@ -72,7 +72,6 @@ import {sendMobileCodeApi,getUserDetailApi,bindMobileApi,getGoodsDetailApi} from ...@@ -72,7 +72,6 @@ import {sendMobileCodeApi,getUserDetailApi,bindMobileApi,getGoodsDetailApi} from
}, },
bindMobile(){ bindMobile(){
this.$sa.quick('trackHeatMap',this.$refs.btn) this.$sa.quick('trackHeatMap',this.$refs.btn)
if(this.msgCode===''||!this.msgCode) { if(this.msgCode===''||!this.msgCode) {
Toast('请填写手机验证码'); Toast('请填写手机验证码');
return false; return false;
......
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