From 6a8078e27258dfa20aeb26394f2f880a25490000 Mon Sep 17 00:00:00 2001 From: yuk255 Date: Mon, 13 Oct 2025 20:54:38 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AD=A6=E5=91=98=E4=B8=AD?= =?UTF-8?q?=E5=BF=83=EF=BC=9A=E8=B5=84=E6=96=99=E9=A1=B5=E9=9D=A2=E5=AF=B9?= =?UTF-8?q?=E6=8E=A5=EF=BC=9B=E6=95=99=E5=B8=88=E5=90=8E=E5=8F=B0=EF=BC=9A?= =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/modules/userCenter.ts | 6 + src/components/admin/PersonalCenter.vue | 86 ++- src/components/profile/CourseContent.vue | 4 +- src/components/profile/MaterialsContent.vue | 755 ++++++++++++++++++++ src/views/Profile.vue | 633 +--------------- 5 files changed, 841 insertions(+), 643 deletions(-) create mode 100644 src/components/profile/MaterialsContent.vue diff --git a/src/api/modules/userCenter.ts b/src/api/modules/userCenter.ts index cec13d3..d868f0a 100644 --- a/src/api/modules/userCenter.ts +++ b/src/api/modules/userCenter.ts @@ -7,3 +7,9 @@ export class ActivityListApi { return ApiRequest.get('/aiol/aiolActivity/list') } } + +export class UserInfoApi { + static async editUserInfo(data: any): Promise { + return ApiRequest.post('/aiol/aiolUser/edit_profile', data) + } +} diff --git a/src/components/admin/PersonalCenter.vue b/src/components/admin/PersonalCenter.vue index 79ada20..d61109a 100644 --- a/src/components/admin/PersonalCenter.vue +++ b/src/components/admin/PersonalCenter.vue @@ -208,7 +208,13 @@ diff --git a/src/components/profile/CourseContent.vue b/src/components/profile/CourseContent.vue index 9106bd8..291a1c3 100644 --- a/src/components/profile/CourseContent.vue +++ b/src/components/profile/CourseContent.vue @@ -111,12 +111,12 @@ : "时间待定" }} - - + {{ course.enrollmentCount }} -->
+
+ +
+
+ + 基础信息 + + + 密码修改 + +
+
+ + +
+
+

基础信息

+ + +
+
+ +
+ 编辑头像 +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ 保存 +
+
+
+
+ + +
+
+

密码修改

+ +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ 保存 +
+
+
+
+
+ + + + + diff --git a/src/views/Profile.vue b/src/views/Profile.vue index 6f60fac..56cab2c 100644 --- a/src/views/Profile.vue +++ b/src/views/Profile.vue @@ -748,102 +748,7 @@
-
- -
-
- - 基础信息 - - - 密码修改 - -
-
- - -
-
-

基础信息

- - -
-
- -
- 编辑头像 -
-
-
- - -
-
-
- - -
-
- - -
-
- - -
-
-
-
-
- - -
-
-

密码修改

