github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-03-17 03:03:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 头像显示已离职效果

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Controllers/Api/UsersController.php
View File

@ -361,7 +361,7 @@ class UsersController extends AbstractController
*/ */
public function search() 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'); $keys = Request::input('keys');
$sorts = Request::input('sorts'); $sorts = Request::input('sorts');

2
app/Models/User.php
View File

@ -419,7 +419,7 @@ class User extends AbstractModel
if (isset($_A["__static_userid2basic_" . $userid])) { if (isset($_A["__static_userid2basic_" . $userid])) {
return $_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(); $userInfo = self::whereUserid($userid)->select($fields)->first();
if ($userInfo) { if ($userInfo) {
$userInfo->online = $userInfo->getOnlineStatus(); $userInfo->online = $userInfo->getOnlineStatus();

15
resources/assets/js/components/UserAvatar.vue
View File

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

26
resources/assets/sass/components/user-avatar.scss vendored
View File

@ -41,6 +41,19 @@
background-color: $primary-color; 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 { .avatar-name {
padding-left: 6px; padding-left: 6px;
@ -48,6 +61,19 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; 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 { .common-avatar-transfer {