mz666
/
bocai_supplyChain_pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

改密码退出登录

Browse Source
cyl/dev
wangxia 1 year ago
parent 348d7aa09e
commit 06cd26d2c8
1 changed files with 429 additions and 411 deletions
Show Stats Download Patch File Download Diff File

840
src/components/Login/updatepsw.vue
Unescape Escape View File

@ -1,447 +1,465 @@
<template> <template>
<div class="center"> <div class="center">
<div class="formcontainer"> <div class="formcontainer">
<!-- <ul class="loginchange centerall"> <!-- <ul class="loginchange centerall">
<router-link to="/login"><li class="goback">&lt;返回</li></router-link> <router-link to="/login"><li class="goback">&lt;返回</li></router-link>
<li class="loginactive">找回密码</li> <li class="loginactive">找回密码</li>
</ul>--> </ul>-->
<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
'tel', v-decorator="[
{ 'tel',
rules: [ {
{ required: true, message: '请输入手机号' }, rules: [
{ { required: true, message: '请输入手机号' },
pattern: /^1[3456789]\d{9}$/, {
message: '请输入正确手机号', pattern: /^1[3456789]\d{9}$/,
}, message: '请输入正确手机号',
], },
validateTrigger: 'submit', ],
}, validateTrigger: 'submit',
]" autocomplete="off" :maxLength="11" placeholder="请输入手机号"> },
<!-- <i slot="prefix" class="icon-shouji iconfont" style="font-size: 24px" /> --> ]"
</a-input> autocomplete="off"
</a-form-item> :maxLength="11"
<a-form-item label="验证码" style="text-align: left"> placeholder="请输入手机号"
<div class="g_flex_row_start"> >
<div> <!-- <i slot="prefix" class="icon-shouji iconfont" style="font-size: 24px" /> -->
<a-input style="width:240px" v-decorator="[ </a-input>
'code', </a-form-item>
{ <a-form-item label="验证码" style="text-align: left">
rules: [ <div class="g_flex_row_start">
{ <div>
required: true, <a-input
message: '请输入验证码', style="width: 240px"
}, v-decorator="[
], 'code',
validateTrigger: 'submit', {
}, rules: [
]" type="text" placeholder="请输入短信验证码"> {
<!-- <i slot="prefix" class="icon-duanxinyanzheng iconfont" /> --> required: true,
<!-- <span class="getrulecode" slot="suffix"> message: '请输入验证码',
},
],
validateTrigger: 'submit',
},
]"
type="text"
placeholder="请输入短信验证码"
>
<!-- <i slot="prefix" class="icon-duanxinyanzheng iconfont" /> -->
<!-- <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>
<timmer :timedata="timedata" v-if="!timedata.isfinish" /> <timmer :timedata="timedata" v-if="!timedata.isfinish" />
</span> --> </span> -->
</a-input> </a-input>
</div> </div>
<div class="g_ml_12"> <div class="g_ml_12">
<!-- <a-button> <!-- <a-button>
<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>
</div> </div>
</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
'password', @input="getpassword"
{ v-decorator="[
rules: [ 'password',
{ {
required: true, rules: [
message: '请输入新密码', {
}, required: true,
], message: '请输入新密码',
validateTrigger: 'submit', },
}, ],
]" type="password" placeholder="请输入密码"> validateTrigger: 'submit',
<!-- <i slot="prefix" class="iconfont icon-mima" /> --> },
</a-input> ]"
</a-form-item> type="password"
<a-form-item label="确认密码" style="text-align: left"> placeholder="请输入密码"
<a-input v-decorator="[ >
'newpassword', <!-- <i slot="prefix" class="iconfont icon-mima" /> -->
{ </a-input>
rules: [ </a-form-item>
{ <a-form-item label="确认密码" style="text-align: left">
required: true, <a-input
message: '请再次输入新密码', v-decorator="[
}, 'newpassword',
{ {
validator: replacepassword, rules: [
}, {
], required: true,
validateTrigger: 'submit', message: '请再次输入新密码',
validateFirst: true, },
}, {
]" type="password" placeholder="请再次输入密码"> validator: replacepassword,
<!-- <i slot="prefix" class="iconfont icon-mima" /> --> },
</a-input> ],
</a-form-item> validateTrigger: 'submit',
<a-form-item label class="submit" style="height: 40px;position: relative;margin-bottom: 0;"> validateFirst: true,
<div class="state-box"> },
<a-button type="primary" class="cancel login-form-button" @click="cancel">取消</a-button> ]"
<a-button type="password"
style="border: 1px solid #1890ff;" placeholder="请再次输入密码"
type="primary" html-type="submit" :loading="btnLoading" class="login-form-button">确定</a-button> >
</div> <!-- <i slot="prefix" class="iconfont icon-mima" /> -->
</a-form-item> </a-input>
</a-form> </a-form-item>
<!-- <div class="register"> <a-form-item label class="submit" style="height: 40px; position: relative; margin-bottom: 0">
<div class="state-box">
<a-button type="primary" class="cancel login-form-button" @click="cancel">取消</a-button>
<a-button style="border: 1px solid #1890ff" type="primary" html-type="submit" :loading="btnLoading" class="login-form-button">确定</a-button>
</div>
</a-form-item>
</a-form>
<!-- <div class="register">
<router-link to="/register">还没有账号，立即注册</router-link> <router-link to="/register">还没有账号，立即注册</router-link>
</div>--> </div>-->
</template> </template>
</div> </div>
</div> </div>
</div> </div>
</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,
}, },
// 组件参数 接收来自父组件的数据 // 组件参数 接收来自父组件的数据
props: { props: {
loginShow: { loginShow: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
}, },
// 组件状态值 // 组件状态值
data() { data() {
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,
deadline: 60, deadline: 60,
timmer: null, timmer: null,
}, },
btnLoading: false, btnLoading: false,
} };
}, },
// 计算属性 // 计算属性
computed: {}, computed: {},
// 侦听器 // 侦听器
watch: {}, watch: {},
// 生命周期钩子 注：没用到的钩子请自行删除 // 生命周期钩子 注：没用到的钩子请自行删除
/** /**
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
*/ */
created() {}, created() {},
/** /**
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。 * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
*/ */
mounted() {}, mounted() {},
// 组件方法 // 组件方法
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();
} else { this.$router.push("/login");
this.$message.warning(data.msg) } else {
} 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">
.submit { .submit {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.center { .center {
width: unset !important; width: unset !important;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: center; justify-content: center;
// margin: 0 auto; // margin: 0 auto;
/deep/ .login-form { /deep/ .login-form {
background-color: #fff !important; background-color: #fff !important;
} }
.centerall { .centerall {
margin: 0 auto; margin: 0 auto;
} }
.loginchange { .loginchange {
display: flex; display: flex;
position: relative; position: relative;
width: 230px; width: 230px;
justify-content: center; justify-content: center;
margin-top: 32px; margin-top: 32px;
.loginactive { .loginactive {
color: #4d575e; color: #4d575e;
border-bottom: 1px solid #4d575e; border-bottom: 1px solid #4d575e;
} }
a { a {
li { li {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
font-size: 14px; font-size: 14px;
margin-bottom: 0; margin-bottom: 0;
padding: 0; padding: 0;
color: #4d575e; color: #4d575e;
&:hover { &:hover {
color: #ff6a00cc; color: #ff6a00cc;
} }
} }
} }
li { li {
padding: 0 0 4px 0; padding: 0 0 4px 0;
margin-bottom: 24px; margin-bottom: 24px;
font-size: 14px; font-size: 14px;
text-align: left; text-align: left;
color: #cccccc; color: #cccccc;
line-height: 22px; line-height: 22px;
cursor: pointer; cursor: pointer;
} }
} }
.formbox { .formbox {
width: 444px; width: 444px;
margin: 0 auto; margin: 0 auto;
.ant-form-item { .ant-form-item {
display: flex; display: flex;
margin-bottom: 16px; margin-bottom: 16px;
// align-items: center; // align-items: center;
} }
/deep/ .ant-form-explain { /deep/ .ant-form-explain {
// margin-top: -2px; // margin-top: -2px;
// line-height: 20px; // line-height: 20px;
min-height: 20px !important; min-height: 20px !important;
} }
/deep/.ant-form-item-control { /deep/.ant-form-item-control {
width: 360px !important; width: 360px !important;
.ant-input-affix-wrapper { .ant-input-affix-wrapper {
display: flex; display: flex;
flex: 1; flex: 1;
} }
} }
/deep/.ant-input-affix-wrapper { /deep/.ant-input-affix-wrapper {
i { i {
font-size: 26px; font-size: 26px;
// margin: 0 8px 0 4px; // margin: 0 8px 0 4px;
color: #4d575e; color: #4d575e;
} }
.ant-input { .ant-input {
height: 32px; height: 32px;
// background-color: #f6f6f6; // background-color: #f6f6f6;
// width: 430px; // width: 430px;
text-indent: 15px; text-indent: 15px;
font-size: 14px; font-size: 14px;
// border: none; // border: none;
padding: 0 !important; padding: 0 !important;
border: 1px solid #dddddd; border: 1px solid #dddddd;
&:hover { &:hover {
border-color: #1890ff; border-color: #1890ff;
} }
&:focus { &:focus {
box-shadow: none; box-shadow: none;
} }
&::placeholder { &::placeholder {
opacity: 0.4; opacity: 0.4;
color: #4d575e; color: #4d575e;
font-size: 14px; font-size: 14px;
text-indent: 15px; text-indent: 15px;
} }
} }
} }
.ant-input { .ant-input {
height: 32px; height: 32px;
// background-color: #f6f6f6; // background-color: #f6f6f6;
// width: 430px; // width: 430px;
text-indent: 15px; text-indent: 15px;
font-size: 14px; font-size: 14px;
// border: none; // border: none;
padding: 0 !important; padding: 0 !important;
border: 1px solid #dddddd; border: 1px solid #dddddd;
&:hover { &:hover {
border-color: #1890ff; border-color: #1890ff;
} }
&:focus { &:focus {
box-shadow: none; box-shadow: none;
} }
&::placeholder { &::placeholder {
opacity: 0.4; opacity: 0.4;
color: #4d575e; color: #4d575e;
font-size: 14px; font-size: 14px;
text-indent: 15px; text-indent: 15px;
} }
} }
.register { .register {
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: 12px; font-size: 12px;
span { span {
color: #4d575e; color: #4d575e;
i { i {
vertical-align: middle; vertical-align: middle;
margin-right: 10px; margin-right: 10px;
} }
} }
a { a {
color: #353649; color: #353649;
} }
} }
.getrulecode { .getrulecode {
font-size: 12px; font-size: 12px;
width: 67px; width: 67px;
text-align: center; text-align: center;
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;
} }
} }
} }
.cancel.login-form-button { .cancel.login-form-button {
background-color: #fff; background-color: #fff;
color: #1890ff; color: #1890ff;
border: 1px solid #1890ff; border: 1px solid #1890ff;
margin-right: 16px; margin-right: 16px;
} }
.login-form-button { .login-form-button {
width: 60px; width: 60px;
height: 32px; height: 32px;
margin-top: 16px; margin-top: 16px;
border-radius: 0px; border-radius: 0px;
background-color: #1890ff; background-color: #1890ff;
font-size: 14px; font-size: 14px;
border: none; border: none;
color: white; color: white;
padding: 0 !important; padding: 0 !important;
line-height: 32px; line-height: 32px;
border-radius: 6px; border-radius: 6px;
} }
.login-form-button span { .login-form-button span {
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;
color: #1677ff !important; color: #1677ff !important;
background-color: transparent; background-color: transparent;
border-color: #1677ff; border-color: #1677ff;
box-shadow: none; box-shadow: none;
font-size: 14px !important; font-size: 14px !important;
// padding: 7px 12.5px; // padding: 7px 12.5px;
border-radius: 6px; border-radius: 6px;
position: relative; position: relative;
top: 4px; top: 4px;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save