From 2a53db1324c260501265ad32aa6c8318d4429786 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Sat, 20 Jun 2020 21:02:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A4=B4=E5=83=8F=E8=A3=81?=
 =?UTF-8?q?=E5=89=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/package-lock.json                         |  6 +-
 vue/package.json                              |  2 +-
 .../views/userCenter/components/Avatar.vue    | 58 +++++--------------
 3 files changed, 19 insertions(+), 47 deletions(-)

diff --git a/vue/package-lock.json b/vue/package-lock.json
index 9f90747..ab5d272 100644
--- a/vue/package-lock.json
+++ b/vue/package-lock.json
@@ -11402,9 +11402,9 @@
       "integrity": "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ=="
     },
     "vue-cropper": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.5.3.tgz",
-      "integrity": "sha512-rh8pBZ6pkYbieLYlZ95kBBb+PelU+So4gEv7gwbo4lLft9SCkTc2saGEBtFqh4XqzH2j3Dq3+wNCgo44C7cs2A=="
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.5.4.tgz",
+      "integrity": "sha512-9wwHOk1eHdl+nyq2fnIFDeDMjaXPh1dqfY+FdeEGU7Z/cKVOyH0pLrW0/5NH3xnRzqrU3DAQ8LjC/9/eHdvqKA=="
     },
     "vue-hot-reload-api": {
       "version": "2.3.4",
diff --git a/vue/package.json b/vue/package.json
index 577b44e..0ff80bd 100644
--- a/vue/package.json
+++ b/vue/package.json
@@ -23,7 +23,7 @@
     "v-viewer": "^1.5.1",
     "vue": "^2.6.11",
     "vue-count-to": "^1.0.13",
-    "vue-cropper": "^0.5.3",
+    "vue-cropper": "^0.5.4",
     "vue-router": "^3.3.2",
     "vuex": "^3.4.0"
   },
diff --git a/vue/src/views/userCenter/components/Avatar.vue b/vue/src/views/userCenter/components/Avatar.vue
index 63c38aa..faef7d4 100644
--- a/vue/src/views/userCenter/components/Avatar.vue
+++ b/vue/src/views/userCenter/components/Avatar.vue
@@ -1,6 +1,6 @@
 <template>
     <dialog-form :loading="loading" title="上传头像" :value="value" width="50%" @close="cancel">
-        <el-row class="avatar-cropper" type="flex">
+        <el-row class="avatar-cropper">
             <div class="img-wrapper">
                 <vue-cropper
                         ref="cropper"
@@ -9,33 +9,22 @@
                         autoCrop
                         autoCropHeight="200px"
                         autoCropWidth="200px"
-                        centerBox
                         fixedBox
                         full
                         outputType="png"
-                        @realTime="previews=$event"
                         @wheel.native.prevent="scale"
                 />
             </div>
-            <div class="operate-wrapper">
-                <div class="preview-container">
-                    <div :style="previews.div">
-                        <img :src="previews.url" :style="previews.img">
-                    </div>
-                </div>
-                <el-button size="small" type="primary" @click="$refs.input.click()">
-                    选择图片
-                    <input
-                            ref="input"
-                            accept="image/png, image/jpeg, image/gif, image/jpg"
-                            style="display: none"
-                            type="file"
-                            @change="chooseImage"
-                    >
-                </el-button>
-            </div>
+            <input
+                    ref="input"
+                    accept="image/png, image/jpeg, image/gif, image/jpg"
+                    style="display: none"
+                    type="file"
+                    @change="chooseImage"
+            >
         </el-row>
         <template v-slot:footer>
+            <el-button plain size="small" @click="$refs.input.click()">选择图片</el-button>
             <el-button plain size="small" @click="closeDialog">取 消</el-button>
             <el-button size="small" type="primary" @click="confirm">确 定</el-button>
         </template>
@@ -60,7 +49,6 @@
         data() {
             return {
                 loading: false,
-                previews: {},
                 img: '',
                 name: ''
             }
@@ -123,33 +111,17 @@
 
 <style lang="scss">
     .avatar-cropper {
+        .cropper-crop-box {
+            border: 1px solid #39f;
+            border-radius: 50%;
+            overflow: hidden;
+        }
+
         .img-wrapper {
             height: 360px;
             width: 640px;
             display: inline-block;
             border: 1px solid #ebebeb;
         }
-
-        .operate-wrapper {
-            padding: 0 40px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-
-            .preview-container {
-                border: 1px solid #ebebeb;
-                height: 200px;
-                width: 200px;
-                overflow: hidden;
-                border-radius: 50%;
-                background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
-            }
-
-            .el-button {
-                margin-left: 0;
-                margin-top: 20px;
-                width: 100%;
-            }
-        }
     }
 </style>