perf: 头像显示已离职效果

This commit is contained in:
kuaifan 2022-06-10 08:58:33 +08:00
parent 02f75726c5
commit 9a9ff64576
4 changed files with 41 additions and 4 deletions

View File

@ -361,7 +361,7 @@ class UsersController extends AbstractController
*/
public function search()
{
$builder = User::select(['userid', 'email', 'nickname', 'profession', 'userimg', 'az']);
$builder = User::select(['userid', 'email', 'nickname', 'profession', 'userimg', 'az', 'line_at', 'disable_at']);
//
$keys = Request::input('keys');
$sorts = Request::input('sorts');

View File

@ -419,7 +419,7 @@ class User extends AbstractModel
if (isset($_A["__static_userid2basic_" . $userid])) {
return $_A["__static_userid2basic_" . $userid];
}
$fields = ['userid', 'email', 'nickname', 'profession', 'userimg', 'line_at'];
$fields = ['userid', 'email', 'nickname', 'profession', 'userimg', 'az', 'line_at', 'disable_at'];
$userInfo = self::whereUserid($userid)->select($fields)->first();
if ($userInfo) {
$userInfo->online = $userInfo->getOnlineStatus();

View File

@ -14,7 +14,7 @@
</div>
</div>
<div class="avatar-wrapper">
<div v-if="showIcon" :class="['avatar-box', userId === userid || user.online ? 'online' : '']" :style="boxStyle">
<div v-if="showIcon" :class="boxClass" :style="boxStyle">
<em :style="spotStyle"></em>
<EAvatar v-if="showImg" ref="avatar" :class="{'avatar-default':isDefault}" :src="user.userimg" :size="avatarSize" :error="onError">
<span class="avatar-char" :style="spotStyle">{{nickname}}</span>
@ -23,7 +23,10 @@
<span class="avatar-char" :style="spotStyle">{{nickname}}</span>
</EAvatar>
</div>
<div v-if="showName" class="avatar-name" :style="nameStyle">{{user.nickname}}</div>
<template v-if="showName">
<div class="avatar-name" :style="nameStyle">{{user.nickname}}</div>
<div v-if="user.disable_at" class="avatar-disable">{{$L('离职')}}</div>
</template>
</div>
</ETooltip>
</template>
@ -109,6 +112,14 @@
computed: {
...mapState(['userInfo', 'userOnline', 'cacheUserBasic']),
boxClass() {
return {
'avatar-box': true,
'online': this.userId === this.userid || this.user.online,
'disable': this.user.disable_at
}
},
boxStyle() {
const style = {};
const {borderWitdh, borderColor} = this

View File

@ -41,6 +41,19 @@
background-color: $primary-color;
}
}
&.disable {
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHRpdGxlPkJhbjwvdGl0bGU+PGNpcmNsZSBmaWxsPSJub25lIiBzdHJva2U9IiNFRDQwMTQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSI0OCIgY3g9IjI1NiIgY3k9IjI1NiIgcj0iMjAwIi8+PHBhdGggc3Ryb2tlPSIjRUQ0MDE0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iNDgiIGQ9Ik0xMTQuNTggMTE0LjU4bDI4Mi44NCAyODIuODQiLz48L3N2Zz4=");
background-color: rgba(237, 64, 20, 0.2);
border-radius: 50%;
}
}
}
.avatar-name {
padding-left: 6px;
@ -48,6 +61,19 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.avatar-disable {
margin-left: 2px;
white-space: nowrap;
font-size: 12px;
height: 20px;
line-height: 20px;
padding: 0 6px;
border-radius: 3px;
transform: scale(0.9);
transform-origin: right center;
color: #ffffff;
background-color: #ED4014;
}
}
}
.common-avatar-transfer {