Skip to content

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

828

parent 907a61a1
Hide whitespace changes
Inline Side-by-side
Showing with 393 additions and 377 deletions
src/components/activity/extensionV1.vue
View file @ 84593b1d
<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>
<img :src="img1" alt="">
<img :src="img2" alt="">
<img :src="img3" alt="">
<img :src="img4" alt="">
<div class="btn1 btn" @click="nav" ></div>
<div class="btn2 btn" @click="nav" ></div>
<div class="btn3 btn" @click="nav" ></div>
<div class="btn4 btn" @click="nav" ></div>
<div class="btn5 btn" @click="nav" ></div>
</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 img1 from "../../assets/spcShop/11@2x.png";
import img2 from "../../assets/spcShop/12@2x.png";
import img3 from "../../assets/spcShop/13@2x.png";
import img4 from "../../assets/spcShop/14@2x.png";
import {
getCourseInfoApi,
getLuckDrawApi,
getLuckDrawStatusApi,
getLuckDrawRamdomsApi
} from "../../service/api";
import { Notify, Popup, Toast } from "vant";
import { Notify} from "vant";
export default {
name: "index",
name: "extensionV1",
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:''
img1: img1,
img2: img2,
img3: img3,
img4: img4,
};
},
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();
});
nav(){
this.$router.push({name:'extensionV1Shop',query:{shopId:2}})
}
},
mounted() {
this.initPage();
this.$sa.track("view61page", {
});
// 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 {
.ly-activity-page{
position: relative;
img{
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 {
.btn{
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;
}
}
width: 210 * @toVw;
height: 50 * @toVw;
background: transparent;
z-index: 10;
top: 0;
left: 90 * @toVw;
}
.btn1{
top: 264 * @toVw;
}
.btn2{
top: 624 * @toVw;
}
.btn3{
top: 1224 * @toVw;
}
.btn4{
top: 1754 * @toVw;
}
.btn5{
top: 2334 * @toVw;
}
}
</style>
src/components/activity/extensionV1Shop.vue 0 → 100644
View file @ 84593b1d
<template>
<div class="activity">
<img v-lazy="img1" alt />
<div class="form-block">
<div class="input-block">
<input
placeholder="请输入手机号"
autofocus="autofocus"
type="number"
pattern="[0-9]*"
v-model="mobile"
/>
</div>
<div class="input-block">
<input
placeholder="请输入短信验证码"
oninput="if(value.length>4)value=value.slice(0,4)"
type="number"
maxlength="4"
pattern="[0-9]*"
v-model="msgCode"
/>
<button class="codeMsg right-btn" @click="sendMobileCode" v-if="time===0">发送验证码</button>
<button class="codeMsg disabled right-btn" v-if="time>0">{{time}}s后重新发送</button>
</div>
<div class="btn-block">
<div class="btn" ref="btn" @click="bindMobile">领取99元特惠课</div>
</div>
<div class="tip">
<img :src="lock" alt />&nbsp;唱唱会保护您的隐私 请放心输入
</div>
</div>
<img v-lazy="img2" alt />
<img v-lazy="img3" alt />
<img v-lazy="img4" alt />
<div class="nav" @click="navTo" ref="nav">
<div class="btn">立即领取</div>
</div>
</div>
</template>
<script>
import { spcShopImg } from "../../util/imgUrl";
import img1 from "../../assets/spcShop/21@2x.png";
import img2 from "../../assets/spcShop/22@2x.png";
import img3 from "../../assets/spcShop/23@2x.png";
import img4 from "../../assets/spcShop/24@2x.png";
import lock from "../../assets/spcShop/icon_lock@2x.png";
import { Toast } from "vant";
import {
sendMobileCodeApi,
getUserDetailApi,
bindMobileApi,
getGoodsDetailApi
} from "../../service/api";
export default {
name: "extensionV1Shop",
data() {
return {
inviteList: [],
img1: img1,
img2: img2,
img3: img3,
img4: img4,
lock: lock,
imgCode: "",
msgCode: "",
time: 0,
mobile: ""
};
},
filters: {},
mounted() {
window.onscroll = () => {
//变量t是滚动条滚动时，距离顶部的距离
let t = document.documentElement.scrollTop || document.body.scrollTop;
if (this.$refs.nav) {
if (t > 300) {
this.$refs.nav.style.opacity = 1;
} else {
this.$refs.nav.style.opacity = 0;
}
}
};
if (!this.$route.query.shopId) {
this.$router.push("error");
return;
} else {
getGoodsDetailApi(this.$route.query.shopId).then(res => {});
}
},
methods: {
navTo() {
window.scrollTo(0, 0);
},
bindMobile() {
this.$sa.quick("trackHeatMap", this.$refs.btn);
if (this.msgCode === "" || !this.msgCode) {
Toast("请填写手机验证码");
return false;
}
let json = {
verify_code: this.msgCode
};
let mobileCheck = /^1\d{10,11}$/;
if (this.mobile.match(mobileCheck)) {
json.mobile = this.mobile;
} else {
Toast("请正确填写手机号");
return false;
}
if (window.location.href.indexOf("teacher_id") > -1) {
json.teacher_id =
common.getParamhref().teacher_id || this.$route.query.teacher_id;
}
json.source = "login";
let query = { shopId: this.$route.query.shopId, type: "" };
if (this.$route.query.invite_code) {
query.invite_code = this.$route.query.invite_code;
}
if (localStorage.getItem("gdt_vid")) {
query.gdt_vid = localStorage.getItem("gdt_vid");
}
if (window.location.href.indexOf("cct_user_id") > -1) {
query.cct_user_id = comment.getParamhref().cct_user_id;
}
console.log(json);
bindMobileApi(json)
.then(data => {
getUserDetailApi().then(res => {
localStorage.setItem("userDesc", JSON.stringify(res));
this.$router.push({
name: "buy",
query: query
});
});
})
.catch(res => {});
},
refImgCode() {
this.$refs.imgCode.src = "/api/public/img/verify?flag=" + Math.random();
},
sendMobileCode() {
let mobileCheck = /^1\d{10,11}$/;
console.log(this.mobile);
let json = {};
if (this.mobile.match(mobileCheck)) {
json.mobile = this.mobile;
} else {
Toast("请正确填写手机号");
return false;
}
// json.img_code = this.imgCode
this.time = 30;
this.timeO();
this.$sa.track("clickSendcode", {});
sendMobileCodeApi(json)
.then(res => {
if (res === "操作成功") {
Toast("验证码已发送");
} else {
this.time = 0;
Toast(res);
}
})
.catch(res => {});
},
timeO() {
if (this.time > 0) {
this.time--;
setTimeout(() => {
this.timeO();
}, 1000);
}
}
}
};
</script>
<style>
img,
video {
max-width: 100%;
}
</style>
<style scoped lang="less">
@import "../../util/public";
@red: #fc4a1b;
@borderRadius: 8px;
.activity {
background-color: #f9d048;
.codeMsg {
border-radius: 4 * @toVw;
border: 1 * @toVw solid rgba(96, 173, 240, 1);
background: white;
color: rgb(96, 173, 240);
outline: none;
float: right;
padding: 8 * @toVw 16 * @toVw;
&.disabled {
opacity: 0.5;
}
}
.form-block {
// position: relative;
z-index: 10;
background: #f9d048;
// top: -42*@toVw;
padding: 20 * @toVw;
// border-radius:20*@toVw;
.tip {
font-size: 12 * @toVw;
color: #952700;
text-align: center;
margin-top: 16px;
img{
width: 11* @toVw;
position: relative;
top: 2* @toVw;
}
}
.input-block {
width: 273 * @toVw;
height: 47 * @toVw;
line-height: 47 * @toVw;
text-indent: 10 * @toVw;
border: 1 * @toVw dashed #952700;
margin-bottom: 18 * @toVw;
position: relative;
.img {
position: absolute;
right: 10 * @toVw;
width: 100 * @toVw;
top: 10 * @toVw;
font-size: 12 * @toVw;
}
.right-btn {
position: absolute;
right: 10 * @toVw;
padding: 0;
width: 100 * @toVw;
top: 10 * @toVw;
height: 25 * @toVw;
line-height: 25 * @toVw;
font-size: 12 * @toVw;
}
input {
padding: 10 * @toVw 0;
font-size: 14 * @toVw;
background: transparent;
font-family: PingFangSC-Semibold;
font-weight: 600;
color: rgba(0, 0, 0, 1);
line-height: 20 * @toVw;
outline: none;
border: none;
&::-webkit-input-placeholder {
font-size: 14 * @toVw;
font-family: PingFangSC-Semibold;
font-weight: 600;
color: #952700;
line-height: 20 * @toVw;
} /* 使用webkit内核的浏览器 */
&:-moz-placeholder {
font-size: 14 * @toVw;
font-family: PingFangSC-Semibold;
font-weight: 600;
color: #952700;
line-height: 20 * @toVw;
} /* Firefox版本4-18 */
&::-moz-placeholder {
font-size: 14 * @toVw;
font-family: PingFangSC-Semibold;
font-weight: 600;
color: #952700;
line-height: 20 * @toVw;
} /* Firefox版本19+ */
&:-ms-input-placeholder {
font-size: 14 * @toVw;
font-family: PingFangSC-Semibold;
font-weight: 600;
color: #952700;
line-height: 20 * @toVw;
}
}
}
.btn-block {
text-align: center;
margin-top: 27 * @toVw;
.btn {
width: 190 * @toVw;
height: 35 * @toVw;
background: #f83a2a;
color: white;
line-height: 35 * @toVw;
border-radius: 23 * @toVw;
font-size: 16 * @toVw;
}
}
}
.nav {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
opacity: 0;
transition: all 0.5s;
background: white;
height: 63 * @toVw;
z-index: 1000;
padding: 7 * @toVw 15 * @toVw;
box-sizing: border-box;
.btn {
background: #ff7d77;
height: 50 * @toVw;
color: white;
text-align: center;
line-height: 50 * @toVw;
border-radius: 24 * @toVw;
font-size: 20 * @toVw;
}
}
}
</style>
src/router/index.js
View file @ 84593b1d
......@@ -40,6 +40,24 @@ const router = new Router({
title: '唱唱启蒙'
}
},
{
path: '/extensionV1Shop',
name: 'extensionV1Shop',
component: () => import('@/components/activity/extensionV1Shop'),//
meta: {
deep: 0,
noNew: true,
}
},
{
path: '/extensionV1',
name: 'extensionV1',
component: () => import('@/components/activity/extensionV1'),//
meta: {
deep: 0,
noNew: true,
}
},
{
path: '/guideActivity',
name: 'guideActivity',
......
src/service/index.js
View file @ 84593b1d
......@@ -15,7 +15,7 @@ axios.interceptors.request.use(
config => {
// 获取token
// process.env.versionTime
let versiontime = '080221100'
let versiontime = '080281100'
const token = localStorage.getItem('cc_token');
// 设置参数格式
if (!config.headers['Content-Type']) {
......
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