|
|
|
|
@ -1,35 +1,37 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 模板完全保持不变，与原来一致 -->
|
|
|
|
|
<view class=" chat-box" id="chatBox">
|
|
|
|
|
<!-- <nav-bar more @more="onShowMore">{{ title }}</nav-bar> -->
|
|
|
|
|
<view class="chat-main-box" :style="{height: chatMainHeight+'px'}" >
|
|
|
|
|
<view class="chat-message" @click="switchChatTabBox('none')" :style="{ paddingBottom: bottomPadding + 'px' }" >
|
|
|
|
|
<scroll-view class="scroll-box" scroll-y="true" upper-threshold="200" @scrolltoupper="onScrollToTop"
|
|
|
|
|
:scroll-into-view="'chat-item-' + scrollMsgIdx" >
|
|
|
|
|
<view class="chat-message" @click="switchChatTabBox('none')" >
|
|
|
|
|
<scroll-view class="scroll-box"
|
|
|
|
|
scroll-y="true"
|
|
|
|
|
upper-threshold="200"
|
|
|
|
|
@scrolltoupper="onScrollToTop"
|
|
|
|
|
:scroll-into-view="scrollTarget"
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<view v-if="chat" v-for="(msgInfo, idx) in chat.messages" :key="idx">
|
|
|
|
|
<chat-message-item :ref="'message'+msgInfo.id" v-if="idx >= showMinIdx"
|
|
|
|
|
:headImage="headImage(msgInfo)" @call="onRtCall(msgInfo)" :showName="showName(msgInfo)"
|
|
|
|
|
@recall="onRecallMessage" @delete="onDeleteMessage" @copy="onCopyMessage"
|
|
|
|
|
@longPressHead="onLongPressHead(msgInfo)" @download="onDownloadFile"
|
|
|
|
|
@audioStateChange="onAudioStateChange" :id="'chat-item-' + idx" :msgInfo="msgInfo"
|
|
|
|
|
:headImage="headImage(msgInfo)"
|
|
|
|
|
@call="onRtCall(msgInfo)"
|
|
|
|
|
:showName="showName(msgInfo)"
|
|
|
|
|
@recall="onRecallMessage"
|
|
|
|
|
@delete="onDeleteMessage"
|
|
|
|
|
@copy="onCopyMessage"
|
|
|
|
|
@longPressHead="onLongPressHead(msgInfo)"
|
|
|
|
|
@download="onDownloadFile"
|
|
|
|
|
@audioStateChange="onAudioStateChange"
|
|
|
|
|
:id="'chat-item-' + idx"
|
|
|
|
|
:msgInfo="msgInfo"
|
|
|
|
|
:groupMembers="groupMembers">
|
|
|
|
|
</chat-message-item>
|
|
|
|
|
</view>
|
|
|
|
|
<view id="chat-bottom" style="height: 2rpx;"></view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
<view v-if="!isInBottom" class="scroll-to-bottom" @click="onClickToBottom">
|
|
|
|
|
<view v-if="!isInBottom" class="scroll-to-bottom" @click="onClickToBottom">
|
|
|
|
|
{{ newMessageSize > 0 ? newMessageSize+'条新消息' :'回到底部'}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- <view v-if="atUserIds.length > 0" class="chat-at-bar" @click="openAtBox()">-->
|
|
|
|
|
<!-- <view class="iconfont icon-at"> </view>-->
|
|
|
|
|
<!-- <scroll-view v-if="atUserIds.length > 0" class="chat-at-scroll-box" scroll-x="true" scroll-left="120">-->
|
|
|
|
|
<!-- <view class="chat-at-items">-->
|
|
|
|
|
<!-- <view v-for="m in atUserItems" class="chat-at-item" :key="m.userId">-->
|
|
|
|
|
<!-- <head-image :name="m.showNickName" :url="m.headImage" size="minier"></head-image>-->
|
|
|
|
|
<!-- </view>-->
|
|
|
|
|
<!-- </view>-->
|
|
|
|
|
<!-- </scroll-view>-->
|
|
|
|
|
<!-- </view>-->
|
|
|
|
|
<submit ref="submitRef" @inputs="onInputs" @send-message="onSendMessage" @heights="onHeights" />
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
@ -49,17 +51,22 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
scrollTarget: '',
|
|
|
|
|
chat: {},
|
|
|
|
|
userInfo: {},
|
|
|
|
|
group: {},
|
|
|
|
|
moreHeight:0,
|
|
|
|
|
groupMembers: [],
|
|
|
|
|
isReceipt: true,
|
|
|
|
|
scrollMsgIdx: 0,
|
|
|
|
|
scrollTop:0,
|
|
|
|
|
chatTabBox: 'none',
|
|
|
|
|
showRecord: false,
|
|
|
|
|
chatMainHeight: 0,
|
|
|
|
|
bottomPadding: 50,
|
|
|
|
|
keyboardHeight: 290,
|
|
|
|
|
bottomPadding: 0,
|
|
|
|
|
keyboardHeight: 0,
|
|
|
|
|
topOffset: 0,
|
|
|
|
|
submitHeight: 0,
|
|
|
|
|
windowHeight: 1000,
|
|
|
|
|
initHeight: 1000,
|
|
|
|
|
atUserIds: [],
|
|
|
|
|
@ -189,7 +196,7 @@ export default {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.windowHeight = uni.getSystemInfoSync().windowHeight;
|
|
|
|
|
this.reCalChatMainHeight();
|
|
|
|
|
this.scrollToBottom();
|
|
|
|
|
|
|
|
|
|
// #ifdef H5
|
|
|
|
|
this.initHeight = window.innerHeight;
|
|
|
|
|
const chatBox = document.getElementById('chatBox');
|
|
|
|
|
@ -207,7 +214,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
this.setBadge();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
// 映射 Vuex actions
|
|
|
|
|
...mapActions('chatStore', [
|
|
|
|
|
@ -227,13 +234,13 @@ export default {
|
|
|
|
|
// 设置app角标
|
|
|
|
|
setBadge() {
|
|
|
|
|
var count = myCache("massageCount")?myCache("massageCount"):-1;
|
|
|
|
|
if (count > 0) {
|
|
|
|
|
if (count > 0) {
|
|
|
|
|
// app清除角标的数量
|
|
|
|
|
//#ifdef APP-PLUS
|
|
|
|
|
plus.runtime.setBadgeNumber(count);
|
|
|
|
|
//#endif
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
// app清除角标的数量
|
|
|
|
|
//#ifdef APP-PLUS
|
|
|
|
|
plus.runtime.setBadgeNumber(-1);
|
|
|
|
|
@ -304,9 +311,14 @@ export default {
|
|
|
|
|
* @param {number} height - submit 组件总高度（px）
|
|
|
|
|
*/
|
|
|
|
|
onHeights(height) {
|
|
|
|
|
this.bottomPadding = height;
|
|
|
|
|
// 若需同步滚动到底部，可在此调用
|
|
|
|
|
this.scrollToBottom();
|
|
|
|
|
if (height>60){
|
|
|
|
|
this.moreHeight=height-58
|
|
|
|
|
this.chatMainHeight -= this.moreHeight;
|
|
|
|
|
this.scrollToBottom();
|
|
|
|
|
}else {
|
|
|
|
|
this.moreHeight=0;
|
|
|
|
|
this.reCalChatMainHeight();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 扩展的上传发送方法（类似 submit 中原有的 uploadFile 逻辑）
|
|
|
|
|
@ -687,10 +699,16 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
scrollToBottom() {
|
|
|
|
|
const size = this.messageSize;
|
|
|
|
|
if (size > 0) {
|
|
|
|
|
this.scrollToMsgIdx(size - 1);
|
|
|
|
|
}
|
|
|
|
|
this.scrollTarget = '';
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.scrollTarget = 'chat-bottom'; // 足够大
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// let size = this.messageSize;
|
|
|
|
|
// if (size > 0) {
|
|
|
|
|
// this.scrollToMsgIdx(size - 1);
|
|
|
|
|
//
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
scrollToMsgIdx(idx) {
|
|
|
|
|
if (idx === this.scrollMsgIdx && idx > 0) {
|
|
|
|
|
@ -714,10 +732,11 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
switchChatTabBox(type) {
|
|
|
|
|
this.chatTabBox = type;
|
|
|
|
|
this.reCalChatMainHeight();
|
|
|
|
|
// this.reCalChatMainHeight();
|
|
|
|
|
uni.hideKeyboard();
|
|
|
|
|
// 通知 submit 组件关闭其内部面板
|
|
|
|
|
if (this.$refs.submitRef) {
|
|
|
|
|
this.moreHeight=0;
|
|
|
|
|
this.$refs.submitRef.closeAll();
|
|
|
|
|
}
|
|
|
|
|
// if (type !== 'tools' && this.$refs.fileUpload) {
|
|
|
|
|
@ -886,6 +905,7 @@ export default {
|
|
|
|
|
}, 100);
|
|
|
|
|
},
|
|
|
|
|
onScrollToTop() {
|
|
|
|
|
console.log("lalal...........")
|
|
|
|
|
if (this.showMinIdx > 0) {
|
|
|
|
|
// #ifndef H5
|
|
|
|
|
this.scrollToMsgIdx(this.showMinIdx);
|
|
|
|
|
@ -1006,20 +1026,26 @@ export default {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
let h = this.windowHeight;
|
|
|
|
|
// 减去标题栏高度
|
|
|
|
|
h -= 0;
|
|
|
|
|
h -= 25;
|
|
|
|
|
// 减去键盘高度
|
|
|
|
|
// if (this.isShowKeyBoard || this.chatTabBox !== 'none') {
|
|
|
|
|
// h -= this.keyboardHeight;
|
|
|
|
|
// this.scrollToBottom();
|
|
|
|
|
// console.log("3h",h)
|
|
|
|
|
// this.scrollToBottom();
|
|
|
|
|
// }
|
|
|
|
|
// #ifndef H5
|
|
|
|
|
// h5需要减去状态栏高度
|
|
|
|
|
h -= uni.getSystemInfoSync().statusBarHeight;
|
|
|
|
|
|
|
|
|
|
// #endif
|
|
|
|
|
this.chatMainHeight = h;
|
|
|
|
|
if (this.isShowKeyBoard || this.chatTabBox !== 'none') {
|
|
|
|
|
// if (this.isShowKeyBoard || this.chatTabBox !== 'none') {
|
|
|
|
|
// this.scrollToBottom();
|
|
|
|
|
// }
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.scrollToBottom();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// #ifdef H5
|
|
|
|
|
if (uni.getSystemInfoSync().platform === 'ios') {
|
|
|
|
|
[50, 100, 500].forEach(delay => {
|
|
|
|
|
@ -1030,6 +1056,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
// #endif
|
|
|
|
|
}, 30);
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
listenKeyBoard() {
|
|
|
|
|
// #ifdef H5
|
|
|
|
|
@ -1050,6 +1077,7 @@ export default {
|
|
|
|
|
// #ifndef H5
|
|
|
|
|
uni.onKeyboardHeightChange(this.keyBoardListener);
|
|
|
|
|
// #endif
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
unListenKeyboard() {
|
|
|
|
|
// #ifdef H5
|
|
|
|
|
@ -1060,13 +1088,26 @@ export default {
|
|
|
|
|
// #ifndef H5
|
|
|
|
|
uni.offKeyboardHeightChange(this.keyBoardListener);
|
|
|
|
|
// #endif
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
keyBoardListener(res) {
|
|
|
|
|
this.isShowKeyBoard = res.height > 0;
|
|
|
|
|
if (this.isShowKeyBoard) this.keyboardHeight = res.height;
|
|
|
|
|
this.reCalChatMainHeight();
|
|
|
|
|
|
|
|
|
|
if (this.isShowKeyBoard)
|
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
this.chatMainHeight -= (res.height-this.moreHeight);
|
|
|
|
|
this.$refs.submitRef.keyboardHeight=res.height;
|
|
|
|
|
this.scrollToBottom();
|
|
|
|
|
}else {
|
|
|
|
|
this.$refs.submitRef.keyboardHeight=0;
|
|
|
|
|
this.reCalChatMainHeight();
|
|
|
|
|
}
|
|
|
|
|
console.log('kb.chatMainHeight ',this.chatMainHeight )
|
|
|
|
|
console.log('this.morehight ',this.moreHeight )
|
|
|
|
|
},
|
|
|
|
|
resizeListener() {
|
|
|
|
|
console.log("123")
|
|
|
|
|
let height = this.initHeight - window.innerHeight;
|
|
|
|
|
if (window.visualViewport && uni.getSystemInfoSync().platform === 'ios') {
|
|
|
|
|
height = this.initHeight - window.visualViewport.height;
|
|
|
|
|
@ -1077,10 +1118,12 @@ export default {
|
|
|
|
|
this.reCalChatMainHeight();
|
|
|
|
|
},
|
|
|
|
|
focusInListener() {
|
|
|
|
|
console.log("456")
|
|
|
|
|
this.isShowKeyBoard = true;
|
|
|
|
|
this.reCalChatMainHeight();
|
|
|
|
|
},
|
|
|
|
|
focusOutListener() {
|
|
|
|
|
console.log("789")
|
|
|
|
|
this.isShowKeyBoard = false;
|
|
|
|
|
this.reCalChatMainHeight();
|
|
|
|
|
},
|
|
|
|
|
@ -1134,9 +1177,8 @@ export default {
|
|
|
|
|
|
|
|
|
|
.scroll-to-bottom {
|
|
|
|
|
position: absolute;
|
|
|
|
|
//
|
|
|
|
|
right: 30rpx;
|
|
|
|
|
//bottom: 30rpx;
|
|
|
|
|
bottom: 30rpx;
|
|
|
|
|
font-size: $im-font-size;
|
|
|
|
|
color: $im-color-primary;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
