|
|
|
@ -9,8 +9,8 @@ |
|
|
|
<scroll-view class="scroll-box" scroll-y="true" upper-threshold="200" @scrolltoupper="onScrollToTop" |
|
|
|
:scroll-into-view="'chat-item-'+scrollMsgIdx"> |
|
|
|
<view v-if="chat" v-for="(msgInfo,idx) in chat.messages" :key="idx"> |
|
|
|
<chat-message-item v-if="idx>=showMinIdx" :headImage="headImage(msgInfo)" |
|
|
|
@call="onRtCall(msgInfo)" :showName="showName(msgInfo)" @recall="onRecallMessage" |
|
|
|
<chat-message-item v-if="idx>=showMinIdx" :headImage="headImage(msgInfo)" @call="onRtCall(msgInfo)" |
|
|
|
:showName="showName(msgInfo)" @recall="onRecallMessage" @copy="onCopyMessage" |
|
|
|
@delete="onDeleteMessage" @longPressHead="onLongPressHead(msgInfo)" @download="onDownloadFile" |
|
|
|
:id="'chat-item-'+idx" :msgInfo="msgInfo" :groupMembers="groupMembers"> |
|
|
|
</chat-message-item> |
|
|
|
@ -50,47 +50,46 @@ |
|
|
|
<view class="chat-tools-item"> |
|
|
|
<image-upload :maxCount="9" sourceType="album" :onBefore="onUploadImageBefore" |
|
|
|
:onSuccess="onUploadImageSuccess" :onError="onUploadImageFail"> |
|
|
|
<view class="tool-icon iconfont icon-picture" ></view> |
|
|
|
<view class="tool-icon iconfont icon-picture"></view> |
|
|
|
</image-upload> |
|
|
|
<view class="tool-name">相册</view> |
|
|
|
</view> |
|
|
|
<view class="chat-tools-item"> |
|
|
|
<image-upload sourceType="camera" :onBefore="onUploadImageBefore" :onSuccess="onUploadImageSuccess" |
|
|
|
:onError="onUploadImageFail"> |
|
|
|
<view class="tool-icon iconfont icon-camera" ></view> |
|
|
|
<view class="tool-icon iconfont icon-camera"></view> |
|
|
|
</image-upload> |
|
|
|
<view class="tool-name">拍摄</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="chat-tools-item"> |
|
|
|
<file-upload :onBefore="onUploadFileBefore" :onSuccess="onUploadFileSuccess" |
|
|
|
:onError="onUploadFileFail"> |
|
|
|
<view class="tool-icon iconfont icon-folder" ></view> |
|
|
|
<view class="tool-icon iconfont icon-folder"></view> |
|
|
|
</file-upload> |
|
|
|
<view class="tool-name">文件</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="chat-tools-item" @click="onRecorderInput()"> |
|
|
|
<view class="tool-icon iconfont icon-microphone" ></view> |
|
|
|
<view class="tool-icon iconfont icon-microphone"></view> |
|
|
|
<view class="tool-name">语音消息</view> |
|
|
|
</view> |
|
|
|
<view v-if="chat.type == 'GROUP'" class="chat-tools-item" @click="switchReceipt()"> |
|
|
|
<view class="tool-icon iconfont icon-receipt" |
|
|
|
:class="isReceipt?'active':''"></view> |
|
|
|
<view class="tool-icon iconfont icon-receipt" :class="isReceipt?'active':''"></view> |
|
|
|
<view class="tool-name">回执消息</view> |
|
|
|
</view> |
|
|
|
<!-- #ifndef MP-WEIXIN --> |
|
|
|
<!-- 音视频不支持小程序 --> |
|
|
|
<view v-if="chat.type == 'PRIVATE'" class="chat-tools-item" @click="onPriviteVideo()"> |
|
|
|
<view class="tool-icon iconfont icon-video" ></view> |
|
|
|
<view class="tool-icon iconfont icon-video"></view> |
|
|
|
<view class="tool-name">视频通话</view> |
|
|
|
</view> |
|
|
|
<view v-if="chat.type == 'PRIVATE'" class="chat-tools-item" @click="onPriviteVoice()"> |
|
|
|
<view class="tool-icon iconfont icon-call" ></view> |
|
|
|
<view class="tool-icon iconfont icon-call"></view> |
|
|
|
<view class="tool-name">语音通话</view> |
|
|
|
</view> |
|
|
|
<view v-if="chat.type == 'GROUP'" class="chat-tools-item" @click="onGroupVideo()"> |
|
|
|
<view class="tool-icon iconfont icon-call" ></view> |
|
|
|
<view class="tool-icon iconfont icon-call"></view> |
|
|
|
<view class="tool-name">语音通话</view> |
|
|
|
</view> |
|
|
|
<!-- #endif --> |
|
|
|
@ -109,8 +108,7 @@ |
|
|
|
@complete="onAtComplete"></chat-at-box> |
|
|
|
<!-- 群语音通话时选择成员 --> |
|
|
|
<!-- #ifndef MP-WEIXIN --> |
|
|
|
<group-member-selector ref="selBox" :members="groupMembers" |
|
|
|
:maxSize="configStore.webrtc.maxChannel" |
|
|
|
<group-member-selector ref="selBox" :members="groupMembers" :maxSize="configStore.webrtc.maxChannel" |
|
|
|
@complete="onInviteOk"></group-member-selector> |
|
|
|
<group-rtc-join ref="rtcJoin" :groupId="group.id"></group-rtc-join> |
|
|
|
<!-- #endif --> |
|
|
|
@ -136,8 +134,8 @@ |
|
|
|
keyboardHeight: 322, |
|
|
|
atUserIds: [], |
|
|
|
needScrollToBottom: false, // 需要滚动到底部 |
|
|
|
showMinIdx: 0, // 下标小于showMinIdx的消息不显示，否则可能很卡 |
|
|
|
reqQueue: [], // 请求队列 |
|
|
|
showMinIdx: 0, // 下标小于showMinIdx的消息不显示，否则可能很卡 |
|
|
|
reqQueue: [], // 请求队列 |
|
|
|
isSending: false // 是否正在发送请求 |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -189,23 +187,13 @@ |
|
|
|
}) |
|
|
|
}, |
|
|
|
onGroupVideo() { |
|
|
|
this.$http({ |
|
|
|
url: "/webrtc/group/info?groupId="+this.group.id, |
|
|
|
method: 'GET' |
|
|
|
}).then((rtcInfo)=>{ |
|
|
|
if(rtcInfo.isChating){ |
|
|
|
// 已在通话中，可以直接加入通话 |
|
|
|
this.$refs.rtcJoin.open(rtcInfo); |
|
|
|
}else { |
|
|
|
// 邀请成员发起通话 |
|
|
|
let ids = [this.mine.id]; |
|
|
|
this.$refs.selBox.init(ids, ids); |
|
|
|
this.$refs.selBox.open(); |
|
|
|
} |
|
|
|
}) |
|
|
|
// 邀请成员发起通话 |
|
|
|
let ids = [this.mine.id]; |
|
|
|
this.$refs.selBox.init(ids, ids); |
|
|
|
this.$refs.selBox.open(); |
|
|
|
}, |
|
|
|
onInviteOk(ids) { |
|
|
|
if(ids.length < 2){ |
|
|
|
if (ids.length < 2) { |
|
|
|
return; |
|
|
|
} |
|
|
|
let users = []; |
|
|
|
@ -264,7 +252,6 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
sendTextMessage() { |
|
|
|
const timeStamp = new Date().getTime(); |
|
|
|
if (!this.sendText.trim() && this.atUserIds.length == 0) { |
|
|
|
return uni.showToast({ |
|
|
|
title: "不能发送空白信息", |
|
|
|
@ -283,10 +270,8 @@ |
|
|
|
// 填充对方id |
|
|
|
this.fillTargetId(msgInfo, this.chat.targetId); |
|
|
|
this.sendMessageRequest(msgInfo).then((m) => { |
|
|
|
console.log("请求耗时：",new Date().getTime()-timeStamp) |
|
|
|
m.selfSend = true; |
|
|
|
this.chatStore.insertMessage(m); |
|
|
|
console.log("insertMessage耗时：",new Date().getTime()-timeStamp) |
|
|
|
// 会话置顶 |
|
|
|
this.moveChatToTop(); |
|
|
|
}).finally(() => { |
|
|
|
@ -368,6 +353,7 @@ |
|
|
|
this.showKeyBoard = true; |
|
|
|
this.switchChatTabBox('none', false) |
|
|
|
this.keyboardHeight = this.rpxTopx(e.detail.height); |
|
|
|
this.scrollToBottom(); |
|
|
|
} else { |
|
|
|
this.showKeyBoard = false; |
|
|
|
} |
|
|
|
@ -505,6 +491,17 @@ |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
onCopyMessage(msgInfo) { |
|
|
|
uni.setClipboardData({ |
|
|
|
data: msgInfo.content, |
|
|
|
success: () => { |
|
|
|
uni.showToast({ title: '已复制', icon: 'none' }); |
|
|
|
}, |
|
|
|
fail: () => { |
|
|
|
uni.showToast({ title: '复制失败', icon: 'none' }); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
onDownloadFile(msgInfo) { |
|
|
|
let url = JSON.parse(msgInfo.content).url; |
|
|
|
uni.downloadFile({ |
|
|
|
@ -622,14 +619,14 @@ |
|
|
|
let px = info.windowWidth * rpx / 750; |
|
|
|
return Math.floor(rpx); |
|
|
|
}, |
|
|
|
sendMessageRequest(msgInfo){ |
|
|
|
return new Promise((resolve,reject)=>{ |
|
|
|
sendMessageRequest(msgInfo) { |
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
// 请求入队列，防止请求"后发先至"，导致消息错序 |
|
|
|
this.reqQueue.push({msgInfo,resolve,reject}); |
|
|
|
this.reqQueue.push({ msgInfo, resolve, reject }); |
|
|
|
this.processReqQueue(); |
|
|
|
}) |
|
|
|
}, |
|
|
|
processReqQueue(){ |
|
|
|
processReqQueue() { |
|
|
|
if (this.reqQueue.length && !this.isSending) { |
|
|
|
this.isSending = true; |
|
|
|
const reqData = this.reqQueue.shift(); |
|
|
|
@ -637,18 +634,18 @@ |
|
|
|
url: this.messageAction, |
|
|
|
method: 'post', |
|
|
|
data: reqData.msgInfo |
|
|
|
}).then((res)=>{ |
|
|
|
}).then((res) => { |
|
|
|
reqData.resolve(res) |
|
|
|
}).catch((e)=>{ |
|
|
|
}).catch((e) => { |
|
|
|
reqData.reject(e) |
|
|
|
}).finally(()=>{ |
|
|
|
}).finally(() => { |
|
|
|
this.isSending = false; |
|
|
|
// 发送下一条请求 |
|
|
|
this.processReqQueue(); |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
generateId(){ |
|
|
|
generateId() { |
|
|
|
// 生成临时id |
|
|
|
return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000)); |
|
|
|
} |
|
|
|
@ -706,10 +703,10 @@ |
|
|
|
// 接收到消息时滚动到底部 |
|
|
|
if (newSize > oldSize) { |
|
|
|
let pages = getCurrentPages(); |
|
|
|
let curPage = pages[pages.length-1].route; |
|
|
|
if(curPage == "pages/chat/chat-box"){ |
|
|
|
let curPage = pages[pages.length - 1].route; |
|
|
|
if (curPage == "pages/chat/chat-box") { |
|
|
|
this.scrollToBottom(); |
|
|
|
}else { |
|
|
|
} else { |
|
|
|
this.needScrollToBottom = true; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -743,8 +740,8 @@ |
|
|
|
// 复位回执消息 |
|
|
|
this.isReceipt = false; |
|
|
|
}, |
|
|
|
onShow(){ |
|
|
|
if(this.needScrollToBottom){ |
|
|
|
onShow() { |
|
|
|
if (this.needScrollToBottom) { |
|
|
|
// 页面滚到底部 |
|
|
|
this.scrollToBottom(); |
|
|
|
this.needScrollToBottom = false; |
|
|
|
@ -839,6 +836,7 @@ |
|
|
|
border: #dddddd solid 1px; |
|
|
|
background-color: #f7f8fd; |
|
|
|
height: 80rpx; |
|
|
|
|
|
|
|
.iconfont { |
|
|
|
font-size: 68rpx; |
|
|
|
margin: 6rpx; |
|
|
|
@ -857,6 +855,7 @@ |
|
|
|
border-radius: 20rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.send-text-area { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
@ -883,13 +882,14 @@ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
.tool-icon { |
|
|
|
padding: 28rpx; |
|
|
|
font-size: 60rpx; |
|
|
|
border-radius: 20%; |
|
|
|
background-color: white; |
|
|
|
color: black; |
|
|
|
|
|
|
|
&.active { |
|
|
|
background-color: #ddd; |
|
|
|
} |
|
|
|
|
xsx
2 years ago
