|
|
@@ -0,0 +1,363 @@
|
|
|
+<template>
|
|
|
+ <div class="forgot-container">
|
|
|
+ <h2 class="title-big">找回密码</h2>
|
|
|
+ <el-form label-position="top" label-width="80px" ref="loginCodeForm" :model="loginCodeForm" class="form" :hide-required-asterisk="true" :rules="rulesCode" v-if="stepIndex===0">
|
|
|
+ <el-form-item label="手机号" prop="phone">
|
|
|
+ <el-input v-model="loginCodeForm.phone" autocomplete="off" placeholder="请输入完整手机号" @blur="handleTrim('loginCodeForm','phone')" >
|
|
|
+ <template slot="prepend">+86</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="验证码" prop="code" class="code-box">
|
|
|
+ <el-input v-model="loginCodeForm.code" autocomplete="off" placeholder="请输入验证码" class="code-input" @blur="handleTrim('loginCodeForm','code')" @input="handeleInput">
|
|
|
+ </el-input>
|
|
|
+ <el-button type="primary" @click="sendCode('time','phone','verificationCodeShow')" size="small" class="sendCode" @input="handeleInput">
|
|
|
+ {{ verificationCodeShow ? time+'s' : '发送验证码' }}
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="btn-box">
|
|
|
+ <el-button type="primary" @click="onSubmitPassword('loginCodeForm')" size="small" :disabled="submitDis" :loading="loading">下一步</el-button>
|
|
|
+ <el-button @click="onCancel('loginCodeForm')" size="small">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div v-else class="result-box">
|
|
|
+ <img src="../assets/mail-check-line.png" />
|
|
|
+ <p>密码已通过短信发送至您的手机中，请注意查收。</p>
|
|
|
+ <div class="btn-box">
|
|
|
+ <el-button type="primary" @click="onCancel('loginCodeForm')" size="small">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getLogin } from "@/api/ajax";
|
|
|
+import { setToken } from "@/utils/auth";
|
|
|
+export default {
|
|
|
+ name: "forgotPwd",
|
|
|
+ props: [],
|
|
|
+ data() {
|
|
|
+ const validatePhone = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请输入手机号'));
|
|
|
+ } else {
|
|
|
+ let reg = /^1[3-9]\d{9}$/;
|
|
|
+ let result = reg.test(value);
|
|
|
+ if (result) {
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ callback(new Error('请输入正确的手机号'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ loginCodeForm:{
|
|
|
+ phone:'',
|
|
|
+ code:''
|
|
|
+ },
|
|
|
+ rulesCode:{
|
|
|
+ phone:[
|
|
|
+ { required: true, validator: validatePhone, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ code:[
|
|
|
+ { required: true, message: '请输入验证码', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ time: 60, //获取验证码的时间
|
|
|
+ verificationCodeShow: false, //是否已经获取了验证码
|
|
|
+ loading: false,
|
|
|
+ timer: null,
|
|
|
+ submitDis: true,
|
|
|
+ stepIndex: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 密码登录提交表单
|
|
|
+ onSubmitPassword(formName){
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true
|
|
|
+ let MethodName = "/OrgServer/LoginControl/Login";
|
|
|
+ let data = null
|
|
|
+ if(this.tabsIndex===0){
|
|
|
+ data = {
|
|
|
+ user_type:this.loginPwdForm.type,
|
|
|
+ user_name:this.loginPwdForm.userName,
|
|
|
+ password:this.loginPwdForm.password
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ data = {
|
|
|
+ user_type:this.loginCodeForm.type,
|
|
|
+ user_name:this.loginCodeForm.phone,
|
|
|
+ password:this.loginCodeForm.code,
|
|
|
+ is_dynamic_verification_code_login:"true",
|
|
|
+ dynamic_verification_send_type:"SMS"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false
|
|
|
+ this.stepIndex++
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ this.verificationCodeShow = false;
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.time = 60;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消 恢复到修改前状态
|
|
|
+ onCancel(formName){
|
|
|
+ this.$emit('cancelFot')
|
|
|
+ },
|
|
|
+ // 发送验证码
|
|
|
+ sendCode(time,phone,flag,obj){
|
|
|
+ let this_ = this;
|
|
|
+ if(this_[time] != 60){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this_.timer = null;
|
|
|
+ if (this_.loginCodeForm[phone]) {
|
|
|
+ let reg = /^1[3-9]\d{9}$/;
|
|
|
+ let result = reg.test(this_.loginCodeForm[phone]);
|
|
|
+ if (!result) {
|
|
|
+ this_.$message.warning('请输入正确的手机号');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this_[flag] = true;
|
|
|
+ this_.timer = setInterval(() => {
|
|
|
+ this_[time]--;
|
|
|
+ if (this_[time] == 0) {
|
|
|
+ this_[flag] = false;
|
|
|
+ clearInterval(this_.timer);
|
|
|
+ this_.timer = null;
|
|
|
+ this_[time] = 60;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
|
|
|
+ let data = {
|
|
|
+ send_type: 'SMS',
|
|
|
+ phone_or_email: this_.loginCodeForm.phone,
|
|
|
+ };
|
|
|
+ getLogin(MethodName, data).then((res) => {
|
|
|
+ }).catch(()=>{
|
|
|
+ this_[flag] = false;
|
|
|
+ clearInterval(this_.timer);
|
|
|
+ this_.timer = null;
|
|
|
+ this_[time] = 60;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this_.$message.warning('请先输入手机号');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 去掉前后空格
|
|
|
+ handleTrim(form,fild){
|
|
|
+ this[form][fild] = this[form][fild].trim()
|
|
|
+ },
|
|
|
+ handeleInput(){
|
|
|
+ if(this.loginCodeForm.phone&&this.loginCodeForm.code){
|
|
|
+ this.submitDis = false
|
|
|
+ }else{
|
|
|
+ this.submitDis = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.forgot-container{
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 64px 72px;
|
|
|
+ .title-big{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 0;
|
|
|
+ color: #1D2129;
|
|
|
+ }
|
|
|
+ .title-name{
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #86909C;
|
|
|
+ margin: 0 0 40px 0;
|
|
|
+ }
|
|
|
+ .tabs-box{
|
|
|
+ display: flex;
|
|
|
+ a{
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4E5969;
|
|
|
+ border-radius: 100px;
|
|
|
+ padding: 5px 16px;
|
|
|
+ margin-right: 16px;
|
|
|
+ &:hover{
|
|
|
+ background: #F2F3F5;
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ background: #F2F3F5;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #165DFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form{
|
|
|
+ margin-top: 40px;
|
|
|
+ .show-icon{
|
|
|
+ cursor: pointer;
|
|
|
+ color: #4E5969;
|
|
|
+ }
|
|
|
+ .forgotPwd{
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #165DFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.result-box{
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 46px;
|
|
|
+ img{
|
|
|
+ width: 64px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ width: 260px;
|
|
|
+ color: #000;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ margin: 16px auto 62px auto;
|
|
|
+ }
|
|
|
+ .el-button{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.forgot-container{
|
|
|
+ .form{
|
|
|
+ .el-form-item__label{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4E5969;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ }
|
|
|
+ .userAgree-box{
|
|
|
+ .el-form-item__content{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .el-checkbox-group{
|
|
|
+ flex: 1;
|
|
|
+ .el-checkbox{
|
|
|
+ color: rgba(0, 0, 0, 0.88);
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-box{
|
|
|
+ .el-button{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .el-button+.el-button{
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-button--primary{
|
|
|
+ background: #165DFF;
|
|
|
+ border-color: #165DFF;
|
|
|
+ border-radius: 2px;
|
|
|
+ &:hover{
|
|
|
+ background: #4080FF;
|
|
|
+ border-color: #4080FF;
|
|
|
+ }
|
|
|
+ &:focus{
|
|
|
+ background: #0E42D2;
|
|
|
+ border-color: #0E42D2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-button--default{
|
|
|
+ background: #F2F3F5;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: none;
|
|
|
+ color: #4E5969;
|
|
|
+ &:hover{
|
|
|
+ background: #E5E6EB;
|
|
|
+ }
|
|
|
+ &:focus{
|
|
|
+ background: #C9CDD4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .code-box{
|
|
|
+ .el-form-item__content{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .code-input{
|
|
|
+ height: 32px;
|
|
|
+ .el-input__inner{
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sendCode{
|
|
|
+ border-radius: 0 4px 4px 0;
|
|
|
+ margin-top: 1px;
|
|
|
+ width: 92px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .el-form-item__content,.el-input__icon{
|
|
|
+ line-height: 32px;
|
|
|
+ color: #4E5969 !important;
|
|
|
+ }
|
|
|
+ .el-input__inner{
|
|
|
+ height: 32px;
|
|
|
+ color: #1D2129;
|
|
|
+ background: #F2F3F5;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-textarea__inner,.el-input-group__prepend{
|
|
|
+ color: #1D2129;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked+.el-checkbox__label{
|
|
|
+ color: #165DFF;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
|
|
+ background: #165DFF;
|
|
|
+ border-color: #165DFF;
|
|
|
+ }
|
|
|
+ .el-input-group__prepend{
|
|
|
+ width: 54px;
|
|
|
+ height: 32px;
|
|
|
+ border: none;
|
|
|
+ background: #F2F3F5;
|
|
|
+ border-radius: 2px 0px 0px 2px;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .el-input-group--prepend{
|
|
|
+ display: flex;
|
|
|
+ .el-input__inner{
|
|
|
+ margin-left: 8px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover{
|
|
|
+ background-color: #a0cfff;
|
|
|
+ border-color: #a0cfff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha
