Skip to content

S
smart_gov_platform
Commit 6ff04972 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

feat: 登录页添加修改密码功能

parent 05d0b025
Hide whitespace changes
Inline Side-by-side
Showing with 344 additions and 91 deletions
portal-manager-ui/admin/src/api/user.js
View file @ 6ff04972
......@@ -20,3 +20,7 @@ export function changePassword(params) {
export function editPassword(params) {
return http.post(`${baseURL}/zwfw/user/reset/password`, params);
}
// 密码过期修改密码
export function changeForgotPassword(params) {
return http.post(`${baseURL}/zwfw/user/forgot/password`, params);
}
portal-manager-ui/admin/src/request/request.js
View file @ 6ff04972
......@@ -59,7 +59,7 @@ axios.interceptors.response.use(
message.error({
content: msg,
maxCount: 1,
duration: 1,
duration: 2,
});
store.commit("user/reset");
router.push("/");
......
portal-manager-ui/admin/src/views/signIn/signIn.vue
View file @ 6ff04972
......@@ -5,102 +5,262 @@
<p class="slogan-text slogan-text-1 mb-12">长江第一城</p>
<p class="slogan-text slogan-text-2">巴蜀醉宜宾</p>
</div>
<div class="login-box">
<img class="w-[74px] mb-[20px]" src="@/assets/images/logo.png" />
<p class="login-text text-[40px] mb-[20px]">欢迎登录!</p>
<p class="login-text text-[32px] mb-[30px]">
{{ sysName }}
</p>
<a-form-model
:model="form"
ref="form"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-model-item prop="loginName">
<a-input
placeholder="请输入用户名"
v-model="form.loginName"
@pressEnter="handleSubmit"
>
<img slot="prefix" src="@/assets/images/icon-user.png" />
<img
slot="suffix"
v-show="form.loginName"
class="cursor-pointer"
@click="form.loginName = ''"
src="@/assets/images/icon-close.png"
/>
</a-input>
</a-form-model-item>
<a-form-model-item prop="password">
<a-input
placeholder="请输入密码"
:type="iptType"
v-model="form.password"
@pressEnter="handleSubmit"
>
<img slot="prefix" src="@/assets/images/icon-user.png" />
<template slot="suffix">
<a-space>
<img
v-show="form.password"
class="cursor-pointer"
@click="form.password = ''"
src="@/assets/images/icon-close.png"
/>
<i
v-if="iptType == 'password'"
class="iconfont icon-hidden cursor-pointer"
@click="iptType = 'text'"
></i>
<i
v-else
class="iconfont icon-show cursor-pointer"
@click="iptType = 'password'"
></i>
</a-space>
</template>
</a-input>
</a-form-model-item>
<a-form-model-item class="code" prop="securityCode">
<a-input
placeholder="请输入验证码"
v-model="form.securityCode"
@pressEnter="handleSubmit"
>
<img
slot="suffix"
v-show="form.securityCode"
class="cursor-pointer"
@click="form.securityCode = ''"
src="@/assets/images/icon-close.png"
/>
</a-input>
<div class="code-box">
<img :src="imgCode" @click="createCode" />
<div class="w-[490px] h-[660px]">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- 登录框 -->
<div class="login-box">
<img
class="w-[74px] mb-[20px]"
src="@/assets/images/logo.png"
/>
<p class="login-text text-[40px] mb-[20px]">欢迎登录!</p>
<p class="login-text text-[32px] mb-[30px]">
{{ sysName }}
</p>
<a-form-model
:model="form"
ref="form"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-model-item prop="loginName">
<a-input
placeholder="请输入用户名"
v-model="form.loginName"
@pressEnter="handleSubmit"
>
<img slot="prefix" src="@/assets/images/icon-user.png" />
<img
slot="suffix"
v-show="form.loginName"
class="cursor-pointer"
@click="form.loginName = ''"
src="@/assets/images/icon-close.png"
/>
</a-input>
</a-form-model-item>
<a-form-model-item prop="password">
<a-input
placeholder="请输入密码"
:type="TypeForm.iptType"
v-model="form.password"
@pressEnter="handleSubmit"
>
<img slot="prefix" src="@/assets/images/icon-user.png" />
<template slot="suffix">
<a-space>
<img
v-show="form.password"
class="cursor-pointer"
@click="form.password = ''"
src="@/assets/images/icon-close.png"
/>
<i
v-if="TypeForm.iptType == 'password'"
class="iconfont icon-hidden cursor-pointer"
@click="TypeForm.iptType = 'text'"
></i>
<i
v-else
class="iconfont icon-show cursor-pointer"
@click="TypeForm.iptType = 'password'"
></i>
</a-space>
</template>
</a-input>
</a-form-model-item>
<a-form-model-item class="code" prop="securityCode">
<a-input
placeholder="请输入验证码"
v-model="form.securityCode"
@pressEnter="handleSubmit"
>
<img
slot="suffix"
v-show="form.securityCode"
class="cursor-pointer"
@click="form.securityCode = ''"
src="@/assets/images/icon-close.png"
/>
</a-input>
<div class="code-box">
<img :src="imgCode" @click="createCode" />
</div>
</a-form-model-item>
<a-form-model-item>
<a-button
:loading="loading"
class="login-btn"
@click="handleSubmit"
>登录</a-button
>
</a-form-model-item>
</a-form-model>
</div>
</div>
</a-form-model-item>
<a-form-model-item>
<a-button :loading="loading" class="login-btn" @click="handleSubmit"
>登录</a-button
>
</a-form-model-item>
</a-form-model>
<div class="swiper-slide">
<!-- 修改密码框 -->
<div class="revamp-box">
<img
class="w-[74px] mb-[20px]"
src="@/assets/images/logo.png"
/>
<p class="login-text text-[40px] mb-[20px]">请修改密码</p>
<p class="login-text text-[32px] mb-[30px]">
密码有效期为三个月
</p>
<a-form-model
:model="changePwdForm"
ref="changePwdForm"
:rules="PwdFormRules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-model-item prop="loginName">
<a-input
placeholder="请输入用户名"
v-model="changePwdForm.loginName"
@pressEnter="changePwd"
>
<img slot="prefix" src="@/assets/images/icon-user.png" />
<img
slot="suffix"
v-show="changePwdForm.loginName"
class="cursor-pointer"
@click="changePwdForm.loginName = ''"
src="@/assets/images/icon-close.png"
/>
</a-input>
</a-form-model-item>
<a-form-model-item prop="oldPwd">
<a-input
placeholder="请输入原密码"
:type="TypeForm.oldType"
v-model="changePwdForm.oldPwd"
@pressEnter="changePwd"
>
<img slot="prefix" src="@/assets/images/icon-user.png" />
<template slot="suffix">
<a-space>
<img
v-show="changePwdForm.oldPwd"
class="cursor-pointer"
@click="changePwdForm.oldPwd = ''"
src="@/assets/images/icon-close.png"
/>
<i
v-if="TypeForm.oldType == 'password'"
class="iconfont icon-hidden cursor-pointer"
@click="TypeForm.oldType = 'text'"
></i>
<i
v-else
class="iconfont icon-show cursor-pointer"
@click="TypeForm.oldType = 'password'"
></i>
</a-space>
</template>
</a-input>
</a-form-model-item>
<a-form-model-item prop="newPwd">
<a-input
placeholder="请输入新密码"
:type="TypeForm.newType"
v-model="changePwdForm.newPwd"
@pressEnter="changePwd"
>
<img slot="prefix" src="@/assets/images/icon-user.png" />
<template slot="suffix">
<a-space>
<img
v-show="changePwdForm.newPwd"
class="cursor-pointer"
@click="changePwdForm.newPwd = ''"
src="@/assets/images/icon-close.png"
/>
<i
v-if="TypeForm.newType == 'password'"
class="iconfont icon-hidden cursor-pointer"
@click="TypeForm.newType = 'text'"
></i>
<i
v-else
class="iconfont icon-show cursor-pointer"
@click="TypeForm.newType = 'password'"
></i>
</a-space>
</template>
</a-input>
</a-form-model-item>
<a-form-model-item prop="newPwdAgain">
<a-input
placeholder="请再次输入新密码"
:type="TypeForm.newAgainType"
v-model="changePwdForm.newPwdAgain"
@pressEnter="changePwd"
>
<img slot="prefix" src="@/assets/images/icon-user.png" />
<template slot="suffix">
<a-space>
<img
v-show="changePwdForm.newPwdAgain"
class="cursor-pointer"
@click="changePwdForm.newPwdAgain = ''"
src="@/assets/images/icon-close.png"
/>
<i
v-if="TypeForm.newAgainType == 'password'"
class="iconfont icon-hidden cursor-pointer"
@click="TypeForm.newAgainType = 'text'"
></i>
<i
v-else
class="iconfont icon-show cursor-pointer"
@click="TypeForm.newAgainType = 'password'"
></i>
</a-space>
</template>
</a-input>
</a-form-model-item>
<a-form-model-item>
<a-button
:loading="changeloading"
class="login-btn"
@click="changePwd"
>确认</a-button
>
</a-form-model-item>
</a-form-model>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { LoginInterface } from "@/api/user.js";
import Swiper from "swiper";
import { LoginInterface, changeForgotPassword } from "@/api/user.js";
import { mapMutations, mapState } from "vuex";
import { changeAccount } from "@/utils/js/validate";
import { changeAccount, changePassWord } from "@/utils/js/validate";
import { encrypt } from "@/utils";
import storage from "@/utils/js/Storage";
export default {
data() {
const changePwdAgain = (rule, value, callback) => {
if (!value) {
callback(new Error("请再次输入密码"));
} else if (value !== this.changePwdForm.newPwd) {
callback(new Error("两次密码输入不一致"));
} else {
callback();
}
};
return {
sysName: process.env.VUE_APP_systemName,
labelCol: { span: 0 },
......@@ -108,7 +268,13 @@ export default {
api: process.env.VUE_APP_API_BASE_URL,
loading: false,
imgCode: "",
iptType: "password",
changeloading: false,
TypeForm: {
iptType: "password", // 登录密码输入框切换
oldType: "password", // 原密码输入框切换
newType: "password", // 新密码输入框切换
newAgainType: "password", // 再次输入新密码输入框切换
},
form: {
loginName: "",
password: "",
......@@ -116,6 +282,12 @@ export default {
mark: "",
type: 2,
},
changePwdForm: {
loginName: "",
oldPwd: "", // 原密码
newPwd: "", // 新密码
newPwdAgain: "", // 新密码
},
rules: {
loginName: [
{ required: true, validator: changeAccount, trigger: "blur" },
......@@ -125,6 +297,20 @@ export default {
{ required: true, message: "请输入验证码", trigger: "blur" },
],
},
PwdFormRules: {
loginName: [
{ required: true, validator: changeAccount, trigger: "blur" },
],
oldPwd: [
{ required: true, validator: changePassWord, trigger: "blur" },
],
newPwd: [
{ required: true, validator: changePassWord, trigger: "blur" },
],
newPwdAgain: [
{ required: true, validator: changePwdAgain, trigger: "blur" },
],
},
};
},
computed: {
......@@ -136,8 +322,38 @@ export default {
}
this.createCode();
},
mounted() {
this.initSwiper();
},
methods: {
...mapMutations("user", ["set_token", "SET_USERDATA", "set_siteList"]),
initSwiper() {
this.mySwiper = new Swiper(".mySwiper", {
effect: "cube", // 方块动画
speed: 1000, // 时长
simulateTouch: false, //禁止鼠标滑动切换
grabCursor: false, // 手形鼠标
cubeEffect: {
shadow: false, // 取消盒子阴影
slideShadows: false, // 取消子项拖动时候的阴影
// shadowOffset: 20,
// shadowScale: 0.94,
},
on: {
slideChange: () => {
// 初始化密码框类型
Object.assign(this.TypeForm, this.$options.data().TypeForm);
this.loading = false;
this.changeloading = false;
this.$refs.changePwdForm.resetFields();
this.$refs.form.resetFields();
this.createCode();
},
},
});
this.mySwiper.init();
},
// 获取验证码
createCode() {
// 加时间戳印记用于刷新gif
......@@ -155,7 +371,7 @@ export default {
loginName: encrypt(this.form.loginName),
password: encrypt(this.form.password),
});
let { code, data } = res;
let { code, data, msg } = res;
if (code == 1) {
let { siteList, user, token } = data;
this.set_token(token);
......@@ -168,6 +384,11 @@ export default {
setTimeout(() => {
this.$router.push("/home");
}, 20);
} else if (code == 99998) {
this.$message.error(msg);
setTimeout(() => {
this.mySwiper.slideTo(1);
}, 500);
} else {
this.createCode();
}
......@@ -175,6 +396,29 @@ export default {
}
});
},
// 修改密码
changePwd() {
this.$refs.changePwdForm.validate(async (valid) => {
if (valid) {
this.changeloading = true;
let obj = {
loginName: this.changePwdForm.loginName,
oldPwd: encrypt(this.changePwdForm.oldPwd),
newPwd: encrypt(this.changePwdForm.newPwd),
};
let res = await changeForgotPassword(obj);
this.changeloading = false;
let { msg, code } = res;
if (code == 1) {
this.$message.success(msg);
setTimeout(() => {
this.mySwiper.slideTo(0);
}, 500);
}
}
});
},
},
};
</script>
......@@ -243,9 +487,14 @@ export default {
margin-left: 1em;
animation: var(--time) printText var(--time) steps(5) both;
}
.login-box {
width: 490px;
height: 660px;
.swiper {
width: 100%;
height: 100%;
}
.login-box,
.revamp-box {
width: 100%;
height: 100%;
padding: 60px 34px;
background: url("@/assets/images/login_box_bg.png") center;
background-size: 100% 100%;
......@@ -324,4 +573,4 @@ export default {
color: #ffffff;
}
}
</style>
\ No newline at end of file
</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