|
@@ -0,0 +1,106 @@
|
|
|
+<template>
|
|
|
+ <div class="grid full change-pwd-view">
|
|
|
+ <div class="change-pwd-modal">
|
|
|
+ <div class="p-l-large change-pwd-modal-header">请修改密码</div>
|
|
|
+ <div class="change-pwd-modal-content">
|
|
|
+ <base-form ref="formRef" :model="userModel" :rules="rules" :items="items" :label-width="useVW(90)" size="large">
|
|
|
+ <template #form-item-confirm>
|
|
|
+ <confirm-button class="m-t-large" size="large" @confirm="onSubmit" @cancel="onCancel"></confirm-button>
|
|
|
+ </template>
|
|
|
+ </base-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts" name="ChangePassword">
|
|
|
+import { reactive, watch } from 'vue'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import useFetch from '@/hooks/useFetch'
|
|
|
+import useVModel from '@/hooks/useVModel'
|
|
|
+import useVW from '@/hooks/useVW'
|
|
|
+import useForm from '@/hooks/useForm'
|
|
|
+import BaseForm from '@/components/element/BaseForm.vue'
|
|
|
+import ConfirmButton from '@/components/common/ConfirmButton.vue'
|
|
|
+import { useRouter, useRoute } from 'vue-router'
|
|
|
+import useMainStore from '@/store/main'
|
|
|
+
|
|
|
+import type { EpFormItem, EpFormRules } from 'global-type'
|
|
|
+const { push, replace } = useRouter()
|
|
|
+const route = useRoute()
|
|
|
+const { formRef, elFormRef } = useForm()
|
|
|
+const mainStore = useMainStore()
|
|
|
+const userModel = reactive<{ password: string; rePassword?: string }>({
|
|
|
+ password: '',
|
|
|
+ rePassword: '',
|
|
|
+})
|
|
|
+
|
|
|
+const rules: EpFormRules = {
|
|
|
+ password: [
|
|
|
+ { required: true, message: '请填写登录密码' },
|
|
|
+ { pattern: /[0-9a-zA-Z~!@#¥%&\*]/, message: '密码限制"数字、字母、~!@#¥%&\*"' },
|
|
|
+ ],
|
|
|
+ rePassword: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ validator(_, value, cb) {
|
|
|
+ if (!value) {
|
|
|
+ cb(new Error('请确认登录密码'))
|
|
|
+ } else if (value !== userModel.password) {
|
|
|
+ cb(new Error('两次输入密码不一致'))
|
|
|
+ } else {
|
|
|
+ cb()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+}
|
|
|
+
|
|
|
+const items: EpFormItem[] = [
|
|
|
+ { label: '新密码', prop: 'password', slotType: 'input', slot: { type: 'password' } },
|
|
|
+ { label: '确认密码', prop: 'rePassword', slotType: 'input', slot: { type: 'password' } },
|
|
|
+ { slotName: 'confirm' },
|
|
|
+]
|
|
|
+const onCancel = () => {
|
|
|
+ push({ name: 'Login' })
|
|
|
+}
|
|
|
+const onSubmit = async () => {
|
|
|
+ try {
|
|
|
+ const valid = await elFormRef?.value?.validate()
|
|
|
+ valid && (await useFetch('updateUserPwd').fetch({ password: userModel.password }))
|
|
|
+ ElMessage.success('修改成功')
|
|
|
+ let rPath: string = route.query.redirectPath?.toString() || ''
|
|
|
+ if (rPath) {
|
|
|
+ await mainStore.getMyUserInfo()
|
|
|
+ replace({ path: decodeURIComponent(rPath) })
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error)
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.change-pwd-view {
|
|
|
+ place-items: center;
|
|
|
+ .change-pwd-modal {
|
|
|
+ width: 480px;
|
|
|
+ height: 416px;
|
|
|
+ background: $LoginModalBg;
|
|
|
+ border-radius: $LoginModalRadius;
|
|
|
+ overflow: hidden;
|
|
|
+ .change-pwd-modal-header {
|
|
|
+ height: $LoginModalHeaderHeight;
|
|
|
+ line-height: $LoginModalHeaderHeight;
|
|
|
+ background: $LoginModalHeaderBg;
|
|
|
+ font-size: $LoginModalHeaderFontSize;
|
|
|
+ font-weight: normal;
|
|
|
+ color: $LoginModalHeaderFontColor;
|
|
|
+ }
|
|
|
+ .change-pwd-modal-content {
|
|
|
+ height: 336px;
|
|
|
+ padding: 52px 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|