156 lines
4.5 KiB
Vue
156 lines
4.5 KiB
Vue
<template>
|
|
<div :class="showMembers?'memberAnimate chat-box-members':'chat-box-members'">
|
|
<div class="chat-member-title">成员列表</div>
|
|
<div class="chat-member-list">
|
|
<div
|
|
v-for="member in memberList"
|
|
:key="member.id"
|
|
class="each-chat-member"
|
|
:style="member.userId === userId ?'color:red':''"
|
|
:title="member.memberName"
|
|
>{{ member.memberName }}</div>
|
|
<!-- :class="member.online?'each-chat-member':'each-chat-member each-chat-member-outline'" -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// getSimulationMembersNew,
|
|
import {getSimulationChatMemberNew} from '@/api/chat';
|
|
import ConstConfig from '@/scripts/ConstConfig';
|
|
import Cookies from 'js-cookie';
|
|
export default {
|
|
name: 'ChatMemberList',
|
|
props: {
|
|
group: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
currentCoversition:{
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showMembers:true,
|
|
memberList:[]
|
|
};
|
|
},
|
|
computed:{
|
|
userId() {
|
|
return this.$store.state.user.id;
|
|
}
|
|
},
|
|
watch:{
|
|
currentCoversition:function (val, old) {
|
|
if (val) {
|
|
this.getSimulationMembers();
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods:{
|
|
getSimulationMembers() {
|
|
this.memberList = [];
|
|
getSimulationChatMemberNew(this.$route.query.group, this.currentCoversition.id).then(resp => {
|
|
let lastData = JSON.stringify(resp.data);
|
|
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
|
roleTypeList.forEach(function(element) {
|
|
const rolename = element.value;
|
|
if (Cookies.get('user_lang') == 'en') {
|
|
lastData = lastData.replace(new RegExp(rolename, 'g'), element.enLabel);
|
|
} else {
|
|
lastData = lastData.replace(new RegExp(rolename, 'g'), element.label);
|
|
}
|
|
});
|
|
lastData = JSON.parse(lastData);
|
|
lastData = lastData.filter(memberIn=>{ return memberIn.role != '观众'; });
|
|
lastData.map(member=>{
|
|
const deviceName = member.deviceName ? '-' + member.deviceName : '';
|
|
const memberName = member.name ? '-' + member.name : '';
|
|
member.memberName = member.role + deviceName + memberName;
|
|
return member;
|
|
});
|
|
this.memberList = lastData;
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.memberAnimate{
|
|
transform: translateX(97%);
|
|
}
|
|
.chat-box-members{
|
|
position: absolute;
|
|
width: 140px;
|
|
right: 0;
|
|
height: 100%;
|
|
background: #fff;
|
|
border-right: 1px #dedede solid;
|
|
border-radius: 0px 5px 5px 0px;
|
|
z-index: 2;
|
|
transition: transform 1s;
|
|
padding: 12px 2px 10px 16px;
|
|
font-size: 14px;
|
|
}
|
|
.chat-member-title{
|
|
}
|
|
.chat-member-list{
|
|
margin-top: 13px;
|
|
font-size: 12px;
|
|
margin-left: 2px;
|
|
height: 350px;
|
|
overflow-y: auto;
|
|
}
|
|
.each-chat-member{
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
.each-chat-member-outline{
|
|
color: #ccc;
|
|
}
|
|
|
|
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
|
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
|
.chat-member-list::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
// height: 110px;
|
|
background-color: #FFFFFF;
|
|
}
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
|
.chat-member-list::-webkit-scrollbar-track {
|
|
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
border-radius: 10px;
|
|
background-color: #FFFFFF;;
|
|
}
|
|
/*定义滑块 内阴影+圆角*/
|
|
.chat-member-list::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
|
background-color: #cacaca;
|
|
}
|
|
/*滑块效果*/
|
|
.chat-member-list::-webkit-scrollbar-thumb:hover {
|
|
border-radius: 5px;
|
|
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
|
background: rgba(0,0,0,0.4);
|
|
}
|
|
/*IE滚动条颜色*/
|
|
html {
|
|
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
|
|
scrollbar-highlight-color:#000;
|
|
scrollbar-3dlight-color:#000;
|
|
scrollbar-darkshadow-color:#000;
|
|
scrollbar-Shadow-color:#adadad;/*滑块边色*/
|
|
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
|
|
scrollbar-track-color:#eeeeee;/*背景颜色*/
|
|
}
|
|
</style>
|