修改个人信息设置页面

src/layout/components/Navbar.vue

@@ -7,7 +7,8 @@
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar" class="user-avatar">
+          <!--<img :src="avatar" class="user-avatar">-->
+          <el-avatar :src="imageUrl+avatar" icon="el-icon-user-solid"></el-avatar>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
@@ -41,6 +42,7 @@ import Hamburger from '@/components/Hamburger'
 export default {
   data() {
     return {
+      imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
     }
   },
   components: {

src/views/setting/index.vue

@@ -1,46 +1,49 @@
 <template>
-  <div class="app-container">
+  <div class="app-container" v-wechat-title="title">
     <el-tabs type="border-card" :value="tabsDefault" @tab-click="tabClick">
-      <el-tab-pane name="1">
+      <el-tab-pane
-        <span slot="label"><i class="el-icon-user"></i> 个人信息</span>
+        :key="item.name"
+        v-for="item in tabs"
+        :label="item.label"
+        :name="item.name"
+        lazy
+      >
+        <span v-if="item.name === 'cusomerInfo'" slot="label"><i class="el-icon-user"></i>{{item.label}}</span>
+        <div v-if="item.name === 'cusomerInfo'">
+          <el-dialog class="dialog-avatar" title="修改头像" :visible.sync="dialogVisible">
+            <cropper-dialog :src="srcImage" @croppedCanvas="saveAvatar"></cropper-dialog>
+          </el-dialog>
+          <el-form ref="cusomerInfoForm" :model="cusomerInfoForm" label-width="120px">
+            <el-form-item label="头像" class="form-item-avatar">
+              <el-avatar class="avatar-value" shape="circle" :size="100" fit="fit" :src="srcImage" ></el-avatar>
+              <el-avatar class="avatar-overlay" shape="circle" :size="100" @click.native="dialogVisible=true"> 修改头像 </el-avatar>
+            </el-form-item>
+            <el-form-item label="username">
+              <el-input readonly="readonly" v-model="cusomerInfoForm.username" />
+            </el-form-item>
+            <el-form-item label="昵称">
+              <el-input v-model="cusomerInfoForm.showName" />
+            </el-form-item>
+            <el-form-item label="标语">
+              <el-input class="form-slogan" v-model="cusomerInfoForm.slogan" />
+            </el-form-item>
+            <el-form-item label="个人简介">
+              <el-input type="textarea" v-model="cusomerInfoForm.introduction"></el-input>
+            </el-form-item>
+            <el-form-item label="使用情况">
+              <el-progress class="quota-space" :percentage="percentage" :format="progressFormat" :color="customColors"></el-progress>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" :loading="userUpdateLoading" @click="onSubmit">保存</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <span v-if="item.name === 'cusomerManager'" slot="label"><i class="el-icon-user-solid"></i>{{item.label}}</span>
+        <div v-if="item.name === 'cusomerManager'">
+          <el-table>
 
-        <!--<div class="img-dialog" :v-show="dialogVisible">-->
+          </el-table>
-          <!--<img id="image" :src="userInfo.avatar"/>-->
+        </div>
-        <!--</div>-->
-
-        <el-dialog class="dialog-avatar" title="修改头像" :visible.sync="dialogVisible">
-          <cropper-dialog :src="userInfo.avatar" @croppedCanvas="saveAvatar"></cropper-dialog>
-        </el-dialog>
-
-        <el-form ref="form" :model="form" label-width="120px">
-          <el-form-item label="头像" class="form-item-avatar">
-            <el-avatar class="avatar-value" shape="circle" :size="100" fit="fit" :src="userInfo.avatar" ></el-avatar>
-            <el-avatar class="avatar-overlay" shape="circle" :size="100" @click.native="dialogVisible = true"> 修改头像 </el-avatar>
-          </el-form-item>
-          <el-form-item label="username">
-            <el-input readonly="readonly" v-model="form.username" />
-          </el-form-item>
-          <el-form-item label="昵称">
-            <el-input v-model="form.showName" />
-          </el-form-item>
-          <el-form-item label="标语">
-            <el-input class="form-slogan" v-model="form.slogan" />
-          </el-form-item>
-          <el-form-item label="个人简介">
-            <el-input type="textarea" v-model="form.introduction"></el-input>
-          </el-form-item>
-          <el-form-item label="使用情况">
-            <el-progress class="quota-space" :percentage="percentage" :format="progressFormat" :color="customColors"></el-progress>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="onSubmit">保存</el-button>
-          </el-form-item>
-        </el-form>
-      </el-tab-pane>
-      <el-tab-pane name="3" label="消息中心">
-
-      </el-tab-pane>
-      <el-tab-pane name="4" label="角色管理">
       </el-tab-pane>
     </el-tabs>
 
@@ -58,8 +61,17 @@
     },
     data() {
       return {
-        tabsDefault: '1',
+        imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
+        title: "设置",
+        tabs: [
+          {name: 'cusomerInfo', label:'个人信息'},
+        ],
+        adminTabs: [
+          {name: 'cusomerManager', label:'用户管理'}
+        ],
+        tabsDefault: 'cusomerInfo',
         userInfo: {},
+        userUpdateLoading: false,
         dialogVisible:false,
         cropper:'',
         percentage: 0,
@@ -70,10 +82,9 @@
           {color: '#1989fa', percentage: 40},
           {color: '#6f7ad3', percentage: 20}
         ],
-        form: {
+        cusomerInfoForm: {
-          avatar: '',
+        },
-          showName: '',
+        srcImage: '',
-        }
       }
     },
     computed: {
@@ -92,37 +103,42 @@
         }).then(res => {
           console.log(res.data)
           this.userInfo = res.data
+          this.srcImage = this.imageUrl + this.userInfo.avatar
+          if(this.userInfo.roles.includes('admin')){
+            this.adminTabs.forEach(tab => {
+              this.tabs.push(tab)
+            })
+          }
           this.$nextTick(() => {
-            this.form = this.userInfo
+            this.cusomerInfoForm = this.userInfo
           })
         })
       },
       tabClick(tab) {
+        if(tab.name === 'cusomerManager'){
+          // 用户管理
+
+        }
         this.$router.push({path: this.$route.path, query: {tab: tab.name}})
       },
       onSubmit() {
         this.userUpdate(this.setFormData())
         // this.$message('submit!')
       },
