From e4b4e6aa0bda185f8ce85d03847c3be3ebf7784b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8C=BF=E5=B0=8F=E5=A4=A9?= <1638245306@qq.com> Date: Sun, 12 Mar 2023 22:30:13 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83):=20?= =?UTF-8?q?=E2=9C=A8=20=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 个人中心完成 --- web/src/types/views.d.ts | 2 +- web/src/views/system/personal/api.ts | 28 +++++ web/src/views/system/personal/index.vue | 157 ++++++++++++++++++++++-- 3 files changed, 174 insertions(+), 13 deletions(-) diff --git a/web/src/types/views.d.ts b/web/src/types/views.d.ts index 2e6d9cd..6358356 100644 --- a/web/src/types/views.d.ts +++ b/web/src/types/views.d.ts @@ -15,8 +15,8 @@ type Recommend = { }; declare type PersonalState = { newsInfoList: NewInfo[]; - recommendList: Recommend[]; personalForm: { + avatar:string, username: string; name: string; email: string; diff --git a/web/src/views/system/personal/api.ts b/web/src/views/system/personal/api.ts index 2bcf839..c68e5f2 100644 --- a/web/src/views/system/personal/api.ts +++ b/web/src/views/system/personal/api.ts @@ -1,5 +1,6 @@ import { request } from '/@/utils/service'; import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud'; +import {apiPrefix} from "/@/views/system/messageCenter/api"; export function GetUserInfo(query: PageQuery) { return request({ url: '/api/system/user/user_info/', @@ -20,3 +21,30 @@ export function updateUserInfo(data: AddReq) { data: data }) } + + +/** + * 获取自己接收的消息 + * @param query + * @returns {*} + * @constructor + */ +export function GetSelfReceive (query:PageQuery) { + return request({ + url: '/api/system/message_center/get_self_receive/', + method: 'get', + params: query + }) +} + +/*** + * 修改密码 + * @param data + */ +export function UpdatePassword(data: EditReq) { + return request({ + url: '/api/system/user/change_password/', + method: 'put', + data: data + }) +} diff --git a/web/src/views/system/personal/index.vue b/web/src/views/system/personal/index.vue index bd512cb..1f98225 100644 --- a/web/src/views/system/personal/index.vue +++ b/web/src/views/system/personal/index.vue @@ -6,8 +6,9 @@
- - + + +
@@ -46,12 +47,14 @@
  • - {{ v.title }} +
    + [{{v.creator_name}},{{v.create_datetime}}] {{v.title}} +
@@ -108,7 +111,7 @@
当前密码强度：强
- 立即修改 + 立即修改
@@ -138,6 +141,52 @@ + + + + + + + + + + + + + + + @@ -146,15 +195,22 @@ import { reactive, computed,onMounted,ref } from 'vue'; import { formatAxis } from '/@/utils/formatTime'; import * as api from './api' import {ElMessage } from "element-plus"; - +import {getBaseURL} from "/@/utils/baseUrl"; +// 当前时间提示语 +const currentTime = computed(() => { + return formatAxis(new Date()); +}); const userInfoFormRef = ref() const rules = reactive({ name: [{ required: true, message: '请输入昵称', trigger: 'blur' }], mobile: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确手机号' }] }) // 定义变量内容 +const action= ref(getBaseURL() + 'api/system/file/') const state = reactive({ + newsInfoList:[], personalForm: { + avatar:'', username:'', name: '', email: '', @@ -171,13 +227,23 @@ const state = reactive({ }, }); +/** + * 跳转消息中心 + */ +import {useRouter } from "vue-router"; +import {UpdatePassword} from "./api"; +const route = useRouter() +const msgMore=()=>{ + route.push({path:'/messageCenter'}) +} + /** * 获取用户个人信息 */ const getUserInfo = function (){ api.GetUserInfo({}).then((res:any)=>{ const {data} = res - console.log(data) + state.personalForm.avatar = data.avatar || ''; state.personalForm.username = data.username || ''; state.personalForm.name = data.name || ''; state.personalForm.email = data.email || ''; @@ -206,16 +272,83 @@ const submitForm = async () => { }) } - +/** + * 获取消息通知 + */ +const getMsg = () => { + api.GetSelfReceive({}).then((res:any)=>{ + const {data} = res + state.newsInfoList = data || []; + }) +} onMounted(()=>{ getUserInfo(); + getMsg(); }) +/**************************密码修改部分************************/ +const passwordFormShow = ref(false) +const userPasswordFormRef = ref() +const userPasswordInfo=reactive({ + oldPassword: '', + newPassword: '', + newPassword2: '' +}) + +const validatePass = (rule, value, callback) => { + const pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}') + if (value === '') { + callback(new Error('请输入密码')) + } else if (value === userPasswordInfo.oldPassword) { + callback(new Error('原密码与新密码一致')) + } else if (!pwdRegex.test(value)) { + callback(new Error('您的密码复杂度太低(密码中必须包含字母、数字)')) + } else { + if (userPasswordInfo.newPassword2 !== '') { + userPasswordFormRef.value.validateField('newPassword2') + } + callback() + } +} +const validatePass2 = (rule, value, callback) => { + if (value === '') { + callback(new Error('请再次输入密码')) + } else if (value !== userPasswordInfo.newPassword) { + callback(new Error('两次输入密码不一致!')) + } else { + callback() + } +} + +const passwordRules=reactive({ + oldPassword: [ + { + required: true, + message: '请输入原密码', + trigger: 'blur' + } + ], + newPassword: [{ validator: validatePass, trigger: 'blur' }], + newPassword2: [{ validator: validatePass2, trigger: 'blur' }] +}) + +/** + * 重新设置密码 + */ +const settingPassword= ()=>{ + userPasswordFormRef.value.validate((valid) => { + if (valid) { + api.UpdatePassword(userPasswordInfo).then((res:any)=>{ + ElMessage.success('密码修改成功') + }) + } else { + // 校验失败 + // 登录表单校验失败 + ElMessage.error('表单校验失败，请检查') + } + }) +} -// 当前时间提示语 -const currentTime = computed(() => { - return formatAxis(new Date()); -});