From bdaeb75ccce6d84b75ad5eedbf62310633601b78 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Mon, 28 Aug 2023 17:53:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E5=A4=B4=E5=83=8F=E4=B8=BA=E7=A9=BA=E6=97=B6=E4=B8=8D=E8=83=BD?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit e6a9dd0e4ca41d5ec36daf4614ec492e1a6dc88c)
---
 src/components/Cropper/src/CropperAvatar.vue | 31 ++++++++++----------
 src/views/Profile/components/UserAvatar.vue  |  9 +++---
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue
index 7517e5b9..e88036dd 100644
--- a/src/components/Cropper/src/CropperAvatar.vue
+++ b/src/components/Cropper/src/CropperAvatar.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="user-info-head" @click="open()">
-    <img :src="sourceValue" class="img-circle img-lg" />
+    <img v-if="sourceValue" :src="sourceValue" alt="avatar" class="img-circle img-lg" />
+    <img v-if="!sourceValue" :src="avatar" alt="avatar" class="img-circle img-lg" />
     <el-button v-if="showBtn" :class="`${prefixCls}-upload-btn`" @click="open()">
       {{ btnText ? btnText : t('cropper.selectImage') }}
     </el-button>
@@ -17,6 +18,7 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
 import { useI18n } from 'vue-i18n'
 import CopperModal from './CopperModal.vue'
+import avatar from '@/assets/imgs/avatar.jpg'
 
 const props = defineProps({
   width: propTypes.string.def('200px'),
@@ -83,14 +85,14 @@ $prefix-cls: #{$namespace}--cropper-avatar;
   }
 
   &-image-mask {
-    opacity: 0%;
     position: absolute;
     width: inherit;
     height: inherit;
-    border-radius: inherit;
-    border: inherit;
-    background: rgb(0 0 0 / 40%);
     cursor: pointer;
+    background: rgb(0 0 0 / 40%);
+    border: inherit;
+    border-radius: inherit;
+    opacity: 0;
     transition: opacity 0.4s;
 
     ::v-deep(svg) {
@@ -99,7 +101,7 @@ $prefix-cls: #{$namespace}--cropper-avatar;
   }
 
   &-image-mask:hover {
-    opacity: 4000%;
+    opacity: 40;
   }
 
   &-upload-btn {
@@ -121,21 +123,18 @@ $prefix-cls: #{$namespace}--cropper-avatar;
   height: 120px;
 }
 
-.user-info-head:hover:after {
-  content: '+';
+.user-info-head:hover::after {
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  color: #eee;
-  background: rgba(0, 0, 0, 0.5);
+  inset: 0;
   font-size: 24px;
-  font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  cursor: pointer;
+  font-style: normal;
   line-height: 110px;
+  color: #eee;
+  cursor: pointer;
+  background: rgb(0 0 0 / 50%);
   border-radius: 50%;
+  content: '+';
 }
 </style>
diff --git a/src/views/Profile/components/UserAvatar.vue b/src/views/Profile/components/UserAvatar.vue
index 46e8cc4d..a1626317 100644
--- a/src/views/Profile/components/UserAvatar.vue
+++ b/src/views/Profile/components/UserAvatar.vue
@@ -4,7 +4,7 @@
       ref="cropperRef"
       :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
       :showBtn="false"
-      :value="avatar"
+      :value="img"
       width="120px"
       @change="handelUpload"
     />
@@ -14,12 +14,11 @@
 import { propTypes } from '@/utils/propTypes'
 import { uploadAvatarApi } from '@/api/system/user/profile'
 
-const props = defineProps({
+defineOptions({ name: 'UserAvatar' })
+
+defineProps({
   img: propTypes.string.def('')
 })
-const avatar = computed(() => {
-  return props.img
-})
 
 const cropperRef = ref()
 const handelUpload = async ({ data }) => {