- -
- -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- -
-
-
-
-
+
(null) @@ -2893,37 +2780,6 @@ const getLikeActionText = (type: string) => { } } -// 资料相关方法 -const handleMaterialsTabChange = (tab: string) => { - activeMaterialsTab.value = tab -} - -// 保存密码修改 -const savePassword = () => { - if (!passwordForm.currentPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) { - message.error('请填写完整的密码信息') - return - } - - if (passwordForm.newPassword !== passwordForm.confirmPassword) { - message.error('两次输入的新密码不一致') - return - } - - if (passwordForm.newPassword.length < 6) { - message.error('新密码长度不能少于6位') - return - } - - // 这里可以添加实际的密码修改逻辑 - message.success('密码修改成功') - - // 清空表单 - passwordForm.currentPassword = '' - passwordForm.newPassword = '' - passwordForm.confirmPassword = '' -} - // 下载相关方法 const handleDownloadTabChange = (tab: string) => { activeDownloadTab.value = tab @@ -7710,369 +7566,6 @@ onActivated(() => { } } -/* 我的资料页面样式 */ -.materials-content { - background: white; - border-radius: 0.42vw; - /* 8px转换为vw */ - padding: 0; - margin: 1.04vh 0; - /* 20px转换为vh */ -} - -.materials-header { - padding-bottom: 1vh; - /* 30px 40px转换 */ - border-bottom: 1.5px solid #E6E6E6; -} - -.materials-tabs { - display: flex; - gap: 2.08vw; - /* 40px转换为vw */ -} - -.materials-tab-item { - font-size: 0.83vw; - /* 16px转换为vw */ - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - color: #666; - cursor: pointer; - padding: 0.52vh 0; - /* 10px转换为vh */ - border-bottom: 2px solid transparent; - transition: all 0.3s ease; -} - -.materials-tab-item.active { - color: #0288D1; - font-weight: 500; - /* 移除蓝色下划线 */ -} - -.materials-tab-item:hover { - color: #0288D1; -} - -/* 基础信息页面样式 */ -.basic-info-content { - padding: 1.04vh 0; - /* 20px转换,减少内边距因为容器已有边距 */ -} - -.basic-info-container { - height: 310px; - margin: 10px auto; - border: 1.5px solid #D8D8D8; - /* 8px转换为vw */ - padding: 2.08vh 2.08vw; - /* 40px转换 */ - background: white; -} - -.basic-info-title { - font-size: 16px; - /* 18px转换为vw */ - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: 500; - color: #333; - margin-bottom: 2.08vh; - /* 40px转换为vh */ - padding-bottom: 1.04vh; - /* 20px转换为vh */ - border-bottom: 1.5px solid #E6E6E6; -} - -/* 头像部分样式 */ -.avatar-section { - display: flex; - justify-content: center; - margin-bottom: 3.13vh; - /* 60px转换为vh */ -} - -.avatar-container { - position: relative; - display: inline-block; - width: 78px !important; - height: 78px !important; - border: 1.5px solid #0292D5; - border-radius: 50%; -} - -.user-avatar-large { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - width: 68px !important; - /* 68px转换为vw,覆盖SafeAvatar样式 */ - height: 68px !important; - /* 68px转换为vw,覆盖SafeAvatar样式 */ - border-radius: 50%; -} - -.user-avatar-large img { - object-fit: cover; -} - -.avatar-edit-btn { - position: absolute; - bottom: 0; - right: 0; - width: 25px; - /* 25px转换为vw */ - height: 25px; - /* 25px转换为vw */ - background: #0288D1; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.3s ease; -} - -.avatar-edit-btn:hover { - background: #0277BD; - /* 稍微深一点的蓝色作为悬停效果 */ -} - -.avatar-edit-btn .edit-icon { - width: 11px; - /* 11px转换为vw */ - height: 11px; - /* 11px转换为vw */ - object-fit: contain; -} - -/* 表单样式 */ -.basic-info-form { - width: 100%; -} - -.form-row { - display: flex; - flex-direction: row; - /* 改为水平展示 */ - gap: 2.08vw; - /* 40px转换为vw */ - justify-content: space-between; -} - -.form-group { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 1.56vh; - /* 30px转换为vh,增加标签和输入框之间的距离 */ -} - -.form-label { - width: auto; - /* 改为自适应宽度,避免换行 */ - min-width: 4.17vw; - /* 80px转换为vw,确保最小宽度 */ - height: 1.04vh; - /* 20px转换为vh */ - font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - font-size: 0.73vw; - /* 14px转换为vw */ - color: #999999; - line-height: 1.04vh; - /* 20px转换为vh */ - text-align: left; - font-style: normal; - text-transform: none; - white-space: nowrap; - /* 防止换行 */ - flex-shrink: 0; -} - -.form-input, -.form-select { - width: 276px; - height: 41px; - /* 80px转换为vh,与密码修改页面保持一致 */ - padding: 1.04vh 0.73vw; - /* 20px 14px转换,增加上下内边距 */ - background: #F5F8FB; - border: 1px solid #D8D8D8; - /* 4px转换为vw */ - font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - font-size: 0.73vw; - /* 14px转换为vw */ - color: #333333; - line-height: normal; - /* 改为normal,让浏览器自动计算合适的行高 */ - text-align: left; - font-style: normal; - text-transform: none; - transition: border-color 0.3s ease; - box-sizing: border-box; - /* 确保padding包含在总高度内 */ -} - -/* 专门为select元素优化 */ -.form-select { - display: flex; - align-items: center; - /* 垂直居中对齐 */ - padding-top: 0.78vh; - /* 15px转换为vh,调整顶部内边距 */ - padding-bottom: 0.78vh; - /* 15px转换为vh,调整底部内边距 */ -} - -.form-input:focus, -.form-select:focus { - outline: none; - border-color: #1890ff; - box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); -} - -.form-input::placeholder { - color: #bfbfbf; -} - -/* 密码修改页面样式 */ -.password-content { - margin-top: 15px; - /* 20px转换,减少内边距因为容器已有边距 */ -} - -.password-container { - /* 1000px转换为vw */ - margin: 0 auto; - border: 1.5px solid #D8D8D8; - /* 8px转换为vw */ - padding: 10px 15px; - /* 40px转换 */ - background: white; -} - -.password-title { - font-size: 16px; - /* 18px转换为vw */ - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: 500; - color: #333; - margin-bottom: 10px; - /* 40px转换为vh */ - padding-bottom: 10px; - /* 20px转换为vh */ - border-bottom: 1.5px solid #E6E6E6; -} - -.password-form { - width: 100%; -} - -.password-form-group { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 1.56vh; - /* 30px转换为vh */ - margin-bottom: 2.08vh; - /* 40px转换为vh */ -} - -.password-form-label { - margin-top: 15px; - margin-bottom: 5px; - font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - font-size: 14px; - /* 14px转换为vw */ - color: #999999; - line-height: 1.04vh; - /* 20px转换为vh */ - text-align: left; - font-style: normal; - text-transform: none; - white-space: nowrap; - flex-shrink: 0; -} - -.account-display { - padding-left: 15px; - width: 100%; - height: 41px; - background: #F5F8FB; - border: 1.5px solid #D8D8D8; - font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - font-size: 0.73vw; - /* 14px转换为vw */ - color: #333333; - line-height: normal; - text-align: left; - font-style: normal; - text-transform: none; - box-sizing: border-box; - display: flex; - align-items: center; -} - -.password-form-input { - width: 100%; - height: 41px; - padding: 10px 15px; - background: #F5F8FB; - border: 1.5px solid #D8D8D8; - font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - font-size: 0.73vw; - /* 14px转换为vw */ - color: #333333; - line-height: normal; - text-align: left; - font-style: normal; - text-transform: none; - transition: border-color 0.3s ease; - box-sizing: border-box; -} - -.password-form-input:focus { - outline: none; - border-color: #1890ff; - box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); -} - -.password-form-input::placeholder { - color: #bfbfbf; -} - -.password-form-actions { - display: flex; - justify-content: flex-start; - margin-top: 15px; - margin-bottom: 10px; - /* 40px转换为vh */ -} - -.password-save-btn { - width: 100px; - height: 33px; - background: #0288D1; - color: white; - border: none; - /* 4px转换为vw */ - font-size: 14px; - /* 14px转换为vw */ - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: 500; - cursor: pointer; - transition: all 0.3s ease; -} - -.password-save-btn:hover { - background: #40a9ff; -} - -.password-save-btn:active { - background: #096dd9; -} - /* 我的下载页面样式 */ .download-content { background: white; @@ -8700,62 +8193,11 @@ onActivated(() => { } @media (max-width: 1200px) { - .materials-tabs { - gap: 3vw; - } - - .materials-tab-item { - font-size: 1vw; - } - - .user-avatar-large { - width: 6vw !important; - height: 6vw !important; - } - - .avatar-edit-btn { - width: 2.6vw; - /* 平板端按比例调整:25px * 1.3 ≈ 32px */ - height: 2.6vw; - } - - .avatar-edit-btn .edit-icon { - width: 1.14vw; - /* 平板端按比例调整:11px * 1.3 ≈ 14px */ - height: 1.14vw; - } - - .form-row { - flex-direction: column; - gap: 3vh; - } - - .form-label { - width: auto; - font-size: 1vw; - } - - .form-input, - .form-select { - width: 30vw; - font-size: 1vw; - } - - .basic-info-title, - .password-title { - font-size: 1.2vw; - } - - .save-btn { - font-size: 1vw; - padding: 1vh 3vw; - } } @media (max-width: 576px) { - .download-content, - .materials-content { + .download-content { margin: 2vh 1vw; border-radius: 1vw; } @@ -8857,75 +8299,6 @@ onActivated(() => { font-size: 3.5vw; padding: 2vh 3vw; } - - .materials-header { - padding: 3vh 4vw; - } - - .materials-tabs { - gap: 6vw; - } - - .materials-tab-item { - font-size: 3vw; - } - - .basic-info-content, - .password-content { - padding: 4vh 4vw; - } - - .user-avatar-large { - width: 15vw !important; - height: 15vw !important; - } - - .avatar-edit-btn { - width: 6.5vw; - /* 手机端按比例调整:25px * 2.6 ≈ 65px */ - height: 6.5vw; - } - - .avatar-edit-btn .edit-icon { - width: 2.86vw; - /* 手机端按比例调整:11px * 2.6 ≈ 29px */ - height: 2.86vw; - } - - .form-row { - flex-direction: column; - gap: 4vh; - } - - .form-group { - flex-direction: column; - align-items: flex-start; - gap: 1vh; - } - - .form-label { - width: auto; - font-size: 3.5vw; - text-align: left; - } - - .form-input, - .form-select { - width: 100%; - font-size: 3.5vw; - height: 6vh; - padding: 2vh 3vw; - } - - .basic-info-title, - .password-title { - font-size: 4vw; - } - - .save-btn { - font-size: 3.5vw; - padding: 2vh 6vw; - } } /* 包含@的消息高亮样式 */