Skip to content

W
web-site
Commit 600e4d99 authored by 吴冠's avatar 吴冠
Browse files
Options

验证

parent 1369c5e2
Show whitespace changes
Inline Side-by-side
Showing with 212 additions and 131 deletions
pages/login/seek.vue
View file @ 600e4d99
<template> <template>
<div class="see flex-colunm"> <div class="see flex-colunm">
<el-steps :active="active" finish-status="success" style="width: 4.8rem;"> <el-steps
:active="active"
finish-status="success"
style="width: 4.8rem"
>
<el-step title="验证手机号"></el-step> <el-step title="验证手机号"></el-step>
<el-step title="重置密码"></el-step> <el-step title="重置密码"></el-step>
<el-step title="找回成功"></el-step> <el-step title="找回成功"></el-step>
</el-steps> </el-steps>
<!-- 验证手机号 --> <!-- 验证手机号 -->
<div class="verification" v-if="active==0"> <div class="verification" v-if="active == 0">
<el-form ref="form" :model="form" label-width="1.4rem" :rules="rules"> <el-form
ref="form"
:model="form"
label-width="1.4rem"
:rules="rules"
>
<el-form-item label="手机号" prop="phone" class="item"> <el-form-item label="手机号" prop="phone" class="item">
<el-input v-model="form.phone" placeholder="请输入手机号" style="width:2.4rem" maxlength="30"></el-input> <el-input
v-model="form.phone"
placeholder="请输入手机号"
style="width: 2.4rem"
maxlength="30"
></el-input>
</el-form-item> </el-form-item>
<div class="getcode"> <div class="getcode">
<el-form-item label="验证码" prop="code" class="item"> <el-form-item label="验证码" prop="code" class="item">
<el-input v-model="form.code" placeholder="请输入验证码" style="width:1.55rem" maxlength="30"></el-input> <el-input
v-model="form.code"
placeholder="请输入验证码"
style="width: 1.55rem"
maxlength="30"
></el-input>
</el-form-item> </el-form-item>
<div class="code" @click="refreshCode"> <div class="code" @click="refreshCode">
<!-- ：fresh：父组件向子组件传送刷新验证码的信号； <!-- ：fresh：父组件向子组件传送刷新验证码的信号；
@makedCode：子组件向父组件传送验证码的值--> @makedCode：子组件向父组件传送验证码的值-->
<Identify :fresh="flag" @makedCode="getMakedCode"></Identify> <Identify
:fresh="flag"
@makedCode="getMakedCode"
></Identify>
</div> </div>
</div> </div>
<div class="getphonecode"> <div class="getphonecode">
<el-form-item label="短信验证码" prop="verify" class="item"> <el-form-item label="短信验证码" prop="verify" class="item">
<el-input v-model="form.verify" placeholder="请输入短信验证码" style="width:2.4rem" maxlength="30"></el-input> <el-input
v-model="form.verify"
placeholder="请输入短信验证码"
style="width: 2.4rem"
maxlength="30"
></el-input>
</el-form-item> </el-form-item>
<div v-show="Verification" class="phonecode" @click = "getPhoneCode">获取短信验证码</div> <div
<div v-show="!Verification" class="phonecode"><span>{{timer}}</span>秒后重新获取</div> v-show="Verification"
class="phonecode"
@click="getPhoneCode"
>
获取短信验证码
</div>
<div v-show="!Verification" class="phonecode">
<span>{{ timer }}</span
>秒后重新获取
</div>
</div> </div>
</el-form> </el-form>
</div> </div>
<!-- 重置密码 --> <!-- 重置密码 -->
<div class="reset" v-if="active==1"> <div class="reset" v-if="active == 1">
<el-form ref="organ" :model="organ" label-width="2rem" :rules="rules"> <el-form
<el-form-item label="输入密码" prop="password" class="item" > ref="organ"
<el-input v-model="organ.password" placeholder="请输入密码" style="width:3.4rem" key="organ.password" maxlength="30" show-password></el-input> :model="organ"
label-width="2rem"
:rules="rules"
>
<el-form-item label="输入密码" prop="password" class="item">
<el-input
v-model="organ.password"
placeholder="请输入密码"
style="width: 3.4rem"
key="organ.password"
maxlength="30"
show-password
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="请再次输入密码" prop="isPassword" class="item" > <el-form-item
<el-input v-model="organ.isPassword" placeholder="请再次输入密码" style="width:3.4rem" key="organ.isPassword" maxlength="30" show-password></el-input> label="请再次输入密码"
prop="isPassword"
class="item"
>
<el-input
v-model="organ.isPassword"
placeholder="请再次输入密码"
style="width: 3.4rem"
key="organ.isPassword"
maxlength="30"
show-password
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<!-- 找回密码 --> <!-- 找回密码 -->
<div class="seek t2" v-if="active==3"> <div class="seek t2" v-if="active == 3">
{{total}}s后自动跳转登录页 {{ total }}s后自动跳转登录页
</div> </div>
<nuxt-link to="/login/user" v-if="active==3" tag="div" class="t2 nextButton">去登陆</nuxt-link> <nuxt-link
to="/login/user"
v-if="active == 3"
tag="div"
class="t2 nextButton"
>去登陆</nuxt-link
>
<button @click="next" class="t2 nextButton" v-else>下一步</button> <button @click="next" class="t2 nextButton" v-else>下一步</button>
</div> </div>
</template> </template>
<script> <script>
import Identify from '~/components/identify' import Identify from "~/components/identify";
import {getVerifyPhone,sendSms,getResetPassword} from '@/common/list.js' import { getVerifyPhone, sendSms, getResetPassword } from "@/common/list.js";
export default { export default {
data() { data() {
// 修改密码验证二次是否输入相同 // 修改密码验证二次是否输入相同
let validate = (rule, value, callback) => { let validate = (rule, value, callback) => {
if (value === '') { if (value === "") {
callback(new Error('请输入密码')); callback(new Error("请输入密码"));
} else { } else {
if (this.organ.isPassword !== '') { if (this.organ.isPassword !== "") {
this.$refs.organ.validateField('isPassword'); this.$refs.organ.validateField("isPassword");
} }
callback(); callback();
} }
}; };
let validate2 = (rule, value, callback) => { let validate2 = (rule, value, callback) => {
if (value === '') { if (value === "") {
callback(new Error('请再次输入密码')); callback(new Error("请再次输入密码"));
} else if (value !== this.organ.password) { } else if (value !== this.organ.password) {
callback(new Error('两次输入密码不一致!')); callback(new Error("两次输入密码不一致!"));
} else { } else {
callback(); callback();
} }
}; };
let checkPhone = (rule, value, callback) => { let checkPhone = (rule, value, callback) => {
if (!value) { if (!value) {
return callback(new Error('手机号不能为空')); return callback(new Error("手机号不能为空"));
} else { } else {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/ const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
console.log(reg.test(value)); console.log(reg.test(value));
if (reg.test(value)) { if (reg.test(value)) {
callback(); callback();
} else { } else {
return callback(new Error('请输入正确的手机号')); return callback(new Error("请输入正确的手机号"));
} }
} }
}; };
let checkCode = (rule, value, callback) => { let checkCode = (rule, value, callback) => {
if (!value) { if (!value) {
return callback(new Error('验证码不能为空')); return callback(new Error("验证码不能为空"));
} else { } else {
let code = this.code; let code = this.code;
console.log(code) console.log(code);
if (value.toLowerCase() == code.toLowerCase()) { if (value.toLowerCase() == code.toLowerCase()) {
callback(); callback();
} else { } else {
return callback(new Error('请输入正确的验证码')); return callback(new Error("请输入正确的验证码"));
} }
} }
}; };
return { return {
/* dataMsg:0, */ /* dataMsg:0, */
Verification:true, Verification: true,
timer:60, timer: 60,
total: 3, total: 3,
active: 0, active: 0,
flag: true, //该值变化，就会触发刷新 flag: true, //该值变化，就会触发刷新
code: '', //刷新后的验证码 code: "", //刷新后的验证码
form: { form: {
phone: "", phone: "",
code: "", code: "",
verify: "" verify: "",
}, },
organ: { organ: {
password: "", password: "",
isPassword: "" isPassword: "",
}, },
rules: { rules: {
phone: [{ phone: [
{
required: true, required: true,
validator: checkPhone, validator: checkPhone,
trigger: 'blur' trigger: "blur",
}], },
code: [{ ],
code: [
{
required: true, required: true,
validator: checkCode, validator: checkCode,
trigger: 'blur' trigger: "blur",
}], },
verify: [{ ],
verify: [
{
required: true, required: true,
message: '请输入手机验证码', message: "请输入手机验证码",
trigger: 'blur' trigger: "blur",
}], },
password: [{ ],
password: [
{
required: true, required: true,
message: '请输入密码', message: "请输入密码",
trigger: 'blur' trigger: "blur",
}, },
{ {
validator: validate, validator: validate,
trigger: 'blur' trigger: "blur",
}, },
{ {
pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/, pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
message: '密码需由8-16位数字字母组合' message: "密码需由8-16位数字字母组合",
} },
], ],
isPassword: [{ isPassword: [
{
required: true, required: true,
message: '请再次输入密码', message: "请再次输入密码",
trigger: 'blur' trigger: "blur",
}, },
{ {
validator: validate2, validator: validate2,
trigger: 'blur' trigger: "blur",
}, },
{ {
pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/, pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
message: '密码需由8-16位数字字母组合' message: "密码需由8-16位数字字母组合",
} },
], ],
} },
}; };
}, },
components: { components: {
Identify Identify,
}, },
mounted() { mounted() {
console.log(this.flag); console.log(this.flag);
...@@ -175,8 +246,11 @@ ...@@ -175,8 +246,11 @@
}, },
methods: { methods: {
//发送短信 //发送短信
async getPhoneCode(){ async getPhoneCode() {
if(this.form.code.toLowerCase() ===this.code.toLowerCase()&&this.form.phone.length==11){ if (
this.form.code.toLowerCase() === this.code.toLowerCase() &&
this.form.phone.length == 11
) {
/* this.$refs.form.validateField('phone',async (phone_check) => { /* this.$refs.form.validateField('phone',async (phone_check) => {
if(!phone_check) return if(!phone_check) return
let phonemes = {} let phonemes = {}
...@@ -202,41 +276,42 @@ ...@@ -202,41 +276,42 @@
} }
}, */ }, */
let phonemes = {} let phonemes = {};
phonemes.phone = this.form.phone phonemes.phone = this.form.phone;
phonemes.type = 2 phonemes.type = 2;
const {data,code,msg} = await sendSms(phonemes) const { data, code, msg } = await sendSms(phonemes);
//code返回为500时 友情提示账户未注册 //code返回为500时 友情提示账户未注册
if(code ==200){ if (code == 200) {
this.Verification = false; //点击button改变v-show的状态 this.Verification = false; //点击button改变v-show的状态
let auth_timer = setInterval(()=>{ //定时器设置每秒递减 let auth_timer = setInterval(() => {
//定时器设置每秒递减
this.timer--; //递减时间 this.timer--; //递减时间
if(this.timer<=0){ if (this.timer <= 0) {
this.Verification = true; //60s时间结束还原v-show状态并清除定时器 this.Verification = true; //60s时间结束还原v-show状态并清除定时器
clearInterval(auth_timer) clearInterval(auth_timer);
} }
},1000) }, 1000);
} }
if(code ==500){ if (code == 500) {
this.$message.error(msg); this.$message.error(msg);
} }
} else{ } else {
this.$message.error("你的输入有误,请重新输入") this.$message.error("你的输入有误,请重新输入");
} }
}, },
countDown() { countDown() {
let clock = window.setInterval(() => { let clock = window.setInterval(() => {
this.total-- this.total--;
if(this.total==0){ if (this.total == 0) {
this.$router.push({path: '/login/user'}); this.$router.push({ path: "/login/user" });
} }
}, 1000) }, 1000);
}, },
next() { next() {
console.log(this.active); console.log(this.active);
if (this.active == 0) { if (this.active == 0) {
// 提交验证手机号操作 // 提交验证手机号操作
this.$refs.form.validate(valid => { this.$refs.form.validate((valid) => {
if (valid) { if (valid) {
//验证手机验证码 //验证手机验证码
/* let dataform={} /* let dataform={}
...@@ -246,40 +321,47 @@ ...@@ -246,40 +321,47 @@
console.log(1111111111111111111) console.log(1111111111111111111)
if(code==500){ if(code==500){
} */ } */
this.active++ this.active++;
} else { } else {
this.$message.error('有未填写的选项或者错误选项'); this.$message.error("有未填写的选项或者错误选项");
console.log('error submit!!'); console.log("error submit!!");
return false; return false;
} }
}); });
} else if (this.active == 1) { } else if (this.active == 1) {
// 设置密码 // 设置密码
this.$refs.organ.validate(async valid => { this.$refs.organ.validate(async (valid) => {
if (valid) { if (valid) {
/* this.active = 3 */ /* this.active = 3 */
//将手机号和重新设置的密码发送给后端 //将手机号和重新设置的密码发送给后端
let mes = {} let dataform = {};
mes.verify = this.form.verify dataform.phone = this.form.phone;
mes.phone = this.form.phone dataform.verify = this.form.verify;
mes.password = this.organ.password var { code,msg } = await getVerifyPhone(dataform);
const {data,code,msg} = await getResetPassword(mes) if (code == 200) {
console.log(code+'-------------'+'111111111') let mes = {};
if(code==200){ mes.verify = this.form.verify;
this.active++ mes.phone = this.form.phone;
mes.password = this.organ.password;
var { data, code, msg } = await getResetPassword(
mes
);
console.log(code + "-------------" + "111111111");
if (code == 200) {
this.active++;
this.countDown(); this.countDown();
this.$message.success(msg) this.$message.success(msg);
console.log(code+'22222222222') console.log(code + "22222222222");
}
} else { } else {
this.$message.error('有未填写的选项或者错误选项'); this.$message.error(msg);
console.log('error submit!!'); console.log("error submit!!");
return false; return false;
} }
}else{
this.$message.error(msg)
}
}
}); });
} else{
} }
}, },
// 切换验证码 // 切换验证码
...@@ -289,59 +371,58 @@ ...@@ -289,59 +371,58 @@
getMakedCode(code) { getMakedCode(code) {
this.code = code; this.code = code;
console.log(this.code); console.log(this.code);
} },
} },
} };
</script> </script>
<style scoped> <style scoped>
.nextButton { .nextButton {
width: 3rem; width: 3rem;
height: .48rem; height: 0.48rem;
background: rgba(4, 134, 254, 1); background: rgba(4, 134, 254, 1);
border-radius: .04rem; border-radius: 0.04rem;
line-height: .46rem; line-height: 0.46rem;
text-align: center; text-align: center;
color: #fff; color: #fff;
margin-bottom: 3.6rem; margin-bottom: 3.6rem;
margin-top: 1rem margin-top: 1rem;
} }
.getcode>.code { .getcode > .code {
/*margin: 400px auto;*/ /*margin: 400px auto;*/
width: .68rem; width: 0.68rem;
height: .32rem; height: 0.32rem;
/*border: 1px solid red;*/ /*border: 1px solid red;*/
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
} }
.item .el-form-item__label { .item .el-form-item__label {
font-size: .16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
.getcode, .getcode,
.getphonecode { .getphonecode {
position: relative; position: relative;
} }
.getphonecode>.phonecode { .getphonecode > .phonecode {
font-size: .14rem; font-size: 0.14rem;
font-weight: 400; font-weight: 400;
color: rgba(51, 136, 255, 1); color: rgba(51, 136, 255, 1);
position: absolute; position: absolute;
top: 0.13rem; top: 0.13rem;
right: -1.5rem; right: -1.5rem;
cursor: pointer; cursor: pointer;
} }
.verification, .verification,
.seek, .seek,
.reset { .reset {
margin-top: 1.1rem; margin-top: 1.1rem;
} }
</style> </style>
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