From 8b2a0199527fa2d2f0fd4c420dd374e42c496c48 Mon Sep 17 00:00:00 2001
From: lzhe <lzhe@example.com>
Date: 星期三, 09 十月 2024 11:32:28 +0800
Subject: [PATCH] 1
---
src/views/userCenter/img-logo.png | 0
src/layout/components/userbar.vue | 2
src/views/userCenter/edituser.vue | 272 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/config/route.js | 13 ++
4 files changed, 285 insertions(+), 2 deletions(-)
diff --git a/src/config/route.js b/src/config/route.js
index 6a3c0fb..20c7d12 100644
--- a/src/config/route.js
+++ b/src/config/route.js
@@ -2,7 +2,7 @@
* @Author: lzhe lzhe@example.com
* @Date: 2024-05-24 11:25:26
* @LastEditors: lzhe lzhe@example.com
- * @LastEditTime: 2024-06-19 21:52:58
+ * @LastEditTime: 2024-10-09 09:58:40
* @FilePath: /src/config/route.js
* @Description: 杩欐槸榛樿璁剧疆,璇疯缃甡customMade`, 鎵撳紑koroFileHeader鏌ョ湅閰嶇疆 杩涜璁剧疆: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@@ -99,6 +99,17 @@
type: 'menu',
hidden: true
}
+ },
+ {
+ name: "璐﹀彿淇℃伅",
+ path: "/userCenter/edituser",
+ component: "userCenter/edituser",
+ meta: {
+ icon: "el-icon-menu",
+ title: "璐﹀彿淇℃伅",
+ type: 'menu',
+ hidden: true
+ }
}
]
diff --git a/src/layout/components/userbar.vue b/src/layout/components/userbar.vue
index c59b3da..5bad26e 100644
--- a/src/layout/components/userbar.vue
+++ b/src/layout/components/userbar.vue
@@ -145,7 +145,7 @@
//涓汉淇℃伅
handleUser(command) {
if(command == "uc"){
- this.$router.push({path: '/usercenter'});
+ this.$router.push({path: '/userCenter/edituser'});
}
if(command == "cmd"){
this.$router.push({path: '/cmd'});
diff --git a/src/views/userCenter/edituser.vue b/src/views/userCenter/edituser.vue
new file mode 100644
index 0000000..19d3ab0
--- /dev/null
+++ b/src/views/userCenter/edituser.vue
@@ -0,0 +1,272 @@
+<!--
+ * @Author: lzhe lzhe@example.com
+ * @Date: 2024-09-06 14:09:39
+ * @LastEditors: lzhe lzhe@example.com
+ * @LastEditTime: 2024-10-09 11:30:37
+ * @FilePath: /smart-web/src/views/usercenter.vue
+ * @Description: 杩欐槸榛樿璁剧疆,璇疯缃甡customMade`, 鎵撳紑koroFileHeader鏌ョ湅閰嶇疆 杩涜璁剧疆: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+ <div class="user-main">
+ <div class="user-title marB12">鍩虹淇℃伅</div>
+ <el-upload
+ :headers="authorization"
+ class="avatar-uploader"
+ action="/api/blade-resource/oss/endpoint/put-file"
+ :show-file-list="false"
+ :on-success="handleAvatarSuccess"
+ :before-upload="beforeAvatarUpload">
+ <div v-if="baseData.avatar" style="position: relative;">
+ <img :src="baseData.avatar" class="avatar">
+ <div class="el-icon-editDom">
+ <span class="el-icon-edit">缂栬緫</span>
+ <span class="el-icon-del" @click.stop="avatarDel">鍒犻櫎</span>
+ </div>
+ </div>
+ <el-icon v-else class="el-icon-plus avatar-uploader-icon"><Picture /></el-icon>
+ </el-upload>
+ <div class="marB12" style="margin-top: 12px;"><span class="user-title">璐﹀彿</span><span class="user-content">{{baseData.account}}</span></div>
+ <div class="marB12">
+ <span class="user-title">璐﹀彿鏄电О</span><span class="user-content">{{baseData.realName}}</span>
+ <el-icon v-if="isEditRealName" class="password-icon" @click="editRealName"><EditPen /></el-icon>
+ <div class="realNameRepeat" v-if="!isEditRealName">
+ <el-input v-model="realNameRepeat" style="width: 240px" placeholder="璇疯緭鍏�" />
+ <el-icon @click="realNameSub"><Check /></el-icon>
+ <el-icon @click="realNameClose"><Close /></el-icon>
+ </div>
+ </div>
+ <div class="marB12"><span class="user-title">鐧诲綍瀵嗙爜</span><span class="user-content editPassword" @click="editPasswordModel = true">鐐瑰嚮淇敼</span></div>
+ </div>
+ <el-dialog title="淇敼瀵嗙爜" v-model="editPasswordModel" :width="800" destroy-on-close @closed="closeModel">
+ <el-form :model="passwordForm" :rules="passwordRules" ref="dialogForm" label-width="120px" label-position="center">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="鍘熷瘑鐮�" prop="oldPassword">
+ <el-input placeholder="璇疯緭鍏ュ瘑鐮�" clearable v-model="passwordForm.oldPassword" show-password></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鏂板瘑鐮�" prop="newPassword">
+ <el-input placeholder="璇疯緭鍏ュ瘑鐮�" clearable v-model="passwordForm.newPassword" show-password></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="纭瀵嗙爜" prop="newPassword1">
+ <el-input placeholder="璇疯緭鍏ュ瘑鐮�" clearable v-model="passwordForm.newPassword1" show-password></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <el-button @click="editPasswordModel=false" >鍙� 娑�</el-button>
+ <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="passwordSubmit">纭� 瀹�</el-button>
+ </template>
+ </el-dialog>
+</template>
+
+<script>
+ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+ let icons = []
+ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+ icons.push(key)
+ }
+ export default {
+ name: 'usercenter',
+ components: {
+ ...ElementPlusIconsVue
+ },
+ data() {
+ return {
+ isEditRealName: true,
+ realNameRepeat: "",
+ baseData: {},
+ //琛ㄥ崟鏁版嵁
+ passwordForm: {
+ oldPassword: "",
+ newPassword: "",
+ newPassword1: ""
+ },
+ //楠岃瘉瑙勫垯
+ passwordRules: {
+ oldPassword: [{required: true, message: '璇疯緭鍏ュ師瀵嗙爜'}],
+ newPassword: [{required: true, message: '璇疯緭鍏ユ柊瀵嗙爜'}],
+ newPassword1: [{required: true, message: '璇疯緭鍏ョ‘璁ゅ瘑鐮�'}]
+ },
+ authorization: {},
+ titleMap: "淇敼瀵嗙爜",
+ editPasswordModel: false
+ }
+ },
+ mounted() {
+ this.getInfo();
+ },
+ methods: {
+ realNameSub() {
+ var obj = {...this.baseData};
+ obj.realName = this.realNameRepeat;
+ this.updateData();
+ },
+ realNameClose() {
+ this.realNameRepeat = this.baseData.realName;
+ this.isEditRealName = !this.isEditRealName;
+ },
+ editRealName() {
+ this.realNameRepeat = this.baseData.realName;
+ this.isEditRealName = !this.isEditRealName;
+ },
+ getInfo() {
+ this.$HTTP.get(`/api/blade-user/info`).then(res=> {
+ if(res.code == 200) {
+ this.baseData = res.data;
+ this.realNameRepeat = res.data.realName;
+ }else {
+ this.$alert(res.message, "鎻愮ず", {type: 'error'});
+ }
+ })
+ },
+ passwordSubmit() {
+ this.$refs.dialogForm.validate(async (valid) => {
+ if (valid) {
+ this.$HTTP.post(`/api/blade-user/update-password?oldPassword=${this.passwordForm.oldPassword}&newPassword=${this.passwordForm.newPassword}&newPassword1=${this.passwordForm.newPassword1}`).then(res=> {
+ if(res.code == 200) {
+ this.editPasswordModel = false;
+ this.$message.success("鎿嶄綔鎴愬姛");
+ }else {
+ this.$alert(res.message, "鎻愮ず", {type: 'error'});
+ }
+ })
+ }else{
+ return false;
+ }
+ })
+ },
+ closeModel(flag) {
+ console.log(flag);
+ this.passwordForm = {
+ oldPassword: "",
+ newPassword: "",
+ newPassword1: ""
+ }
+ },
+ avatarDel() {
+ this.baseData.avatar = "";
+ this.updateData();
+ },
+ updateData() {
+ this.$HTTP.post(`/api/blade-user/update-info`,this.baseData).then(res=> {
+ if(res.code == 200) {
+ this.getInfo();
+ this.isEditRealName = true;
+ }else {
+ this.$alert(res.message, "鎻愮ず", {type: 'error'});
+ }
+ })
+ },
+ handleAvatarSuccess(file) {
+ this.baseData.avatar = file.data.link;
+ this.updateData();
+ },
+ beforeAvatarUpload(file) {
+ var isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
+ if (!isJPG) {
+ this.$message.error('璇蜂笂浼犲浘鐗囷紒');
+ }
+ var TOKEN = this.$TOOL.cookie.get("TOKEN")
+ this.authorization = {Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0','Blade-Auth': TOKEN}
+ return isJPG;
+ },
+ }
+ }
+</script>
+<style scoped>
+ .user-main {
+ background-color: #f9fafb;
+ border: 1px solid #dcdfe6;
+ box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
+ margin: 8px;
+ padding: 16px 20px;
+ background-color: #fff;
+ }
+ .user-title {
+ font-weight: 700;
+ font-size: 16px;
+ margin-right: 12px;
+ }
+ .marB12 {
+ margin-bottom: 12px;
+ }
+ .user-content {
+ color: #303133;
+ font-size: 16px;
+ }
+ .editPassword {
+ color: #409eff;
+ cursor: pointer;
+ margin-right: 6px;
+ }
+ .realNameRepeat {
+ display: inline-block;
+ margin-left: 12px;
+ }
+ .realNameRepeat i {
+ font-size: 16px;
+ vertical-align: middle;
+ margin-left: 8px;
+ cursor: pointer;
+ color: #409eff;
+ }
+ .password-icon {
+ font-size: 14px;
+ vertical-align: text-top;
+ cursor: pointer;
+ margin-left: 6px;
+ }
+ .avatar-uploader .el-upload {
+ border: 1px dashed #d9d9d9;
+ border-radius: 6px;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+ }
+ .avatar-uploader .el-upload:hover {
+ border-color: #409EFF;
+ }
+ .avatar-uploader-icon {
+ font-size: 28px;
+ color: #8c939d;
+ width: 80px;
+ height: 80px;
+ line-height: 80px;
+ text-align: center;
+ background-color: #c0c4cc;
+ }
+ .el-icon-editDom {
+ position: absolute;
+ left: 4px;
+ top: 56px;
+ font-weight: 700;
+ color: #409eff;
+ }
+ .el-icon-editDom span {
+ margin: 0;
+ padding: 0;
+ font-size: 12px;
+ line-height: 18px;
+ border: 1px solid #409eff;
+ background: #fff;
+ padding-left: 2px;
+ padding-right: 2px;
+ cursor: pointer;
+ }
+ .el-icon-editDom .el-icon-edit {
+ margin-right: 4px;
+ }
+ .el-icon-editDom .el-icon-del {
+
+ }
+ .avatar {
+ width: 80px;
+ height: 80px;
+ display: block;
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/userCenter/img-logo.png b/src/views/userCenter/img-logo.png
new file mode 100644
index 0000000..ecd70ca
--- /dev/null
+++ b/src/views/userCenter/img-logo.png
Binary files differ
--
Gitblit v1.9.3