Skip to content

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

Merge branch 'dev' into pre

parents a9da9052 84593b1d
Hide whitespace changes
Inline Side-by-side
Showing with 426 additions and 1 deletion
src/components/activity/extensionV1.vue 0 → 100644
View file @ b18d5251
<template>
<div class="ly-activity-page">
<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 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,
} from "../../service/api";
import { Notify} from "vant";
export default {
name: "extensionV1",
data() {
return {
img1: img1,
img2: img2,
img3: img3,
img4: img4,
};
},
components: {
},
methods: {
initPage() {
},
nav(){
this.$router.push({name:'extensionV1Shop',query:{shopId:2}})
}
},
mounted() {
this.initPage();
// this.$sa.track("view61page", {
// });
}
};
</script>
<style scoped lang="less">
@import "../../util/public";
.ly-activity-page{
position: relative;
img{
width: 100%;
}
.btn{
position: absolute;
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 @ b18d5251
<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/components/buy/spcShop.vue
View file @ b18d5251
...@@ -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;
......
src/router/index.js
View file @ b18d5251
...@@ -40,6 +40,24 @@ const router = new Router({ ...@@ -40,6 +40,24 @@ const router = new Router({
title: '唱唱启蒙' 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', path: '/guideActivity',
name: 'guideActivity', name: 'guideActivity',
......
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