317 lines
8.6 KiB
Vue
317 lines
8.6 KiB
Vue
<template>
|
||
<OutMask :bg="bg">
|
||
<!-- 未登录 -->
|
||
<div
|
||
v-if="!landSuccess"
|
||
class="landContent"
|
||
:class="bg ? 'mobileLand' : ''"
|
||
>
|
||
<div class="title" :class="bg ? '' : 'color'">
|
||
<span>星线网络</span>
|
||
</div>
|
||
<div class="formData">
|
||
<div class="formItem">
|
||
<span v-if="!bg" class="label color">手机号码</span>
|
||
<div class="tipsBox">
|
||
<input
|
||
v-model="tel_number"
|
||
type="text"
|
||
class="tel"
|
||
placeholder="输入手机号码"
|
||
@blur="telBlur"
|
||
@focus="telFocus"
|
||
/>
|
||
<div v-if="telError" class="error">{{ telErrorTip }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="formItem">
|
||
<span v-if="!bg" class="label codeLabel color">验证码</span>
|
||
<div class="tipsBox">
|
||
<input
|
||
v-model="code"
|
||
type="text"
|
||
class="code"
|
||
placeholder="输入验证码"
|
||
@focus="codeFocus"
|
||
@blur="codeBlur"
|
||
/>
|
||
<div v-if="codeError" class="error">{{ codeTips }}</div>
|
||
</div>
|
||
<span
|
||
class="codeText"
|
||
:class="`${send ? 'send' : ''} ${bg ? '' : 'color'}`"
|
||
@click="sendCode"
|
||
>{{ codeText }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="orderBtn" @click="orderFn"></div>
|
||
<p class="tipsText org">本页面将于9月1日 15:00关闭</p>
|
||
|
||
<div :class="bg ? 'm_close_btn' : 'close_btn'" @click="closeLand()"></div>
|
||
</div>
|
||
<!-- 登陆成功 -->
|
||
<div v-else class="landSuccess">
|
||
<div class="title" :class="bg ? '' : 'color'">星线网络</div>
|
||
<!-- 有中奖信息 -->
|
||
<div v-if="getSuccess" class="getSuccess">
|
||
<a download :href="downloadUrl" class="orderBtn"></a>
|
||
<div class="tipsBox">
|
||
<p class="tipsText">
|
||
为了便于您的测试，请尽量加入官方Q群：
|
||
</p>
|
||
<p class="tipsText dan">
|
||
719204884
|
||
</p>
|
||
<p class="tipsText org">本页面将于9月1日 15:00关闭</p>
|
||
</div>
|
||
</div>
|
||
<!-- 没有中奖信息 -->
|
||
<div v-else class="failBox">
|
||
<p class="getFailed">未查询到资格中奖信息。</p>
|
||
<p class="tipsText org">
|
||
如有疑问请联系Q群管理员，管理员QQ:1546365016
|
||
</p>
|
||
</div>
|
||
<div :class="bg ? 'm_close_btn' : 'close_btn'" @click="closeLand()"></div>
|
||
</div>
|
||
</OutMask>
|
||
</template>
|
||
|
||
<script>
|
||
import { tapLogin, getCode } from "../api/data.js";
|
||
// import { getCode } from "../api/data.js";
|
||
|
||
export default {
|
||
components: {
|
||
OutMask: () => import("./outMask.vue"),
|
||
},
|
||
props: {
|
||
bg: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
tel_number: "",
|
||
code: "",
|
||
telError: false,
|
||
telErrorTip: "请输入正确的手机号",
|
||
codeText: "获取验证码",
|
||
codeTips: "验证码错误",
|
||
codeError: false,
|
||
send: false,
|
||
second: 20,
|
||
landSuccess: false,
|
||
getSuccess: true,
|
||
getLink: true,
|
||
codeBtnType: 0,
|
||
timerLife: 0,
|
||
blur: false,
|
||
ip: "",
|
||
downloadUrl: "",
|
||
};
|
||
// 60s后重新发送
|
||
},
|
||
watch: {
|
||
codeBtnType() {
|
||
if (this.codeBtnType === 1) {
|
||
const lstTime = localStorage.getItem("CodeRequestTime")
|
||
? parseInt(localStorage.getItem("CodeRequestTime"))
|
||
: 0;
|
||
const curTime = Date.parse(new Date()) / 1000;
|
||
if (curTime - lstTime < 60 && curTime !== lstTime)
|
||
this.timerLife = 60 - curTime + lstTime;
|
||
else this.timerLife = 60;
|
||
this.codeTip = this.timerLife + "s后可重新发送";
|
||
window.setTimeout(this.codeTick, 1000);
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
this.ip = this.$store.state.storageData.headers["x-real-ip"];
|
||
const token = this.$cookies.get("token");
|
||
this.downloadUrl = this.$cookies.get("download_url");
|
||
console.log(this.downloadUrl);
|
||
if (token) {
|
||
this.landSuccess = true;
|
||
}
|
||
if (this.downloadUrl) {
|
||
this.getLink = true;
|
||
} else {
|
||
this.getLink = false;
|
||
}
|
||
},
|
||
methods: {
|
||
telBlur() {
|
||
document.body.scrollTop = 0;
|
||
const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; // 11位手机号码正则
|
||
if (this.tel_number === "" || !regTel.test(this.tel_number)) {
|
||
this.telError = true;
|
||
// alert("没有手机号");
|
||
if (this.bg) {
|
||
setTimeout(() => {
|
||
this.telError = false;
|
||
}, 2000);
|
||
}
|
||
return false;
|
||
} else {
|
||
this.telError = false;
|
||
return true;
|
||
}
|
||
},
|
||
telFocus() {
|
||
this.telError = false;
|
||
this.blur = false;
|
||
},
|
||
codeFocus() {
|
||
this.blur = false;
|
||
|
||
// alert('可恶的验证码')
|
||
},
|
||
codeBlur() {
|
||
this.blur = true;
|
||
},
|
||
// 获取验证码
|
||
sendCode() {
|
||
if (this.codeBtnType === 1) return;
|
||
|
||
if (!this.telBlur()) {
|
||
return;
|
||
}
|
||
const source = this.$route.query.source;
|
||
|
||
getCode({
|
||
mobile: this.tel_number,
|
||
source,
|
||
ip: this.ip,
|
||
})
|
||
.then((response) => {
|
||
if (response.code === 200) {
|
||
this.dueCodeSuccessSend();
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
if (!err.data.data || !err.data.data.msg) return;
|
||
this.telError = true;
|
||
this.telErrorTip = err.data.msg;
|
||
if (this.bg) {
|
||
setTimeout(() => {
|
||
this.telError = false;
|
||
}, 3000);
|
||
}
|
||
});
|
||
// this.send = true;
|
||
// this.codeText = this.second + "s后重新发送";
|
||
// setTimeout(() => {
|
||
// this.sendTxt();
|
||
// }, 1000);
|
||
},
|
||
codeTick() {
|
||
this.timerLife -= 1;
|
||
const intelVal = this.timerLife;
|
||
if (intelVal === 0) {
|
||
this.codeBtnType = 0;
|
||
this.codeText = "获取验证码";
|
||
} else {
|
||
this.codeText = intelVal + "s后可重新发送";
|
||
window.setTimeout(this.codeTick, 1000);
|
||
}
|
||
},
|
||
dueCodeSuccessSend() {
|
||
localStorage.setItem(
|
||
"CodeRequestTime",
|
||
(Date.parse(new Date()) / 1000).toString()
|
||
);
|
||
this.codeBtnType = 1;
|
||
},
|
||
// 登陆
|
||
orderFn() {
|
||
if (!this.telBlur()) return;
|
||
if (this.code === "") {
|
||
this.codeError = true;
|
||
if (this.bg) {
|
||
setTimeout(() => {
|
||
this.codeError = false;
|
||
}, 3000);
|
||
}
|
||
return;
|
||
}
|
||
|
||
this.telError = false;
|
||
this.codeError = false;
|
||
// const source = this.$route.query.source;
|
||
|
||
tapLogin({
|
||
mobile: this.tel_number,
|
||
code: this.code,
|
||
})
|
||
.then((res) => {
|
||
const { code, msg, data } = res;
|
||
if (code === 200) {
|
||
// 有资格
|
||
const millisecond = new Date().getTime();
|
||
const expiresTime = new Date(millisecond + 60 * 1000 * 5);
|
||
this.landSuccess = true;
|
||
if (data.download_url) {
|
||
// 能下载
|
||
this.downloadUrl = data.download_url;
|
||
this.getLink = true;
|
||
this.getSuccess = true;
|
||
this.$cookies.set("download_url", data.download_url, {
|
||
path: "/",
|
||
expires: expiresTime,
|
||
});
|
||
} else {
|
||
// 不能下载
|
||
this.getLink = false;
|
||
}
|
||
this.$cookies.set("token", this.tel_number, {
|
||
path: "/",
|
||
expires: expiresTime,
|
||
});
|
||
}
|
||
if (code === 1002) {
|
||
// 验证码错误
|
||
this.codeError = true;
|
||
this.codeTips = msg;
|
||
if (this.bg) {
|
||
setTimeout(() => {
|
||
this.codeError = false;
|
||
}, 3000);
|
||
}
|
||
} else if (code === 1003) {
|
||
// 没有资格
|
||
this.landSuccess = true;
|
||
this.getSuccess = false;
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
// if (!err.data.msg) return;
|
||
// if (err.data.code === 1406) {
|
||
// console.log(1);
|
||
// } else if (err.data.code === 1407) {
|
||
// this.landSuccess = false;
|
||
// this.getSuccess = false;
|
||
// if (this.bg) {
|
||
// setTimeout(() => {
|
||
// this.telError = false;
|
||
// }, 3000);
|
||
// }
|
||
// }
|
||
});
|
||
},
|
||
|
||
closeLand() {
|
||
this.$emit("closeLand");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "../assets/scss/land.scss";
|
||
</style>
|