优化个人中心显示及头像更新功能

src/components/upload-wrapper/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="upload">
+    <el-upload class="hide" :accept="accept" :limit="1" :multiple="multiple" :headers="headers" :before-upload="beforeAvatarUpload" :action="uploadUrl" :on-success="updateImg">
+      <slot></slot>
+    </el-upload>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import type { UploadProps } from 'element-plus';
+import getOrigin from '/@/utils/origin'
+
+const uploadUrl: string = getOrigin(import.meta.env.VITE_API_URL + '/common/singleImg');
+
+const headers = {
+  Authorization: 'Bearer ' + JSON.parse(sessionStorage.token),
+};
+
+const emit = defineEmits(['setImg', 'setImgs']);
+
+const props = defineProps({
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  accept: {
+    type: String,
+    default: '.jpg,.png,.jpeg,.gif',
+  },
+});
+
+const updateImg = (res: any) => {
+  const url = getOrigin(import.meta.env.VITE_SERVER_URL + '/' + res.data?.path)
+
+  emit('setImg', url);
+};
+
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('图片不能超过2MB!');
+    return false;
+  }
+  return true;
+};
+</script>
+
+<style scoped>
+.hide ::v-deep(.el-upload-list) {
+	display: none;
+}
+
+.preview {
+	max-width: 100%;
+	max-height: 60vh;
+	display: block;
+	margin: 0 auto;
+}
+</style>

src/router/backEnd.ts

