修改头像

client/src/components/learnSysLayout/sidebar.vue

@@ -115,7 +115,7 @@ export default {
     },
     /* 修改头像 - 跳转方法 */
     goUpdatePic () {
-      this.$router.push({ path: '/app/account/update-pic' })
+      this.$router.push({ path: '/app/other/update-pic' })
     },
     /* 修改密码 - 跳转方法 */
     goSetPwd () {

client/src/pages/other/setPwd.vue

@@ -68,7 +68,7 @@ export default {
             actionName: 'loginAction',
             functionName: 'updatePwd',
             data: {
-              old_password: this.$md5('uokoaduw' + this.accountSetPwd.oldPwd.split('').reverse().join('') + 'auhgniq'),
+              old_password: Md5('uokoaduw' + this.accountSetPwd.oldPwd.split('').reverse().join('') + 'auhgniq'),
               new_password: this.accountSetPwd.newPwdAgain
             },
             thenCallback: data => {

client/src/pages/other/updatePic.vue

+<template>
+  <div>
+    <div class="con-title">修改头像</div>
+    <div class="con-box">
+      <el-row justify="center">
+        <el-col :xs="24" :sm="9" :md="8" :lg="7" :xl="6">
+          <div class="pic-show">
+            <img :src="imgUrl" alt="">
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="15" :md="16" :lg="17" :xl="18">
+          <div class="info">学员姓名：<b>{{user.student_name}}</b></div>
+          <div class="info">学员学号：{{user.student_no}}</div>
+          <div class="info" style="display: none;">学员sid：{{user.student_id}}</div>
+          <div class="info" style="display: none;">学员sso_id：{{user.sso_id}}</div>
+          <div class="info">支持jpg、gif、png或bmp格式的图片，建议文件小于5M</div>
+          <el-upload
+            ref="upFile"
+            class="upload-demo"
+            action=""
+            :multiple="false"
+            :limit="1"
+            :show-file-list="false"
+            :on-change="handleChange"
+            :http-request="uploadFile"
+            :file-list="filesArr">
+            <el-button type="primary">点击上传</el-button>
+          </el-upload>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { request } from '@action'
+
+export default {
+  components: { },
+  data () {
+    const Gu = this.$GlobalVariable.UserInfo
+
+    return {
+      imgUrl: Gu.avatar || '',
+      user: {
+        student_no: Gu.student_info.sno,
+        student_name: Gu.student_info.personal_name,
+        student_id: Gu.student_info.id,
+        sso_id: Gu.id
+      },
+      file: {
+        id: 'WU_FILE_0',
+        name: '',
+        type: '',
+        lastModifiedDate: '',
+        size: '',
+        avatar: ''
+      },
+      filesArr: []
+    }
+  },
+  methods: {
+    handleChange (file, filelist) {
+      this.file.name = file.raw.name
+      this.file.type = file.raw.type
+      this.file.lastModifiedDate = file.raw.lastModifiedDate
+      this.file.size = file.raw.size
+      this.file.avatar = file.raw
+      // try {
+      //   /* 这个必然是IE */
+      //   let stream = new ActiveXObject('ADODB.Stream') // eslint-disable-line
+      //   stream.type = 1
+      //   stream.open()
+      //   // console.log(this.$refs.upFile.$el.children[0].children[1].files[0])
+      //   debugger
+      //   // stream.loadFromFile(filename)
+      //   // text = stream.readText(adReadAll)
+      //   // stream.close()
+      // } catch (e) {
+      //   let reader = new FileReader() // eslint-disable-line
+      //   reader.readAsBinaryString(this.$refs.upFile.$el.children[0].children[1].files[0]) // 这个读法是异步的
+      //   reader.onloadend = () => {
+      //     // 这个事件在读取结束后，无论成功或者失败都会触发
+      //     if (reader.error) {
+      //       /* 文件读取失败 */
+      //       this.$message.error('文件读取失败，请重试')
+      //     } else {
+      //       this.file.avatar = reader.result
+      //     }
+      //   }
+      // }
+    },
+    uploadFile () {
+      if (!/\.(jpg|jpeg|gif|png|bmp)$/gi.test(this.file.name)) {
+        this.$message.error('文件格式不对，请重新上传')
+        this.filesArr.pop()
+        return
+      }
+      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
+      request({
+        component: this,
+        actionName: 'loginAction',
+        functionName: 'updatePic',
+        data: this.file,
+        thenCallback: data => {
+          this.imgUrl = data.avatar
+          this.$GlobalVariable.UserInfo.avatar = data.avatar
+          this.filesArr.pop()
+        },
+        catchCallback: () => { this.filesArr.pop() },
+        finallyCallback: () => { loading.close() }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pic-show {
+  position: relative;
+  display: block;
+  margin: 0 auto;
+  width: 2rem;
+  height: 2rem;
+  background: #ffffff url('../../assets/images/person-default.jpg') center center no-repeat;
+  background-size: cover;
+  border: 1px solid #e6e3e3;
+  border-radius: 50%;
+  overflow: hidden;
+  img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    transform: translate(-50%, -50%);
+  }
+}
+.info {
+  margin-top: 0.2rem;
+}
+.upload-demo {
+  display: block;
+  margin: 0.2rem 0 0 0;
+}
+
+@media (max-width: 767px) {
+  .info {
+    margin-top: 0.2rem;
+    text-align: center;
+  }
+  .upload-demo {
+    text-align: center;
+  }
+}
+</style>

client/src/router/routes.js

@@ -34,7 +34,8 @@ export default [
         component: () => import('@/components/learnSysLayout/container.vue'),
         children: [
           { path: 'message', component: () => import('../pages/other/message.vue') },
-          { path: 'set-pwd', component: () => import('../pages/other/setPwd.vue') }
+          { path: 'set-pwd', component: () => import('../pages/other/setPwd.vue') },
+          { path: 'update-pic', component: () => import('../pages/other/updatePic.vue') }
         ]
       },
       {