改密码退出登录

cyl/dev
wangxia 1 year ago
parent 348d7aa09e
commit 06cd26d2c8

@ -8,8 +8,9 @@
<div class="formbox"> <div class="formbox">
<template> <template>
<a-form id="components-form-demo-normal-login" hideRequiredMark :form="form1" class="login-form" @submit="phonehandleSubmit" layout="horizontal" :wrapperCol="{ span: 14 }" :labelCol="{ span: 4 }"> <a-form id="components-form-demo-normal-login" hideRequiredMark :form="form1" class="login-form" @submit="phonehandleSubmit" layout="horizontal" :wrapperCol="{ span: 14 }" :labelCol="{ span: 4 }">
<a-form-item label="手机号" style="text-align: left;"> <a-form-item label="手机号" style="text-align: left">
<a-input v-decorator="[ <a-input
v-decorator="[
'tel', 'tel',
{ {
rules: [ rules: [
@ -21,14 +22,20 @@
], ],
validateTrigger: 'submit', validateTrigger: 'submit',
}, },
]" autocomplete="off" :maxLength="11" placeholder="请输入手机号"> ]"
autocomplete="off"
:maxLength="11"
placeholder="请输入手机号"
>
<!-- <i slot="prefix" class="icon-shouji iconfont" style="font-size: 24px" /> --> <!-- <i slot="prefix" class="icon-shouji iconfont" style="font-size: 24px" /> -->
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-form-item label="验证码" style="text-align: left"> <a-form-item label="验证码" style="text-align: left">
<div class="g_flex_row_start"> <div class="g_flex_row_start">
<div> <div>
<a-input style="width:240px" v-decorator="[ <a-input
style="width: 240px"
v-decorator="[
'code', 'code',
{ {
rules: [ rules: [
@ -39,7 +46,10 @@
], ],
validateTrigger: 'submit', validateTrigger: 'submit',
}, },
]" type="text" placeholder="请输入短信验证码"> ]"
type="text"
placeholder="请输入短信验证码"
>
<!-- <i slot="prefix" class="icon-duanxinyanzheng iconfont" /> --> <!-- <i slot="prefix" class="icon-duanxinyanzheng iconfont" /> -->
<!-- <span class="getrulecode" slot="suffix"> <!-- <span class="getrulecode" slot="suffix">
<span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish"></span> <span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish"></span>
@ -52,7 +62,7 @@
<span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish"></span> <span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish"></span>
<timmer :timedata="timedata" v-if="!timedata.isfinish" /> <timmer :timedata="timedata" v-if="!timedata.isfinish" />
</a-button> --> </a-button> -->
<div class="getrulecode sms-btn" style="line-height: 32px;"> <div class="getrulecode sms-btn" style="line-height: 32px">
<span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish"></span> <span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish"></span>
<timmer :timedata="timedata" v-if="!timedata.isfinish" /> <timmer :timedata="timedata" v-if="!timedata.isfinish" />
</div> </div>
@ -60,7 +70,9 @@
</div> </div>
</a-form-item> </a-form-item>
<a-form-item label="新密码" style="text-align: left"> <a-form-item label="新密码" style="text-align: left">
<a-input @input="getpassword" v-decorator="[ <a-input
@input="getpassword"
v-decorator="[
'password', 'password',
{ {
rules: [ rules: [
@ -71,12 +83,16 @@
], ],
validateTrigger: 'submit', validateTrigger: 'submit',
}, },
]" type="password" placeholder="请输入密码"> ]"
type="password"
placeholder="请输入密码"
>
<!-- <i slot="prefix" class="iconfont icon-mima" /> --> <!-- <i slot="prefix" class="iconfont icon-mima" /> -->
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-form-item label="确认密码" style="text-align: left"> <a-form-item label="确认密码" style="text-align: left">
<a-input v-decorator="[ <a-input
v-decorator="[
'newpassword', 'newpassword',
{ {
rules: [ rules: [
@ -91,16 +107,17 @@
validateTrigger: 'submit', validateTrigger: 'submit',
validateFirst: true, validateFirst: true,
}, },
]" type="password" placeholder="请再次输入密码"> ]"
type="password"
placeholder="请再次输入密码"
>
<!-- <i slot="prefix" class="iconfont icon-mima" /> --> <!-- <i slot="prefix" class="iconfont icon-mima" /> -->
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-form-item label class="submit" style="height: 40px;position: relative;margin-bottom: 0;"> <a-form-item label class="submit" style="height: 40px; position: relative; margin-bottom: 0">
<div class="state-box"> <div class="state-box">
<a-button type="primary" class="cancel login-form-button" @click="cancel"></a-button> <a-button type="primary" class="cancel login-form-button" @click="cancel"></a-button>
<a-button <a-button style="border: 1px solid #1890ff" type="primary" html-type="submit" :loading="btnLoading" class="login-form-button">确定</a-button>
style="border: 1px solid #1890ff;"
type="primary" html-type="submit" :loading="btnLoading" class="login-form-button">确定</a-button>
</div> </div>
</a-form-item> </a-form-item>
</a-form> </a-form>
@ -114,13 +131,13 @@
</template> </template>
<script> <script>
import { getPhoneCodeApi, updatePswApi } from '../../api/login' import { getPhoneCodeApi, updatePswApi } from "../../api/login";
import timmer from './components/countback.vue' import timmer from "./components/countback.vue";
export default { export default {
inject: ['reload'], inject: ["reload","logout"],
// //
name: 'updatepsw', name: "updatepsw",
// //
components: { components: {
timmer, timmer,
@ -137,7 +154,7 @@ export default {
return { return {
loginway: 1, loginway: 1,
ischecked: false, ischecked: false,
setpassword: '', // setpassword: "", //
form1: this.$form.createForm(this), form1: this.$form.createForm(this),
timedata: { timedata: {
isfinish: true, isfinish: true,
@ -145,7 +162,7 @@ export default {
timmer: null, timmer: null,
}, },
btnLoading: false, btnLoading: false,
} };
}, },
// //
computed: {}, computed: {},
@ -164,88 +181,89 @@ export default {
// //
methods: { methods: {
cancel() { cancel() {
this.$emit('update:loginShow', false) this.$emit("update:loginShow", false);
}, },
phonehandleSubmit(e) { phonehandleSubmit(e) {
e.preventDefault() e.preventDefault();
let params = new FormData() let params = new FormData();
this.form1.validateFields(async (err, values) => { this.form1.validateFields(async (err, values) => {
console.log(err) console.log(err);
console.log(values) console.log(values);
if (!err) { if (!err) {
this.btnLoading = true this.btnLoading = true;
params.code = values.code params.code = values.code;
params.newpassword = values.newpassword params.newpassword = values.newpassword;
params.password = values.password params.password = values.password;
params.tel = values.tel params.tel = values.tel;
console.log(params) console.log(params);
try { try {
const { data } = await updatePswApi(params) const { data } = await updatePswApi(params);
console.log(data) console.log(data);
if (data.status == 200) { if (data.status == 200) {
this.$message.success('密码修改成功') this.$message.success("密码修改成功");
this.$emit('update:loginShow', false) this.$emit("update:loginShow", false);
this.$router.push('/login') this.logout();
this.$router.push("/login");
} else { } else {
this.$message.warning(data.msg) this.$message.warning(data.msg);
} }
// localStorage.setItem("LOGIN_DATA", JSON.stringify(data.data)); // localStorage.setItem("LOGIN_DATA", JSON.stringify(data.data));
setTimeout(() => { setTimeout(() => {
this.btnLoading = false this.btnLoading = false;
// this.reload() // this.reload()
}, 2000) }, 2000);
} catch (err) { } catch (err) {
this.btnLoading = false this.btnLoading = false;
console.log(err) console.log(err);
} }
} }
}) });
}, },
async getPhoneCode() { async getPhoneCode() {
const that = this const that = this;
this.form1.validateFields(['tel'], async (err, values) => { this.form1.validateFields(["tel"], async (err, values) => {
console.log(values) console.log(values);
if (!err) { if (!err) {
that.timedata.isfinish = false that.timedata.isfinish = false;
try { try {
const { data } = await getPhoneCodeApi({ tel: values.tel }) const { data } = await getPhoneCodeApi({ tel: values.tel });
console.log(data) console.log(data);
if (data.status !== 200) { if (data.status !== 200) {
this.$message.warning(data.msg) this.$message.warning(data.msg);
} }
} catch (error) { } catch (error) {
console.log(error) console.log(error);
} }
} else { } else {
console.log(err) console.log(err);
} }
}) });
}, },
checked() { checked() {
console.log(this.ischecked) console.log(this.ischecked);
}, },
getpassword(e) { getpassword(e) {
this.setpassword = e.target.value this.setpassword = e.target.value;
console.log(e) console.log(e);
}, },
// //
replacepassword(rule, value, callback) { replacepassword(rule, value, callback) {
console.log(rule) console.log(rule);
console.log(value) console.log(value);
if (this.setpassword !== value) { if (this.setpassword !== value) {
callback('两次密码不一致') callback("两次密码不一致");
} }
callback() callback();
// console.log(callback); // console.log(callback);
}, },
}, },
} };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@ -395,7 +413,7 @@ export default {
border-left: 1px #cccccc solid; border-left: 1px #cccccc solid;
line-height: 12px; line-height: 12px;
color: #4d575e; color: #4d575e;
span[data-mark='getcode'] { span[data-mark="getcode"] {
padding: 0 0 0 5px; padding: 0 0 0 5px;
cursor: pointer; cursor: pointer;
} }
@ -424,13 +442,13 @@ export default {
letter-spacing: 1px; letter-spacing: 1px;
} }
} }
.state-box{ .state-box {
position: absolute; position: absolute;
left: -37px; left: -37px;
width: 430px; width: 430px;
top: -15px; top: -15px;
} }
.sms-btn{ .sms-btn {
width: 102px !important; width: 102px !important;
height: 32px !important; height: 32px !important;
border: 1px solid #1890ff !important; border: 1px solid #1890ff !important;

Loading…
Cancel
Save