Skip to content

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

验证

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