✨ feat: 增加头像上传功能

src/app/app.js

@@ -12,14 +12,14 @@ class User {
 
     static getLocalUser() {
         try {
-            let user = User.formatUser(JSON.parse(window.localStorage['user']));
+            let user = User.formatLocalUser(JSON.parse(window.localStorage['user']));
             return user;
         } catch (e) {
             return undefined;
         }
     }
 
-    static formatUser(data) {
+    static formatLocalUser(data) {
         try {
             let user = new User();
             user.uuid = data.uuid;
@@ -34,6 +34,21 @@ class User {
         }
     }
 
+    static formatUser(data) {
+        try {
+            let user = new User();
+            user.uuid = data.uuid;
+            user.session = data.session;
+            user.username = data.username;
+            user.email = data.email;
+            user.wxid = data.wxid;
+            user.avatar = import.meta.env.VITE_API_URL + data.avatar;
+            return user;
+        } catch (e) {
+            return undefined;
+        }
+    }
+
     static setLocalUser(user) {
         window.localStorage['user'] = JSON.stringify(user);
     }

src/pages/Main/Main.vue

@@ -15,18 +15,17 @@
             </el-icon>
             <span>我的考勤</span>
           </div>
-          <div class="button"
-            @click="push('https://git.vthc.cn/Pchen0/Double_X_Attendance/src/master/README.md')">
+          <div class="button" @click="push('https://git.vthc.cn/Pchen0/Double_X_Attendance/src/master/README.md')">
             <el-icon :size="35">
               <List />
             </el-icon>
             <span>操作文档</span>
           </div>
-          <div class="button" @click="push('https://git.vthc.cn/Pchen0/Double_X_Attendance.git')">
+          <div class="button" @click="$router.push('/Setup')">
             <el-icon :size="35">
-              <Lollipop />
+              <Tools />
             </el-icon>
-            <span>代码仓库</span>
+            <span>设置中心</span>
           </div>
           <div class="button" @click="$router.push('/Mine')">
             <el-icon :size="35">
@@ -55,7 +54,7 @@
 </template>
 
 <script setup>
-import { onMounted, provide} from 'vue'
+import { onMounted, provide } from 'vue'
 import { useRoute } from 'vue-router'
 import Header from '../../components/Header.vue'
 import Footer from '../../components/Footer.vue'

src/pages/Mine/Mine.vue

@@ -2,7 +2,7 @@
     <Header />
     <div style="min-height: 75vh;">
         <div class="cards">
-            <div class="card" v-if="app.user != undefined">
+            <div class="card" v-if="app.user != undefined" @click="$router.push('/UpdateInfo')">
                 <div class="top">
                     <div class="avatar">
                         <el-avatar :src="app.user.avatar" v-if="app.user.avatar" :size="avatarSize" />

src/pages/Setup/UserInfo/UpdateInfoStage1.vue

@@ -2,7 +2,10 @@
     <Header />
     <div class="root">
         <div class="content">
-            <div class="avatar"><el-avatar :size="100" :src="App.user.avatar ? App.user.avatar : ''" /></div>
+            <el-upload class="avatar" :action="apiUrl" :show-file-list="false" :on-success="handleAvatarSuccess"
+                :on-error="handleAvatarFail" :before-upload="beforeAvatarUpload" name="avatar">
+                <el-avatar :src="App.user.avatar" :size="130" />
+            </el-upload>
 
             <el-form :model="form" ref="formRef" label-width="auto" :label-position="'right'" style>
                 <el-form-item label="用户名" prop="username">
@@ -40,6 +43,7 @@ import { useRouter } from 'vue-router';
 import { ServerAPI } from '../../../app/lib/ServerAPI';
 
 let router = useRouter();
+const apiUrl = import.meta.env.VITE_API_URL + `/User/UploadAvatar/${App.user.uuid}/${App.user.session}`;
 
 if (!App.hasUser()) {
     ElMessage.error('请登录！')
@@ -62,6 +66,29 @@ let BindWXWork = function () {
         window.location.href = res.data.url
     });
 }
+
+const beforeAvatarUpload = (rawFile) => {
+    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
+        ElMessage.error('请上传jpg或png格式的图片！');
+        return false
+    } else if (rawFile.size / 1024 / 1024 > 3) {
+        ElMessage.error('请上传大小不超过3MBd的头像！');
+        return false
+    }
+    return true
+}
+
+const handleAvatarSuccess = (res) => {
+    if(!res || res.code != 0)
+        return ElMessage.error(`头像上传失败！${res.msg || ''}`);
+    ElMessage.success('头像上传成功！');
+    App.refershUser(res.data);
+    router.go(0);
+}
+
+const handleAvatarFail = () => {
+    ElMessage.error('头像上传失败！请稍后再试');
+}
 </script>
 
 <style scoped>
@@ -70,7 +97,6 @@ let BindWXWork = function () {
 }
 
 .avatar {
-    margin-top: -20px;
     margin-bottom: 20px;
     display: flex;
     flex-direction: column;