@@ -57,7 +57,7 @@ export async function initBackEndControlRoutes() {
  */
 export async function getBackEndControlRoutes() {
 	return api.login.currentUser().then((res: any) => {
-		Session.set('userMenu', res || [])
+		Session.set('userMenu', res.Data || [])
 		// Session.set('permissions',res.data.permissions)
 		// store.dispatch('userInfos/setPermissions',res.data.permissions)
 	})

src/utils/request.ts

@@ -55,6 +55,9 @@ service.interceptors.response.use(
 			// if (res.data?.Data) {
 			// 	return res.data.Data
 			// }
+			if (res.data?.Info && res.data?.Data) { // currentUser接口
+				return res.data
+			}
 			if (res.data?.Data === undefined) {
 				return res.data
 			}

src/views/login/component/account.vue

@@ -1,22 +1,7 @@
 <template>
-  <el-form
-    ref="loginForm"
-    size="large"
-    class="login-content-form"
-    :model="ruleForm"
-    :rules="formRules"
-  >
-    <el-form-item
-      class="login-animation1"
-      prop="userName"
-    >
-      <el-input
-        type="text"
-        :placeholder="$t('message.account.accountPlaceholder1')"
-        v-model="ruleForm.userName"
-        clearable
-        autocomplete="off"
-      >
+  <el-form ref="loginForm" size="large" class="login-content-form" :model="ruleForm" :rules="formRules">
+    <el-form-item class="login-animation1" prop="userName">
+      <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.userName" clearable autocomplete="off">
         <template #prefix>
           <el-icon class="el-input__icon">
             <ele-User />
@@ -24,46 +9,22 @@
         </template>
       </el-input>
     </el-form-item>
-    <el-form-item
-      class="login-animation2"
-      prop="password"
-    >
-      <el-input
-        :type="isShowPassword ? 'text' : 'password'"
-        :placeholder="$t('message.account.accountPlaceholder2')"
-        v-model="ruleForm.password"
-        autocomplete="off"
-        @keyup.enter="onSignIn"
-      >
+    <el-form-item class="login-animation2" prop="password">
+      <el-input :type="isShowPassword ? 'text' : 'password'" :placeholder="$t('message.account.accountPlaceholder2')" v-model="ruleForm.password" autocomplete="off" @keyup.enter="onSignIn">
         <template #prefix>
           <el-icon class="el-input__icon">
             <ele-Unlock />
           </el-icon>
         </template>
         <template #suffix>
-          <i
-            class="iconfont el-input__icon login-content-password"
-            :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
-            @click="isShowPassword = !isShowPassword"
-          >
+          <i class="iconfont el-input__icon login-content-password" :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'" @click="isShowPassword = !isShowPassword">
           </i>
         </template>
       </el-input>
     </el-form-item>
-    <el-form-item
-      class="login-animation3"
-      prop="captcha"
-    >
+    <el-form-item class="login-animation3" prop="captcha">
       <el-col :span="15">
-        <el-input
-          type="text"
-          maxlength="4"
-          :placeholder="$t('message.account.accountPlaceholder3')"
-          v-model="ruleForm.captcha"
-          clearable
-          autocomplete="off"
-          @keyup.enter="onSignIn"
-        >
+        <el-input type="text" maxlength="4" :placeholder="$t('message.account.accountPlaceholder3')" v-model="ruleForm.captcha" clearable autocomplete="off" @keyup.enter="onSignIn">
           <template #prefix>
             <el-icon class="el-input__icon">
               <ele-Position />
@@ -74,24 +35,12 @@
       <el-col :span="1"></el-col>
       <el-col :span="8">
         <div class="login-content-code">
-          <img
-            class="login-content-code-img"
-            @click="getCaptcha"
-            width="130"
-            height="38"
-            :src="captchaSrc"
-            style="cursor: pointer"
-          />
+          <img class="login-content-code-img" @click="getCaptcha" width="130" height="38" :src="captchaSrc" style="cursor: pointer" />
         </div>
       </el-col>
     </el-form-item>
     <el-form-item class="login-animation4">
-      <el-button
-        type="primary"
-        class="login-content-submit"
-        @click="onSignIn"
-        :loading="loading.signIn"
-      >
+      <el-button type="primary" class="login-content-submit" @click="onSignIn" :loading="loading.signIn">
         <span>{{ $t('message.account.accountBtnText') }}</span>
       </el-button>
     </el-form-item>
@@ -182,7 +131,7 @@ export default defineComponent({
     const currentUser = async () => {
       api.login.currentUser().then(async (res: any) => {
         // 设置用户菜单
-        Session.set('userMenu', res || []);
+        Session.set('userMenu', res.Data || []);
         store.dispatch('requestOldRoutes/setBackEndControlRoutes', res || []);
         if (!store.state.themeConfig.themeConfig.isRequestRoutes) {
           // 前端控制路由，2、请注意执行顺序

src/views/personal/index.vue

@@ -1,138 +1,69 @@
 <template>
-	<div class="personal">
-		<el-row>
-			<!-- 个人信息 -->
-			<el-col :xs="24" :sm="12">
-				<el-card shadow="hover" header="个人信息">
-					<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="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg" />
-							</el-upload>
-						</div>
-						<div class="personal-user-right">
-							<el-row>
-								<el-col :span="24" class="personal-title mb18">{{ currentTime }}，admin，生活变的再糟糕，也不妨碍我变得更好！ </el-col>
-								<el-col :span="24">
-									<el-row>
-										<el-col :xs="24" :sm="8" class="personal-item mb6">
-											<div class="personal-item-label">昵称：</div>
-											<div class="personal-item-value">小柒</div>
-										</el-col>
-										<el-col :xs="24" :sm="16" class="personal-item mb6">
-											<div class="personal-item-label">身份：</div>
-											<div class="personal-item-value">超级管理</div>
-										</el-col>
-									</el-row>
-								</el-col>
-								<el-col :span="24">
-									<el-row>
-										<el-col :xs="24" :sm="8" class="personal-item mb6">
-											<div class="personal-item-label">登录IP：</div>
-											<div class="personal-item-value">192.168.1.1</div>
-										</el-col>
-										<el-col :xs="24" :sm="16" class="personal-item mb6">
-											<div class="personal-item-label">登录时间：</div>
-											<div class="personal-item-value">2021-02-05 18:47:26</div>
-										</el-col>
-									</el-row>
-								</el-col>
-							</el-row>
-						</div>
-					</div>
-				</el-card>
-			</el-col>
-
-			<!-- 更新信息 -->
-			<el-col  :xs="24" :sm="12">
-				<el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
-					<div class="personal-edit-safe-box">
-						<div class="personal-edit-safe-item">
-							<div class="personal-edit-safe-item-left">
-								<div class="personal-edit-safe-item-left-label">账户密码</div>
-								<div class="personal-edit-safe-item-left-value">当前密码强度：强</div>
-							</div>
-							<div class="personal-edit-safe-item-right">
-								<el-button type="text">立即修改</el-button>
-							</div>
-						</div>
-					</div>
-					<div class="personal-edit-safe-box">
-						<div class="personal-edit-safe-item">
-							<div class="personal-edit-safe-item-left">
-								<div class="personal-edit-safe-item-left-label">密保手机</div>
-								<div class="personal-edit-safe-item-left-value">已绑定手机：132****4108</div>
-							</div>
-							<div class="personal-edit-safe-item-right">
-								<el-button type="text">立即修改</el-button>
-							</div>
-						</div>
-					</div>
-					<div class="personal-edit-safe-box">
-						<div class="personal-edit-safe-item">
-							<div class="personal-edit-safe-item-left">
-								<div class="personal-edit-safe-item-left-label">密保问题</div>
-								<div class="personal-edit-safe-item-left-value">已设置密保问题，账号安全大幅度提升</div>
-							</div>
-							<div class="personal-edit-safe-item-right">
-								<el-button type="text">立即设置</el-button>
-							</div>
-						</div>
-					</div>
-					<div class="personal-edit-safe-box">
-						<div class="personal-edit-safe-item">
-							<div class="personal-edit-safe-item-left">
-								<div class="personal-edit-safe-item-left-label">绑定QQ</div>
-								<div class="personal-edit-safe-item-left-value">已绑定QQ：110****566</div>
-							</div>
-							<div class="personal-edit-safe-item-right">
-								<el-button type="text">立即设置</el-button>
-							</div>
-						</div>
-					</div>
-				</el-card>
-			</el-col>
-		</el-row>
-	</div>
+  <div class="personal">
+    <el-row>
+      <!-- 个人信息 -->
+      <el-col :xs="24" :sm="24">
+        <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" />
+              </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">
+                  <div class="personal-item-label">昵称：</div>
+                  <div class="personal-item-value">{{info.userNickname}}</div>
+                </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>
+                </el-col>
+                <el-col :xs="24" :sm="24" class="personal-item mb6">
+                  <div class="personal-item-label">登录IP：</div>
+                  <div class="personal-item-value">{{info.lastLoginIp}}</div>
+                </el-col>
+                <el-col :xs="24" :sm="24" class="personal-item mb6">
+                  <div class="personal-item-label">登录时间：</div>
+                  <div class="personal-item-value">{{info.lastLoginTime}}</div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
 import { formatAxis } from '/@/utils/formatTime';
-import { newsInfoList, recommendList } from './mock';
+import api from '/@/api/system';
+import uploadVue from '/@/components/upload-wrapper/index.vue';
 
-// 定义接口来定义对象的类型
-interface PersonalState {
-	newsInfoList: any;
-	recommendList: any;
-	personalForm: any;
-}
+const info = ref<any>({})
+
+api.login.currentUser().then((res: any) => {
+  console.log(res.Info);
+  info.value = res.Info
+});
 
-export default defineComponent({
-	name: 'personal',
-	setup() {
-		const state = reactive<PersonalState>({
-			newsInfoList,
-			recommendList,
-			personalForm: {
-				name: '',
-				email: '',
-				autograph: '',
-				occupation: '',
-				phone: '',
-				sex: '',
-			},
-		});
-		// 当前时间提示语
-		const currentTime = computed(() => {
-			return formatAxis(new Date());
-		});
-		return {
-			currentTime,
-			...toRefs(state),
-		};
-	},
+// 当前时间提示语
+const currentTime = computed(() => {
+  return formatAxis(new Date());
 });
+
+const setImg = (img: string) => {
+  api.user.edit({ avatar: img }).then((res: any) => {
+    console.log(res)
+  })
+}
 </script>
 
 <style scoped lang="scss">
@@ -143,9 +74,9 @@ export default defineComponent({
 		display: flex;
 		align-items: center;
 		.personal-user-left {
-			width: 100px;
-			height: 130px;
-			border-radius: 3px;
+			// width: 100px;
+			// height: 130px;
+			// border-radius: 3px;
 			::v-deep(.el-upload) {
 				height: 100%;
 			}