<!-- 登录弹框 -->
<div class="mask" v-show="flag">
<div class="mask_content" v-show="type_d == 'sign'">
<p class="mask_gb" @click="cloces">
<img src="../static/img/home/gw_icon.png" alt="" />
</p>
<div class="mas_title">
<h3 class="mas_title_nav">登录</h3>
<img class="mas_title_img" src="../static/img/home/logo.png" alt="" />
</div>
<div class="mask-title">
<h3 @click="typ = 0" :class="{ mk_a: typ === 0 }">手机快速登录</h3>
<h3 @click="typ = 1" :class="{ mk_a: typ === 1 }">账号密码登录</h3>
</div>
<!-- 手机快速登录 -->
<div class="mask-meuns font14" v-show="typ == 0">
<p class="ks_tels fe_tel">
<img class="tel_icon tel" src="../static/img/home/tel.png" alt="" />
<input
class="inp_tel"
v-model="phone"
@input="form_mobile(phone)"
type="text"
maxlength="11"
placeholder="+86 手机号"
/>
</p>
<p class="p_inp">
<input
class="inp_getS"
v-model="yzm"
type="text"
placeholder="手机验证码"
/><span
class="yz"
@click="send(1)"
:class="color ?'actives_color': ''"
>{{ sms_interval }}</span
>
</p>
<button class="font16 sign" @click="phone_login">登录</button>
</div>
<!-- 账号密码登录 -->
<div class="mask-meuns" v-show="typ == 1">
<p class="ks_tels">
<img
class="tel_icon icon"
src="../static/img/home/pep.png"
alt=""
/>
<input
class="inp_tel"
v-model="username"
type="text"
maxlength="11"
placeholder="请输入账号"
/>
</p>
<p class="ks_tels">
<img class="tel_icon icon" src="../static/img/home/mn.png" alt="" />
<input
v-model="passwords"
class="inp_tel inp_pass"
type="password"
maxlength="12"
placeholder="请输入密码"
/>
</p>
<div
class="wj_ma"
@click="type_d = 'chongzhi'"
>
忘记密码
</div>
<button class="font16 sign" @click="pwd_login">登录</button>
</div>
<p class="font14 goreg" @click="goto_regist">
还没有账号？<span class="mf_reg">免费注册</span>
</p>
</div>
<!-- 注册账号 -->
<div class="mask_content" v-show="type_d == 'register'">
<p class="mask_gb" @click="cloces">
<img src="../static/img/home/gw_icon.png" alt="" />
</p>
<div class="mas_title">
<h3 class="mas_title_nav">注册</h3>
<img class="mas_title_img" src="../static/img/home/logo.png" alt="" />
</div>
<div class="reg_title">
<h3 class="font20 ks_title">快速注册</h3>
<div class="mask-top-link"></div>
</div>
<form class="mask-meuns reg_ma font14">
<p class="ks_tels">
<img class="tel_icon tel" src="../static/img/home/tel.png" alt="" />
<input
v-model="mobile"
@input="form_mobile(mobile)"
maxlength="11"
class="inp_tel"
type="text"
placeholder="+86 手机号"
/>
</p>
<p class="p_inp">
<input
class="inp_getS"
v-model="sms"
type="text"
placeholder="手机验证码"
/>
<span
class="yz reg_yz"
@click="send(2)"
:class="color ?'actives_color': ''"
>{{ sms_interval }}</span
>
</p>
<p class="ks_tels">
<img
class="tel_icon icon"
src="../static/img/home/mn.png"
alt=""
/><input
v-model="password"
class="inp_tel inp_pass"
type="password"
maxlength="12"
placeholder="设置密码"
/>
</p>
<form class="font14 regulations">
<input
class="inp_check"
type="checkbox"
v-model="checked_zc"
/><span
>我已阅读并接受<b class="clause" @click="is_kxy = true"
>《XXX注册条款》</b
></span
>
<p class="font16 sign reg_zc" @click="register">注册</p>
</form>
</form>
<p class="font14 reg_sign" @click="goto_sign">
已有账号？<span class="mf_reg">立即登录</span>
</p>
</div>
<!-- 重置密码 -->
<div class="mask_content" v-show="type_d == 'chongzhi'">
<p class="mask_gb" @click="cloces">
<img src="../static/img/home/gw_icon.png" alt="" />
</p>
<div class="mas_title">
<h3 class="mas_title_nav">重置</h3>
<img class="mas_title_img" src="../static/img/home/logo.png" alt="" />
</div>
<div class="reg_title">
<h3 class="new_reg_h3 font20">
<span @click="go_back">←</span>重置密码
</h3>
<div class="mask-top-link"></div>
</div>
<form class="mask-meuns reg_ma font14">
<p class="ks_tels">
<img class="tel_icon tel" src="../static/img/home/tel.png" alt="" />
<input
v-model="new_mobile"
@input="form_mobile(new_mobile)"
maxlength="11"
class="inp_tel"
type="text"
placeholder="+86 手机号"
/>
</p>
<p class="p_inp">
<input
class="inp_getS"
v-model="captcha_sms"
type="text"
placeholder="手机验证码"
/>
<span
class="yz reg_yz"
@click="send(3)"
:class="color ?'actives_color': ''"
>{{ sms_interval }}</span
>
</p>
<p class="ks_tels">
<img
class="tel_icon icon"
src="../static/img/home/mn.png"
alt=""
/><input
v-model="new_password"
class="inp_tel inp_pass"
type="password"
maxlength="12"
placeholder="设置新密码"
/>
</p>
<form class="font14 regulations">
<p class="font16 sign reg_zc" @click="new_register">确定</p>
</form>
</form>
</div>
</div>
<!-- 隐私协议 -->
<div class="xiey" v-show="is_kxy">
<div class="xiey_cont" @click="is_kxy = false">
<p class="xiey_top">
<span class="mask_gb"
><img src="../static/img/home/gw_icon.png" alt=""
/></span>
</p>
<!-- <p class="mask_gb"></p> -->
<div class="xieyi_content" v-html="xiey.content">
{{ xiey.content }}
</div>
</div>
</div>
data(){
return {
mobile: "",
sms: "",
password: "",
sms_interval: "获取验证码",
is_send: false,
phone: "",
passwords: "",
username: "",
yzm: "",
login_method: "is_pwd",
color: 0,
checked_zc: false,
xiey: "",
}
}
methods:{
//重置密码
new_register() {
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if(this.new_mobile){
if(!isNaN(this.new_mobile)){
if(myreg.test(this.new_mobile)){
if(this.captcha_sms){
if(this.new_password){
if(6 <= this.new_password.length){
if(this.new_password.length <= 12){
//请求数据
this.chz_reg()
}else{
that.$message.error("密码设置范围为6-12");
}
}else{
that.$message.error("密码设置范围为6-12");
}
}else{
this.$message.error("请输入密码！");
}
}else{
this.$message.error("请输入验证码！");
}
}else{
this.$message.error("手机号输入不正确！");
}
}else{
this.$message.error("手机号格式不正确！");
}
}else{
this.$message.error("请输入手机号！");
}
},
//重置密码的后台接口
chz_reg() {
return post("api/user/resetPwd", {
mobile: this.new_mobile,
captcha: this.captcha_sms,
newpassword: this.new_password,
}).then((res) => {
if (res.code == 1) {
this.$message({
message: "重置成功",
type: "success",
});
//关掉注册框
this.type_d = "sign";
this.typ = 1;
(this.new_mobile = ""),
(this.captcha_sms = ""),
(this.new_password = "");
} else {
this.$message({
message: "重置失败，请稍后再试",
type: "error",
});
}
});
},
//倒计时
hqyzm_zc(){
var that = this;
var time = 60;
that.sms_interval = '('+time+')秒后重新发送';
that.color = false;
that.is_send = true;
var zc_time = setInterval(function () {
time-=1;
that.sms_interval = '('+time+')秒后重新发送';
that.color = false;
that.is_send = true;
if(time==0){
clearInterval(zc_time);
that.sms_interval = '发送验证码';
that.color = true;
that.is_send = false;
}
},1000);
},
//手机号验证
form_mobile(value){
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if(value.length==11){
if(myreg.test(value)){
if(this.sms_interval=='发送验证码'){
this.color = true;
}else {
this.color = false;
}
}else {
this.color = false;
}
}else {
this.color = false;
}
},
mobile_phone(phone,type){
var that = this;
return post('/api/Sms/send', {mobile: phone,event:type})
.then((res) => {
if(res!=0){
that.hqyzm_zc();
}
}
);
},
//发送验证码请求
send(key){
if(!this.is_send){
if(this.color){
if(key==1){
this.mobile_phone(this.phone,'mobilelogin');
}else if(key==2){
this.mobile_phone(this.mobile,'register');
}else if(key==3){
this.mobile_phone(this.new_mobile,'resetpwd');
}
}else {
this.$message.error("手机号输入不正确");
}
}else {
this.$message.error("验证码发送中...");
}
},
//注册
register() {
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if(this.mobile){
if(!isNaN(this.mobile)){
if(myreg.test(this.mobile)){
if(this.sms){
if(this.password){
if(6 <= this.password.length){
if(this.password.length <= 12){
if(this.checked_zc){
//请求数据
this.is_reg()
}else{
this.$message.error("请阅读并勾选隐私协议！");
}
}else{
this.$message.error("密码设置范围为6-12");
}
}else{
this.$message.error("密码设置范围为6-12");
}
}else{
this.$message.error("请输入密码！");
}
}else{
this.$message.error("请输入验证码！");
}
}else{
this.$message.error("手机号输入不正确！");
}
}else{
this.$message.error("手机号格式不正确！");
}
}else{
this.$message.error("请输入手机号！");
}
},
//注册接口
is_reg() {
return post("api/User/register", {
mobile: this.mobile,
code: this.sms,
password: this.password,
}).then((res) => {
if (res.code == 1) {
this.$message({
message: "注册成功",
type: "success",
});
//关掉注册框
this.flag = false;
this.xisign = 1;
localStorage.setItem("token", res.data.userinfo.token);
this.$router.push({
name: "index",
});
(this.mobile = ""), (this.sms = ""), (this.password = "");
} else {
this.$message({
message: "注册失败，请稍后再试",
type: "error",
});
}
});
},
// 密码 登录
pwd_login() {
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if(this.username){
if(!isNaN(this.username)){
if(myreg.test(this.username)){
if(this.passwords){
if(6 <= this.passwords.length){
if(this.passwords.length <= 12){
//请求数据
this.phone_pwd()
}else{
this.$message.error("密码设置范围为6-12");
}
}else{
this.$message.error("密码设置范围为6-12");
}
}else{
this.$message.error("请输入密码！");
}
}else{
this.$message.error("手机号输入不正确！");
}
}else{
this.$message.error("手机号格式不正确！");
}
}else{
this.$message.error("请输入手机号！");
}
},
//手机密码登录接口
phone_pwd(){
return post("api/User/login", {
account: this.username,
password: this.passwords,
}).then((res) => {
if (res.code == 1) {
//登录成功
this.$message({
message: res.msg,
type: "success",
});
localStorage.setItem("token", res.data.userinfo.token);
//2 销毁框
this.flag = false;
this.xisign = 1;
this.username = "";
this.passwords = "";
} else {
this.$message({
message: res.msg,
type: "error",
});
}
});
},
//手机号 验证码登录
phone_login() {
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if(this.phone){
if(!isNaN(this.phone)){
if(myreg.test(this.phone)){
if(this.yzm){
this.phone_yzm()
}else{
this.$message.error("请输入验证码！");
}
}else{
this.$message.error("手机号输入不正确！");
}
}else{
this.$message.error("手机号格式不正确！");
}
}else{
this.$message.error("请输入手机号！");
}
},
//手机验证码登录接口
phone_yzm(){
return post("api/user/mobileLogin", {
mobile: this.phone,
captcha: this.yzm,
}).then((res) => {
if (res.code == 1) {
//登录成功
this.$message({
message: res.msg,
type: "success",
});
localStorage.setItem("token", res.data.userinfo.token);
this.flag = false;
this.xisign = 1;
(this.phone = ""), (this.yzm = "");
} else {
this.$message({
message: res.msg,
type: "error",
});
}
});
},
//退出登录
out_login() {
return get("api/User/logout").then((res) => {
if (res.code == 1) {
this.$message({
message: res.msg,
type: "success",
});
this.$router.push({
name: "index",
});
localStorage.removeItem("token");
this.xisign = 0;
} else {
if (res.code == 10401) {
localStorage.removeItem("token");
this.xisign = 0;
} else {
this.$message({
message: res.msg,
type: "error",
});
}
}
});
},
mo_flag() {
var that = this;
that.mo_isflag = !that.mo_isflag;
},
close_mo_isflag() {
var that = this;
that.mo_isflag = !that.mo_isflag;
},
//登录
go_sign() {
var that = this;
that.flag = true;
that.type_d = "sign";
},
go_register() {
var that = this;
that.flag = !that.flag;
that.type_d = "register";
},
go_back() {
this.type_d = "sign";
this.typ = 1;
},
//关闭弹窗
cloces() {
var that = this;
that.flag = false;
},
//去注册页面
goto_regist() {
var that = this;
that.flag = true;
that.type_d = "register";
},
//去登录页面
goto_sign() {
var that = this;
that.flag = true;
that.type_d = "sign";
},
flag_tel() {
this.isShows = true;
},
no_flag_tel() {
this.isShows = false;
},
flag_wechat() {
this.isFlag = true;
},
no_flag_wechat() {
this.isFlag = false;
},
}
此登录注册要求：点击其中一个验证码按钮，所有带验证码的地方都会倒计时60s，重复点击会出现 验证码发送中... 的提示
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
