新增个人信息修改页面

src/api/user.js

@@ -2,33 +2,39 @@ import request from '@/utils/request'
 import { CLIENT_TYPE, CLIENT_NAME, CLIENT_VERSION, CLIENT_ID } from '@/const/userConst'
 import { refreshToken } from '@/api/common'
 
-export const userRegisterService = ({ username, password }) => {
-  return request.post('/user/register', {
-    account: username,
-    nickName: '',
-    password: password,
+const getReqBody = (obj) => {
+  return {
+    ...obj,
     clientType: CLIENT_TYPE,
     clientName: CLIENT_NAME,
     clientVersion: CLIENT_VERSION
-  })
+  }
+}
+
+export const userRegisterService = ({ username, password }) => {
+  return request.post(
+    '/user/register',
+    getReqBody({
+      account: username,
+      nickName: '',
+      password: password
+    })
+  )
 }
 
 export const userLoginService = ({ username, password }) => {
-  return request.post('/user/login', {
-    account: username,
-    password: password,
-    clientId: CLIENT_ID,
-    clientType: CLIENT_TYPE,
-    clientName: CLIENT_NAME,
-    clientVersion: CLIENT_VERSION
-  })
+  return request.post(
+    '/user/login',
+    getReqBody({ account: username, password: password, clientId: CLIENT_ID })
+  )
 }
 
 export const userInfoService = async () => {
   await refreshToken()
-  return request.post('/user/querySelf', {
-    clientType: CLIENT_TYPE,
-    clientName: CLIENT_NAME,
-    clientVersion: CLIENT_VERSION
-  })
+  return request.post('/user/querySelf', getReqBody({}))
+}
+
+export const userModifySelfService = async (obj) => {
+  await refreshToken()
+  return request.post('/user/modifySelf', getReqBody(obj))
 }

src/utils/request.js

@@ -1,6 +1,5 @@
 import axios from 'axios'
 import { userStore } from '@/stores'
-import { ElMessage } from 'element-plus'
 import router from '@/router'
 import CryptoJS from 'crypto-js'
 import { v4 as uuidv4 } from 'uuid'
@@ -63,7 +62,7 @@ instance.interceptors.response.use(
       router.push('/login')
       ElMessage.error('您还未登录，请先登录！')
     } else {
-      ElMessage.error(err.response.message || '服务异常')
+      ElMessage.error(err.response?.message || '服务异常')
     }
 
     //TODO token过期处理，刷新tokne再发一次请求

src/views/setting/SettingLayout.vue

@@ -3,36 +3,34 @@ import { User, Key } from '@element-plus/icons-vue'
 </script>
 
 <template>
-  <div class="common-layout">
-    <el-container>
-      <el-header class="bdr-b">我的设置</el-header>
-      <el-container class="el-container__body">
-        <el-aside class="bdr-r body" width="200px">
-          <el-menu
-            active-text-color="#a0cfff"
-            background-color="#f5f5f5"
-            :default-active="$route.path"
-            text-color="black"
-            style="border: 0"
-            router
-          >
-            <el-menu-item index="/setting/personal">
-              <el-icon><User /></el-icon>
-              <span>个人中心</span>
-            </el-menu-item>
+  <el-container>
+    <el-header class="bdr-b">我的设置</el-header>
+    <el-container class="el-container__body">
+      <el-aside class="bdr-r body" width="200px">
+        <el-menu
+          active-text-color="#a0cfff"
+          background-color="#f5f5f5"
+          :default-active="$route.path"
+          text-color="black"
+          style="border: 0"
+          router
+        >
+          <el-menu-item index="/setting/personal">
+            <el-icon><User /></el-icon>
+            <span>个人中心</span>
+          </el-menu-item>
 
-            <el-menu-item index="/setting/security">
-              <el-icon><Key /></el-icon>
-              <span>安全设置</span>
-            </el-menu-item>
-          </el-menu>
-        </el-aside>
-        <el-main>
-          <router-view></router-view>
-        </el-main>
-      </el-container>
+          <el-menu-item index="/setting/security">
+            <el-icon><Key /></el-icon>
+            <span>安全设置</span>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+      <el-main style="padding: 0">
+        <router-view></router-view>
+      </el-main>
     </el-container>
-  </div>
+  </el-container>
 </template>
 
 <style lang="scss" scoped>
@@ -50,6 +48,7 @@ import { User, Key } from '@element-plus/icons-vue'
   .el-aside {
     width: 150px;
     height: 100%;
+    margin-top: 8px;
     padding: 8px;
     padding-top: 3px;
   }

src/views/setting/SettingPersonal.vue

@@ -1 +1,154 @@
-<template>个人中心</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { userStore } from '@/stores'
+import router from '@/router'
+import { userModifySelfService } from '@/api/user'
+import defaultImg from '@/assets/select_avatar.jpg'
+
+const userData = userStore()
+
+// 准备表单数据
+const formModel = ref({
+  phoneNum: '',
+  email: '',
+  nickName: '',
+  sex: '',
+  birthday: '',
+  level: '',
+  signature: ''
+})
+
+const isLoading = ref(false)
+
+onMounted(() => {
+  formModel.value.phoneNum = userData.user.phoneNum
+  formModel.value.email = userData.user.email
+  formModel.value.nickName = userData.user.nickName
+  formModel.value.sex = userData.user.sex
+  formModel.value.birthday = userData.user.birthday
+  formModel.value.level = userData.user.level
+  formModel.value.signature = userData.user.signature
+})
+
+const onSave = () => {
+  isLoading.value = true
+  console.log(formModel.value)
+  const res = userModifySelfService(formModel.value)
+  res.then(() => {
+    ElMessage.success('信息保存成功')
+    userData.getUserForce()
+  })
+  res.finally(() => {
+    isLoading.value = false
+  })
+}
+</script>
+
+<template>
+  <el-container>
+    <el-header class="bdr-b">个人信息</el-header>
+    <el-container class="el-container__body">
+      <el-aside width="240px">
+        <img
+          :src="userData.user.avatar || defaultImg"
+          alt="图片加载错误"
+          style="text-align: center"
+        />
+        <el-button type="info" round style="margin-top: 20px; cursor: pointer">
+          点击修改头像
+        </el-button>
+      </el-aside>
+      <el-main>
+        <el-form :model="formModel" ref="formRef">
+          <el-form-item label="登录账号：" prop="account">
+            {{ userData.user.account }}
+          </el-form-item>
+          <el-form-item label="手机号码：" prop="phoneNum">
+            {{ formModel.phoneNum || '未绑定' }}
+            <el-button
+              type="primary"
+              text
+              @click="router.push('/setting/security')"
+              style="margin-left: 15px"
+            >
+              {{ formModel.phoneNum ? '修改' : '去绑定' }}
+            </el-button>
+          </el-form-item>
+          <el-form-item label="电子邮箱：" prop="email">
+            {{ formModel.email || '未绑定' }}
+            <el-button
+              type="primary"
+              text
+              @click="router.push('/setting/security')"
+              style="margin-left: 15px"
+            >
+              {{ formModel.email ? '修改' : '去绑定' }}
+            </el-button>
+          </el-form-item>
+          <el-form-item label="我的昵称：" prop="nickname">
+            <el-input
+              v-model="formModel.nickName"
+              maxlength="10"
+              show-word-limit
+              style="width: 300px"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="我的性别：" prop="sex">
+            <el-radio-group v-model="formModel.sex">
+              <el-radio :value="0">男</el-radio>
+              <el-radio :value="1">女</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="我的生日：" prop="birthday">
+            <el-date-picker v-model="formModel.birthday" type="date" placeholder="请选择日期" />
+          </el-form-item>
+          <el-form-item label="个性签名：" prop="level">
+            <el-input
+              v-model="formModel.signature"
+              maxlength="50"
+              show-word-limit
+              style="width: 300px"
+              type="textarea"
+              :rows="3"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              @click="onSave"
+              type="primary"
+              :loading="isLoading"
+              style="margin-left: 84px"
+            >
+              保存修改
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<style lang="scss" scoped>
+.el-header {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  padding-left: 15px;
+  font-size: 18px;
+}
+
+.el-aside {
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+img {
+  width: 200px;
+  height: 200px;
+  object-fit: cover;
+  cursor: pointer;
+}
+</style>