push
This commit is contained in:
xuziqiang
434
lib/saas/view/service/updatePassWord.vue
Normal file
434
lib/saas/view/service/updatePassWord.vue
Normal file
@@ -0,0 +1,434 @@
|
||||
<!-- @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>
|
||||
Reference in New Issue
Block a user