添加个人信息页

package.json

@@ -19,8 +19,10 @@
     "@ionic/vue": "0.0.4",
     "axios": "0.18.1",
     "clipboard": "^2.0.6",
+    "cropperjs": "^1.5.6",
     "e-vue-contextmenu": "^0.1.3",
     "element-ui": "2.13.0",
+    "exif-js": "^2.3.0",
     "highlightjs-line-numbers.js": "^2.7.0",
     "jquery": "^1.12.4",
     "js-cookie": "2.2.0",

src/assets/css/cropper.css

@@ -0,0 +1,304 @@
+/*/
+ * Cropper.js v1.5.6
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2019-10-04T04:33:44.164Z
+ */
+
+.cropper-container {
+  direction: ltr;
+  font-size: 0;
+  line-height: 0;
+  position: relative;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.cropper-container img {
+  display: block;
+  height: 100%;
+  image-orientation: 0deg;
+  max-height: none !important;
+  max-width: none !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+  width: 100%;
+}
+
+.cropper-wrap-box,
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cropper-wrap-box,
+.cropper-canvas {
+  overflow: hidden;
+}
+
+.cropper-drag-box {
+  background-color: #fff;
+  opacity: 0;
+}
+
+.cropper-modal {
+  background-color: #000;
+  opacity: 0.5;
+}
+
+.cropper-view-box {
+  display: block;
+  height: 100%;
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 0.75);
+  overflow: hidden;
+  width: 100%;
+}
+
+.cropper-dashed {
+  border: 0 dashed #eee;
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+}
+
+.cropper-dashed.dashed-h {
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  height: calc(100% / 3);
+  left: 0;
+  top: calc(100% / 3);
+  width: 100%;
+}
+
+.cropper-dashed.dashed-v {
+  border-left-width: 1px;
+  border-right-width: 1px;
+  height: 100%;
+  left: calc(100% / 3);
+  top: 0;
+  width: calc(100% / 3);
+}
+
+.cropper-center {
+  display: block;
+  height: 0;
+  left: 50%;
+  opacity: 0.75;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+
+.cropper-center::before,
+.cropper-center::after {
+  background-color: #eee;
+  content: ' ';
+  display: block;
+  position: absolute;
+}
+
+.cropper-center::before {
+  height: 1px;
+  left: -3px;
+  top: 0;
+  width: 7px;
+}
+
+.cropper-center::after {
+  height: 7px;
+  left: 0;
+  top: -3px;
+  width: 1px;
+}
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  display: block;
+  height: 100%;
+  opacity: 0.1;
+  position: absolute;
+  width: 100%;
+}
+
+.cropper-face {
+  background-color: #fff;
+  left: 0;
+  top: 0;
+}
+
+.cropper-line {
+  background-color: #39f;
+}
+
+.cropper-line.line-e {
+  cursor: ew-resize;
+  right: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-n {
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+  top: -3px;
+}
+
+.cropper-line.line-w {
+  cursor: ew-resize;
+  left: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-s {
+  bottom: -3px;
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+}
+
+.cropper-point {
+  background-color: #39f;
+  height: 5px;
+  opacity: 0.75;
+  width: 5px;
+}
+
+.cropper-point.point-e {
+  cursor: ew-resize;
+  margin-top: -3px;
+  right: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-n {
+  cursor: ns-resize;
+  left: 50%;
+  margin-left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-w {
+  cursor: ew-resize;
+  left: -3px;
+  margin-top: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-s {
+  bottom: -3px;
+  cursor: s-resize;
+  left: 50%;
+  margin-left: -3px;
+}
+
+.cropper-point.point-ne {
+  cursor: nesw-resize;
+  right: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-nw {
+  cursor: nwse-resize;
+  left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-sw {
+  bottom: -3px;
+  cursor: nesw-resize;
+  left: -3px;
+}
+
+.cropper-point.point-se {
+  bottom: -3px;
+  cursor: nwse-resize;
+  height: 20px;
+  opacity: 1;
+  right: -3px;
+  width: 20px;
+}
+
+@media (min-width: 768px) {
+  .cropper-point.point-se {
+    height: 15px;
+    width: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .cropper-point.point-se {
+    height: 10px;
+    width: 10px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .cropper-point.point-se {
+    height: 5px;
+    opacity: 0.75;
+    width: 5px;
+  }
+}
+
+.cropper-point.point-se::before {
+  background-color: #39f;
+  bottom: -50%;
+  content: ' ';
+  display: block;
+  height: 200%;
+  opacity: 0;
+  position: absolute;
+  right: -50%;
+  width: 200%;
+}
+
+.cropper-invisible {
+  opacity: 0;
+}
+
+.cropper-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.cropper-hide {
+  display: block;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.cropper-hidden {
+  display: none !important;
+}
+
+.cropper-move {
+  cursor: move;
+}
+
+.cropper-crop {
+  cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}

src/components/Icon/IconFile.vue

@@ -9,7 +9,7 @@
       </div>
       <div v-else>
         <svg-icon v-if="!grid" icon-class="menu-favorite-hover"
-                  style="font-size: 0.5rem;float: right;margin-left: 2rem;position: absolute;"/>
+                  style="font-size: 0.5rem;float: right;margin-left: 0.5rem;position: absolute;"/>
         <svg-icon v-if="grid" icon-class="menu-favorite-hover"
                   style="font-size: 1rem;right: 0;top: -1rem;position: absolute;z-index: 1;"/>
       </div>

src/views/form/index.vue

@@ -1,84 +1,133 @@
 <template>
-  <div class="app-container">
+  <div id="demo">
-    <el-form ref="form" :model="form" label-width="120px">
+    <!-- 遮罩层 -->
-      <el-form-item label="Activity name">
+    <div class="container" v-show="panel">
-        <el-input v-model="form.name" />
+      <div class="xx">
-      </el-form-item>
+        <img id="image" :src="headerImage"/>
-      <el-form-item label="Activity zone">
+      </div>
-        <el-select v-model="form.region" placeholder="please select your zone">
+      <button type="button" id="button" @click="crop">确定</button>
-          <el-option label="Zone one" value="shanghai" />
+    </div>
-          <el-option label="Zone two" value="beijing" />
+
-        </el-select>
+    <div style="padding:20px;">
-      </el-form-item>
+      <div class="show">
-      <el-form-item label="Activity time">
+        <div class="picture" :style="'backgroundImage:url('+headerImage+')'">
-        <el-col :span="11">
+        </div>
-          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
+      </div>
-        </el-col>
+      <div style="margin-top:20px;">
-        <el-col :span="2" class="line">-</el-col>
+        <input type="file" id="change" accept="image" @change="change">
-        <el-col :span="11">
+        <label for="change"></label>
-          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
+      </div>
-        </el-col>
+
-      </el-form-item>
+    </div>
-      <el-form-item label="Instant delivery">
+
-        <el-switch v-model="form.delivery" />
-      </el-form-item>
-      <el-form-item label="Activity type">
-        <el-checkbox-group v-model="form.type">
-          <el-checkbox label="Online activities" name="type" />
-          <el-checkbox label="Promotion activities" name="type" />
-          <el-checkbox label="Offline activities" name="type" />
-          <el-checkbox label="Simple brand exposure" name="type" />
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="Resources">
-        <el-radio-group v-model="form.resource">
-          <el-radio label="Sponsor" />
-          <el-radio label="Venue" />
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="Activity form">
-        <el-input v-model="form.desc" type="textarea" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Create</el-button>
-        <el-button @click="onCancel">Cancel</el-button>
-      </el-form-item>
-    </el-form>
   </div>
 </template>
 
 <script>
+  import "@/assets/css/cropper.css"
+  import Cropper from 'cropperjs'
   export default {
-    data() {
+    components: {
+
+    },
+    data () {
       return {
-        form: {
+        headerImage:'',
-          name: '',
+        picValue:'',
-          region: '',
+        cropper:'',
-          date1: '',
+        croppable:false,
-          date2: '',
+        panel:false,
-          delivery: false,
+        url:''
-          type: [],
-          resource: '',
-          desc: ''
-        }
       }
     },
+    mounted () {
+      //初始化这个裁剪框
+      var self = this;
+      var image = document.getElementById('image');
+      this.cropper = new Cropper(image, {
+        aspectRatio: 1,
+        viewMode: 1,
+        background:false,
+        zoomable:false,
+        ready: function () {
+          self.croppable = true;
+        }
+      });
+    },
     methods: {
-      onSubmit() {
+      getObjectURL (file) {
-        this.$message('submit!')
+        var url = null ;
+        if (window.createObjectURL!=undefined) { // basic
+          url = window.createObjectURL(file) ;
+        } else if (window.URL!=undefined) { // mozilla(firefox)
+          url = window.URL.createObjectURL(file) ;
+        } else if (window.webkitURL!=undefined) { // webkit or chrome
+          url = window.webkitURL.createObjectURL(file) ;
+        }
+        return url ;
       },
-      onCancel() {
+      change (e) {
-        this.$message({
+        let files = e.target.files || e.dataTransfer.files;
-          message: 'cancel!',
+        if (!files.length) return;
-          type: 'warning'
+        this.panel = true;
-        })
+        this.picValue = files[0];
+
+        this.url = this.getObjectURL(this.picValue);
+        //每次替换图片要重新得到新的url
+        if(this.cropper){
+          this.cropper.replace(this.url);
+        }
+        this.panel = true;
+
+      },
+      crop () {
+        this.panel = false;
+        var croppedCanvas;
+        var roundedCanvas;
+
+        if (!this.croppable) {
+          return;
+        }
+        // Crop
+        croppedCanvas = this.cropper.getCroppedCanvas();
+        console.log(this.cropper)
+        // Round
+        roundedCanvas = this.getRoundedCanvas(croppedCanvas);
+
+        this.headerImage = roundedCanvas.toDataURL();
+        this.postImg()
+
+      },
+      getRoundedCanvas (sourceCanvas) {
+
+        var canvas = document.createElement('canvas');
+        var context = canvas.getContext('2d');
+        var width = sourceCanvas.width;
+        var height = sourceCanvas.height;
+
+        canvas.width = width;
+        canvas.height = height;
+
+        context.imageSmoothingEnabled = true;
+        context.drawImage(sourceCanvas, 0, 0, width, height);
+        context.globalCompositeOperation = 'destination-in';
+        context.beginPath();
+        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
+        context.fill();
+
+        return canvas;
+      },
+      postImg () {
+        //这边写图片的上传
       }
     }
   }
 </script>
 
-<style scoped>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
-  .line{
+<style lang="scss">
-    text-align: center;
+  img {
+    display: block;
+    max-width: 100%;
   }
 </style>

src/views/home/mobile/index.vue

@@ -648,6 +648,7 @@
         this.getFileList();
       },
       getFileList(onLoad) {
+        console.log('getFileList',onLoad)
         if (onLoad) {
           this.pagination.pageIndex++
         } else {

src/views/userInfo/index.vue

@@ -1,8 +1,14 @@
 <template>
   <div class="app-container">
-    <el-form ref="form" :model="form" label-width="120px">
-      <el-form-item label="头像">
 
+    <div class="img-dialog" :v-show="dialogVisible">
+      <img id="image" :src="form.avater"/>
+    </div>
+
+
+
+    <el-form ref="form" :model="form" label-width="120px">
+      <el-form-item label="头像" class="form-item-avatar">
         <el-upload
           class="avatar-uploader"
           :action="UploadAvatarURL"
@@ -10,7 +16,8 @@
           :on-change="addAvatar"
           :auto-upload="false"
           :before-upload="beforeAvatarUpload">
-          <img v-if="form.avater" :src="form.avater" class="avatar">
+          <img id="imageAvatar" v-if="form.avater" :src="form.avater" class="avatar">
+<!--          <el-image v-if="form.avater" class="avatar" :src="form.avater" :fit="cover"></el-image>-->
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
       </el-form-item>
@@ -61,12 +68,15 @@
 </template>
 
 <script>
-
+  import "@/assets/css/cropper.css"
+  import Cropper from 'cropperjs'
   import api from '@/api/upload-api'
 
   export default {
     data() {
       return {
+        dialogVisible:false,
+        cropper:'',
         UploadAvatarURL: api.simpleUploadAvatarURL,
         form: {
           avater: '',
@@ -81,6 +91,18 @@
         }
       }
     },
+    mounted() {
+      let _this = this;
+      let image = document.getElementById('image');
+      this.cropper = new Cropper(image, {
+        aspectRatio: 1,
+        viewMode: 1,
+        background:false,
+        zoomable:false,
+        ready: function () {
+        }
+      });
+    },
     methods: {
       onSubmit() {
         this.$message('submit!')
@@ -92,11 +114,17 @@
         })
       },
       addAvatar(file, fileList) {
-        console.log(file,fileList)
+        // const isLt2M = file.size / 1024 / 1024 < 2;
+        // if (!isLt2M) {
+        //   this.$message.error('上传头像图片大小不能超过 2MB!');
+        //   return
+        // }
         let reader = new FileReader();
         const _this = this
         reader.onload = function (e) {
           _this.form.avater = e.target.result
+          _this.dialogVisible = true
+          _this.cropper.replace(e.target.result);
         };
         reader.readAsDataURL(file.raw)
       },
@@ -106,18 +134,40 @@
           this.$message.error('上传头像图片大小不能超过 2MB!');
         }
         return isLt2M;
-      }
+      },
+      crop () {
+        this.panel = false;
+        var croppedCanvas;
+        var roundedCanvas;
+
+        if (!this.croppable) {
+          return;
+        }
+        // Crop
+        croppedCanvas = this.cropper.getCroppedCanvas();
+        console.log(this.cropper)
+        // Round
+        roundedCanvas = this.getRoundedCanvas(croppedCanvas);
+        this.form.avater = roundedCanvas.toDataURL();
+      },
     }
   }
 </script>
 
+<!--<style src="@styles/cropper.css"></style>-->
 <style scoped>
   .line{
     text-align: center;
+  }
+  .img-dialog {
+
   }
    /deep/ .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
-     border-radius: 6px;
+     width: 100px;
+     height: 100px;
+     line-height: 100px;
+     border-radius: 50%;
      cursor: pointer;
      position: relative;
      overflow: hidden;
@@ -128,14 +178,17 @@
   /deep/.avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
-    width: 178px;
+    width: 100px;
-    height: 178px;
+    height: 100px;
-    line-height: 178px;
+    line-height: 100px;
     text-align: center;
   }
   /deep/.avatar {
-    width: 178px;
+    width: 100px;
-    height: 178px;
+    height: 100px;
     display: block;
   }
+  .form-item-avatar {
+    line-height: 100px;
+  }
 </style>