xsx
2 years ago
39 changed files with 556 additions and 269 deletions
@ -0,0 +1,24 @@ |
|||
package com.bx.implatform.vo; |
|||
|
|||
import io.swagger.annotations.ApiModelProperty; |
|||
import lombok.AllArgsConstructor; |
|||
import lombok.Data; |
|||
|
|||
import java.util.List; |
|||
|
|||
/** |
|||
* @author: 谢绍许 |
|||
* @date: 2023-10-28 21:17:59 |
|||
* @version: 1.0 |
|||
*/ |
|||
@Data |
|||
@AllArgsConstructor |
|||
public class OnlineTerminalVO { |
|||
|
|||
@ApiModelProperty(value = "用户id") |
|||
private Long userId; |
|||
|
|||
@ApiModelProperty(value = "在线终端类型") |
|||
private List<Integer> terminals; |
|||
|
|||
} |
|||
|
Before Width: | Height: | Size: 32 KiB |
@ -0,0 +1,104 @@ |
|||
<template> |
|||
<view class="head-image" @click="showUserInfo($event)"> |
|||
<image class="avatar-image" v-if="url" :src="url" |
|||
:style="avatarImageStyle" lazy-load="true" mode="aspectFill"/> |
|||
<view class="avatar-text" v-if="!url" :style="avatarTextStyle"> |
|||
{{name.substring(0,1).toUpperCase()}} |
|||
</view> |
|||
<view v-if="online" class="online" title="用户当前在线"> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "head-image", |
|||
data() { |
|||
return { |
|||
colors: ["#7dd24b", "#c7515a", "#db68ef", "#15d29b", "#85029b", |
|||
"#c9b455", "#fb2609", "#bda818", "#af0831", "#326eb6" |
|||
] |
|||
} |
|||
}, |
|||
props: { |
|||
id: { |
|||
type: Number |
|||
}, |
|||
size: { |
|||
type: Number, |
|||
default: 50 |
|||
}, |
|||
url: { |
|||
type: String |
|||
}, |
|||
name: { |
|||
type: String, |
|||
default: "?" |
|||
}, |
|||
online: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
methods: { |
|||
showUserInfo(e) { |
|||
if (this.id && this.id > 0) { |
|||
uni.navigateTo({ |
|||
url: "/pages/common/user-info?id="+this.id |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
avatarImageStyle() { |
|||
return `width:${this.size}rpx; height:${this.size}rpx;` |
|||
}, |
|||
avatarTextStyle() { |
|||
return `width: ${this.size}rpx;height:${this.size}rpx; |
|||
color:${this.textColor};font-size:${this.size*0.6}rpx;` |
|||
}, |
|||
textColor() { |
|||
let hash = 0; |
|||
for (var i = 0; i < this.name.length; i++) { |
|||
hash += this.name.charCodeAt(i); |
|||
} |
|||
return this.colors[hash % this.colors.length]; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.head-image { |
|||
position: relative; |
|||
cursor: pointer; |
|||
|
|||
.avatar-image { |
|||
position: relative; |
|||
overflow: hidden; |
|||
border-radius: 10%; |
|||
} |
|||
|
|||
.avatar-text { |
|||
background-color: #f2f2f2; |
|||
/* 默认背景色 */ |
|||
border-radius: 50%; |
|||
/* 圆角效果 */ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: 1px solid #ccc; |
|||
} |
|||
|
|||
.online { |
|||
position: absolute; |
|||
right: -10%; |
|||
bottom: 0; |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
background: limegreen; |
|||
border-radius: 50%; |
|||
border: 6rpx solid white; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue