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) { ...@@ -20,3 +20,7 @@ export function changePassword(params) {
export function editPassword(params) { export function editPassword(params) {
return http.post(`${baseURL}/zwfw/user/reset/password`, 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( ...@@ -59,7 +59,7 @@ axios.interceptors.response.use(
message.error({ message.error({
content: msg, content: msg,
maxCount: 1, maxCount: 1,
duration: 1, duration: 2,
}); });
store.commit("user/reset"); store.commit("user/reset");
router.push("/"); router.push("/");
......
portal-manager-ui/admin/src/views/signIn/signIn.vue
View file @ 6ff04972
...@@ -5,102 +5,262 @@ ...@@ -5,102 +5,262 @@
<p class="slogan-text slogan-text-1 mb-12">长江第一城</p> <p class="slogan-text slogan-text-1 mb-12">长江第一城</p>
<p class="slogan-text slogan-text-2">巴蜀醉宜宾</p> <p class="slogan-text slogan-text-2">巴蜀醉宜宾</p>
</div> </div>
<div class="login-box"> <div class="w-[490px] h-[660px]">
<img class="w-[74px] mb-[20px]" src="@/assets/images/logo.png" /> <div class="swiper mySwiper">
<p class="login-text text-[40px] mb-[20px]">欢迎登录!</p> <div class="swiper-wrapper">
<p class="login-text text-[32px] mb-[30px]"> <div class="swiper-slide">
{{ sysName }} <!-- 登录框 -->
</p> <div class="login-box">
<a-form-model <img
:model="form" class="w-[74px] mb-[20px]"
ref="form" src="@/assets/images/logo.png"
:rules="rules" />
:label-col="labelCol" <p class="login-text text-[40px] mb-[20px]">欢迎登录!</p>
:wrapper-col="wrapperCol" <p class="login-text text-[32px] mb-[30px]">
> {{ sysName }}
<a-form-model-item prop="loginName"> </p>
<a-input <a-form-model
placeholder="请输入用户名" :model="form"
v-model="form.loginName" ref="form"
@pressEnter="handleSubmit" :rules="rules"
> :label-col="labelCol"
<img slot="prefix" src="@/assets/images/icon-user.png" /> :wrapper-col="wrapperCol"
<img >
slot="suffix" <a-form-model-item prop="loginName">
v-show="form.loginName" <a-input
class="cursor-pointer" placeholder="请输入用户名"
@click="form.loginName = ''" v-model="form.loginName"
src="@/assets/images/icon-close.png" @pressEnter="handleSubmit"
/> >
</a-input> <img slot="prefix" src="@/assets/images/icon-user.png" />
</a-form-model-item> <img
<a-form-model-item prop="password"> slot="suffix"
<a-input v-show="form.loginName"
placeholder="请输入密码" class="cursor-pointer"
:type="iptType" @click="form.loginName = ''"
v-model="form.password" src="@/assets/images/icon-close.png"
@pressEnter="handleSubmit" />
> </a-input>
<img slot="prefix" src="@/assets/images/icon-user.png" /> </a-form-model-item>
<template slot="suffix"> <a-form-model-item prop="password">
<a-space> <a-input
<img placeholder="请输入密码"
v-show="form.password" :type="TypeForm.iptType"
class="cursor-pointer" v-model="form.password"
@click="form.password = ''" @pressEnter="handleSubmit"
src="@/assets/images/icon-close.png" >
/> <img slot="prefix" src="@/assets/images/icon-user.png" />
<i <template slot="suffix">
v-if="iptType == 'password'" <a-space>
class="iconfont icon-hidden cursor-pointer" <img
@click="iptType = 'text'" v-show="form.password"
></i> class="cursor-pointer"
<i @click="form.password = ''"
v-else src="@/assets/images/icon-close.png"
class="iconfont icon-show cursor-pointer" />
@click="iptType = 'password'" <i
></i> v-if="TypeForm.iptType == 'password'"
</a-space> class="iconfont icon-hidden cursor-pointer"
</template> @click="TypeForm.iptType = 'text'"
</a-input> ></i>
</a-form-model-item> <i
<a-form-model-item class="code" prop="securityCode"> v-else
<a-input class="iconfont icon-show cursor-pointer"
placeholder="请输入验证码" @click="TypeForm.iptType = 'password'"
v-model="form.securityCode" ></i>
@pressEnter="handleSubmit" </a-space>
> </template>
<img </a-input>
slot="suffix" </a-form-model-item>
v-show="form.securityCode" <a-form-model-item class="code" prop="securityCode">
class="cursor-pointer" <a-input
@click="form.securityCode = ''" placeholder="请输入验证码"
src="@/assets/images/icon-close.png" v-model="form.securityCode"
/> @pressEnter="handleSubmit"
</a-input> >
<div class="code-box"> <img
<img :src="imgCode" @click="createCode" /> 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> </div>
</a-form-model-item> <div class="swiper-slide">
<a-form-model-item> <!-- 修改密码框 -->
<a-button :loading="loading" class="login-btn" @click="handleSubmit" <div class="revamp-box">
>登录</a-button <img
> class="w-[74px] mb-[20px]"
</a-form-model-item> src="@/assets/images/logo.png"
</a-form-model> />
<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> </div>
</div> </div>
</template> </template>
<script> <script>
import { LoginInterface } from "@/api/user.js"; import Swiper from "swiper";
import { LoginInterface, changeForgotPassword } from "@/api/user.js";
import { mapMutations, mapState } from "vuex"; import { mapMutations, mapState } from "vuex";
import { changeAccount } from "@/utils/js/validate"; import { changeAccount, changePassWord } from "@/utils/js/validate";
import { encrypt } from "@/utils"; import { encrypt } from "@/utils";
import storage from "@/utils/js/Storage"; import storage from "@/utils/js/Storage";
export default { export default {
data() { data() {
const changePwdAgain = (rule, value, callback) => {
if (!value) {
callback(new Error("请再次输入密码"));
} else if (value !== this.changePwdForm.newPwd) {
callback(new Error("两次密码输入不一致"));
} else {
callback();
}
};
return { return {
sysName: process.env.VUE_APP_systemName, sysName: process.env.VUE_APP_systemName,
labelCol: { span: 0 }, labelCol: { span: 0 },
...@@ -108,7 +268,13 @@ export default { ...@@ -108,7 +268,13 @@ export default {
api: process.env.VUE_APP_API_BASE_URL, api: process.env.VUE_APP_API_BASE_URL,
loading: false, loading: false,
imgCode: "", imgCode: "",
iptType: "password", changeloading: false,
TypeForm: {
iptType: "password", // 登录密码输入框切换
oldType: "password", // 原密码输入框切换
newType: "password", // 新密码输入框切换
newAgainType: "password", // 再次输入新密码输入框切换
},
form: { form: {
loginName: "", loginName: "",
password: "", password: "",
...@@ -116,6 +282,12 @@ export default { ...@@ -116,6 +282,12 @@ export default {
mark: "", mark: "",
type: 2, type: 2,
}, },
changePwdForm: {
loginName: "",
oldPwd: "", // 原密码
newPwd: "", // 新密码
newPwdAgain: "", // 新密码
},
rules: { rules: {
loginName: [ loginName: [
{ required: true, validator: changeAccount, trigger: "blur" }, { required: true, validator: changeAccount, trigger: "blur" },
...@@ -125,6 +297,20 @@ export default { ...@@ -125,6 +297,20 @@ export default {
{ required: true, message: "请输入验证码", trigger: "blur" }, { 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: { computed: {
...@@ -136,8 +322,38 @@ export default { ...@@ -136,8 +322,38 @@ export default {
} }
this.createCode(); this.createCode();
}, },
mounted() {
this.initSwiper();
},
methods: { methods: {
...mapMutations("user", ["set_token", "SET_USERDATA", "set_siteList"]), ...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() { createCode() {
// 加时间戳印记用于刷新gif // 加时间戳印记用于刷新gif
...@@ -155,7 +371,7 @@ export default { ...@@ -155,7 +371,7 @@ export default {
loginName: encrypt(this.form.loginName), loginName: encrypt(this.form.loginName),
password: encrypt(this.form.password), password: encrypt(this.form.password),
}); });
let { code, data } = res; let { code, data, msg } = res;
if (code == 1) { if (code == 1) {
let { siteList, user, token } = data; let { siteList, user, token } = data;
this.set_token(token); this.set_token(token);
...@@ -168,6 +384,11 @@ export default { ...@@ -168,6 +384,11 @@ export default {
setTimeout(() => { setTimeout(() => {
this.$router.push("/home"); this.$router.push("/home");
}, 20); }, 20);
} else if (code == 99998) {
this.$message.error(msg);
setTimeout(() => {
this.mySwiper.slideTo(1);
}, 500);
} else { } else {
this.createCode(); this.createCode();
} }
...@@ -175,6 +396,29 @@ export default { ...@@ -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> </script>
...@@ -243,9 +487,14 @@ export default { ...@@ -243,9 +487,14 @@ export default {
margin-left: 1em; margin-left: 1em;
animation: var(--time) printText var(--time) steps(5) both; animation: var(--time) printText var(--time) steps(5) both;
} }
.login-box { .swiper {
width: 490px; width: 100%;
height: 660px; height: 100%;
}
.login-box,
.revamp-box {
width: 100%;
height: 100%;
padding: 60px 34px; padding: 60px 34px;
background: url("@/assets/images/login_box_bg.png") center; background: url("@/assets/images/login_box_bg.png") center;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -324,4 +573,4 @@ export default { ...@@ -324,4 +573,4 @@ export default {
color: #ffffff; color: #ffffff;
} }
} }
</style> </style>
\ No newline at end of file
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