527个人信息

src/components/layout/openpage.vue

@@ -68,6 +68,60 @@
         </div>
       </div>
     </el-main>
+
+    <el-dialog v-model="dialog.userinfoDialog" align-center :append-to-body="true" 
+      width="500" class="dialog_class" draggable>
+
+      <template #header="{ titleId, titleClass }">
+        <div class="my-header ">
+          <!-- <el-image :src="icon" fit="contain"></el-image> -->
+          <h4 :id="titleId" :class="titleClass">{{ $t('dialog.userinfo') }}</h4>
+        </div>
+      </template>
+      
+      <el-card class="userinfo-card" shadow="never">
+        <template #header>
+          <div class="userinfo-header">
+            <el-avatar :src="user" :size="30"/>
+            <h4 class="userinfo-nickname">{{ userStore.userInfo.nickName || 'User' }}</h4>
+          </div>
+          
+        </template>
+        <el-form label-width="100px" class="userinfo-form">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item :label="$t('dialog.username')">
+                {{ userStore.userInfo.userName }}
+              </el-form-item>
+              <el-form-item :label="$t('dialog.mobileNo')">
+                {{ userStore.userInfo.mobileNo }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="$t('dialog.nickname')">
+                {{ userStore.userInfo.nickName || 'User' }}
+              </el-form-item>
+              <el-form-item :label="$t('dialog.email')">
+                {{ userStore.userInfo.email }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item :label="$t('dialog.regTime')">
+            {{ userStore.userInfo.regTime }}
+          </el-form-item>
+        </el-form>
+      </el-card>
+
+      <template #footer>
+        <span class="userinfo-footer lastbtn">
+          <el-button @click="dialog.userinfoDialog = false">{{ $t('dialog.cancel') }}</el-button>
+          <el-button @click="dialog.userinfoDialog = false">
+            {{ $t('dialog.ok') }}
+          </el-button>
+        </span>
+      </template>
+
+    </el-dialog>
   </div>
 </template>
 
@@ -94,6 +148,11 @@ const userStore = useUserStore();
 
 const nickName = userStore.userInfo.nickName || 'User';
 
+let dialog = ref({
+  userinfoDialog: false,
+  changePassword: false,
+});
+
 const activeIndex = computed(() => {
   // 获取当前路由的所有匹配路径
   const matched = router.currentRoute.value.matched
@@ -102,7 +161,8 @@ const activeIndex = computed(() => {
 })
 
 const handleProfile = () => {
-  // router.push('/profile');
+  dialog.value.userinfoDialog = true;
+  
 }
 
 const handleChangePassword = () => {
@@ -197,4 +257,16 @@ const handleLogout = () => {
   cursor: pointer;
 }
 
+.userinfo-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+}
+
+.userinfo-footer {
+  display: flex;
+  justify-content: center;
+}
+
 </style>

src/locales/en.json

@@ -70,6 +70,12 @@
     "new": "New",
     "edit": "Edit",
     "delete": "Delete",
-    "save": "Save"
+    "save": "Save",
+    "userinfo": "User Info",
+    "username": "Username",
+    "nickname": "Nickname",
+    "email": "Email",
+    "regTime": "Registration Time",
+    "mobileNo": "Mobile Number"
   }
 }

src/locales/zh-CN.json

@@ -70,7 +70,13 @@
     "new": "新建",
     "edit": "编辑",
     "delete": "删除",
-    "save": "保存"
+    "save": "保存",
+    "userinfo": "个人信息",
+    "username": "用户名",
+    "nickname": "昵称",
+    "email": "邮箱",
+    "regTime": "注册时间",
+    "mobileNo": "手机号码"
   }
 
 }

src/views/login/index.vue

@@ -147,6 +147,7 @@ const handleLogin = () => {
         nickName: res.nickName,
         userType: res.userType,
         regTime: res.regTime,
+        email: res.email || '',
         mobileNo: res.mobileNo,
       })
 

src/views/project/index.vue

@@ -87,7 +87,8 @@
 
   </div>
 
-  <el-dialog v-model="addProjectdialog" align-center :append-to-body="true" width="500" class="dialog_class">
+  <el-dialog v-model="addProjectdialog" align-center :append-to-body="true" 
+    width="500" class="dialog_class" draggable>
 
     <template #header="{ titleId, titleClass }">
     <div class="my-header ">