added avatar modal

Author: sendya

src/views/account/settings/AvatarModal.vue

@@ -0,0 +1,106 @@
+<template>
+  <a-modal :visible="visible" title="修改头像" :maskClosable="false" :confirmLoading="confirmLoading" :width="800">
+    <a-row>
+      <a-col :span="12" :style="{height: '350px'}">
+        <vue-cropper
+          ref="cropper"
+          :img="options.img"
+          :info="true"
+          :autoCrop="options.autoCrop"
+          :autoCropWidth="options.autoCropWidth"
+          :autoCropHeight="options.autoCropHeight"
+          :fixedBox="options.fixedBox"
+          @realTime="realTime"
+        >
+        </vue-cropper>
+      </a-col>
+      <a-col :span="12" :style="{height: '350px'}">
+        <div class="avatar-upload-preview">
+          <img :src="previews.url" :style="previews.img"/>
+        </div>
+      </a-col>
+    </a-row>
+
+    <template slot="footer">
+      <a-button key="back" @click="cancelHandel">取消</a-button>
+      <a-button key="submit" type="primary" :loading="confirmLoading" @click="okHandel">保存</a-button>
+    </template>
+  </a-modal>
+</template>
+<script>
+  import VueCropper from 'vue-cropper'
+
+  export default {
+    components: {
+      VueCropper
+    },
+    data() {
+      return {
+        visible: false,
+        id: null,
+        confirmLoading: false,
+
+        options: {
+          img: 'http://ofyaji162.bkt.clouddn.com/bg1.jpg',
+          autoCrop: true,
+          autoCropWidth: 200,
+          autoCropHeight: 200,
+          fixedBox: true
+        },
+        previews: {},
+      };
+    },
+    watch: {
+
+    },
+    methods: {
+      edit(id) {
+        this.visible = true;
+        this.id = id;
+        /* 获取原始头像 */
+
+      },
+      close() {
+        this.id = null;
+        this.visible = false;
+      },
+      cancelHandel() {
+        this.close();
+      },
+      okHandel() {
+        const vm = this
+
+        vm.confirmLoading = true
+        setTimeout(() => {
+          vm.confirmLoading = false
+          vm.close()
+          vm.$message.success('上传头像成功');
+        }, 2000)
+
+      },
+
+      realTime(data) {
+        this.previews = data
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+
+  .avatar-upload-preview {
+    position: absolute;
+    top: 50%;
+    transform: translate(50%, -50%);
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    box-shadow: 0 0 4px #ccc;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>

src/views/account/settings/BaseSetting.vue

@@ -52,7 +52,7 @@
 
       </a-col>
       <a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
-        <div class="ant-upload-preview" >
+        <div class="ant-upload-preview" @click="$refs.modal.edit(1)" >
           <a-icon type="cloud-upload-o" class="upload-icon"/>
           <div class="mask">
             <a-icon type="plus" />
@@ -62,15 +62,19 @@
       </a-col>
 
     </a-row>
+
+    <avatar-modal ref="modal">
+
+    </avatar-modal>
   </div>
 </template>
 
 <script>
-  import VueCropper from "vue-cropper/example/src/vue-cropper/vue-cropper"
+  import AvatarModal from './AvatarModal'
 
   export default {
     components: {
-      VueCropper
+      AvatarModal
     },
     data () {
       return {
@@ -92,6 +96,9 @@
           fixedNumber: [1, 1]
         }
       }
+    },
+    methods: {
+
     }
   }
 </script>