You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
436 lines
11 KiB
436 lines
11 KiB
<!-- @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 xu科技 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>
|
|
|