<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-15 10:20:56
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-06-16 11:34:10
|
* @Description: 登录页面
|
-->
|
<template>
|
<div class="login-page">
|
<div class="logo-box">
|
<div class="logo-img-box">
|
<img src="../../../static/img/logo.png" alt="logo" class="logo-pic" />
|
</div>
|
<p>爱享学</p>
|
</div>
|
<h-ipt
|
icon="iconxingming"
|
:maxlength="11"
|
type="text"
|
:getClose="true"
|
v-model="mblNo"
|
placeholder="请输入手机号"
|
class="myipt"
|
></h-ipt>
|
<h-ipt icon="iconmima" :maxlength="6" v-model="verCode" placeholder="请输入短信验证码" class="myiptTwo">
|
<template slot="right">
|
<div>
|
<button
|
class="getcode"
|
:disabled="btnDis"
|
:style="btnDis?'color:#E6E6E6':'color:#62A0FF'"
|
@click="sendCode"
|
>{{btnText}}</button>
|
</div>
|
</template>
|
</h-ipt>
|
<div class="text-box">
|
<van-checkbox v-model="checked" shape="round" icon-size="16px">
|
<template #default>
|
<p class="xieyi">
|
<span>我已阅读并同意</span>
|
<span @click.stop="showAgree(1)">《隐私政策》</span>
|
<span @click.stop="showAgree(2)">《用户注册服务协议》</span>
|
</p>
|
</template>
|
</van-checkbox>
|
</div>
|
<div class="btn-box">
|
<button @click="loginBut">登录</button>
|
</div>
|
<!-- <div class="idcard-box">
|
<upLoadIdCard :cardBack="idCardMation.idBackUrl" :cardFont="idCardMation.idFrontUrl"></upLoadIdCard>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import { mapActions } from "vuex";
|
import Vue from "vue";
|
import { RadioGroup, Radio } from "vant";
|
import { Checkbox, CheckboxGroup } from "vant";
|
import { Popup } from "vant";
|
import { Icon } from "vant";
|
Vue.use(Icon);
|
Vue.use(Popup);
|
Vue.use(Checkbox);
|
Vue.use(CheckboxGroup);
|
Vue.use(Radio);
|
Vue.use(RadioGroup);
|
|
export default {
|
data() {
|
return {
|
checked: false, //协议勾选
|
radio: "",
|
//数据
|
// 18108048791 1234qwer
|
mblNo: "", //用户手机号
|
verCode: "", //验证码
|
openId: 456, //微信openId
|
//点击显示密码为明文,眼睛的样式也是根据这个来判断的
|
pwdType: "password",
|
test: false,
|
loginImg: "static/img/logo.png",
|
timer: "",
|
showSend: true,
|
btnText: "发送验证码",
|
btnDis: false,
|
miao: 60,
|
code: "",
|
ShowAgreen: false, //协议展示框
|
Agreend: "", //协议
|
};
|
},
|
created() {
|
// 存储倒计时
|
if(this.$route.query.whichPage && sessionStorage.beforeDate){
|
this.miao = Math.round(new Date().getTime()/1000 - sessionStorage.beforeDate/1000)
|
if(this.miao < 60){
|
this.getSecond(60 - this.miao)
|
}else{
|
this.miao = 60
|
}
|
}
|
if(sessionStorage.mblNo){
|
this.mblNo = sessionStorage.mblNo
|
}
|
if(sessionStorage.verCode){
|
this.verCode = sessionStorage.verCode
|
}
|
|
this.code = this.getUrlCode("code");
|
console.log('this.code:',this.code)
|
console.log('this.$route.query.whichPage:',this.$route.query.whichPage)
|
if (this.code && !this.$route.query.whichPage) {
|
this.$api.wechatUserInfo({ code: this.code}).then(res => {
|
console.log('res.body.openid:',res.body.openid)
|
localStorage.edu_ins_client_openId = res.body.openid;
|
localStorage.edu_ins_client_userMation = JSON.stringify(res.body);
|
});
|
}
|
},
|
methods: {
|
...mapActions(["login", "getVercode", "openIdLogin"]),
|
//截取code值
|
getUrlCode(name) {
|
return (
|
decodeURIComponent(
|
(new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
|
location.href
|
) || [, ""])[1].replace(/\+/g, "%20")
|
) || null
|
);
|
},
|
//登录验证
|
loginBut() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.mblNo)) {
|
v.toast("请输入手机号");
|
return;
|
}
|
if (!v.checkPhone(this.mblNo)) {
|
v.toast("请输入正确手机号");
|
return;
|
}
|
if (v.checkValEmpty(this.verCode)) {
|
v.toast("请输入验证码");
|
return;
|
}
|
if (!this.checked) {
|
v.toast("请确认并勾选用户协议");
|
return;
|
}
|
this.login({
|
vm: this,
|
mblNo: this.mblNo,
|
verCode: this.verCode,
|
openId: localStorage.edu_ins_client_openId
|
});
|
},
|
sendCode() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.mblNo)) {
|
v.toast("请输入手机号");
|
return;
|
}
|
if (!v.checkPhone(this.mblNo)) {
|
v.toast("请输入正确手机号");
|
return;
|
}
|
this.$api.getVerCode({
|
mblNo: this.mblNo,
|
verCodeType: 1
|
}).then(res=>{
|
sessionStorage.beforeDate = new Date().getTime()
|
this.getSecond(60);
|
})
|
// this.$store.dispatch("getVercode", {
|
// vm: this,
|
// mblNo: this.mblNo,
|
// verCodeType: 1
|
// });
|
|
},
|
//发送验证码计时函数
|
getSecond(wait) {
|
let _this = this;
|
let _wait = wait;
|
if (wait == 0) {
|
this.btnText = "获取验证码";
|
wait = _wait;
|
this.btnDis = false;
|
clearTimeout(this.timer)
|
} else {
|
this.btnDis = true;
|
this.btnText = "验证码(" + wait + "s)";
|
wait--;
|
this.timer = setTimeout(function() {
|
_this.getSecond(wait);
|
}, 1000);
|
}
|
},
|
// 展示协议
|
showAgree(which) {
|
sessionStorage.mblNo = this.mblNo
|
sessionStorage.verCode = this.verCode
|
if(which == 1){
|
this.$router.push({
|
path:'/agreement',
|
query:{
|
from:'login',
|
tit:'隐私协议',
|
agrUrl:'./static/ys.pdf'
|
}
|
})
|
}
|
if(which == 2){
|
this.$router.push({
|
path:'/agreement',
|
query:{
|
from:'login',
|
tit:'用户注册服务协议',
|
agrUrl:'./static/zc.pdf'
|
}
|
})
|
}
|
},
|
},
|
|
beforeRouteLeave (to, from, next) {
|
// ...
|
|
clearTimeout(this.timer)
|
next()
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.login-page {
|
padding-top: 42px;
|
box-sizing: border-box;
|
.logo-box {
|
& {
|
text-align: center;
|
font-size: 18px;
|
margin-bottom: 30px;
|
}
|
img {
|
width: 55px;
|
height: 83px;
|
}
|
.logo-img-box {
|
display: inline-block;
|
width: 100px;
|
height: 100px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 0px 0px 12px 0px rgba(34, 105, 209, 0.2);
|
border-radius: 15px;
|
box-sizing: border-box;
|
padding-top: 11px;
|
}
|
p {
|
margin-top: 16px;
|
font-size: 17px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
}
|
}
|
.myipt {
|
margin-top: 51px;
|
}
|
.myiptTwo {
|
margin-top: 20px;
|
margin-bottom: 17px;
|
}
|
.getcode {
|
font-size: 13px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
text-decoration: underline;
|
color: rgba(98, 160, 255, 1);
|
outline: none;
|
height: 30px;
|
border: 0;
|
background: #fff;
|
}
|
.text-box {
|
& {
|
width: 100%;
|
padding: 0 10%;
|
box-sizing: border-box;
|
}
|
.xieyi {
|
span:nth-of-type(1) {
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
}
|
span:nth-of-type(2) {
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #5194fe;
|
}
|
span:nth-of-type(3) {
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #5194fe;
|
}
|
}
|
}
|
.btn-box {
|
& {
|
width: 100%;
|
text-align: center;
|
margin-top: 37px;
|
}
|
button {
|
width: 80%;
|
height: 44px;
|
background: linear-gradient(
|
90deg,
|
rgba(82, 142, 255, 1),
|
rgba(105, 167, 255, 1)
|
);
|
box-shadow: 0px 8px 15px 0px rgba(91, 152, 255, 0.28);
|
border-radius: 22px;
|
outline: none;
|
border: 0;
|
color: #fff;
|
}
|
}
|
.agreenBox {
|
width: 80vw;
|
height: 70vh;
|
padding: 60px 20px 30px 20px;
|
position: relative;
|
}
|
|
.agreen-html {
|
width: 100%;
|
height: 100%;
|
overflow: scroll;
|
box-sizing: border-box;
|
}
|
|
.close-agreen {
|
.lh(30px);
|
.flex(center, center);
|
|
.van-icon {
|
font-size: @font-16;
|
}
|
}
|
}
|
</style>
|
