Blue
2 years ago
37 changed files with 2153 additions and 1555 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<div class="chat-group-member" :style="{'height':height+'px'}"> |
|||
<div class="member-avatar"> |
|||
<head-image :size="headImageSize" :name="member.aliasName" :url="member.headImage"> </head-image> |
|||
</div> |
|||
<div class="member-name" :style="{'line-height':height+'px'}"> |
|||
<div>{{ member.aliasName }}</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import HeadImage from "../common/HeadImage.vue"; |
|||
export default { |
|||
name: "groupMember", |
|||
components: { HeadImage }, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
props: { |
|||
member: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
height:{ |
|||
type: Number, |
|||
default: 50 |
|||
} |
|||
}, |
|||
computed:{ |
|||
headImageSize(){ |
|||
return Math.ceil(this.height * 0.75) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.chat-group-member { |
|||
display: flex; |
|||
margin-bottom: 1px; |
|||
position: relative; |
|||
padding: 0 5px; |
|||
align-items: center; |
|||
background-color: #fafafa; |
|||
white-space: nowrap; |
|||
box-sizing: border-box; |
|||
|
|||
&:hover { |
|||
background-color: #eeeeee; |
|||
} |
|||
|
|||
&.active { |
|||
background-color: #eeeeee; |
|||
} |
|||
|
|||
.member-name { |
|||
padding-left: 10px; |
|||
height: 100%; |
|||
text-align: left; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
font-size: 14px; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,186 @@ |
|||
<template> |
|||
<div v-show="show"> |
|||
<div class="chat-group-readed-mask" @click.self="close()"> |
|||
<div class="chat-group-readed" :style="{ 'left': pos.x + 'px', 'top': pos.y + 'px' }" @click.prevent=""> |
|||
<el-tabs type="border-card" :stretch="true"> |
|||
<el-tab-pane :label="`已读(${readedMembers.length})`"> |
|||
<el-scrollbar class="scroll-box"> |
|||
<div v-for="(member) in readedMembers" :key="member.id"> |
|||
<chat-group-member :member="member"></chat-group-member> |
|||
</div> |
|||
</el-scrollbar> |
|||
</el-tab-pane> |
|||
<el-tab-pane :label="`未读(${unreadMembers.length})`"> |
|||
<el-scrollbar class="scroll-box"> |
|||
<div v-for="(member) in unreadMembers" :key="member.id"> |
|||
<chat-group-member :member="member"></chat-group-member> |
|||
</div> |
|||
</el-scrollbar> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
<div v-show="msgInfo.selfSend" class="arrow-right" :style="{ 'top': pos.arrowY + 'px' }"> |
|||
<div class="arrow-right-inner"> |
|||
</div> |
|||
</div> |
|||
<div v-show="!msgInfo.selfSend" class="arrow-left" :style="{ 'top': pos.arrowY + 'px' }"> |
|||
<div class="arrow-left-inner"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
import ChatGroupMember from "./ChatGroupMember.vue"; |
|||
|
|||
export default { |
|||
name: "chatGroupReaded", |
|||
components: { |
|||
ChatGroupMember |
|||
}, |
|||
data() { |
|||
return { |
|||
show: false, |
|||
pos: { |
|||
x: 0, |
|||
y: 0, |
|||
arrowY: 0 |
|||
}, |
|||
msgInfo: {}, |
|||
readedMembers: [], |
|||
unreadMembers: [] |
|||
} |
|||
}, |
|||
props: { |
|||
groupMembers: { |
|||
type: Array |
|||
} |
|||
}, |
|||
methods: { |
|||
close() { |
|||
this.show = false; |
|||
}, |
|||
open(msgInfo, rect) { |
|||
this.show = true; |
|||
this.msgInfo = msgInfo; |
|||
this.pos.arrowY = 200; |
|||
// 计算窗口位置 |
|||
if (this.msgInfo.selfSend) { |
|||
// 自己发的消息弹出在消息的左边 |
|||
this.pos.x = rect.left - 310; |
|||
} else { |
|||
// 别人发的消息弹窗在消息右边 |
|||
this.pos.x = rect.right + 20; |
|||
} |
|||
this.pos.y = rect.top + rect.height / 2 - 215; |
|||
// 防止窗口溢出 |
|||
if (this.pos.y < 0) { |
|||
this.pos.arrowY += this.pos.y |
|||
this.pos.y = 0; |
|||
} |
|||
this.loadReadedUser() |
|||
}, |
|||
loadReadedUser() { |
|||
this.readedMembers = []; |
|||
this.unreadMembers = []; |
|||
this.$http({ |
|||
url: "/message/group/findReadedUsers", |
|||
method: 'get', |
|||
params: { groupId: this.msgInfo.groupId, messageId: this.msgInfo.id } |
|||
}).then(userIds => { |
|||
this.groupMembers.forEach(member => { |
|||
// 发送者和已退群的不显示 |
|||
if (member.userId == this.msgInfo.sendId && member.quit) { |
|||
return; |
|||
} |
|||
// 区分已读还是未读 |
|||
if (userIds.find(userId => member.userId == userId)) { |
|||
this.readedMembers.push(member); |
|||
} else { |
|||
this.unreadMembers.push(member); |
|||
} |
|||
}) |
|||
// 更新已读人数 |
|||
this.$store.commit("updateMessage", { |
|||
id: this.msgInfo.id, |
|||
groupId: this.msgInfo.groupId, |
|||
readedCount: this.readedMembers.length |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.chat-group-readed-mask { |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 9999; |
|||
} |
|||
|
|||
.chat-group-readed { |
|||
position: fixed; |
|||
box-shadow: 0px 0px 10px #ccc; |
|||
width: 300px; |
|||
background-color: #fafafa; |
|||
border-radius: 8px; |
|||
|
|||
.scroll-box { |
|||
height: 400px; |
|||
} |
|||
|
|||
.arrow-left { |
|||
|
|||
position: absolute; |
|||
left: -15px; |
|||
width: 0; |
|||
height: 0; |
|||
border-top: 15px solid transparent; |
|||
border-bottom: 15px solid transparent; |
|||
border-right: 15px solid #ccc; |
|||
|
|||
.arrow-left-inner { |
|||
position: absolute; |
|||
top: -12px; |
|||
left: 3px; |
|||
width: 0; |
|||
height: 0; |
|||
overflow: hidden; |
|||
border-top: 12px solid transparent; |
|||
border-bottom: 12px solid transparent; |
|||
border-right: 12px solid white; |
|||
} |
|||
} |
|||
|
|||
.arrow-right { |
|||
position: absolute; |
|||
right: -15px; |
|||
width: 0; |
|||
height: 0; |
|||
border-top: 15px solid transparent; |
|||
border-bottom: 15px solid transparent; |
|||
border-left: 15px solid #ccc; |
|||
|
|||
.arrow-right-inner { |
|||
position: absolute; |
|||
top: -12px; |
|||
right: 3px; |
|||
width: 0; |
|||
height: 0; |
|||
overflow: hidden; |
|||
border-top: 12px solid transparent; |
|||
border-bottom: 12px solid transparent; |
|||
border-left: 12px solid white; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,131 @@ |
|||
<template> |
|||
<uni-popup ref="popup" type="bottom"> |
|||
<view class="chat-group-readed"> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<uni-segmented-control :current="current" :values="items" style-type="button" active-color="#587ff0" @clickItem="onClickItem"/> |
|||
</view> |
|||
<view class="content"> |
|||
<view v-if="current === 0"> |
|||
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true"> |
|||
<view v-for="m in readedMembers" :key="m.userId"> |
|||
<view class="member-item"> |
|||
<head-image :name="m.aliasName" :online="m.online" :url="m.headImage" |
|||
:size="90"></head-image> |
|||
<view class="member-name">{{ m.aliasName}}</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<view v-if="current === 1"> |
|||
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true"> |
|||
<view v-for="m in unreadMembers" :key="m.userId"> |
|||
<view class="member-item"> |
|||
<head-image :name="m.aliasName" :online="m.online" :url="m.headImage" |
|||
:size="90"></head-image> |
|||
<view class="member-name">{{ m.aliasName}}</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "chat-group-readed", |
|||
data() { |
|||
return { |
|||
items: ['已读', '未读'], |
|||
current: 0, |
|||
readedMembers: [], |
|||
unreadMembers: [] |
|||
}; |
|||
}, |
|||
props: { |
|||
msgInfo: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
groupMembers: { |
|||
type: Array |
|||
} |
|||
}, |
|||
methods: { |
|||
open() { |
|||
this.$refs.popup.open(); |
|||
this.loadReadedUser(); |
|||
}, |
|||
loadReadedUser() { |
|||
this.readedMembers = []; |
|||
this.unreadMembers = []; |
|||
this.$http({ |
|||
url: `/message/group/findReadedUsers?groupId=${this.msgInfo.groupId}&messageId=${this.msgInfo.id}`, |
|||
method: 'Get' |
|||
}).then(userIds => { |
|||
this.groupMembers.forEach(member => { |
|||
// 发送者和已退群的不显示 |
|||
if (member.userId == this.msgInfo.sendId && member.quit) { |
|||
return; |
|||
} |
|||
// 区分已读还是未读 |
|||
if (userIds.find(userId => member.userId == userId)) { |
|||
this.readedMembers.push(member); |
|||
} else { |
|||
this.unreadMembers.push(member); |
|||
} |
|||
}) |
|||
this.items[0] = `已读(${this.readedMembers.length})`; |
|||
this.items[1] = `未读(${this.unreadMembers.length})`; |
|||
// 更新已读人数 |
|||
this.$store.commit("updateMessage", { |
|||
id: this.msgInfo.id, |
|||
groupId: this.msgInfo.groupId, |
|||
readedCount: this.readedMembers.length |
|||
}) |
|||
}) |
|||
}, |
|||
onClickItem(e){ |
|||
this.current = e.currentIndex; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.chat-group-readed { |
|||
position: relative; |
|||
border: #dddddd solid 1rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: white; |
|||
padding: 10rpx; |
|||
border-radius: 15rpx; |
|||
.scroll-bar { |
|||
height: 800rpx; |
|||
} |
|||
|
|||
.member-item { |
|||
height: 120rpx; |
|||
display: flex; |
|||
position: relative; |
|||
padding: 0 30rpx; |
|||
align-items: center; |
|||
background-color: white; |
|||
white-space: nowrap; |
|||
|
|||
.member-name { |
|||
flex: 1; |
|||
padding-left: 20rpx; |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
line-height: 60rpx; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
</style> |
|||
Binary file not shown.
Loading…
Reference in new issue