|
|
@ -6,9 +6,10 @@ |
|
|
<uni-icons class="btn-side right" type="more-filled" size="30" @click="onShowMore()"></uni-icons> |
|
|
<uni-icons class="btn-side right" type="more-filled" size="30" @click="onShowMore()"></uni-icons> |
|
|
</view> |
|
|
</view> |
|
|
<view class="chat-msg" @click="switchChatTabBox('none',true)"> |
|
|
<view class="chat-msg" @click="switchChatTabBox('none',true)"> |
|
|
<scroll-view class="scroll-box" scroll-y="true" :scroll-into-view="'chat-item-'+scrollMsgIdx"> |
|
|
<scroll-view class="scroll-box" scroll-y="true" @scrolltoupper="onScrollToTop" |
|
|
|
|
|
:scroll-into-view="'chat-item-'+scrollMsgIdx"> |
|
|
<view v-for="(msgInfo,idx) in chat.messages" :key="idx"> |
|
|
<view v-for="(msgInfo,idx) in chat.messages" :key="idx"> |
|
|
<chat-message-item :headImage="headImage(msgInfo)" :showName="showName(msgInfo)" |
|
|
<chat-message-item v-if="idx>=showMinIdx" :headImage="headImage(msgInfo)" :showName="showName(msgInfo)" |
|
|
@recall="onRecallMessage" @delete="onDeleteMessage" @download="onDownloadFile" |
|
|
@recall="onRecallMessage" @delete="onDeleteMessage" @download="onDownloadFile" |
|
|
:id="'chat-item-'+idx" :msgInfo="msgInfo"> |
|
|
:id="'chat-item-'+idx" :msgInfo="msgInfo"> |
|
|
</chat-message-item> |
|
|
</chat-message-item> |
|
|
@ -32,8 +33,8 @@ |
|
|
<view class="chat-tab-bar" v-show="chatTabBox!='none' ||showKeyBoard " :style="{height:`${keyboardHeight}px`}"> |
|
|
<view class="chat-tab-bar" v-show="chatTabBox!='none' ||showKeyBoard " :style="{height:`${keyboardHeight}px`}"> |
|
|
<view v-if="chatTabBox == 'tools'" class="chat-tools"> |
|
|
<view v-if="chatTabBox == 'tools'" class="chat-tools"> |
|
|
<view class="chat-tools-item"> |
|
|
<view class="chat-tools-item"> |
|
|
<image-upload :maxCount="9" sourceType="album" :onBefore="onUploadImageBefore" :onSuccess="onUploadImageSuccess" |
|
|
<image-upload :maxCount="9" sourceType="album" :onBefore="onUploadImageBefore" |
|
|
:onError="onUploadImageFail"> |
|
|
:onSuccess="onUploadImageSuccess" :onError="onUploadImageFail"> |
|
|
<view class="tool-icon iconfont icon-picture"></view> |
|
|
<view class="tool-icon iconfont icon-picture"></view> |
|
|
</image-upload> |
|
|
</image-upload> |
|
|
<view class="tool-name">相册</view> |
|
|
<view class="tool-name">相册</view> |
|
|
@ -66,8 +67,9 @@ |
|
|
|
|
|
|
|
|
<scroll-view v-if="chatTabBox==='emo'" class="chat-emotion" scroll-y="true"> |
|
|
<scroll-view v-if="chatTabBox==='emo'" class="chat-emotion" scroll-y="true"> |
|
|
<view class="emotion-item-list"> |
|
|
<view class="emotion-item-list"> |
|
|
<image class="emotion-item" :title="emoText" :src="$emo.textToPath(emoText)" v-for="(emoText, i) in $emo.emoTextList" |
|
|
<image class="emotion-item" :title="emoText" :src="$emo.textToPath(emoText)" |
|
|
:key="i" @click="selectEmoji(emoText)" mode="aspectFit" lazy-load="true"></image> |
|
|
v-for="(emoText, i) in $emo.emoTextList" :key="i" @click="selectEmoji(emoText)" mode="aspectFit" |
|
|
|
|
|
lazy-load="true"></image> |
|
|
</view> |
|
|
</view> |
|
|
</scroll-view> |
|
|
</scroll-view> |
|
|
<view v-if="showKeyBoard"></view> |
|
|
<view v-if="showKeyBoard"></view> |
|
|
@ -89,7 +91,8 @@ |
|
|
scrollMsgIdx: 0, // 滚动条定位为到哪条消息 |
|
|
scrollMsgIdx: 0, // 滚动条定位为到哪条消息 |
|
|
chatTabBox: 'none', |
|
|
chatTabBox: 'none', |
|
|
showKeyBoard: false, |
|
|
showKeyBoard: false, |
|
|
keyboardHeight: 322 |
|
|
keyboardHeight: 322, |
|
|
|
|
|
showMinIdx: 0 // 下标小于showMinIdx的消息不显示，否则可能很卡 |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
@ -139,6 +142,7 @@ |
|
|
msgInfo.sendTime = new Date().getTime(); |
|
|
msgInfo.sendTime = new Date().getTime(); |
|
|
msgInfo.sendId = this.$store.state.userStore.userInfo.id; |
|
|
msgInfo.sendId = this.$store.state.userStore.userInfo.id; |
|
|
msgInfo.selfSend = true; |
|
|
msgInfo.selfSend = true; |
|
|
|
|
|
msgInfo.status = this.$enums.MESSAGE_STATUS.UNSEND; |
|
|
this.$store.commit("insertMessage", msgInfo); |
|
|
this.$store.commit("insertMessage", msgInfo); |
|
|
this.sendText = ""; |
|
|
this.sendText = ""; |
|
|
}).finally(() => { |
|
|
}).finally(() => { |
|
|
@ -171,6 +175,7 @@ |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
|
|
|
console.log("scrollToMsgIdx",this.scrollMsgIdx) |
|
|
this.scrollMsgIdx = idx; |
|
|
this.scrollMsgIdx = idx; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
@ -211,7 +216,8 @@ |
|
|
sendTime: new Date().getTime(), |
|
|
sendTime: new Date().getTime(), |
|
|
selfSend: true, |
|
|
selfSend: true, |
|
|
type: this.$enums.MESSAGE_TYPE.IMAGE, |
|
|
type: this.$enums.MESSAGE_TYPE.IMAGE, |
|
|
loadStatus: "loading" |
|
|
loadStatus: "loading", |
|
|
|
|
|
status: this.$enums.MESSAGE_STATUS.UNSEND |
|
|
} |
|
|
} |
|
|
// 填充对方id |
|
|
// 填充对方id |
|
|
this.fillTargetId(msgInfo, this.chat.targetId); |
|
|
this.fillTargetId(msgInfo, this.chat.targetId); |
|
|
@ -254,7 +260,8 @@ |
|
|
sendTime: new Date().getTime(), |
|
|
sendTime: new Date().getTime(), |
|
|
selfSend: true, |
|
|
selfSend: true, |
|
|
type: this.$enums.MESSAGE_TYPE.FILE, |
|
|
type: this.$enums.MESSAGE_TYPE.FILE, |
|
|
loadStatus: "loading" |
|
|
loadStatus: "loading", |
|
|
|
|
|
status: this.$enums.MESSAGE_STATUS.UNSEND |
|
|
} |
|
|
} |
|
|
// 填充对方id |
|
|
// 填充对方id |
|
|
this.fillTargetId(msgInfo, this.chat.targetId); |
|
|
this.fillTargetId(msgInfo, this.chat.targetId); |
|
|
@ -318,6 +325,7 @@ |
|
|
msgInfo = JSON.parse(JSON.stringify(msgInfo)); |
|
|
msgInfo = JSON.parse(JSON.stringify(msgInfo)); |
|
|
msgInfo.type = this.$enums.MESSAGE_TYPE.RECALL; |
|
|
msgInfo.type = this.$enums.MESSAGE_TYPE.RECALL; |
|
|
msgInfo.content = '你撤回了一条消息'; |
|
|
msgInfo.content = '你撤回了一条消息'; |
|
|
|
|
|
msgInfo.status = this.$enums.MESSAGE_STATUS.RECALL; |
|
|
this.$store.commit("insertMessage", msgInfo); |
|
|
this.$store.commit("insertMessage", msgInfo); |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
@ -346,6 +354,12 @@ |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
onScrollToTop() { |
|
|
|
|
|
// 防止滚动条定格在顶部，不能一直往上滚 |
|
|
|
|
|
this.scrollToMsgIdx(this.showMinIdx); |
|
|
|
|
|
// 多展示10条信息 |
|
|
|
|
|
this.showMinIdx = this.showMinIdx > 10 ? this.showMinIdx - 10 : 0; |
|
|
|
|
|
}, |
|
|
onShowMore() { |
|
|
onShowMore() { |
|
|
if (this.chat.type == "GROUP") { |
|
|
if (this.chat.type == "GROUP") { |
|
|
uni.navigateTo({ |
|
|
uni.navigateTo({ |
|
|
@ -357,6 +371,20 @@ |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
readedMessage() { |
|
|
|
|
|
if (this.chat.type == "GROUP") { |
|
|
|
|
|
var url = `/message/group/readed?groupId=${this.chat.targetId}` |
|
|
|
|
|
} else { |
|
|
|
|
|
url = `/message/private/readed?friendId=${this.chat.targetId}` |
|
|
|
|
|
} |
|
|
|
|
|
this.$http({ |
|
|
|
|
|
url: url, |
|
|
|
|
|
method: 'PUT' |
|
|
|
|
|
}).then(() => { |
|
|
|
|
|
this.$store.commit("resetUnreadCount", this.chat) |
|
|
|
|
|
this.scrollToBottom(); |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
loadGroup(groupId) { |
|
|
loadGroup(groupId) { |
|
|
this.$http({ |
|
|
this.$http({ |
|
|
url: `/group/find/${groupId}`, |
|
|
url: `/group/find/${groupId}`, |
|
|
@ -416,6 +444,9 @@ |
|
|
return 0; |
|
|
return 0; |
|
|
} |
|
|
} |
|
|
return this.chat.messages.length; |
|
|
return this.chat.messages.length; |
|
|
|
|
|
}, |
|
|
|
|
|
unreadCount() { |
|
|
|
|
|
return this.chat.unreadCount; |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
watch: { |
|
|
watch: { |
|
|
@ -424,15 +455,28 @@ |
|
|
if (newSize > oldSize) { |
|
|
if (newSize > oldSize) { |
|
|
this.scrollToBottom(); |
|
|
this.scrollToBottom(); |
|
|
} |
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
unreadCount: { |
|
|
|
|
|
handler(newCount, oldCount) { |
|
|
|
|
|
if (newCount > 0) { |
|
|
|
|
|
// 消息已读 |
|
|
|
|
|
this.readedMessage() |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
onLoad(options) { |
|
|
onLoad(options) { |
|
|
// 聊天数据 |
|
|
// 聊天数据 |
|
|
this.chat = this.$store.state.chatStore.chats[options.chatIdx]; |
|
|
this.chat = this.$store.state.chatStore.chats[options.chatIdx]; |
|
|
|
|
|
// 初始状态只显示30条消息 |
|
|
|
|
|
let size = this.chat.messages.length; |
|
|
|
|
|
this.showMinIdx = size > 30 ? size - 30 : 0; |
|
|
// 激活当前会话 |
|
|
// 激活当前会话 |
|
|
this.$store.commit("activeChat", options.chatIdx); |
|
|
this.$store.commit("activeChat", options.chatIdx); |
|
|
// 页面滚到底部 |
|
|
// 页面滚到底部 |
|
|
this.scrollToBottom(); |
|
|
this.scrollToBottom(); |
|
|
|
|
|
// 消息已读 |
|
|
|
|
|
this.readedMessage() |
|
|
// 加载好友或群聊信息 |
|
|
// 加载好友或群聊信息 |
|
|
if (this.chat.type == "GROUP") { |
|
|
if (this.chat.type == "GROUP") { |
|
|
this.loadGroup(this.chat.targetId); |
|
|
this.loadGroup(this.chat.targetId); |
|
|
@ -475,6 +519,7 @@ |
|
|
&.left { |
|
|
&.left { |
|
|
left: 30rpx; |
|
|
left: 30rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
&.right { |
|
|
&.right { |
|
|
right: 30rpx; |
|
|
right: 30rpx; |
|
|
} |
|
|
} |
|
|
|
xie.bx
2 years ago