更换头像

package-lock.json

@@ -1127,6 +1127,23 @@
         "esutils": "^2.0.2"
       }
     },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
+        }
+      }
+    },
     "babel-preset-env": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/babel-preset-env/-/babel-preset-env-1.7.0.tgz",
@@ -4857,14 +4874,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4879,20 +4894,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5009,8 +5021,7 @@
         "inherits": {
           "version": "2.0.4",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5022,7 +5033,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5037,7 +5047,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5045,14 +5054,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.9.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5071,7 +5078,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5161,8 +5167,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5174,7 +5179,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5296,7 +5300,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -12467,6 +12470,14 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-image-crop-upload": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/vue-image-crop-upload/-/vue-image-crop-upload-2.5.0.tgz",
+      "integrity": "sha512-AV+ZwPuaZ8tKdSopaSOCk4v0JqKZjFu6uLQg5D06pzt2GLcIR8NgrFz+/S0YN25RgkC4vHvUr9+XcNSUTk28ng==",
+      "requires": {
+        "babel-runtime": "^6.11.6"
+      }
+    },
     "vue-loader": {
       "version": "13.7.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz",

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@baiducloud/bos-uploader": "^1.4.0-rc.0",
     "ajv": "^6.10.2",
+    "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.0-rc.2",
     "element-ui": "^2.3.2",
     "http-proxy-middleware": "^0.18.0",
@@ -21,6 +22,7 @@
     "less-loader": "^5.0.0",
     "vue": "^2.5.2",
     "vue-gn-components": "^1.1.0",
+    "vue-image-crop-upload": "^2.5.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

src/api/basisMG.js

@@ -47,3 +47,6 @@ export const updateLecturer = (params) => { return req("post", "/api/Lecturer/up
 
 // 个人中心 更新
 export const updateSelf = (params) => { return req("post", "/api/Lecturer/updateSelf", params) };
+
+// 个人中心 更新
+export const uploadBase64 = (params) => { return req("post", "/api/file/uploadBase64", params) };

src/components/navcon.vue

@@ -2,42 +2,71 @@
 * 头部菜单
 */ 
 <template>
-<div class="header-menu">
-  <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
-    <el-button class="buttonimg">
-      <img class="showimg" :src="collapsed?imgsq:imgshow" @click="toggle(collapsed)">
-    </el-button>
-    <el-submenu index="2" class="submenu">
-      <!-- <template slot="title">{{user.userRealName}}</template> -->
-      <template slot="title">
-        <span>
-          <img :src="user.avatar" alt="" class="img-avatar">
+  <div class="header-menu">
+    <el-menu
+      class="el-menu-demo"
+      mode="horizontal"
+      background-color="#334157"
+      text-color="#fff"
+      active-text-color="#fff"
+    >
+      <el-button class="buttonimg">
+        <img class="showimg" :src="collapsed?imgsq:imgshow" @click="toggle(collapsed)" />
+      </el-button>
+      <el-submenu index="2" class="submenu">
+        <!-- <template slot="title">{{user.userRealName}}</template> -->
+        <template slot="title">
+          <span>
+            <img :src="user.avatar" alt class="img-avatar" />
           </span>
-        {{user.username}}
+          {{user.username}}
         </template>
-      <el-menu-item @click="handleSetInfo()" index="2-2">个人中心</el-menu-item>
-      <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
-    </el-submenu>
-  </el-menu>
-  <el-dialog title="个人中心" :visible.sync="updateFormVisible" width="30%" @click="closeDialog">
-      <el-form label-width="120px" :model="updateForm" :rules="rules" ref="updateForm" label-position="top">
+        <el-menu-item @click="handleSetInfo()" index="2-2">个人中心</el-menu-item>
+        <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
+      </el-submenu>
+    </el-menu>
+    <el-dialog title="个人中心" :visible.sync="updateFormVisible" width="30%" @click="closeDialog">
+      <el-form
+        label-width="120px"
+        :model="updateForm"
+        :rules="rules"
+        ref="updateForm"
+        label-position="top"
+      >
         <el-form-item label="设置头像" prop="expires">
-          <img :src="updateForm.avatar" alt="" style="border-radius:50%;width:80px">
+          <div class="avatar-box">
+            <img :src="updateForm.avatar" alt style="border-radius:50%;width:80px" />
+            <span class="txt-edit-avatar" @click="toggleShow">更换头像</span>
+            <my-upload
+              field="img"
+              @crop-success="cropSuccess"
+              v-model="show"
+              :width="200"
+              :height="200"
+              img-format="jpg"
+              :size="size"
+            ></my-upload>
+            <img :src="avatar" />
+          </div>
         </el-form-item>
         <el-form-item label="修改账号" prop="expires">
-         <el-input   v-model="updateForm.account" :disabled="updateForm.setaccount === 0" auto-complete="off" placeholder="请输入新账号"></el-input>
+          <el-input
+            v-model="updateForm.account"
+            :disabled="updateForm.setaccount === 0"
+            auto-complete="off"
+            placeholder="请输入新账号"
+          ></el-input>
           <p class="error-tip">当前用户可修改账号次数为 0</p>
         </el-form-item>
         <el-form-item label="设置新密码" prop="password">
-          <el-input type="password"  v-model="updateForm.password" label="请输入新密码"></el-input>
+          <el-input type="password" v-model="updateForm.password" label="请输入新密码"></el-input>
         </el-form-item>
         <el-form-item label="确认新密码" prop="password">
-          <el-input type="password"  v-model="psw" label="请确认新密码"></el-input>
+          <el-input type="password" v-model="psw" label="请确认新密码"></el-input>
         </el-form-item>
-        
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button   @click="closeDialog">取消</el-button>
+        <el-button @click="closeDialog">取消</el-button>
         <el-button
           type="primary"
           :loading="loading"
@@ -46,92 +75,119 @@
         >保存</el-button>
       </div>
     </el-dialog>
-</div>
+  </div>
 </template>
 
 <script>
-import { updateSelf } from '../api/basisMG'
+import "babel-polyfill";
+import myUpload from "vue-image-crop-upload";
+import { updateSelf, uploadBase64 } from "../api/basisMG";
 export default {
-  name: 'navcon',
+  name: "navcon",
+  components: {
+    "my-upload": myUpload
+  },
   data() {
     return {
-      updateFormVisible:false,
-      updateForm:{},
-      psw:"",
+      avatar: "", //用于存储剪切完图片的base64Data和显示回调图片
+      show: false, //剪切框显示和隐藏的flag
+      size: 2.1,
+      updateFormVisible: false,
+      updateForm: {},
+      loading: false,
+      psw: "",
       collapsed: true,
-      imgshow: require('../assets/img/show.png'),
-      imgsq: require('../assets/img/sq.png'),
+      imgshow: require("../assets/img/show.png"),
+      imgsq: require("../assets/img/sq.png"),
       user: {},
       // rules表单验证
       rules: {
         password: [
           { required: false, message: "请输入新密码", trigger: "blur" }
         ]
-      },
-    }
+      }
+    };
   },
   // 创建完毕状态(里面是操作)
   created() {
-    this.user = JSON.parse(localStorage.getItem('user'))
-    this.updateForm = this.user
+    this.user = JSON.parse(localStorage.getItem("user"));
+    this.updateForm = this.user;
   },
   methods: {
-    handleSetInfo(){
-      this.updateForm.password = ''
-      this.updateFormVisible = true
+    //控制剪切框的显示和隐藏
+    toggleShow() {
+      this.show = !this.show;
+    },
+    //剪切成功后的回调函数
+    cropSuccess(imgDataUrl) {
+      uploadBase64(imgDataUrl).then(res => {
+        if(!res.error){
+          this.updateForm.avatar = res.result.data;
+        }else{
+          this.$message.error('上传失败')
+        }
+      })
+    },
+
+    handleSetInfo() {
+      this.updateForm.password = "";
+      this.updateFormVisible = true;
+    },
+    closeDialog() {
+      this.updateFormVisible = false;
     },
     // 退出登录
     exit() {
-      this.$confirm('退出登录, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+      this.$confirm("退出登录, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
       })
         .then(() => {
           setTimeout(() => {
-            this.$store.commit('logout', 'false')
-            this.$router.push({ path: '/login' })
+            this.$store.commit("logout", "false");
+            this.$router.push({ path: "/login" });
             this.$message({
-              type: 'success',
-              message: '已退出登录!'
-            })
-          }, 1000)
+              type: "success",
+              message: "已退出登录!"
+            });
+          }, 1000);
         })
         .catch(() => {
           this.$message({
-            type: 'info',
-            message: '已取消'
-          })
-        })
+            type: "info",
+            message: "已取消"
+          });
+        });
     },
     // 更新授权信息
     submitUpdateForm(editData) {
       this.$refs[editData].validate(valid => {
         if (valid) {
-          if(this.updateForm.password === this.psw){
-          updateSelf(this.updateForm)
-            .then(res => {
-              this.updateFormVisible = false;
-              this.loading = false;
-              if (!res.error) {
-                this.$message({
-                  type: "success",
-                  message: "更新成功"
-                });
-                localStorage.setItem('user',JSON.stringify(this.updateForm))
-              } else {
-                this.$message({
-                  type: "info",
-                  message: res.error.message
-                });
-              }
-            })
-            .catch(err => {
-              this.updateFormVisible = false;
-              this.loading = false;
-              this.$message.error("更新失败，请稍后再试！");
-            });
-          }else{
+          if (this.updateForm.password === this.psw) {
+            updateSelf(this.updateForm)
+              .then(res => {
+                this.updateFormVisible = false;
+                this.loading = false;
+                if (!res.error) {
+                  this.$message({
+                    type: "success",
+                    message: "更新成功"
+                  });
+                  localStorage.setItem("user", JSON.stringify(this.updateForm));
+                } else {
+                  this.$message({
+                    type: "info",
+                    message: res.error.message
+                  });
+                }
+              })
+              .catch(err => {
+                this.updateFormVisible = false;
+                this.loading = false;
+                this.$message.error("更新失败，请稍后再试！");
+              });
+          } else {
             this.$message.error("两次密码输入不一致");
           }
         } else {
@@ -141,18 +197,18 @@ export default {
     },
     // 切换显示
     toggle(showtype) {
-      this.collapsed = !showtype
-      this.$root.Bus.$emit('toggle', this.collapsed)
+      this.collapsed = !showtype;
+      this.$root.Bus.$emit("toggle", this.collapsed);
     }
   }
-}
+};
 </script>
 <style scoped>
 .el-menu-vertical-demo:not(.el-menu--collapse) {
   border: none;
 }
 
-.header-menu /deep/ .el-submenu__title{
+.header-menu /deep/ .el-submenu__title {
   border: none !important;
 }
 .submenu {
@@ -173,7 +229,7 @@ export default {
 .showimg:active {
   border: none;
 }
-.img-avatar{
+.img-avatar {
   width: 35px;
   height: 35px;
   border-radius: 50%;
@@ -181,9 +237,41 @@ export default {
   margin-bottom: 5px;
 }
 
-.error-tip{
+.error-tip {
   font-size: 12px;
   color: rgb(236, 104, 104);
   margin-left: 10px;
 }
+
+.avatar-box {
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.txt-edit-avatar {
+  visibility: hidden;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  color: white;
+  text-align: center;
+  line-height: 80px;
+  left: 0;
+  top: 0;
+  background: rgb(121, 120, 120);
+  opacity: 0.7;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.avatar-box:hover .txt-edit-avatar {
+  visibility: visible;
+  color:#fff;
+}
+.btn {
+  background-color: indianred;
+  padding: 7px 12px;
+  color: white;
+}
 </style>

src/views/goods/Goods.vue

@@ -41,7 +41,7 @@
       </el-table-column>
       <el-table-column sortable prop="expires" label="授权到期时间" width="200">
         <template slot-scope="scope">
-          <div>{{scope.row.expires|timestampToTime}}</div>
+          <div>{{scope.row.expires ? (scope.row.expires|timestampToTime) : '未授权'}}</div>
         </template>
       </el-table-column>
       <el-table-column sortable prop="maximum" label="成员数量" width="120"></el-table-column>
@@ -230,10 +230,11 @@ export default {
       getOrgList(param).then(res => {
         if(!res.error){
           this.loading = false;
+          let activationList = res.result.extend.Activation
           res.result.data.forEach(i => {
-            i.expires = res.result.extend.Activation.filter(j => j.orgCode === i.code)[0].expires
-            i.maximum = res.result.extend.Activation.filter(j => j.orgCode === i.code)[0].maximum
-            i.activeStatus = res.result.extend.Activation.filter(j => j.orgCode === i.code)[0].status
+            i.expires = activationList.filter(j => j.orgCode === i.code).length ? activationList.filter(j => j.orgCode === i.code)[0].expires : null
+            i.maximum = activationList.filter(j => j.orgCode === i.code).length ? activationList.filter(j => j.orgCode === i.code)[0].maximum : 0
+            i.activeStatus = activationList.filter(j => j.orgCode === i.code).length ? activationList.filter(j => j.orgCode === i.code)[0].status : 0
           })
 
           this.listData = res.result.data;