web/im/src/components/chat/panel/PanelHeader.vue

279 lines
5.5 KiB
Vue
Raw Normal View History

2022-12-28 10:08:51 +08:00
<template>
<el-header id="panel-header">
<div class="module left-module">
<span
class="icon-badge"
v-show="params.is_robot == 0"
:class="{ 'red-color': params.talk_type == 1 }"
>
{{ params.talk_type == 1 ? '好友' : '群组' }}
</span>
<span class="nickname">{{ params.nickname }}</span>
<span v-show="params.talk_type == 2" class="num">({{ groupNum }})</span>
</div>
<div v-show="params.talk_type == 1 && params.is_robot == 0" class="module center-module">
<p class="online">
<span v-show="isOnline" class="online-status"></span>
<span>{{ isOnline ? '在线' : '离线' }}</span>
</p>
<p class="keyboard-status" v-show="isKeyboard">对方正在输入 ...</p>
</div>
<div class="module right-module" >
<el-tooltip content="历史消息" placement="top">
<p v-show="params.is_robot == 0">
<i class="el-icon-time" @click="triggerEvent('history')" />
</p>
</el-tooltip>
<el-tooltip content="群公告" placement="top">
<p v-show="params.talk_type == 2">
<i class="iconfont icon-gonggao2" @click="triggerEvent('notice')" />
</p>
</el-tooltip>
<el-tooltip content="群设置" placement="top">
<p v-show="params.talk_type == 2">
<i class="el-icon-setting" @click="triggerEvent('setting')" />
</p>
</el-tooltip>
</div>
</el-header>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: () => {
return {
talk_type: 0,
receiver_id: 0,
params: 0,
nickname: '',
}
},
},
online: {
type: Boolean,
default: false,
},
keyboard: {
type: [Boolean, Number],
default: false,
},
},
data() {
return {
params: {
talk_type: 0,
receiver_id: 0,
params: 0,
nickname: '',
},
isOnline: false,
isKeyboard: false,
groupNum: 0,
}
},
created() {
this.setParamsData(this.data)
this.setOnlineStatus(this.online)
},
watch: {
data(value) {
this.setParamsData(value)
},
online(value) {
this.setOnlineStatus(value)
},
keyboard(value) {
this.isKeyboard = value
setTimeout(() => {
this.isKeyboard = false
}, 2000)
},
},
methods: {
setOnlineStatus(value) {
this.isOnline = value
},
setParamsData(object) {
Object.assign(this.params, object)
},
setGroupNum(value) {
this.groupNum = value
},
triggerEvent(event_name) {
this.$emit('event', event_name)
},
},
}
</script>
<style lang="less" scoped>
#panel-header {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
border-bottom: 1px solid #f5eeee;
.module {
width: 100%/3;
height: 100%;
display: flex;
align-items: center;
}
.left-module {
padding-right: 5px;
.icon-badge {
background: rgb(81 139 254);
height: 18px;
line-height: 18px;
padding: 1px 3px;
font-size: 10px;
color: white;
border-radius: 3px;
margin-right: 8px;
flex-shrink: 0;
&.red-color {
background: #f97348;
}
}
.nickname {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.center-module {
flex-direction: column;
justify-content: center;
.online {
color: #cccccc;
font-weight: 300;
font-size: 15px;
&.color {
color: #1890ff;
}
.online-status {
position: relative;
top: -1px;
display: inline-block;
width: 6px;
height: 6px;
vertical-align: middle;
border-radius: 50%;
position: relative;
background-color: #1890ff;
margin-right: 5px;
&:after {
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border: 1px solid #1890ff;
border-radius: 50%;
-webkit-animation: antStatusProcessing 1.2s ease-in-out infinite;
animation: antStatusProcessing 1.2s ease-in-out infinite;
content: '';
}
}
}
.keyboard-status {
height: 20px;
line-height: 18px;
font-size: 10px;
animation: inputfade 600ms infinite;
-webkit-animation: inputfade 600ms infinite;
}
}
.right-module {
display: flex;
justify-content: flex-end;
align-items: center;
p {
cursor: pointer;
margin: 0 8px;
font-size: 20px;
color: #828f95;
&:active i {
font-size: 26px;
transform: scale(1.3);
transition: ease 0.5s;
color: red;
}
}
}
}
/* css 动画 */
@keyframes inputfade {
from {
opacity: 1;
}
50% {
opacity: 0.4;
}
to {
opacity: 1;
}
}
@-webkit-keyframes inputfade {
from {
opacity: 1;
}
50% {
opacity: 0.4;
}
to {
opacity: 1;
}
}
@-webkit-keyframes antStatusProcessing {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.5;
}
to {
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0;
}
}
@keyframes antStatusProcessing {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.5;
}
to {
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0;
}
}
</style>