350 lines
8.2 KiB
Vue
350 lines
8.2 KiB
Vue
<template>
|
||
<div class="login">
|
||
<div class="logo">
|
||
<!-- <img src="./assets/quit.png" alt class="close" /> -->
|
||
</div>
|
||
<div class="tel">
|
||
<p>+86</p>
|
||
<img src="./assets/order.png" alt class="order" />
|
||
<div class="line"></div>
|
||
<input type="text" class="shuru" placeholder="输入手机号" v-model="tel" />
|
||
</div>
|
||
|
||
<div class="tel yzm">
|
||
<input type="text" class="shuru tel1" placeholder="输入6位验证码" v-model="yzm" />
|
||
<button class="getyzm" @click="yz">{{yzs}}</button>
|
||
</div>
|
||
<div class="ale">
|
||
<p class="alert">未注册手机验证后自动登录</p>
|
||
<p>注册即同意《隐私保护指引》</p>
|
||
</div>
|
||
<button class="submit" @click="sub">登录</button>
|
||
<!-- <div class="other">
|
||
<p @click="loginpwd">密码登录</p>
|
||
<p @click="open">需要帮助？</p>
|
||
</div>-->
|
||
<div class="ways">
|
||
<div class="top">
|
||
<div class="line"></div>
|
||
<p class="text">社交帐号登录</p>
|
||
<div class="line"></div>
|
||
</div>
|
||
<div class="icons">
|
||
<!-- <div>
|
||
<img src="./assets/wechat.png" alt class="icon" />
|
||
</div>-->
|
||
|
||
<div>
|
||
<!-- <a
|
||
href="https://open.weixin.qq.com/connect/qrconnect?appid=wxfe6e5d36322af62f&redirect_uri=http%3a%2f%2fwww.lawpro.cn%2f&response_type=code&scope=snsapi_login&state=lawpro#wechat_redirect"
|
||
>-->
|
||
<a
|
||
href="https://open.weixin.qq.com/connect/qrconnect?appid=wxfe6e5d36322af62f&redirect_uri=http%3a%2f%2fwww.lawpro.cn%2f&response_type=code&scope=snsapi_login&state=lawpro#wechat_redirect"
|
||
>
|
||
<!-- <i class="icon-wechatl"></i>微信 -->
|
||
<img src="./assets/wechat.png" alt class="icon" />
|
||
</a>
|
||
</div>
|
||
|
||
<!-- <img src="./assets/weibo.png" alt class="icon" />
|
||
<img src="./assets/qq.png" alt class="icon" />-->
|
||
</div>
|
||
</div>
|
||
<div class="tanchuangbox" v-if="ifshow">
|
||
<div class="tanchuang">
|
||
<p class="desc desc1">找回密码</p>
|
||
<p class="desc">人工申诉</p>
|
||
<p class="off" @click="off">取消</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
ifshow: false,
|
||
tel: "",
|
||
yzm: "",
|
||
yztoken: "",
|
||
Verification: "",
|
||
ifsign: false,
|
||
yzs: "获取验证码",
|
||
miao: 60
|
||
};
|
||
},
|
||
mounted(){
|
||
window.localStorage.setItem('token','')
|
||
},
|
||
methods: {
|
||
open() {
|
||
this.ifshow = true;
|
||
},
|
||
off() {
|
||
this.ifshow = false;
|
||
},
|
||
loginpwd() {
|
||
this.$router.push({
|
||
path: `/loginpwd`
|
||
});
|
||
},
|
||
yz() {
|
||
let yz = "";
|
||
|
||
if (this.tel != "") {
|
||
if (this.yzs != "获取验证码") {
|
||
return;
|
||
} else {
|
||
let t = this;
|
||
let a = setInterval(() => {
|
||
t.yzs = t.miao + "秒";
|
||
t.miao = t.miao - 1;
|
||
if (t.miao < 0) {
|
||
t.miao = 5;
|
||
t.yzs = "获取验证码";
|
||
clearInterval(a);
|
||
}
|
||
}, 1000);
|
||
}
|
||
window.console.log("aaaa");
|
||
var t = this;
|
||
this.axios
|
||
.post("http://lawpro.earnest.pro/api/Main/Verification", {
|
||
mobile: this.tel
|
||
})
|
||
.then(function(res) {
|
||
window.console.log(res.data.data);
|
||
yz = res.data.data.yz;
|
||
t.yztoken = yz;
|
||
t.ifsign = res.data.data.register;
|
||
})
|
||
.catch(function(error) {
|
||
window.console.log(error);
|
||
});
|
||
} else {
|
||
window.console.log("请输入正确的手机号");
|
||
}
|
||
},
|
||
sub() {
|
||
|
||
let t = this;
|
||
window.console.log(t.ifsign, 4859);
|
||
if (t.ifsign) {
|
||
if (t.tel && t.yzm) {
|
||
this.axios
|
||
.post("http://lawpro.earnest.pro/api/Main/isVerification", {
|
||
Verification: t.yzm,
|
||
yz: this.yztoken,
|
||
mobile: this.tel
|
||
})
|
||
.then(res => {
|
||
if (res.data.code == 200) {
|
||
this.axios
|
||
.post("http://lawpro.earnest.pro/api/Main/sign", {
|
||
yz: t.yztoken,
|
||
Verification: t.yzm,
|
||
mobile: this.tel
|
||
})
|
||
.then(res => {
|
||
window.console.log(res);
|
||
localStorage.setItem("token", res.data.data);
|
||
this.$router.push({
|
||
path: '/'
|
||
});
|
||
});
|
||
}
|
||
window.console.log(res);
|
||
})
|
||
.catch(err => {
|
||
window.console.log(err);
|
||
});
|
||
}
|
||
} else {
|
||
this.$router.push({
|
||
path: `/sign?yztoken=` + t.yztoken + "&yzm=" + t.yzm + "&tel=" + t.tel
|
||
});
|
||
}
|
||
|
||
window.console.log(t.yztoken, t.Verification, 9652);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.login {
|
||
.close {
|
||
width: 36px;
|
||
height: 36px;
|
||
float: right;
|
||
margin-top: 26px;
|
||
margin-right: 30px;
|
||
}
|
||
.logo {
|
||
width: 100%;
|
||
height: 272px;
|
||
background: url("./assets/logo.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
.tel {
|
||
width: 690px;
|
||
height: 84px;
|
||
line-height: 84px;
|
||
text-indent: 9px;
|
||
font-size: 25px;
|
||
color: #333333;
|
||
display: flex;
|
||
border-bottom: 2px solid #dfdfdf;
|
||
margin-left: 30px;
|
||
.order {
|
||
width: 13px;
|
||
height: 24px;
|
||
margin: auto 0;
|
||
margin-left: 25px;
|
||
}
|
||
.line {
|
||
width: 1px;
|
||
height: 30px;
|
||
margin: auto 0;
|
||
margin-left: 35px;
|
||
background-color: #dfdfdf;
|
||
}
|
||
.shuru {
|
||
width: 75%;
|
||
height: 74px;
|
||
color: #333333;
|
||
font-size: 28px;
|
||
margin: auto 0;
|
||
margin-left: 36px;
|
||
// position: relative;
|
||
// top: -1px;
|
||
outline-style: none;
|
||
outline-width: 0px;
|
||
border: none;
|
||
border-style: none;
|
||
text-shadow: none;
|
||
-webkit-appearance: none;
|
||
-webkit-user-select: text;
|
||
outline-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
.shuru::placeholder {
|
||
color: #999999;
|
||
}
|
||
}
|
||
.tel1 {
|
||
margin-left: 11px !important;
|
||
font-size: 26px !important;
|
||
}
|
||
.yzm {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.getyzm {
|
||
width: 176px !important;
|
||
height: 54px;
|
||
border: 2px solid rgba(107, 145, 71, 1);
|
||
border-radius: 4px;
|
||
background-color: white;
|
||
margin: auto 0;
|
||
color: #6b9147;
|
||
font-size: 24px;
|
||
line-height: 54px;
|
||
}
|
||
.ale {
|
||
height: 58px;
|
||
margin: 0 auto;
|
||
margin-top: 50px;
|
||
color: #999999;
|
||
font-size: 22px;
|
||
text-align: center;
|
||
// line-height: 30px;
|
||
.alert {
|
||
text-indent: -15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
.submit {
|
||
width: 690px;
|
||
height: 88px;
|
||
background-color: #6b9147;
|
||
line-height: 88px;
|
||
text-align: center;
|
||
color: white;
|
||
font-size: 36px;
|
||
border-radius: 4px;
|
||
margin-left: 30px;
|
||
margin-top: 129px;
|
||
}
|
||
.other {
|
||
color: #6b9147;
|
||
font-size: 26px;
|
||
margin-top: 39px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
> p:first-child {
|
||
margin-left: 31px;
|
||
}
|
||
> p:last-child {
|
||
margin-right: 43px;
|
||
}
|
||
}
|
||
.ways {
|
||
margin-top: 149px;
|
||
.top {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 99px;
|
||
height: 24px;
|
||
.line {
|
||
width: 120px;
|
||
height: 2px;
|
||
margin-top: 12px;
|
||
}
|
||
.text {
|
||
color: #999999;
|
||
font-size: 24px;
|
||
margin-left: 20px;
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
}
|
||
.icons {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
// margin-bottom: 165px;
|
||
margin-bottom: 100px;
|
||
.icon {
|
||
width: 71px;
|
||
height: 71px;
|
||
}
|
||
}
|
||
.tanchuangbox {
|
||
width: 750px;
|
||
height: 1334px;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
position: absolute;
|
||
top: 0;
|
||
.tanchuang {
|
||
width: 580px;
|
||
height: 339px;
|
||
background-color: white;
|
||
margin: auto;
|
||
margin-top: 353px;
|
||
color: #333333;
|
||
font-size: 36px;
|
||
text-align: center;
|
||
.desc {
|
||
margin-bottom: 59px;
|
||
}
|
||
.desc1 {
|
||
padding-top: 59px;
|
||
}
|
||
.off {
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |