xiaoning
/
yogaApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改聊天页面动态布局

Browse Source
main
15004070936 2 days ago
parent 41b1976294
commit d83d27fb60
4 changed files with 129 additions and 73 deletions
Show Stats Download Patch File Download Diff File

43
components/chat/submit.vue
Unescape View File

@ -1,21 +1,21 @@
<template> <template>
<view> <view>
<view class="submit"> <view class="submit" :style="{ bottom: keyboardHeight + 'px' }">
<view class="submit-chat"> <view class="submit-chat">
<view class="bt-img" @tap="records"> <view class="bt-img" @tap="records">
<image :src="toc"></image> <image :src="toc"></image>
</view> </view>
<!-- 文本框 --> <!-- 文本框 -->
<textarea :maxlength="-1" :auto-height="true" :adjust-position="true" confirm-type="send" :cursor-spacing="10" <textarea :maxlength="-1" :auto-height="true" :adjust-position="false" confirm-type="send" :cursor-spacing="10"
:selection-start="selectionStart" :selection-end="selectionEnd" class="chat-send btnt" :class="{displaynone:isrecord}" :selection-start="selectionStart" :selection-end="selectionEnd" class="chat-send btnt" :class="{displaynone:isrecord}"
@confirm="sendMsg" @input="inputs" @focus="focus" v-model="msg"></textarea> @confirm="sendMsg" @input="inputs" @focus="focus" v-model="msg"></textarea>
<view class="record btn":class="{displaynone:!isrecord}" @touchstart="touchstart" @touchend="touchend" <view class="record btn":class="{displaynone:!isrecord}" @touchstart="touchstart" @touchend="touchend"
@touchmove="touchmove"> @touchmove="touchmove">
按住说话 按住说话
</view> </view>
<view class="bt-img" @tap="emoji"> <!-- <view class="bt-img" @tap="emoji">-->
<image src="../../static/icon/emote.png"></image> <!-- <image src="../../static/icon/emote.png"></image>-->
</view> <!-- </view>-->
<view v-if="ifmore" class="bt-img" @tap="more"> <view v-if="ifmore" class="bt-img" @tap="more">
<image src="../../static/icon/more.png"></image> <image src="../../static/icon/more.png"></image>
</view> </view>
@ -94,6 +94,7 @@ export default {
ifmore: true, ifmore: true,
voicebg: false, voicebg: false,
pageY: 0, pageY: 0,
keyboardHeight:0,
msg: "", msg: "",
// 直接引用地址可能出不来，需要用require // 直接引用地址可能出不来，需要用require
toc: require('../../static/icon/voice.png'), toc: require('../../static/icon/voice.png'),
@ -106,11 +107,15 @@ export default {
methods: { methods: {
//获取高度方法 //获取高度方法
getElementHeight() { getElementHeight() {
// if (this.heightTimer ) clearTimeout(this.heightTimer);
// this.heightTimer = setTimeout(() => {
const query = uni.createSelectorQuery().in(this); const query = uni.createSelectorQuery().in(this);
query.select('.submit').boundingClientRect(data => { query.select('.submit').boundingClientRect(data => {
console.log(data.height) if (data) {
this.$emit('heights', data.height); this.$emit('heights', data.height);
}
}).exec(); }).exec();
// }, 30);
}, },
//切换音频 //切换音频
records() { records() {
@ -120,7 +125,7 @@ export default {
//切换高度 //切换高度
setTimeout(() => { setTimeout(() => {
this.getElementHeight(); this.getElementHeight();
}, 10) })
if (this.isrecord) { if (this.isrecord) {
this.isrecord = false; this.isrecord = false;
this.toc = require("../../static/icon/voice.png"); this.toc = require("../../static/icon/voice.png");
@ -140,7 +145,7 @@ export default {
//切换高度 //切换高度
setTimeout(() => { setTimeout(() => {
this.getElementHeight(); this.getElementHeight();
}, 10) })
}, },
//接收表情 //接收表情
emotion(e) { emotion(e) {
@ -183,11 +188,10 @@ export default {
console.log('focus'); console.log('focus');
//关闭其他项 //关闭其他项
// this.isemoji = false; // this.isemoji = false;
// this.ismore = false; if (this.ismore){
this.ismore = false;
}
setTimeout(() => {
this.getElementHeight()
}, 10);
}, },
// 表情内发送 // 表情内发送
emojiSend() { emojiSend() {
@ -213,9 +217,9 @@ export default {
this.isemoji = false this.isemoji = false
this.isrecord = false; this.isrecord = false;
this.toc = require("../../static/icon/voice.png"); this.toc = require("../../static/icon/voice.png");
setTimeout(() => { this.$nextTick(() => {
this.getElementHeight(); this.getElementHeight();
}, 10) })
}, },
choseProduct(type){ choseProduct(type){
if (type==='order'){ if (type==='order'){
@ -225,8 +229,6 @@ export default {
} }
}, },
// 视频录像 // 视频录像
chooseVideo(){ chooseVideo(){
@ -422,17 +424,20 @@ export default {
* 关闭所有弹出面板（表情、更多），并收起键盘 * 关闭所有弹出面板（表情、更多），并收起键盘
*/ */
closeAll() { closeAll() {
this.isemoji = false;
var flag =this.ismore || this.isrecord;
this.ismore = false; this.ismore = false;
this.isrecord = false; // 如果录音面板开着，也关闭 this.isrecord = false; // 如果录音面板开着，也关闭
this.toc = require("../../static/icon/voice.png"); this.toc = require("../../static/icon/voice.png");
uni.hideKeyboard(); // 强制收起键盘 uni.hideKeyboard(); // 强制收起键盘
// 重新计算高度（通知父组件） // 重新计算高度（通知父组件）
if (flag){
this.$nextTick(() => { this.$nextTick(() => {
this.getElementHeight(); // 确保 DOM 更新后测量 this.getElementHeight(); // 确保 DOM 更新后测量
}); });
} }
} }
}
}; };
</script> </script>
@ -444,8 +449,8 @@ export default {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 999; z-index: 999;
padding-bottom: var(--status-bar-height); //padding-bottom: var(--status-bar-height);
// padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
.displaynone { .displaynone {

2
im-var.scss
Unescape View File

@ -57,4 +57,4 @@ $im-title-size-2: 18px;
$font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; $font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
$im-nav-bar-height: 45px; $im-nav-bar-height: 50px;

17
pages/chat/chat.vue
Unescape View File

@ -1,10 +1,19 @@
<template> <template>
<view class="content"> <view class="content">
<!-- 聊天内容 --> <!-- 聊天内容 -->
<scroll-view class="chat" scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollToView" <scroll-view
refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" class="chat"
refresher-background="#f0f0f0" @refresherpulling="onPulling" scroll-y="true"
@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"> scroll-with-animation="true"
:scroll-into-view="scrollToView"
refresher-enabled="true"
:refresher-triggered="triggered"
:refresher-threshold="100"
refresher-background="#f0f0f0"
@refresherpulling="onPulling"
@refresherrefresh="onRefresh"
@refresherrestore="onRestore"
@refresherabort="onAbort">
<view class="chat-main" :style="{paddingBottom:inputh+'px'}"> <view class="chat-main" :style="{paddingBottom:inputh+'px'}">
<!-- <view class="chat-ls" v-if="unshiftmsg.length==0"> <!-- <view class="chat-ls" v-if="unshiftmsg.length==0">
<view class="chat-time">现在可以开始聊天了.</view> <view class="chat-time">现在可以开始聊天了.</view>

110
pages/chatbox/chat-box.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save