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.
File diff suppressed because it is too large
@ -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> |
|||
@ -1,408 +1,433 @@ |
|||
<template> |
|||
<div class="chat-msg-item"> |
|||
<div class="chat-msg-tip" v-show="msgInfo.type==$enums.MESSAGE_TYPE.RECALL">{{msgInfo.content}}</div> |
|||
<div class="chat-msg-tip" v-show="msgInfo.type==$enums.MESSAGE_TYPE.TIP_TIME"> |
|||
{{$date.toTimeText(msgInfo.sendTime)}} |
|||
<div class="chat-msg-tip" v-show="msgInfo.type == $enums.MESSAGE_TYPE.RECALL">{{ msgInfo.content }}</div> |
|||
<div class="chat-msg-tip" v-show="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TIME"> |
|||
{{ $date.toTimeText(msgInfo.sendTime) }} |
|||
</div> |
|||
|
|||
<div class="chat-msg-normal" v-show="msgInfo.type>=0 && msgInfo.type<10" :class="{'chat-msg-mine':mine}"> |
|||
<div class="chat-msg-normal" v-show="msgInfo.type >= 0 && msgInfo.type < 10" :class="{ 'chat-msg-mine': mine }"> |
|||
<div class="head-image"> |
|||
<head-image :name="showName" :size="40" :url="headImage" :id="msgInfo.sendId"></head-image> |
|||
</div> |
|||
<div class="chat-msg-content"> |
|||
<div v-show="mode==1 && msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top"> |
|||
<span>{{showName}}</span> |
|||
<div v-show="mode == 1 && msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top"> |
|||
<span>{{ showName }}</span> |
|||
</div> |
|||
<div v-show="mode==2" class="chat-msg-top"> |
|||
<span>{{showName}}</span> |
|||
<span>{{$date.toTimeText(msgInfo.sendTime)}}</span> |
|||
<div v-show="mode == 2" class="chat-msg-top"> |
|||
<span>{{ showName }}</span> |
|||
<span>{{ $date.toTimeText(msgInfo.sendTime) }}</span> |
|||
</div> |
|||
<div class="chat-msg-bottom" @contextmenu.prevent="showRightMenu($event)"> |
|||
<span class="chat-msg-text" v-if="msgInfo.type==$enums.MESSAGE_TYPE.TEXT" |
|||
v-html="$emo.transform(msgInfo.content)"></span> |
|||
<div class="chat-msg-image" v-if="msgInfo.type==$enums.MESSAGE_TYPE.IMAGE"> |
|||
<div class="img-load-box" v-loading="loading" element-loading-text="上传中.." |
|||
element-loading-background="rgba(0, 0, 0, 0.4)"> |
|||
<img class="send-image" :src="JSON.parse(msgInfo.content).thumbUrl" |
|||
@click="showFullImageBox()" /> |
|||
</div> |
|||
<span title="发送失败" v-show="loadFail" @click="onSendFail" |
|||
class="send-fail el-icon-warning"></span> |
|||
</div> |
|||
<div class="chat-msg-file" v-if="msgInfo.type==$enums.MESSAGE_TYPE.FILE"> |
|||
<div class="chat-file-box" v-loading="loading"> |
|||
<div class="chat-file-info"> |
|||
<el-link class="chat-file-name" :underline="true" target="_blank" type="primary" |
|||
:href="data.url">{{data.name}}</el-link> |
|||
<div class="chat-file-size">{{fileSize}}</div> |
|||
<div ref="chatMsgBox"> |
|||
<span class="chat-msg-text" v-if="msgInfo.type == $enums.MESSAGE_TYPE.TEXT" |
|||
v-html="$emo.transform(msgInfo.content)"></span> |
|||
<div class="chat-msg-image" v-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE"> |
|||
<div class="img-load-box" v-loading="loading" element-loading-text="上传中.." |
|||
element-loading-background="rgba(0, 0, 0, 0.4)"> |
|||
<img class="send-image" :src="JSON.parse(msgInfo.content).thumbUrl" |
|||
@click="showFullImageBox()" /> |
|||
</div> |
|||
<div class="chat-file-icon"> |
|||
<span type="primary" class="el-icon-document"></span> |
|||
<span title="发送失败" v-show="loadFail" @click="onSendFail" |
|||
class="send-fail el-icon-warning"></span> |
|||
</div> |
|||
<div class="chat-msg-file" v-if="msgInfo.type == $enums.MESSAGE_TYPE.FILE"> |
|||
<div class="chat-file-box" v-loading="loading"> |
|||
<div class="chat-file-info"> |
|||
<el-link class="chat-file-name" :underline="true" target="_blank" type="primary" |
|||
:href="data.url">{{ data.name }}</el-link> |
|||
<div class="chat-file-size">{{ fileSize }}</div> |
|||
</div> |
|||
<div class="chat-file-icon"> |
|||
<span type="primary" class="el-icon-document"></span> |
|||
</div> |
|||
</div> |
|||
<span title="发送失败" v-show="loadFail" @click="onSendFail" |
|||
class="send-fail el-icon-warning"></span> |
|||
</div> |
|||
<span title="发送失败" v-show="loadFail" @click="onSendFail" |
|||
class="send-fail el-icon-warning"></span> |
|||
</div> |
|||
<div class="chat-msg-voice" v-if="msgInfo.type==$enums.MESSAGE_TYPE.AUDIO" |
|||
@click="onPlayVoice()"> |
|||
<div class="chat-msg-voice" v-if="msgInfo.type == $enums.MESSAGE_TYPE.AUDIO" @click="onPlayVoice()"> |
|||
<audio controls :src="JSON.parse(msgInfo.content).url"></audio> |
|||
</div> |
|||
<span class="chat-readed" v-show="msgInfo.selfSend && !msgInfo.groupId |
|||
&& msgInfo.status==$enums.MESSAGE_STATUS.READED">已读</span> |
|||
&& msgInfo.status == $enums.MESSAGE_STATUS.READED">已读</span> |
|||
<span class="chat-unread" v-show="msgInfo.selfSend && !msgInfo.groupId |
|||
&& msgInfo.status!=$enums.MESSAGE_STATUS.READED">未读</span> |
|||
&& msgInfo.status != $enums.MESSAGE_STATUS.READED">未读</span> |
|||
<div class="chat-receipt" v-show="msgInfo.receipt" @click="onShowReadedBox"> |
|||
<span v-if="msgInfo.readedCount>=0">{{msgInfo.readedCount}}人已读</span> |
|||
<span v-else class="icon iconfont icon-ok" title="全体已读"></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<right-menu v-show="menu && rightMenu.show" :pos="rightMenu.pos" :items="menuItems" |
|||
@close="rightMenu.show=false" @select="onSelectMenu"></right-menu> |
|||
<right-menu v-show="menu && rightMenu.show" :pos="rightMenu.pos" :items="menuItems" @close="rightMenu.show = false" |
|||
@select="onSelectMenu"></right-menu> |
|||
<chat-group-readed ref="chatGroupReadedBox" :groupMembers="groupMembers"></chat-group-readed> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import HeadImage from "../common/HeadImage.vue"; |
|||
import RightMenu from '../common/RightMenu.vue'; |
|||
|
|||
export default { |
|||
name: "messageItem", |
|||
components: { |
|||
HeadImage, |
|||
RightMenu |
|||
import HeadImage from "../common/HeadImage.vue"; |
|||
import RightMenu from '../common/RightMenu.vue'; |
|||
import ChatGroupReaded from './ChatGroupReaded.vue'; |
|||
export default { |
|||
name: "messageItem", |
|||
components: { |
|||
HeadImage, |
|||
RightMenu, |
|||
ChatGroupReaded |
|||
}, |
|||
props: { |
|||
mode: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
props: { |
|||
mode: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
mine: { |
|||
type: Boolean, |
|||
required: true |
|||
}, |
|||
headImage: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
showName: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
msgInfo: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
menu: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
mine: { |
|||
type: Boolean, |
|||
required: true |
|||
}, |
|||
data() { |
|||
return { |
|||
audioPlayState: 'STOP', |
|||
rightMenu: { |
|||
show: false, |
|||
pos: { |
|||
x: 0, |
|||
y: 0 |
|||
} |
|||
headImage: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
showName: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
msgInfo: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
groupMembers: { |
|||
type: Array |
|||
}, |
|||
menu: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
audioPlayState: 'STOP', |
|||
rightMenu: { |
|||
show: false, |
|||
pos: { |
|||
x: 0, |
|||
y: 0 |
|||
} |
|||
} |
|||
} |
|||
|
|||
}, |
|||
methods: { |
|||
onSendFail() { |
|||
this.$message.error("该文件已发送失败，目前不支持自动重新发送，建议手动重新发送") |
|||
}, |
|||
methods: { |
|||
onSendFail() { |
|||
this.$message.error("该文件已发送失败，目前不支持自动重新发送，建议手动重新发送") |
|||
}, |
|||
showFullImageBox() { |
|||
let imageUrl = JSON.parse(this.msgInfo.content).originUrl; |
|||
if (imageUrl) { |
|||
this.$store.commit('showFullImageBox', imageUrl); |
|||
} |
|||
}, |
|||
onPlayVoice() { |
|||
if (!this.audio) { |
|||
this.audio = new Audio(); |
|||
} |
|||
this.audio.src = JSON.parse(this.msgInfo.content).url; |
|||
this.audio.play(); |
|||
this.onPlayVoice = 'RUNNING'; |
|||
}, |
|||
showRightMenu(e) { |
|||
this.rightMenu.pos = { |
|||
x: e.x, |
|||
y: e.y |
|||
}; |
|||
this.rightMenu.show = "true"; |
|||
}, |
|||
onSelectMenu(item) { |
|||
this.$emit(item.key.toLowerCase(), this.msgInfo); |
|||
showFullImageBox() { |
|||
let imageUrl = JSON.parse(this.msgInfo.content).originUrl; |
|||
if (imageUrl) { |
|||
this.$store.commit('showFullImageBox', imageUrl); |
|||
} |
|||
}, |
|||
computed: { |
|||
loading() { |
|||
return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading"; |
|||
}, |
|||
loadFail() { |
|||
return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail"; |
|||
}, |
|||
data() { |
|||
return JSON.parse(this.msgInfo.content) |
|||
}, |
|||
fileSize() { |
|||
let size = this.data.size; |
|||
if (size > 1024 * 1024) { |
|||
return Math.round(size / 1024 / 1024) + "M"; |
|||
} |
|||
if (size > 1024) { |
|||
return Math.round(size / 1024) + "KB"; |
|||
} |
|||
return size + "B"; |
|||
}, |
|||
menuItems() { |
|||
let items = []; |
|||
onPlayVoice() { |
|||
if (!this.audio) { |
|||
this.audio = new Audio(); |
|||
} |
|||
this.audio.src = JSON.parse(this.msgInfo.content).url; |
|||
this.audio.play(); |
|||
this.onPlayVoice = 'RUNNING'; |
|||
}, |
|||
showRightMenu(e) { |
|||
this.rightMenu.pos = { |
|||
x: e.x, |
|||
y: e.y |
|||
}; |
|||
this.rightMenu.show = "true"; |
|||
}, |
|||
onSelectMenu(item) { |
|||
this.$emit(item.key.toLowerCase(), this.msgInfo); |
|||
}, |
|||
onShowReadedBox() { |
|||
let rect = this.$refs.chatMsgBox.getBoundingClientRect(); |
|||
this.$refs.chatGroupReadedBox.open(this.msgInfo, rect); |
|||
} |
|||
}, |
|||
computed: { |
|||
loading() { |
|||
return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading"; |
|||
}, |
|||
loadFail() { |
|||
return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail"; |
|||
}, |
|||
data() { |
|||
return JSON.parse(this.msgInfo.content) |
|||
}, |
|||
fileSize() { |
|||
let size = this.data.size; |
|||
if (size > 1024 * 1024) { |
|||
return Math.round(size / 1024 / 1024) + "M"; |
|||
} |
|||
if (size > 1024) { |
|||
return Math.round(size / 1024) + "KB"; |
|||
} |
|||
return size + "B"; |
|||
}, |
|||
menuItems() { |
|||
let items = []; |
|||
items.push({ |
|||
key: 'DELETE', |
|||
name: '删除', |
|||
icon: 'el-icon-delete' |
|||
}); |
|||
if (this.msgInfo.selfSend && this.msgInfo.id > 0) { |
|||
items.push({ |
|||
key: 'DELETE', |
|||
name: '删除', |
|||
icon: 'el-icon-delete' |
|||
key: 'RECALL', |
|||
name: '撤回', |
|||
icon: 'el-icon-refresh-left' |
|||
}); |
|||
if (this.msgInfo.selfSend && this.msgInfo.id > 0) { |
|||
items.push({ |
|||
key: 'RECALL', |
|||
name: '撤回', |
|||
icon: 'el-icon-refresh-left' |
|||
}); |
|||
} |
|||
return items; |
|||
} |
|||
return items; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.chat-msg-item { |
|||
<style lang="scss"> |
|||
.chat-msg-item { |
|||
|
|||
.chat-msg-tip { |
|||
line-height: 50px; |
|||
font-size: 14px; |
|||
.chat-msg-tip { |
|||
line-height: 50px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.chat-msg-normal { |
|||
position: relative; |
|||
font-size: 0; |
|||
padding-left: 60px; |
|||
min-height: 50px; |
|||
margin-top: 10px; |
|||
|
|||
.head-image { |
|||
position: absolute; |
|||
width: 40px; |
|||
height: 40px; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.chat-msg-normal { |
|||
position: relative; |
|||
font-size: 0; |
|||
padding-left: 60px; |
|||
min-height: 50px; |
|||
margin-top: 10px; |
|||
.chat-msg-content { |
|||
text-align: left; |
|||
|
|||
.head-image { |
|||
position: absolute; |
|||
width: 40px; |
|||
height: 40px; |
|||
top: 0; |
|||
left: 0; |
|||
.send-fail { |
|||
color: #e60c0c; |
|||
font-size: 30px; |
|||
cursor: pointer; |
|||
margin: 0 20px; |
|||
} |
|||
|
|||
.chat-msg-content { |
|||
text-align: left; |
|||
.chat-msg-top { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
color: #333; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
|
|||
.send-fail { |
|||
color: #e60c0c; |
|||
font-size: 30px; |
|||
cursor: pointer; |
|||
margin: 0 20px; |
|||
span { |
|||
margin-right: 12px; |
|||
} |
|||
} |
|||
|
|||
.chat-msg-top { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
color: #333; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
|
|||
span { |
|||
margin-right: 12px; |
|||
.chat-msg-bottom { |
|||
display: inline-block; |
|||
padding-right: 300px; |
|||
|
|||
.chat-msg-text { |
|||
display: block; |
|||
position: relative; |
|||
line-height: 30px; |
|||
margin-top: 3px; |
|||
padding: 7px; |
|||
background-color: white; |
|||
border-radius: 10px; |
|||
color: black; |
|||
display: block; |
|||
font-size: 16px; |
|||
text-align: left; |
|||
white-space: pre-wrap; |
|||
word-break: break-all; |
|||
box-shadow: 1px 1px 1px #c0c0f0; |
|||
|
|||
&:after { |
|||
content: ""; |
|||
position: absolute; |
|||
left: -10px; |
|||
top: 13px; |
|||
width: 0; |
|||
height: 0; |
|||
border-style: solid dashed dashed; |
|||
border-color: white transparent transparent; |
|||
overflow: hidden; |
|||
border-width: 10px; |
|||
} |
|||
} |
|||
|
|||
.chat-msg-bottom { |
|||
display: inline-block; |
|||
padding-right: 80px; |
|||
|
|||
.chat-msg-text { |
|||
display: block; |
|||
position: relative; |
|||
line-height: 30px; |
|||
margin-top: 3px; |
|||
padding: 7px; |
|||
background-color: white; |
|||
border-radius: 10px; |
|||
color: black; |
|||
display: block; |
|||
font-size: 16px; |
|||
text-align: left; |
|||
white-space: pre-wrap; |
|||
word-break: break-all; |
|||
box-shadow: 1px 1px 1px #c0c0f0; |
|||
|
|||
&:after { |
|||
content: ""; |
|||
position: absolute; |
|||
left: -10px; |
|||
top: 13px; |
|||
width: 0; |
|||
height: 0; |
|||
border-style: solid dashed dashed; |
|||
border-color: white transparent transparent; |
|||
overflow: hidden; |
|||
border-width: 10px; |
|||
} |
|||
.chat-msg-image { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
|
|||
.send-image { |
|||
min-width: 200px; |
|||
min-height: 150px; |
|||
max-width: 400px; |
|||
max-height: 300px; |
|||
border: #dddddd solid 1px; |
|||
border: 5px solid #ccc; |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.chat-msg-image { |
|||
} |
|||
|
|||
.chat-msg-file { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
padding-bottom: 5px; |
|||
.chat-file-box { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
|
|||
.send-image { |
|||
min-width: 200px; |
|||
min-height: 150px; |
|||
max-width: 400px; |
|||
max-height: 300px; |
|||
border: #dddddd solid 1px; |
|||
border: 5px solid #ccc; |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
min-height: 80px; |
|||
box-shadow: 5px 5px 2px #c0c0c0; |
|||
border: #dddddd solid 1px; |
|||
border-radius: 6px; |
|||
background-color: #eeeeee; |
|||
padding: 10px 15px; |
|||
|
|||
.chat-file-info { |
|||
flex: 1; |
|||
height: 100%; |
|||
text-align: left; |
|||
font-size: 14px; |
|||
|
|||
.chat-file-name { |
|||
display: inline-block; |
|||
min-width: 150px; |
|||
max-width: 300px; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
margin-bottom: 15px; |
|||
white-space: pre-wrap; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
|
|||
.chat-file-icon { |
|||
font-size: 50px; |
|||
color: #d42e07; |
|||
} |
|||
} |
|||
|
|||
.chat-msg-file { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
.send-fail { |
|||
color: #e60c0c; |
|||
font-size: 30px; |
|||
cursor: pointer; |
|||
margin: 0 20px; |
|||
} |
|||
|
|||
.chat-file-box { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
align-items: center; |
|||
min-height: 80px; |
|||
box-shadow: 5px 5px 2px #c0c0c0; |
|||
border: #dddddd solid 1px; |
|||
border-radius: 6px; |
|||
background-color: #eeeeee; |
|||
padding: 10px 15px; |
|||
|
|||
.chat-file-info { |
|||
flex: 1; |
|||
height: 100%; |
|||
text-align: left; |
|||
font-size: 14px; |
|||
|
|||
.chat-file-name { |
|||
display: inline-block; |
|||
min-width: 150px; |
|||
max-width: 300px; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
margin-bottom: 15px; |
|||
white-space: pre-wrap; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
|
|||
.chat-file-icon { |
|||
font-size: 50px; |
|||
color: #d42e07; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.send-fail { |
|||
color: #e60c0c; |
|||
font-size: 30px; |
|||
cursor: pointer; |
|||
margin: 0 20px; |
|||
} |
|||
.chat-msg-voice { |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
|
|||
audio { |
|||
height: 45px; |
|||
padding: 5px 0; |
|||
} |
|||
} |
|||
|
|||
.chat-msg-voice { |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
.chat-unread { |
|||
font-size: 12px; |
|||
color: #f23c0f; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
audio { |
|||
height: 45px; |
|||
padding: 5px 0; |
|||
} |
|||
} |
|||
.chat-readed { |
|||
font-size: 12px; |
|||
color: #888; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.chat-unread { |
|||
font-size: 10px; |
|||
color: #f23c0f; |
|||
font-weight: 600; |
|||
} |
|||
.chat-receipt{ |
|||
font-size: 13px; |
|||
color: blue; |
|||
cursor: pointer; |
|||
|
|||
.chat-readed { |
|||
font-size: 10px; |
|||
color: #888; |
|||
font-weight: 600; |
|||
.icon-ok { |
|||
font-size: 20px; |
|||
color: green; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
&.chat-msg-mine { |
|||
text-align: right; |
|||
padding-left: 0; |
|||
padding-right: 60px; |
|||
|
|||
&.chat-msg-mine { |
|||
.head-image { |
|||
left: auto; |
|||
right: 0; |
|||
} |
|||
|
|||
.chat-msg-content { |
|||
text-align: right; |
|||
padding-left: 0; |
|||
padding-right: 60px; |
|||
|
|||
.head-image { |
|||
left: auto; |
|||
right: 0; |
|||
.chat-msg-top { |
|||
flex-direction: row-reverse; |
|||
|
|||
span { |
|||
margin-left: 12px; |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
|
|||
.chat-msg-content { |
|||
text-align: right; |
|||
.chat-msg-bottom { |
|||
padding-left: 180px; |
|||
padding-right: 0; |
|||
|
|||
.chat-msg-top { |
|||
flex-direction: row-reverse; |
|||
.chat-msg-text { |
|||
margin-left: 10px; |
|||
background-color: rgb(88, 127, 240); |
|||
color: #fff; |
|||
vertical-align: top; |
|||
box-shadow: 1px 1px 1px #ccc; |
|||
|
|||
span { |
|||
margin-left: 12px; |
|||
margin-right: 0; |
|||
&:after { |
|||
left: auto; |
|||
right: -10px; |
|||
border-top-color: rgb(88, 127, 240); |
|||
} |
|||
} |
|||
|
|||
.chat-msg-bottom { |
|||
padding-left: 80px; |
|||
padding-right: 0; |
|||
|
|||
.chat-msg-text { |
|||
margin-left: 10px; |
|||
background-color: rgb(88, 127, 240); |
|||
color: #fff; |
|||
vertical-align: top; |
|||
box-shadow: 1px 1px 1px #ccc; |
|||
|
|||
&:after { |
|||
left: auto; |
|||
right: -10px; |
|||
border-top-color: rgb(88, 127, 240); |
|||
} |
|||
} |
|||
|
|||
.chat-msg-image { |
|||
flex-direction: row-reverse; |
|||
} |
|||
.chat-msg-image { |
|||
flex-direction: row-reverse; |
|||
} |
|||
|
|||
.chat-msg-file { |
|||
flex-direction: row-reverse; |
|||
} |
|||
.chat-msg-file { |
|||
flex-direction: row-reverse; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
</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