支持用户修改头像 (#165)

Author: quanquan2100

package-lock.json

@@ -21,6 +21,7 @@
     "good-storage": "^1.1.0",
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.11",
+    "moment": "^2.24.0",
     "screenfull": "^4.2.0",
     "vue": "^2.6.8",
     "vue-awesome-swiper": "^3.1.3",

package.json

@@ -3,13 +3,13 @@
     <el-dropdown trigger="click">
       <span class="el-dropdown-link">
         <div class="nav-avatar">
-          <img src="../../assets/img/user/user.jpg" alt="头像">
+          <img :src="user.avatar || '../../assets/img/user/user.jpg'" alt="头像">
         </div>
       </span>
       <el-dropdown-menu slot="dropdown" class="user-box">
         <div class="user-info">
           <div class="avatar" title="点击修改头像">
-            <img src="../../assets/img/user/user.jpg" alt="头像">
+            <img :src="user.avatar || '../../assets/img/user/user.jpg'" alt="头像">
             <label class="mask">
               <i class="iconfont icon-icon-test" style="font-size: 20px;"></i>
               <input
@@ -110,7 +110,6 @@ import User from '@/lin/models/user'
 import Vue from 'vue'
 import Croppa from 'vue-croppa'
 import 'vue-croppa/dist/vue-croppa.css'
-import Config from '@/config'
 
 Vue.use(Croppa)
 
@@ -206,7 +205,7 @@ export default {
     this.init()
   },
   methods: {
-    ...mapActions(['loginOut']),
+    ...mapActions(['loginOut', 'setUserAndState']),
     fileChange(evt) {
       if (evt.target.files.length !== 1) {
         return
@@ -253,20 +252,52 @@ export default {
       }
     },
     async handleCrop() {
-      // console.log(this.$refs.croppa)
+      // 获取裁剪数据
       const blob = await this.$refs.croppa.promisedBlob('image/jpeg', 0.8)
+      // 构造为文件对象
+      const file = new File([blob], 'avatar.jpg', {
+        type: 'image/jpeg',
+      })
 
-      // debugger
-      // const res = await http({
-      const res = await this.$axios({
+      return this.$axios({
         method: 'post',
-        url: `${Config.baseUrl}cms/file/`,
+        url: '/cms/file/',
         data: {
-          file: blob,
+          file,
         },
+      }).then((res) => {
+        if (!Array.isArray(res) || res.length !== 1) {
+          this.$message.error('头像上传失败, 请重试')
+          return false
+        }
+        // TODO: 错误码处理
+        // if (res.error_code === 10110) {
+        //   throw new Error('文件体积过大')
+        // }
+        return this.$axios({
+          method: 'put',
+          url: '/cms/user/avatar',
+          data: {
+            avatar: res[0].url,
+          },
+        }).then((res) => { // eslint-disable-line
+          if (res.error_code === 0) {
+            this.$message({
+              type: 'success',
+              message: '更新头像成功',
+            })
+            this.cropVisible = false
+            // 触发重新获取用户信息
+            // this.$store.dispatch()
+            return User.getInformation()
+          }
+          return Promise.reject(new Error('更新头像失败'))
+        }).then((res) => { // eslint-disable-line
+          // 尝试获取当前用户信息
+          const user = res
+          this.setUserAndState(user)
+        })
       })
-      console.log(res)
-      // debugger
     },
     init() {
       const { user } = this.$store.state

src/components/layout/User.vue

@@ -0,0 +1,5 @@
+# Lin-directives
+
+文件夹内容描述
+
+更多内容请查看 [文档](#)

src/lin/directives/README.md

@@ -0,0 +1,5 @@
+# Lin-filter
+
+文件夹内容描述
+
+更多内容请查看 [文档](#)

src/lin/filter/README.md

@@ -0,0 +1,5 @@
+# Lin-mixin
+
+文件夹内容描述
+
+更多内容请查看 [文档](#)

src/lin/mixin/README.md

@@ -28,11 +28,12 @@ export default class User {
   // 是否为超级管理员
   auths = [] // 拥有的权限
 
-  constructor(active, email, groupId, nickname, _super, auths) {
+  constructor(active, email, groupId, nickname, _super, avatar, auths) {
     this.isActive = active === ACTIVE_VALUE
     this.email = email
     this.groupId = groupId
     this.nickname = nickname
+    this.avatar = avatar
     this.isSuper = _super === SUPER_VALUE
     this.auths = auths || []
   }
@@ -64,15 +65,15 @@ export default class User {
    */
   static async getInformation() {
     const info = await get('cms/user/information')
-    return new User(info.active, info.email, info.group_id, info.nickname, info.admin)
+    return new User(info.active, info.email, info.group_id, info.nickname, info.admin, info.avatar)
   }
 
   /**
    * 获取当前用户信息和所拥有的权限
    */
   static async getAuths() {
     const info = await get('cms/user/auths')
-    return new User(info.active, info.email, info.group_id, info.nickname, info.admin, info.auths)
+    return new User(info.active, info.email, info.group_id, info.nickname, info.admin, info.avatar, info.auths)
   }
 
   /**

src/lin/models/user.js

@@ -0,0 +1,5 @@
+# Lin-plugins
+
+文件夹内容描述
+
+更多内容请查看 [文档](#)

src/lin/plugins/README.md

@@ -1,3 +1,8 @@
+import moment from 'moment'
+
+// 设置语言为中文
+moment.locale('zh-cn')
+
 /**
  * @param {number} hours
  */

src/lin/utils/date.js

@@ -1,3 +1,4 @@
+// 已废弃
 import Vue from 'vue'
 import User from '../models/user'
 import { refreshRequest } from './http'