|
|
@@ -1,49 +1,54 @@
|
|
|
<template>
|
|
|
<view class="page chat-box">
|
|
|
<nav-bar back more @more="onShowMore">{{ title }}</nav-bar>
|
|
|
- <view class="chat-msg" @click="switchChatTabBox('none', true)">
|
|
|
- <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" @copy="onCopyMessage"
|
|
|
- @delete="onDeleteMessage" @longPressHead="onLongPressHead(msgInfo)" @download="onDownloadFile"
|
|
|
- :id="'chat-item-' + idx" :msgInfo="msgInfo" :groupMembers="groupMembers">
|
|
|
- </chat-message-item>
|
|
|
- </view>
|
|
|
- </scroll-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">
|
|
|
- <head-image :name="m.showNickName" :url="m.headImage" size="minier"></head-image>
|
|
|
+ <view class="chat-main-box" :style="{height: chatMainHeight+'px'}">
|
|
|
+ <view class="chat-msg" @click="switchChatTabBox('none')">
|
|
|
+ <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"
|
|
|
+ @copy="onCopyMessage" @delete="onDeleteMessage" @longPressHead="onLongPressHead(msgInfo)"
|
|
|
+ @download="onDownloadFile" :id="'chat-item-' + idx" :msgInfo="msgInfo"
|
|
|
+ :groupMembers="groupMembers">
|
|
|
+ </chat-message-item>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- <view class="send-bar">
|
|
|
- <view v-if="!showRecord" class="iconfont icon-voice-circle" @click="onRecorderInput()"></view>
|
|
|
- <view v-else class="iconfont icon-keyboard" @click="onKeyboardInput()"></view>
|
|
|
- <chat-record v-if="showRecord" class="chat-record" @send="onSendRecord"></chat-record>
|
|
|
- <view v-else class="send-text">
|
|
|
- <textarea class="send-text-area" v-model="sendText" auto-height :show-confirm-bar="false"
|
|
|
- :placeholder="isReceipt ? '[回执消息]' : ''" :adjust-position="false" @confirm="sendTextMessage()"
|
|
|
- @keyboardheightchange="onKeyboardheightchange" @input="onTextInput" confirm-type="send" confirm-hold
|
|
|
- :hold-keyboard="true"></textarea>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
- <view v-if="chat && chat.type == 'GROUP'" class="iconfont icon-at" @click="openAtBox()"></view>
|
|
|
- <view class="iconfont icon-icon_emoji" @click="onShowEmoChatTab()"></view>
|
|
|
- <view v-if="sendText == ''" class="iconfont icon-add" @click="onShowToolsChatTab()">
|
|
|
+ <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">
|
|
|
+ <head-image :name="m.showNickName" :url="m.headImage" size="minier"></head-image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="send-bar">
|
|
|
+ <view v-if="!showRecord" class="iconfont icon-voice-circle" @click="onRecorderInput()"></view>
|
|
|
+ <view v-else class="iconfont icon-keyboard" @click="onKeyboardInput()"></view>
|
|
|
+ <chat-record v-if="showRecord" class="chat-record" @send="onSendRecord"></chat-record>
|
|
|
+ <view v-else class="send-text">
|
|
|
+ <editor id="editor" class="send-text-area" :placeholder="isReceipt ? '[回执消息]' : ''"
|
|
|
+ :read-only="isReadOnly" @focus="onEditorFocus" @blur="onEditorBlur" @ready="onEditorReady"
|
|
|
+ @input="onTextInput">
|
|
|
+ </editor>
|
|
|
+ <!-- <textarea class="send-text-area" v-model="sendText" auto-height :show-confirm-bar="false"
|
|
|
+ :placeholder="isReceipt ? '[回执消息]' : ''" :adjust-position="false" @confirm="sendTextMessage()"
|
|
|
+ @keyboardheightchange="onKeyboardheightchange" @input="onTextInput" confirm-type="send"
|
|
|
+ confirm-hold :hold-keyboard="true"></textarea> -->
|
|
|
+ </view>
|
|
|
+ <view v-if="chat && chat.type == 'GROUP'" class="iconfont icon-at" @click="openAtBox()"></view>
|
|
|
+ <view class="iconfont icon-icon_emoji" @click="onShowEmoChatTab()"></view>
|
|
|
+ <view v-if="isEmpty" class="iconfont icon-add" @click="onShowToolsChatTab()">
|
|
|
+ </view>
|
|
|
+ <button v-if="!isEmpty || atUserIds.length > 0" class="btn-send" type="primary"
|
|
|
+ @touchend.prevent="sendTextMessage()" size="mini">发送</button>
|
|
|
</view>
|
|
|
- <button v-if="sendText != '' || atUserIds.length > 0" class="btn-send" type="primary"
|
|
|
- @touchend.prevent="sendTextMessage()" size="mini">发送</button>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="chat-tab-bar" v-show="chatTabBox != 'none' || (showKeyBoard && !isH5)"
|
|
|
- :style="{ height: `${keyboardHeight}px` }">
|
|
|
- <view v-if="chatTabBox == 'tools'" class="chat-tools">
|
|
|
+ <view class="chat-tab-bar">
|
|
|
+ <view v-if="chatTabBox == 'tools'" class="chat-tools" :style="{height: keyboardHeight+'px'}">
|
|
|
<view class="chat-tools-item">
|
|
|
<image-upload :maxCount="9" sourceType="album" :onBefore="onUploadImageBefore"
|
|
|
:onSuccess="onUploadImageSuccess" :onError="onUploadImageFail">
|
|
|
@@ -60,7 +65,7 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="chat-tools-item">
|
|
|
- <file-upload :onBefore="onUploadFileBefore" :onSuccess="onUploadFileSuccess"
|
|
|
+ <file-upload ref="fileUpload" :onBefore="onUploadFileBefore" :onSuccess="onUploadFileSuccess"
|
|
|
:onError="onUploadFileFail">
|
|
|
<view class="tool-icon iconfont icon-folder"></view>
|
|
|
</file-upload>
|
|
|
@@ -91,9 +96,10 @@
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
</view>
|
|
|
- <scroll-view v-if="chatTabBox === 'emo'" class="chat-emotion" scroll-y="true">
|
|
|
+ <scroll-view v-if="chatTabBox === 'emo'" class="chat-emotion" scroll-y="true"
|
|
|
+ :style="{height: keyboardHeight+'px'}">
|
|
|
<view class="emotion-item-list">
|
|
|
- <image class="emotion-item" :title="emoText" :src="$emo.textToPath(emoText)"
|
|
|
+ <image class="emotion-item emoji-large" :title="emoText" :src="$emo.textToPath(emoText)"
|
|
|
v-for="(emoText, i) in $emo.emoTextList" :key="i" @click="selectEmoji(emoText)" mode="aspectFit"
|
|
|
lazy-load="true"></image>
|
|
|
</view>
|
|
|
@@ -122,29 +128,31 @@ export default {
|
|
|
friend: {},
|
|
|
group: {},
|
|
|
groupMembers: [],
|
|
|
- sendText: "",
|
|
|
isReceipt: false, // 是否回执消息
|
|
|
scrollMsgIdx: 0, // 滚动条定位为到哪条消息
|
|
|
chatTabBox: 'none',
|
|
|
- showKeyBoard: false,
|
|
|
showRecord: false,
|
|
|
- keyboardHeight: 322,
|
|
|
+ keyboardHeight: 300,
|
|
|
atUserIds: [],
|
|
|
needScrollToBottom: false, // 需要滚动到底部
|
|
|
showMinIdx: 0, // 下标小于showMinIdx的消息不显示，否则可能很卡
|
|
|
reqQueue: [], // 请求队列
|
|
|
isSending: false, // 是否正在发送请求
|
|
|
- isH5: false // h5键盘会强制推起页面，有些地方要区别对待
|
|
|
+ isShowKeyBoard: false, // 键盘是否正在弹起
|
|
|
+ editorCtx: null, // 编辑器上下文
|
|
|
+ isEmpty: true, // 编辑器是否为空
|
|
|
+ isFocus: false, // 编辑器是否焦点
|
|
|
+ isReadOnly: false // 编辑器是否只读
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
onRecorderInput() {
|
|
|
this.showRecord = true;
|
|
|
- this.switchChatTabBox('none', true);
|
|
|
+ this.switchChatTabBox('none');
|
|
|
},
|
|
|
onKeyboardInput() {
|
|
|
this.showRecord = false;
|
|
|
- this.switchChatTabBox('none', false);
|
|
|
+ this.switchChatTabBox('none');
|
|
|
},
|
|
|
onSendRecord(data) {
|
|
|
let msgInfo = {
|
|
|
@@ -250,35 +258,49 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
sendTextMessage() {
|
|
|
- if (!this.sendText.trim() && this.atUserIds.length == 0) {
|
|
|
- return uni.showToast({
|
|
|
- title: "不能发送空白信息",
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- }
|
|
|
- let receiptText = this.isReceipt ? "【回执消息】" : "";
|
|
|
- let atText = this.createAtText();
|
|
|
- let msgInfo = {
|
|
|
- content: receiptText + this.sendText + atText,
|
|
|
- atUserIds: this.atUserIds,
|
|
|
- receipt: this.isReceipt,
|
|
|
- type: 0
|
|
|
- }
|
|
|
- this.sendText = "";
|
|
|
- // 填充对方id
|
|
|
- this.fillTargetId(msgInfo, this.chat.targetId);
|
|
|
- this.sendMessageRequest(msgInfo).then((m) => {
|
|
|
- m.selfSend = true;
|
|
|
- this.chatStore.insertMessage(m);
|
|
|
- // 会话置顶
|
|
|
- this.moveChatToTop();
|
|
|
- }).finally(() => {
|
|
|
- // 滚动到底部
|
|
|
- this.scrollToBottom();
|
|
|
- // 清空@用户列表
|
|
|
- this.atUserIds = [];
|
|
|
- this.isReceipt = false;
|
|
|
- });
|
|
|
+ this.editorCtx.getContents({
|
|
|
+ success: (e) => {
|
|
|
+ let sendText = this.isReceipt ? "【回执消息】" : "";
|
|
|
+ e.delta.ops.forEach((op) => {
|
|
|
+ if (op.insert.image) {
|
|
|
+ // emo表情
|
|
|
+ sendText += `#${op.attributes.alt};`
|
|
|
+ } else(
|
|
|
+ // 文字
|
|
|
+ sendText += op.insert
|
|
|
+ )
|
|
|
+ })
|
|
|
+ if (!sendText.trim() && this.atUserIds.length == 0) {
|
|
|
+ return uni.showToast({
|
|
|
+ title: "不能发送空白信息",
|
|
|
+ icon: "none"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ let receiptText = this.isReceipt ? "【回执消息】" : "";
|
|
|
+ let atText = this.createAtText();
|
|
|
+ let msgInfo = {
|
|
|
+ content: receiptText + sendText + atText,
|
|
|
+ atUserIds: this.atUserIds,
|
|
|
+ receipt: this.isReceipt,
|
|
|
+ type: 0
|
|
|
+ }
|
|
|
+ // 填充对方id
|
|
|
+ this.fillTargetId(msgInfo, this.chat.targetId);
|
|
|
+ this.sendMessageRequest(msgInfo).then((m) => {
|
|
|
+ m.selfSend = true;
|
|
|
+ this.chatStore.insertMessage(m, this.chat);
|
|
|
+ // 会话置顶
|
|
|
+ this.moveChatToTop();
|
|
|
+ }).finally(() => {
|
|
|
+ // 滚动到底部
|
|
|
+ this.scrollToBottom();
|
|
|
+ // 清空编辑框数据
|
|
|
+ this.atUserIds = [];
|
|
|
+ this.isReceipt = false;
|
|
|
+ this.editorCtx.clear();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
createAtText() {
|
|
|
let atText = "";
|
|
|
@@ -325,31 +347,35 @@ export default {
|
|
|
},
|
|
|
onShowEmoChatTab() {
|
|
|
this.showRecord = false;
|
|
|
- this.switchChatTabBox('emo', true)
|
|
|
+ this.switchChatTabBox('emo')
|
|
|
},
|
|
|
onShowToolsChatTab() {
|
|
|
this.showRecord = false;
|
|
|
- this.switchChatTabBox('tools', true)
|
|
|
+ this.switchChatTabBox('tools')
|
|
|
},
|
|
|
- switchChatTabBox(chatTabBox, hideKeyBoard) {
|
|
|
+ switchChatTabBox(chatTabBox) {
|
|
|
this.chatTabBox = chatTabBox;
|
|
|
- if (hideKeyBoard) {
|
|
|
- uni.hideKeyboard();
|
|
|
- this.showKeyBoard = false;
|
|
|
+ if (chatTabBox != 'tools' && this.$refs.fileUpload) {
|
|
|
+ this.$refs.fileUpload.hide()
|
|
|
}
|
|
|
},
|
|
|
selectEmoji(emoText) {
|
|
|
- this.sendText += `#${emoText};`;
|
|
|
- },
|
|
|
- onKeyboardheightchange(e) {
|
|
|
- if (e.detail.height > 0) {
|
|
|
- this.showKeyBoard = true;
|
|
|
- this.switchChatTabBox('none', false)
|
|
|
- this.keyboardHeight = this.rpxTopx(e.detail.height);
|
|
|
- this.scrollToBottom();
|
|
|
- } else {
|
|
|
- this.showKeyBoard = false;
|
|
|
- }
|
|
|
+ let path = this.$emo.textToPath(emoText)
|
|
|
+ // 先把键盘禁用了，否则会重新弹出键盘
|
|
|
+ this.isReadOnly = true;
|
|
|
+ this.isEmpty = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.editorCtx.insertImage({
|
|
|
+ src: path,
|
|
|
+ alt: emoText,
|
|
|
+ extClass: 'emoji-small',
|
|
|
+ nowrap: true,
|
|
|
+ complete: () => {
|
|
|
+ this.isReadOnly = false;
|
|
|
+ this.editorCtx.blur();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
},
|
|
|
onUploadImageBefore(file) {
|
|
|
let data = {
|
|
|
@@ -540,14 +566,22 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
onTextInput(e) {
|
|
|
- let idx = e.detail.cursor - 1;
|
|
|
- if (this.chat.type == 'GROUP' && e.detail.value[idx] == '@') {
|
|
|
- this.openAtBox();
|
|
|
- let sendText = e.detail.value.replace("@", '');
|
|
|
- this.$nextTick(() => {
|
|
|
- this.sendText = sendText;
|
|
|
- })
|
|
|
- }
|
|
|
+ this.isEmpty = e.detail.html == '<p><br></p>'
|
|
|
+ },
|
|
|
+ onEditorReady() {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query.select('#editor').context((res) => {
|
|
|
+ this.editorCtx = res.context
|
|
|
+ }).exec()
|
|
|
+ },
|
|
|
+ onEditorFocus(e) {
|
|
|
+ this.isFocus = true;
|
|
|
+ this.scrollToBottom()
|
|
|
+ this.switchChatTabBox('none')
|
|
|
+
|
|
|
+ },
|
|
|
+ onEditorBlur(e) {
|
|
|
+ this.isFocus = false;
|
|
|
},
|
|
|
loadReaded(fid) {
|
|
|
this.$http({
|
|
|
@@ -638,21 +672,27 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
- listenKeyBoardForH5() {
|
|
|
+ listenKeyBoard() {
|
|
|
+ // #ifdef H5
|
|
|
// 由于H5无法触发TextArea的@keyboardheightchange事件，所以通过
|
|
|
// 监听屏幕高度变化来实现键盘监听
|
|
|
let initHeight = window.innerHeight;
|
|
|
window.addEventListener('resize', () => {
|
|
|
let keyboardHeight = initHeight - window.innerHeight;
|
|
|
- if (keyboardHeight > 0) {
|
|
|
- this.keyboardHeight = keyboardHeight - 20;
|
|
|
- this.showKeyBoard = true;
|
|
|
- this.switchChatTabBox('none', false)
|
|
|
- this.scrollToBottom();
|
|
|
- } else {
|
|
|
- this.showKeyBoard = false;
|
|
|
+ this.isShowKeyBoard = keyboardHeight > 0;
|
|
|
+ if (this.isShowKeyBoard) {
|
|
|
+ this.keyboardHeight = keyboardHeight;
|
|
|
}
|
|
|
});
|
|
|
+ // #endif
|
|
|
+ // #ifndef H5
|
|
|
+ uni.onKeyboardHeightChange((res) => {
|
|
|
+ this.isShowKeyBoard = res.height > 0;
|
|
|
+ if (this.isShowKeyBoard) {
|
|
|
+ this.keyboardHeight = res.height; // 获取并保存键盘高度
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
},
|
|
|
generateId() {
|
|
|
// 生成临时id
|
|
|
@@ -705,10 +745,30 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
return atUsers;
|
|
|
+ },
|
|
|
+ chatMainHeight() {
|
|
|
+ const sysInfo = uni.getSystemInfoSync();
|
|
|
+ let h = sysInfo.windowHeight;
|
|
|
+ // 减去标题栏高度
|
|
|
+ h -= 50;
|
|
|
+ // #ifdef H5
|
|
|
+ // h5的sysInfo.windowHeight默认就已经减去键盘高度了
|
|
|
+ if (this.chatTabBox != 'none') {
|
|
|
+ h -= this.keyboardHeight;
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ // #ifndef H5
|
|
|
+ // 减去状态栏高度
|
|
|
+ h -= sysInfo.statusBarHeight;
|
|
|
+ if (this.isShowKeyBoard || this.chatTabBox != 'none') {
|
|
|
+ h -= this.keyboardHeight;
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ return h;
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- messageSize: function (newSize, oldSize) {
|
|
|
+ messageSize: function(newSize, oldSize) {
|
|
|
// 接收到消息时滚动到底部
|
|
|
if (newSize > oldSize) {
|
|
|
let pages = getCurrentPages();
|
|
|
@@ -730,10 +790,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
- // #ifdef H5
|
|
|
- this.isH5 = true;
|
|
|
- this.listenKeyBoardForH5();
|
|
|
- // #endif
|
|
|
// 聊天数据
|
|
|
this.chat = this.chatStore.chats[options.chatIdx];
|
|
|
// 初始状态只显示20条消息
|
|
|
@@ -752,6 +808,8 @@ export default {
|
|
|
this.chatStore.activeChat(options.chatIdx);
|
|
|
// 复位回执消息
|
|
|
this.isReceipt = false;
|
|
|
+ // 监听键盘高度
|
|
|
+ this.listenKeyBoard();
|
|
|
},
|
|
|
onShow() {
|
|
|
if (this.needScrollToBottom) {
|
|
|
@@ -765,9 +823,11 @@ export default {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.chat-box {
|
|
|
+ $icon-color: rgba(0, 0, 0, 0.88);
|
|
|
position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ background-color: #fafafa;
|
|
|
+
|
|
|
+
|
|
|
|
|
|
.header {
|
|
|
display: flex;
|
|
|
@@ -775,7 +835,7 @@ export default {
|
|
|
align-items: center;
|
|
|
height: 60rpx;
|
|
|
padding: 5px;
|
|
|
- background-color: #f9f9f9;
|
|
|
+ background-color: #fafafa;
|
|
|
line-height: 50px;
|
|
|
font-size: $im-font-size-large;
|
|
|
box-shadow: $im-box-shadow-lighter;
|
|
|
@@ -792,99 +852,118 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .chat-msg {
|
|
|
- flex: 1;
|
|
|
- padding: 0;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- background-color: white;
|
|
|
-
|
|
|
- .scroll-box {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .chat-at-bar {
|
|
|
+ .chat-main-box {
|
|
|
+ // #ifdef H5
|
|
|
+ top: $im-nav-bar-height;
|
|
|
+ // #endif
|
|
|
+ // #ifndef H5
|
|
|
+ top: calc($im-nav-bar-height + var(--status-bar-height));
|
|
|
+ // #endif
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 10rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ z-index: 9;
|
|
|
|
|
|
- .icon-at {
|
|
|
- font-size: $im-font-size-larger;
|
|
|
- color: $im-color-primary;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-at-scroll-box {
|
|
|
+ .chat-msg {
|
|
|
flex: 1;
|
|
|
- width: 80%;
|
|
|
-
|
|
|
- .chat-at-items {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 70rpx;
|
|
|
+ padding: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ background-color: white;
|
|
|
|
|
|
- .chat-at-item {
|
|
|
- padding: 0 3rpx;
|
|
|
- }
|
|
|
+ .scroll-box {
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
+ .chat-at-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 10rpx;
|
|
|
|
|
|
- $icon-color: rgba(0, 0, 0, 0.88);
|
|
|
+ .icon-at {
|
|
|
+ font-size: $im-font-size-larger;
|
|
|
+ color: $im-color-primary;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
- .send-bar {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 10rpx;
|
|
|
- //margin-bottom: 10rpx;
|
|
|
- border-top: $im-border solid 1px;
|
|
|
- background-color: $im-bg;
|
|
|
- height: 80rpx;
|
|
|
- //box-shadow: $im-box-shadow-lighter;
|
|
|
- z-index: 1;
|
|
|
+ .chat-at-scroll-box {
|
|
|
+ flex: 1;
|
|
|
+ width: 80%;
|
|
|
|
|
|
- .iconfont {
|
|
|
- font-size: 60rpx;
|
|
|
- margin: 0 10rpx;
|
|
|
- color: $icon-color;
|
|
|
- }
|
|
|
+ .chat-at-items {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 70rpx;
|
|
|
+
|
|
|
+ .chat-at-item {
|
|
|
+ padding: 0 3rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .chat-record {
|
|
|
- flex: 1;
|
|
|
}
|
|
|
|
|
|
- .send-text {
|
|
|
- flex: 1;
|
|
|
- overflow: auto;
|
|
|
- padding: 14rpx 20rpx;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 8rpx;
|
|
|
- font-size: $im-font-size;
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 0 10rpx;
|
|
|
|
|
|
- .send-text-area {
|
|
|
- width: 100%;
|
|
|
+
|
|
|
+ .send-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10rpx;
|
|
|
+ border-top: $im-border solid 1px;
|
|
|
+ background-color: $im-bg;
|
|
|
+ min-height: 80rpx;
|
|
|
+ margin-bottom: 14rpx;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 60rpx;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ color: $icon-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-record {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .send-text {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 14rpx 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: $im-font-size;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .send-text-area {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 40rpx;
|
|
|
+ max-height: 200rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .btn-send {
|
|
|
- margin: 5rpx;
|
|
|
+ .btn-send {
|
|
|
+ margin: 5rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.chat-tab-bar {
|
|
|
- height: 500rpx;
|
|
|
- padding: 20rpx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
background-color: $im-bg;
|
|
|
|
|
|
.chat-tools {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- padding-top: 20rpx;
|
|
|
+ align-items: top;
|
|
|
+ height: 310px;
|
|
|
+ padding: 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
.chat-tools-item {
|
|
|
width: 25%;
|
|
|
@@ -915,19 +994,20 @@ export default {
|
|
|
}
|
|
|
|
|
|
.chat-emotion {
|
|
|
- height: 100%;
|
|
|
+ height: 310px;
|
|
|
+ padding: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
.emotion-item-list {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
+ align-content: center;
|
|
|
|
|
|
.emotion-item {
|
|
|
- width: 34px;
|
|
|
- height: 34px;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
- padding: 6px;
|
|
|
+ padding: 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
xsx