个人中心-用户资料修改完成

src/api/system/index.ts

@@ -85,6 +85,7 @@ export default {
     resetPassword: (id: number, userPassword: string) => post('/system/user/resetPassword', { id, userPassword }),
     del: (id: number) => del('/system/user/delInfoById', { id }),
     edit: (data: object) => put('/system/user/edit', data),
+    editUserInfo: (data: object) => put('/system/user/editUserInfo', data),
     setStatus: (id: number, status: number) => put('/system/user/editStatus', { id, status }),
     setAvatar: (id: number, avatar: string) => put('/system/user/editAvatar', { id, avatar }),
   },

src/views/personal/index.vue

@@ -6,23 +6,74 @@
         <el-card shadow="hover" header="个人信息" v-loading="!info.userName">
           <div class="personal-user">
             <div class="personal-user-left">
-              <!-- <el-upload class="h100 personal-user-left-upload" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="1">
-              <img :src="info.avatar" />
-              </el-upload> -->
-              <uploadVue @set-img="setImg">
-                <img style="width:140px;height:140px" :src="info.avatar" />
+              <img v-if="isEditStatus && info.avatar" style="width:140px;height:140px" :src="info.avatar" />
+			  <uploadVue v-else @set-img="setImg">
+                <img  style="width:140px;height:140px" :src="info.avatar" />
+				<div class="tips">点击上方照片，即可更改头像</div>
               </uploadVue>
             </div>
             <div class="personal-user-right">
               <el-row>
                 <el-col :span="24" class="personal-title mb18">{{ currentTime }}，{{info.userName}}，生活变的再糟糕，也不妨碍我变得更好！ </el-col>
-                <el-col :xs="24" :sm="24" class="personal-item mb6">
+                <!-- 昵称 -->
+				<el-col :xs="24" :sm="24" class="personal-item mb6">
                   <div class="personal-item-label">昵称：</div>
-                  <div class="personal-item-value">{{info.userNickname}}</div>
+                  <div v-if="isEditStatus" class="personal-item-value">{{info.userNickname}}</div>
+				  <el-input v-else class="personal-item-value personal-item-value-edit" v-model="info.userNickname"></el-input>
                 </el-col>
+				<!-- 性别 -->
                 <el-col :xs="24" :sm="24" class="personal-item mb6">
                   <div class="personal-item-label">性别：</div>
-                  <div class="personal-item-value">{{info.sex=='1'?'男':'女'}}</div>
+                  <div v-if="isEditStatus" class="personal-item-value">{{info.sex=='1'?'男':'女'}}</div>
+					<!-- 0:保密,1:男,2:女 -->
+					<el-radio-group v-else v-model="info.sex">
+						<el-radio :label="0">保密</el-radio>
+						<el-radio :label="1">男</el-radio>
+						<el-radio :label="2">女</el-radio>
+					</el-radio-group>
+                </el-col>
+				<!-- 生日 -->
+				<el-col :xs="24" :sm="24" class="personal-item mb6">
+                  <div class="personal-item-label">生日：</div>
+                  <div v-if="isEditStatus" class="personal-item-value">{{info.birthday}}</div>
+				  <el-date-picker
+				    v-else
+				    @change="dateChange"
+					v-model="info.birthday"
+					type="date"
+					placeholder="请选择出生日期"
+					format="YYYY/MM/DD"
+                    value-format="YYYY-MM-DD"
+				  />
+                </el-col>
+				<!-- 登录密码 -->
+				<el-col v-if="!isEditStatus" :xs="24" :sm="24" class="personal-item mb6">
+                  <div class="personal-item-label">登录密码：</div>
+				  <el-input class="personal-item-value personal-item-value-edit" v-model="info.userPassword"></el-input>
+                </el-col>
+				<!-- 手机号 -->
+				<el-col :xs="24" :sm="24" class="personal-item mb6">
+                  <div class="personal-item-label">手机号：</div>
+                  <div v-if="isEditStatus" class="personal-item-value">{{info.mobile}}</div>
+				  <el-input v-else class="personal-item-value personal-item-value-edit" v-model="info.mobile"></el-input>
+                </el-col>
+				<!-- 邮箱 -->
+				<el-col :xs="24" :sm="24" class="personal-item mb6">
+                  <div class="personal-item-label">邮箱：</div>
+                  <div v-if="isEditStatus" class="personal-item-value">{{info.userEmail}}</div>
+				  <el-input v-else class="personal-item-value personal-item-value-edit" v-model="info.userEmail"></el-input>
+                </el-col>
+				<!-- 联系地址 -->
+				<el-col :xs="24" :sm="24" class="personal-item mb6">
+                  <div class="personal-item-label">联系地址：</div>
+                  <div v-if="isEditStatus" class="personal-item-value">{{info.address}}</div>
+				  <el-input v-else class="personal-item-value personal-item-value-edit" v-model="info.address"></el-input>
+                </el-col>
+				<!-- 简介 -->
+				<el-col :xs="24" :sm="24" class="personal-item mb6">
+                  <div class="personal-item-label">简介：</div>
+                  <div v-if="isEditStatus" class="personal-item-value">{{info.describe}}</div>
+				  <el-input v-else class="personal-item-value personal-item-value-edit" v-model="info.describe"></el-input>
                 </el-col>
                 <el-col :xs="24" :sm="24" class="personal-item mb6">
                   <div class="personal-item-label">登录IP：</div>