-      onCancel() {
-        this.$message({
-          message: 'cancel!',
-          type: 'warning'
-        })
-      },
       progressFormat() {
         const space = this.userInfo.takeUpSpace/1024/1024/1024
         const quota = this.userInfo.quota
         if(space && quota > 0){
-          this.percentage = (space/quota * 100).toFixed(1)
+          this.percentage = Number((space/quota * 100).toFixed(1))
           return `${this.percentage}% (${formatSize(this.userInfo.takeUpSpace)}/${quota}GB)`;
           // return `${this.percentage}%`;
         }
       },
+      // 设置formData
       setFormData() {
         let data = new FormData();
         for (let formKey in this.form) {
-          if(this.form.hasOwnProperty(formKey)){
+          if(this.cusomerInfoForm.hasOwnProperty(formKey)){
             if(formKey !== 'avatar'){
               console.log(formKey,this.form[formKey])
               data.append(formKey,this.form[formKey])
@@ -132,23 +148,28 @@
         return data
       },
       // 保存头像
-      saveAvatar(dataURL) {
+      saveAvatar(dataURL,blob) {
         this.dialogVisible = false
-        this.userInfo.avatar = dataURL
+        this.srcImage = dataURL
         let data = new FormData();
         data.append('id', this.$store.state.user.userId)
         data.append('avatar', dataURL)
+        data.append('blobAvatar',blob)
         this.userUpdate(data,dataURL)
       },
+      // 修改用户信息操作
       userUpdate(data, dataURL){
-        userUpdate(data).then(() => {
+        this.userUpdateLoading = true
+        userUpdate(data).then((res) => {
+          this.userUpdateLoading = false
           this.$message({
             message: '保存成功!',
             type: 'success',
             duration: 1000
           })
           if(dataURL){
-            this.$store.state.user.avatar = dataURL
+            this.srcImage = this.imageUrl + res.data
+            this.$store.state.user.avatar = res.data
           }
         }).catch(() => {
           this.$message({