435 lines
11 KiB
Vue
435 lines
11 KiB
Vue
<!-- @format -->
|
||
|
||
<template>
|
||
<div class="signUp ns-view">
|
||
<a-layout>
|
||
<a-layout-header class="home_header" style="position: relative">
|
||
<img
|
||
v-if="themeConfig.logoUrl"
|
||
:src="themeConfig.logoUrl"
|
||
style="width: 192px; height: 48px; object-fit: contain" />
|
||
<ns-icon v-else name="login" style="width: auto; height: 40px" />
|
||
</a-layout-header>
|
||
<a-layout-content>
|
||
<div class="content">
|
||
<h1>{{ title }}</h1>
|
||
<div class="lg_card">
|
||
<h2>{{ themeConfig.webSiteTitle ? themeConfig.webSiteTitle : subTitle }}</h2>
|
||
<div class="form">
|
||
<ns-form
|
||
style="width: 100%; margin: auto"
|
||
ref="formOneRef"
|
||
formLayout="修改"
|
||
:schemas="formSchema"
|
||
:model="data" />
|
||
<div class="step-box">
|
||
<a-button @click="navigateBack">取消</a-button>
|
||
<a-button @click="submit" type="primary" :disabled="!formOneRef?.validateResult"
|
||
>确认修改</a-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-layout-content>
|
||
<a class="toLogin" @click="toLogin" v-show="step === 0">登录已有豪恩账号 ></a>
|
||
<!-- <a-layout-footer>Copyright 2021 鼎云科技 All Rights Reserved</a-layout-footer> -->
|
||
</a-layout>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, reactive, ref } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import { http } from '/nerv-lib/util/http';
|
||
import { Cookies } from '/nerv-lib/util/cookie';
|
||
import { authorizationService } from '/nerv-base/store/modules/authorization-service';
|
||
import { NsMessage } from '/nerv-lib/component/message';
|
||
import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config';
|
||
import { storeToRefs } from 'pinia';
|
||
import { useNavigate } from '/nerv-lib/use/use-navigate';
|
||
export default defineComponent({
|
||
name: 'UpdatePassWord',
|
||
setup() {
|
||
const router = useRouter();
|
||
const imageUrl = ref('/asset/image/login/logo.png');
|
||
const title = ref('修改密码');
|
||
const subTitle = ref('sass平台');
|
||
const { uuid } = router.currentRoute.value.query;
|
||
const formOneRef = ref();
|
||
const configStore = appConfigStore();
|
||
|
||
const { getThemeConfig: themeConfig } = storeToRefs(configStore);
|
||
if (configStore.updatePassWordInfo.title) {
|
||
title.value = configStore.updatePassWordInfo.title;
|
||
subTitle.value = configStore.updatePassWordInfo.subtitle;
|
||
}
|
||
let data = reactive({});
|
||
const authorizationStore = authorizationService();
|
||
const { navigateBackV2: navigateBack } = useNavigate();
|
||
const formSchema = reactive([
|
||
{
|
||
field: 'oldPassword',
|
||
label: '原密码',
|
||
component: 'NsInputPassword',
|
||
componentProps: {
|
||
autocomplete: 'new-password',
|
||
placeholder: '请输入原密码',
|
||
},
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: '原密码不能为空',
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
},
|
||
|
||
{
|
||
field: 'newPassword',
|
||
label: '新密码',
|
||
component: 'NsInputPassword',
|
||
componentProps: {
|
||
autocomplete: 'new-password',
|
||
placeholder: '密码不少于6位，支持字母、数字',
|
||
onchange: () => {
|
||
data.confirmPassword = '';
|
||
},
|
||
},
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: '新密码不能为空',
|
||
trigger: 'change',
|
||
},
|
||
{
|
||
validator: async (rule, value) => {
|
||
if (!value) {
|
||
return;
|
||
}
|
||
if (!/^([a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[a-z\d!@#$%^&*]{5,17}$/.test(value)) {
|
||
let strArray = value.split('');
|
||
if (strArray.indexOf(' ') !== -1) {
|
||
return Promise.reject('不能包含空格');
|
||
} else {
|
||
if (/[\u4E00-\u9FA5\uF900-\uFA2D]{1,}/.test(value)) {
|
||
return Promise.reject('不支持中文');
|
||
} else {
|
||
return Promise.reject(
|
||
'需同时包含数字,字母及特殊字符(!@#$%^&*)，且只能以字母开头，长度为6-18个字符',
|
||
);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
field: 'confirmPassword',
|
||
label: '确认密码',
|
||
component: 'NsInputPassword',
|
||
viewOnly: true,
|
||
componentProps: {
|
||
autocomplete: 'new-password',
|
||
placeholder: '请再次输入密码',
|
||
},
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: '不能为空',
|
||
trigger: 'change',
|
||
},
|
||
{
|
||
trigger: 'change',
|
||
validator: async (rule, value) => {
|
||
if (!value) {
|
||
return;
|
||
}
|
||
if (value !== data.newPassword) {
|
||
return Promise.reject('两次密码不一致');
|
||
}
|
||
},
|
||
},
|
||
],
|
||
},
|
||
]);
|
||
|
||
const loading = ref<boolean>(false);
|
||
|
||
// const title = ref<string>('修改密码');
|
||
|
||
const submit = (): void => {
|
||
formOneRef.value.triggerSubmit().then((data) => {
|
||
loading.value = true;
|
||
async function update() {
|
||
try {
|
||
const res = await http.post(configStore.updatePassWordInfo?.api, data);
|
||
if (res.success) {
|
||
NsMessage.success('修改成功，需重新登陆', 1, () => {
|
||
Cookies.remove('nervsid');
|
||
sessionStorage.clear();
|
||
router.push('/login');
|
||
authorizationStore.clearAuthorization();
|
||
});
|
||
}
|
||
loading.value = false;
|
||
} catch (err) {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
update();
|
||
});
|
||
};
|
||
return {
|
||
themeConfig,
|
||
submit,
|
||
formSchema,
|
||
data,
|
||
subTitle,
|
||
formOneRef,
|
||
imageUrl,
|
||
router,
|
||
uuid,
|
||
navigateBack,
|
||
title,
|
||
loading,
|
||
};
|
||
},
|
||
created() {
|
||
const _this = this;
|
||
window.sessionStorage.clear();
|
||
document.onkeydown = function (e) {
|
||
const key = window.event === undefined ? e.keyCode : window.event.keyCode;
|
||
key === 13 ? _this.submit() : '';
|
||
};
|
||
},
|
||
beforeUnmount() {
|
||
document.onkeydown = function (e) {};
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.ns-form.ns-vertical-form {
|
||
width: 80% !important;
|
||
}
|
||
.ns-form::after {
|
||
background-color: #f0f2f5;
|
||
display: none;
|
||
margin: 0 16px;
|
||
width: calc(100% - 32px);
|
||
}
|
||
.finalSubmitDiv {
|
||
width: 100%;
|
||
margin-top: 45px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.finalSubmit {
|
||
width: 90px;
|
||
height: 32px;
|
||
}
|
||
}
|
||
|
||
:deep(.verifyImgCode .ant-form-item) {
|
||
margin-bottom: 12px !important;
|
||
}
|
||
|
||
.signUp {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 40px;
|
||
|
||
h1 {
|
||
text-align: center;
|
||
font-size: 24px;
|
||
line-height: 44px;
|
||
margin-bottom: 40px;
|
||
}
|
||
.lg_card {
|
||
width: 80%;
|
||
min-width: 800px;
|
||
height: 70%;
|
||
min-height: 400px;
|
||
background: #fff;
|
||
// box-shadow: 0 2px 2px 0 rgb(0 0 0 / 5%), 0 0 18px 0 rgb(0 0 0 / 8%);
|
||
border-radius: 6px;
|
||
margin: auto !important;
|
||
// padding: 15px 35px 35px;
|
||
.form {
|
||
width: 50%;
|
||
min-width: 400px;
|
||
margin: auto;
|
||
padding-top: 40px;
|
||
}
|
||
h2 {
|
||
padding-top: 24px;
|
||
padding-bottom: 24px;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
border-bottom: 1px solid rgba(23, 46, 61, 0.15);
|
||
}
|
||
}
|
||
}
|
||
.toLogin {
|
||
width: 100%;
|
||
font-size: 16px;
|
||
line-height: 22px;
|
||
text-align: center;
|
||
color: #3aa7f2;
|
||
display: block;
|
||
margin-top: 40px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.icon {
|
||
color: @primary-color;
|
||
// background: #000;
|
||
// min-height: 25px;
|
||
// min-width: 25px;
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// border-radius: 50%;
|
||
}
|
||
.ant-layout-header {
|
||
height: 64px !important;
|
||
background: #fff;
|
||
line-height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.ant-layout-content {
|
||
border-top: 1px solid #ecedef;
|
||
width: 100%;
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: center;
|
||
height: calc(100vh - 128px) !important;
|
||
}
|
||
|
||
.ant-layout-footer {
|
||
text-align: center;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #8f8f8f;
|
||
}
|
||
|
||
.lg_card_title {
|
||
width: 360px;
|
||
margin: 60px auto 0;
|
||
height: 48px;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #172e3d;
|
||
text-align: left;
|
||
line-height: 20px;
|
||
span {
|
||
float: right;
|
||
font-size: 14px;
|
||
color: #808d96;
|
||
font-weight: lighter;
|
||
strong {
|
||
color: #1d2d3d;
|
||
font-weight: 400;
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
&:hover {
|
||
color: #ff1744;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.ant-form-item) {
|
||
margin-bottom: 24px;
|
||
}
|
||
:deep(#app .ant-form-item-label > label) {
|
||
color: #606060;
|
||
}
|
||
:deep(.lg_card .ant-col-5) {
|
||
width: 30%;
|
||
flex: 0 0 30%;
|
||
text-align: right;
|
||
}
|
||
:deep(.ant-layout-content) {
|
||
margin: 0;
|
||
}
|
||
.success-box {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding: 50px 0 4px;
|
||
h3 {
|
||
margin-top: 30px;
|
||
font-weight: bold;
|
||
margin-bottom: 24px;
|
||
}
|
||
h3,
|
||
span {
|
||
color: #ff4919;
|
||
}
|
||
p {
|
||
margin: auto;
|
||
font-size: 14px;
|
||
text-align: left;
|
||
color: #1d2d3d;
|
||
width: 50%;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
:deep(.step-box) {
|
||
width: 80%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
// margin-right: 50px;
|
||
position: relative;
|
||
left: 20px;
|
||
button {
|
||
margin-left: 16px;
|
||
}
|
||
}
|
||
:deep(.ant-steps-item-title::after) {
|
||
background: transparent !important;
|
||
border-top-width: 1px;
|
||
border-top-style: dashed;
|
||
border-top-color: #ecedef;
|
||
}
|
||
:deep(.ant-steps-item-process
|
||
> .ant-steps-item-container
|
||
> .ant-steps-item-content
|
||
> .ant-steps-item-title::after) {
|
||
border-top-color: #ff4919;
|
||
}
|
||
|
||
:deep(.ant-layout-header) {
|
||
max-height: 64px !important;
|
||
min-height: 64px !important;
|
||
}
|
||
|
||
:deep(.ant-layout-footer) {
|
||
max-height: 64px !important;
|
||
min-height: 64px !important;
|
||
height: 64px !important;
|
||
}
|
||
.home_header {
|
||
height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
// img {
|
||
// height: 32px !important;
|
||
// width: 220px !important;
|
||
// transform: translateY(0px) translateX(0px);
|
||
// }
|
||
}
|
||
:deep(.ant-layout) {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
</style>
|