@@ -35,6 +86,9 @@
               </el-row>
             </div>
           </div>
+		  <div class="edit-btn">
+	 	    <el-button type="primary" @click="handleChange">{{isEditStatus?'修改':'保存'}}</el-button>
+		  </div>
         </el-card>
       </el-col>
     </el-row>
@@ -49,9 +103,9 @@ import api from '/@/api/system';
 import uploadVue from '/@/components/upload-wrapper/index.vue';
 
 const info = ref<any>({})
+const isEditStatus = ref<Boolean>(true);
 
 api.login.currentUser().then((res: any) => {
-  console.log(res.Info);
   info.value = res.Info
 });
 
@@ -66,22 +120,69 @@ const setImg = (img: string) => {
     info.value.avatar = img
   })
 }
+
+/**
+ * 修改/保存 状态切换
+ */
+const handleChange = () => {
+	if(isEditStatus.value) {
+		// 展示修改按钮
+		isEditStatus.value = false;
+	}else {
+		// 提交修改表单
+		submitData();
+	}
+}
+
+/**
+ * 提交修改表单
+ */
+// 地址事例值：四川省成都市青羊区东城根南街68号院
+const submitData =  () => {
+	const { id, mobile, userNickname, birthday, userPassword, userEmail, sex, avatar, address, describe } = info.value;
+	let params = {
+		id,
+		mobile,
+		userNickname,
+		birthday,
+		userPassword,
+		userEmail,
+		sex,
+		avatar,
+		address,
+		describe
+	}
+	api.user.editUserInfo(params).then((res: any) => {
+		ElMessage.success('更新成功')
+		isEditStatus.value = true;
+	})
+}
+
+/**
+ * 选择生日
+ */
+const dateChange = (e:any) => {
+  info.value.birthday = e;
+}
 </script>
 
 <style scoped lang="scss">
 @import '../../theme/mixins/index.scss';
 .personal {
 	.personal-user {
-		height: 130px;
 		display: flex;
 		align-items: center;
 		.personal-user-left {
-			// width: 100px;
-			// height: 130px;
-			// border-radius: 3px;
 			::v-deep(.el-upload) {
 				height: 100%;
+				display: flex;
+				flex-direction: column;
+				.tips {
+					font-size: 12px;
+					color: #ccc;
+				}
 			}
+			
 			.personal-user-left-upload {
 				img {
 					width: 100%;
@@ -109,13 +210,24 @@ const setImg = (img: string) => {
 				.personal-item-label {
 					color: var(--el-text-color-secondary);
 					@include text-ellipsis(1);
+					width: 70px;
+					text-align: right;
 				}
 				.personal-item-value {
 					@include text-ellipsis(1);
 				}
+				.personal-item-value-edit {
+					width: 220px;
+					::v-deep(.el-input__wrapper) {
+						width: 100%;
+					}
+				}
 			}
 		}
 	}
+	.edit-btn {
+		padding: 30px 0 0 222px;
+	}
 	.personal-info {
 		.personal-info-more {
 			float: right;