支持用户修改头像

package.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",

src/components/layout/User.vue

@@ -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/lin/directives/README.md

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

src/lin/filter/README.md

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

src/lin/mixin/README.md

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

src/lin/models/user.js

@@ -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/plugins/README.md

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

src/lin/utils/date.js

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

src/lin/utils/exception.js

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

src/lin/utils/http.js

@@ -1,3 +1,4 @@
+// 已废弃
 import axios from 'axios'
 import Config from '@/config'
 import Vue from 'vue'

src/lin/utils/index.js

@@ -0,0 +1 @@
+export * from './date'

src/lin/utils/util.js

@@ -74,7 +74,8 @@ Utils.getRandomStr = (n = 6) => {
   return str
 }
 
-function type(obj) {
+
+function getTypeOf(obj) {
   const { toString } = Object.prototype
   const map = {
     '[object Boolean]': 'boolean',
@@ -200,4 +201,47 @@ Utils.hasPermission = (auths, route, user) => { // eslint-disable-line
   return true
 }
 
+let cached;
+/**
+ * 获取窗口滚动条大小, From: https://github.com/react-component/util/blob/master/src/getScrollBarSize.js
+ * @param {boolean} fresh 强制重新计算
+ * @returns {number}
+ */
+export function getScrollBarSize(fresh) {
+  if (fresh || cached === undefined) {
+    const inner = document.createElement('div');
+    inner.style.width = '100%';
+    inner.style.height = '200px';
+
+    const outer = document.createElement('div');
+    const outerStyle = outer.style;
+
+    outerStyle.position = 'absolute';
+    outerStyle.top = 0;
+    outerStyle.left = 0;
+    outerStyle.pointerEvents = 'none';
+    outerStyle.visibility = 'hidden';
+    outerStyle.width = '200px';
+    outerStyle.height = '150px';
+    outerStyle.overflow = 'hidden';
+
+    outer.appendChild(inner);
+
+    document.body.appendChild(outer);
+
+    const widthContained = inner.offsetWidth;
+    outer.style.overflow = 'scroll';
+    let widthScroll = inner.offsetWidth;
+
+    if (widthContained === widthScroll) {
+      widthScroll = outer.clientWidth;
+    }
+
+    document.body.removeChild(outer);
+
+    cached = widthContained - widthScroll;
+  }
+  return cached;
+}
+
 export default Utils

src/views/book/BookAdd.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import book from '@/lin/models/book'
+import book from '@/models/book'
 
 export default {
   data() {

src/views/book/BookEdit.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import book from '@/lin/models/book'
+import book from '@/models/book'
 
 export default {
   props: {

src/views/book/BookList.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import book from '@/lin/models/book'
+import book from '@/models/book'
 import LinTable from '@/components/base/table/lin-table'
 import BookEdit from './BookEdit'