rtim/pages_im/pages/conversation/chating/components/ChatingFooter/index.vue

<template>
	
	<view class="chating_footer" :style="{ paddingBottom: keyboardHeight + 'px' }">
		<view class="forbidden_footer" v-if="getPlaceholder.length > 0">
		<image style="margin-right: 8rpx;width:50rpx" src="/static/images/forbidden_footer.png" mode="aspectFit" />
			<text>{{ getPlaceholder }}</text>
		</view>
		
		<view v-if="getPlaceholder.length <= 0" :style="{ 'pointer-events': getPlaceholder ? 'none' : 'auto' }">
			<view class="chat_footer">
				<image v-if="showRecord"
					@click="updateRecordBtn"
					class="footer_icon_left"
					src="/pages_im/static/images/chating_footer_audio_recording.png" />
                <image v-else
                	@click="updateRecordBtn"
                	class="footer_icon_left"
                	src="/pages_im/static/images/chating_footer_audio.png" />

				<view class="input_content">
					<CustomEditor 
						:placeholder="getPlaceholder"
						v-if="!showRecord"
						class="custom_editor"
						ref="customEditor"
						@ready="editorReady"
						@focus="editorFocus"  
						@blur="editorBlur"
						@input="editorInput"
						@tryAt="showAtPanel"/>

					<view v-if="storeQuoteMessage" class="quote_message">
						<view class="content">
							<u-parse :content="getQuotedContent" />
						</view>
						<image @click="cancelQuote" style="width: 16px; height: 16px" src="/pages_im/static/images/chating_footer_quote_close.png" alt="" />
					</view>
					
					<view class="record_btn" ref="recordBtn" @touchstart="recordStartTouch" @longpress="longpressRecord" @touchmove="touchMoveSpeech" @touchend="endRecord" v-if="showRecord">
						<text class="record_text">{{ recording ? '松手发送' : '按住说话' }}</text>
					</view>
				</view>
				<view class="footer_action_area">
					<image @click.prevent="updateEmojiBar" class="footer_icon_right" src="/pages_im/static/images/chating_footer_emoji.png" alt="" /> 
					
					<image v-if="!hasContent" @click.prevent="updateActionBar" class="footer_icon_right" style="margin-right: 0;" src="/pages_im/static/images/chating_footer_add.png" alt="" />
					
					<view class="btnSend" v-if="hasContent" @touchend.prevent="sendTextMessage">
						<text class="btnSend_text">发送</text>
					</view>
				</view>
			</view>

			<view class="panel-container" :style="{ height: (actionBarVisible || emojiBarVisible) ? panelHeight+'rpx' : '0px' }">
				<chating-action-bar @sendMessage="sendMessage" @prepareMediaMessage="prepareMediaMessage" @enterSubPage="$emit('enterSubPage')" v-if="actionBarVisible" />
				<chating-emoji-bar @insertEmoji="emojiClick" @backspace="backspace" v-if="emojiBarVisible" />
			</view>
			
			<u-action-sheet
				:safeAreaInsetBottom="true"
				round="12"
				:actions="actionSheetMenu"
				@select="selectClick"
				:closeOnClickOverlay="true"
				:closeOnClickAction="true"
				:show="showActionSheet"
				@close="showActionSheet = false"></u-action-sheet>
			<record-overlay @recordFinish="recordFinish" ref="recordOverlayRef" :visible="recording" />
		</view>
	</view>

</template>

<script>
import { mapGetters, mapActions } from 'vuex';
// import { formatInputHtml, getPurePath, html2Text } from '../../../../../util/common';
import { parseMessageByType, getIMSDK} from '../../../../../util/imCommon';
import { ChatingFooterActionTypes, UpdateMessageTypes, GroupMemberListTypes, PageEvents } from '../../../../../constant';
import IMSDK, { GroupMemberRole, GroupStatus, IMMethods, MessageStatus, MessageType, SessionType } from 'openim-uniapp-polyfill';
import UParse from '../../../../../components/gaoyia-parse/parse.vue';
import CustomEditor from './CustomEditor.vue';
import ChatingActionBar from './ChatingActionBar.vue';
import ChatingEmojiBar from './ChatingEmojiBar.vue';
import RecordOverlay from './RecordOverlay.vue';
import { gotoAppPermissionSetting, requestAndroidPermission, judgeIosPermission } from '../../../../../util/permission';

const needClearTypes = [
	MessageType.TextMessage,
	MessageType.AtTextMessage,
	MessageType.QuoteMessage
];

export default {
	components: {
		CustomEditor,
		ChatingActionBar,
		ChatingEmojiBar,
		UParse,
		RecordOverlay
	},
	props: {
		footerOutsideFlag: Number
	},
	data() {
		return {
			customEditorCtx: null,
			inputHtml: '',
			showRecord: false,
			actionBarVisible: false,
			emojiBarVisible: false,
			isInputFocus: false,
			actionSheetMenu: [],
			showActionSheet: false,
			recording: false,
			startPageY: 0,
			recordTop: 0,
			conversationID: null,
			isJoinGroup: true,
			isSending: false,
			keyboardHeight: 0,
			panelHeight:0,
		};
	},
	computed: {
		...mapGetters(['storeQuoteMessage', 'storeCurrentConversation', 'storeCurrentGroup', 'storeCurrentMemberInGroup', 'storeBlackList', 'storeRevokeMap','timStore', 'storeCurrentUserID']),
		getQuotedContent() {
			if (!this.storeQuoteMessage) {
				return '';
			}
			return '';
			return `回复${parseMessageByType(this.storeQuoteMessage, this.storeCurrentUserID)}`;
		},
		hasContent() {
			return this.html2Text(this.inputHtml) !== '';
		},
		isNomal() {
			return this.storeCurrentMemberInGroup?.roleLevel === GroupMemberRole.Nomal;
		},
		getPlaceholder() {
			if (!this.storeCurrentConversation?.conversationID) return '';
			const isSingle = this.storeCurrentConversation.conversationType === SessionType.Single;
			if (!isSingle && this.storeCurrentGroup?.status === GroupStatus.Muted) {
				return !this.isNomal ? '' : '群主或管理员已开启全体禁言';
			}
			if (!isSingle && !this.isJoinGroup) {
				return '您已不在该群组';
			}
			if (!isSingle && this.storeCurrentMemberInGroup?.muteEndTime > Date.now()) {
				return `您已被管理员或群主禁言！`;
			}
			if (isSingle && this.storeBlackList?.find((black) => black.userID === this.storeCurrentConversation.userID)) {
				return '对方已被拉入黑名单';
			}
			return '';
		},
		imType() {
			return this.timStore?.imType ?? '' ;
		},
		orderId() {
			return this.timStore?.orderId ?? '' ;
		},
		orderType() {
			return this.timStore?.orderType ?? '' ;
		},
	},
	watch: {
		footerOutsideFlag(newVal) {
			this.onClickActionBarOutside();
			this.onClickEmojiBarOutside();
		}
	},
	mounted() {
		this.setIMListener();
		this.setKeyboardListener();
		if (this.storeCurrentConversation?.groupID) {
			IMSDK.asyncApi(IMSDK.IMMethods.IsJoinGroup, IMSDK.uuid(), this.storeCurrentConversation.groupID).then((res) => {
				this.isJoinGroup = res.data;
			});
		}
		this.conversationID = this.storeCurrentConversation?.conversationID;
		if (this.storeCurrentConversation?.draftText) {
			this.parseDraftText(this.storeCurrentConversation.draftText);
		}
		
		if (this.conversationID) {
			IMSDK.asyncApi(IMMethods.SetConversationDraft, IMSDK.uuid(), {
				conversationID: this.conversationID,
				draftText: ''
			});
		}
		this.panelHeight=this.$companyUserIsLogin()?550:380;
		uni.$on(PageEvents.ReEditMessage, this.setReEditMessage);
	    uni.$on("sendIM", this.sendPackageImMsg);
		uni.$on("sendIMCts", this.sendCtsImMsg);
	},
	beforeDestroy() {
		this.disposeIMListener();
		this.disposeKeyboardListener();
		if (this.inputHtml && this.inputHtml.trim()) {
			IMSDK.asyncApi(IMMethods.SetConversationDraft, IMSDK.uuid(), {
				conversationID: this.conversationID,
				draftText: this.html2Text(this.inputHtml)
			});
		}
		uni.$off("sendIM", this.sendPackageImMsg);
		uni.$off("sendIMCts", this.sendCtsImMsg);
	},
	methods: {
		...mapActions('message', ['pushNewMessage', 'updateOneMessage', 'updateQuoteMessageRevoke']),
		setReEditMessage(id) {
			this.customEditorCtx.clear();
			setTimeout(() => {
				this.$refs.customEditor.insertEmoji(this.storeRevokeMap[id].text);
				this.$store.commit('message/SET_QUOTE_MESSAGE', this.storeRevokeMap[id].quoteMessage);
			}, 50);
		},
		parseDraftText(draftText) {
			if (!draftText) return;
			let currentText = '';
			for (let i = 0; i < draftText.length; i++) {
				const currentChar = draftText[i];
				if (currentChar === '<') {
					if (currentText) {
						const text = currentText;
						setTimeout(() => {
							this.$refs.customEditor.insertEmoji(text);
						}, 100);
						currentText = '';
					}
					const imgEndIndex = draftText.indexOf('>', i);
					if (imgEndIndex !== -1) {
						const imgTag = draftText.substring(i, imgEndIndex + 1);

						if (imgTag.includes('class="at_el"')) {
							const customDataReg = /data-custom=".+"/;
							const atInfoArr = imgTag.match(customDataReg)[0].slice(13, -1).split('&amp;');
							this.$refs.customEditor.createCanvasData(atInfoArr[0].slice(7), atInfoArr[1].slice(15));
						}
						i = imgEndIndex;
					}
				} else {
					currentText += currentChar;
				}
			}
			if (currentText) {
				setTimeout(() => {
					this.$refs.customEditor.insertEmoji(currentText);
				}, 700);
			}
		},
		recordStartTouch(e) {
			if (e.touches && e.touches.length > 0) {
				this.startPageY = e.touches[0].pageY;
			}
		},
		longpressRecord() {
			this.recording = true;
			this.recordTop = this.startPageY - 50;
		},
		touchMoveSpeech(e) {
			uni.$u.throttle(this.$refs.recordOverlayRef.touchMoveSpeech(e, this.recordTop), 250);
		},
		endRecord() {
			this.recording = false;
			this.$refs.recordOverlayRef.checkStopType();
		},
		async recordFinish(path, duration) {
			const message = await IMSDK.asyncApi(IMMethods.CreateSoundMessageFromFullPath, IMSDK.uuid(), {
				soundPath: this.getPurePath(path),
				duration
			});
			this.sendMessage(message);
		},

		async createTextMessage() {
			let message = '';
			const { text, atUsersInfo } = this.formatInputHtml(this.inputHtml);
			if (atUsersInfo.length === 0) {
				if (this.storeQuoteMessage) {
					message = await IMSDK.asyncApi(IMMethods.CreateQuoteMessage, IMSDK.uuid(), {
						text,
						message: this.storeQuoteMessage
					});
				} else {
					message = await IMSDK.asyncApi(IMMethods.CreateTextMessage, IMSDK.uuid(), text);
					
				}
			} else {
				const quoteMessage = this.storeQuoteMessage ? this.storeQuoteMessage : '';
				message = await IMSDK.asyncApi(IMMethods.CreateTextAtMessage, IMSDK.uuid(), {
					text,
					atUserIDList: atUsersInfo.map((item) => item.atUserID),
					atUsersInfo,
					message: quoteMessage
				});
			}
			return message;
		},
		async sendTextMessage() {
			if (!this.hasContent) return;
			IMSDK.asyncApi('changeInputStates', IMSDK.uuid(), {
				conversationID: this.storeCurrentConversation.conversationID,
				focus: false
			});
			
			 try {
			      this.isSending = true;
			      const message = await this.createTextMessage();
			      await this.sendMessage(message);
			    } catch (error) {
					  console.error('发送消息失败:', error);
					  uni.showToast({
						 title: '发送失败',
						 icon: 'none'
					  });
			    } finally {
			        this.isSending = false;
			  }
		},
		async sendCtsPackageMessage(item){
			let payloadJson={
				payload:{
					 data:"package", 
					 extension:{
						packageId:item.packageId,
						title:item.packageName,
						companyId:item.companyId,
						companyUserId:item.companyUserId,
						image:item.imgUrl
					 }
		         }
			};
			let message = await IMSDK.asyncApi(IMMethods.CreateCustomMessage, IMSDK.uuid(), {
				data: JSON.stringify(payloadJson),
				extension: '',
				description: 'package'
			});
			this.sendMessage(message);
		},
		sendPackageImMsg(item){
			console.log("qxj package:"+item.packageId);
			this.sendCtsPackageMessage(item);
		},
		
		async sendCtsMessage(item){
			 let payloadJson={};
			 if(item.type=="couponPackage"){
			     payloadJson={
			     	payload:{
			     		 data:item.type, 
			     		 extension:{
			     			couponId:item.couponId,
			     			title:item.title,
			     			price:item.price,
			     			minPrice:item.minPrice,
			     			limitTime:item.limitTime,
			     			companyId:item.companyId,
			     			companyUserId:item.companyUserId,
			     		 }
			          }
			     };
			 
			 }
			 if(item.type=="inquirySelect"){
			     payloadJson={
			     	payload:{
			     		 data:item.type, 
			     		 extension:{
			     			packageId:item.packageId,
			     			title:item.lable,
			     			type:item.value,
			     			companyId:item.companyId,
			     			companyUserId:item.companyUserId,
			     		 }
			          }
			     };
			 }
			let message = await IMSDK.asyncApi(IMMethods.CreateCustomMessage, IMSDK.uuid(), {
				 data: JSON.stringify(payloadJson),
				 extension: '',
				 description: item.type
			});
			this.sendMessage(message);
		},
		sendCtsImMsg(item){
			this.sendCtsMessage(item);
		},
		
		sendMessage(message) {
			var customerData={
			  	type:this.timStore?.type,
			  	imType:this.timStore?.imType,
			  	orderId:this.timStore?.orderId,
			  	followId:this.timStore?.followId,
			  	orderType:this.timStore?.orderType
			}
			let userId=this.storeCurrentConversation.userID;
			if(userId!=undefined  && (userId!="" || userId.length>0)){
				if(userId.indexOf('D')!==-1){
					message.ex=JSON.stringify(customerData);
				}
			}
			this.pushNewMessage(message);
			if (needClearTypes.includes(message.contentType)) {
				this.customEditorCtx.clear();
			}
			let offlinePushInfo={
				title:message.senderNickname,
				desc:"",
				desc: parseMessageByType(message, this.storeCurrentUserID),
				ex: "",
				iOSPushSound: "",
				iOSBadgeCount: true
			};
			
			this.$emit('scrollToBottom');
			IMSDK.asyncApi(IMMethods.SendMessage, IMSDK.uuid(), {
				recvID: this.storeCurrentConversation.userID,
				groupID: this.storeCurrentConversation.groupID,
				message,
				offlinePushInfo
			}).then(({ data }) => {
					this.updateOneMessage({
						message: data,
						isSuccess: true
					});
                    this.$nextTick(() => {
                        this.$emit('scrollToBottom');
                    });
				}).catch(({ data, errCode, errMsg }) => {
					this.updateOneMessage({
						message: data,
						type: UpdateMessageTypes.KeyWords,
						keyWords: [
							{
								key: 'status',
								value: MessageStatus.Failed
							},
							{
								key: 'errCode',
								value: errCode
							}
						]
					});
				});
			if (this.storeQuoteMessage) {
				this.$store.commit('message/SET_QUOTE_MESSAGE', undefined);
			}
		},
		cancelQuote() {
			this.$store.commit('message/SET_QUOTE_MESSAGE', undefined);
		},
		onClickActionBarOutside() {
			if (this.actionBarVisible) {
				this.actionBarVisible = false;
			}
		},
		onClickEmojiBarOutside() {
			if (this.emojiBarVisible) {
				this.emojiBarVisible = false;
			}
		},
		updateActionBar() {
			if (this.recording) {
				return;
			}
			if (this.showRecord) {
				this.showRecord = false;
			}
			
			// Toggle logic: if already visible, close it. If not, open it and close others.
			if (this.actionBarVisible) {
				this.actionBarVisible = false;
			} else {
				this.emojiBarVisible = false;
				this.actionBarVisible = true;
				if (this.keyboardHeight > 0) {
					uni.hideKeyboard();
				}
			}
		},
		updateEmojiBar() {
			if (this.recording) {
				return;
			}
			if (this.showRecord) {
				this.showRecord = false;
			}
			
			// Toggle logic
			if (this.emojiBarVisible) {
				this.emojiBarVisible = false;
			} else {
				this.actionBarVisible = false;
				this.emojiBarVisible = true;
				if (this.keyboardHeight > 0) {
					uni.hideKeyboard();
				}
			}
		},
		editorReady(e) {
			console.log("qxj editorReady");
			this.customEditorCtx = e.context;
			this.customEditorCtx.clear();
		},
		editorFocus() {
			//console.log("qxj editorFocus");
			this.isInputFocus = true;
			this.$emit('scrollToBottom');
			this.actionBarVisible = false;
			this.emojiBarVisible = false;
		},
		editorBlur() {
			//console.log("qxj editorBlur");
			this.isInputFocus = false;
		},
		editorInput(e) {
			//console.log("qxj editorInput");
			this.inputHtml = e.detail.html;
			uni.$u.throttle(this.updateTyping, 2000);
		},
		showAtPanel() {
			if (!this.$store.getters.storeCurrentConversation.groupID) return;
			uni.$u.route('/pages_im/pages/conversation/groupMemberList/index', {
				type: GroupMemberListTypes.ChooseAt,
				groupID: this.$store.getters.storeCurrentConversation.groupID
			});
		},
		backspace() {
			this.customEditorCtx.undo();
		},
		updateRecordBtn() {
			if (this.recording) {
				return;
			}
			if (!this.showRecord) {
				this.checkRecordPermission();
			}
			
			// Close panels if open
			this.emojiBarVisible = false;
			this.actionBarVisible = false;
			
			this.showRecord = !this.showRecord;
			if (this.showRecord) {
				if (this.keyboardHeight > 0) {
					uni.hideKeyboard();
				}
			} else {
				// Focus editor when switching back to text
				// this.$refs.editor?.focus(); 
				// nvue editor focus is tricky, usually requires user tap or specific method
			}
		},
		async checkRecordPermission() {
			if (uni.$u.os() === 'ios') {
				const iosFlag = judgeIosPermission('record');
				if (iosFlag === 0) {
					uni.$u.toast('您已禁止访问麦克风，请前往开启');
					setTimeout(() => gotoAppPermissionSetting(), 250);
				}
				if (iosFlag === -1) {
					let recorderManager = uni.getRecorderManager();
					recorderManager.onStop(() => (recorderManager = null));
					recorderManager.start();
					setTimeout(() => recorderManager.stop());
				}
			} else {
				const androidFlag = await requestAndroidPermission('android.permission.RECORD_AUDIO');
				if (androidFlag === -1) {
					uni.$u.toast('您已禁止访问麦克风，请前往开启');
					setTimeout(() => gotoAppPermissionSetting(), 250);
				}
			}
		},
		prepareMediaMessage(data) {
			this.selectClick(data);
		},
		updateTyping() {
			if (this.storeCurrentConversation?.conversationType === SessionType.Single) {
				IMSDK.asyncApi('changeInputStates', IMSDK.uuid(), {
					conversationID: this.storeCurrentConversation.conversationID,
					focus: true
				});
			}
		},
 
		emojiClick(emoji) {
			this.$refs.customEditor.insertEmoji(emoji);
		},
		batchCreateImageMesage(paths) {
			paths.forEach(async (path) => {
				const message = await IMSDK.asyncApi(IMMethods.CreateImageMessageFromFullPath, IMSDK.uuid(), this.getPurePath(path));
				this.sendMessage(message);
			});
		},
		selectClick(data) {
			if (data.index === 0) {
				if (data.type === ChatingFooterActionTypes.Album) {
					this.chooseOrShotImage(['album']).then((paths) => this.batchCreateImageMesage(paths));
				} else {
					this.chooseOrShotImage(['camera']).then((paths) => this.batchCreateImageMesage(paths));
				}
			} 
			else {
				const whenGetFile = (data) => {
					const purePath = this.getPurePath(data.path);
					IMSDK.getVideoCover(purePath).then(async ({ path }) => {
						// console.log(this.getPurePath(path));
						const message = await IMSDK.asyncApi(IMMethods.CreateVideoMessageFromFullPath, IMSDK.uuid(), {
							videoPath: purePath,
							videoType: data.videoType,
							duration: Number(data.duration.toFixed()),
							snapshotPath: this.getPurePath(path)
						});
						this.sendMessage(message);
					});
				};
				if (data.type === ChatingFooterActionTypes.Album) {
					this.chooseOrShotVideo(['album']).then(whenGetFile);
				} else {
					this.chooseOrShotVideo(['camera']).then(whenGetFile);
				}
			}
		},
		chooseOrShotImage(sourceType) {
			return new Promise((resolve, reject) => {
				uni.chooseImage({
					count: 9,
					sizeType: ['compressed'],
					sourceType,
					success: function ({ tempFilePaths }) {
						resolve(tempFilePaths);
					},
					fail: function (err) {
						console.log(err);
						reject(err);
					}
				});
			});
		},
		chooseOrShotVideo(sourceType) {
			return new Promise((resolve, reject) => {
				uni.chooseVideo({
					compressed: true,
					sourceType,
					extension: ['mp4'],
					success: function ({ tempFilePath, duration }) {
						const idx = tempFilePath.lastIndexOf('.');
						const videoType = tempFilePath.slice(idx + 1);
						if (tempFilePath.includes('_doc/')) {
							tempFilePath = `file://${plus.io.convertLocalFileSystemURL(tempFilePath)}`;
						}
						// console.log(tempFilePath);
						resolve({
							path: tempFilePath,
							videoType,
							duration
						});
					},
					fail: function (err) {
						console.log(err);
						reject(err);
					}
				});
			});
		},
		insertAt(userID, nickname) {
			const { atUsersInfo } = this.formatInputHtml(this.inputHtml);
			if (atUsersInfo.find((item) => item.atUserID === userID)) {
				return;
			}
			this.$refs.customEditor.createCanvasData(userID, nickname);
		},

		sendProgressHandler({ data: { progress, message } }) {
			this.updateOneMessage({
				message,
				type: UpdateMessageTypes.KeyWords,
				keyWords: {
					key: 'uploadProgress',
					value: progress
				}
			});
		},
		joinedGroupChangeHandler({ data }) {
			if (data.groupID === this.storeCurrentConversation.groupID) {
				IMSDK.asyncApi(IMMethods.IsJoinGroup, IMSDK.uuid(), data.groupID).then((res) => {
					this.isJoinGroup = res.data;
				});
			}
		},
		setIMListener() {
			IMSDK.subscribe("SendMessageProgress", this.sendProgressHandler);
			uni.$on(IMSDK.IMEvents.OnJoinedGroupDeleted, this.joinedGroupChangeHandler);
			uni.$on(IMSDK.IMEvents.OnJoinedGroupAdded, this.joinedGroupChangeHandler);
		},
		disposeIMListener() {
			IMSDK.unsubscribe("SendMessageProgress", this.sendProgressHandler);
			uni.$off(IMSDK.IMEvents.OnJoinedGroupDeleted, this.joinedGroupChangeHandler);
			uni.$off(IMSDK.IMEvents.OnJoinedGroupAdded, this.joinedGroupChangeHandler);
		},
        keyboardChangeHander({ height }) {
			this.keyboardHeight = height;
        	if (height > 0) {
        		if (this.emojiBarVisible) {
        			this.emojiBarVisible = false;
        		}
        		if (this.actionBarVisible) {
        			this.actionBarVisible = false;
        		}
				this.$emit('scrollToBottom');
        	}
        },
		setKeyboardListener() {
			// #ifdef APP-NVUE
			uni.onKeyboardHeightChange(this.keyboardChangeHander);
			// #endif
		},
		disposeKeyboardListener() {
			// #ifdef APP-NVUE
			uni.offKeyboardHeightChange(this.keyboardChangeHander);
			// #endif
		},
		html2Text(html){
			  if (!html) {
				return "";
			  }
			  return html
				.replace(/<\/p><p>/g, "\n")
				.replace(/\&nbsp;/g, " ")
				.replace(/<p>/g, "")
				.replace(/<\/p>/g, "")
				.replace(/<br>/g, "")
				.trim();
		},
		getPurePath(path){
			  const prefix = "file://";
			  const relativeRrefix = "_doc/";
			  if (path.includes(prefix)) {
				path = path.replace(prefix, "");
			  }
			  if (path.includes(relativeRrefix)) {
				path = plus.io.convertLocalFileSystemURL(path);
			  }
			  return path;
		},
		formatInputHtml(html){
		  let atUsersInfo = [];
		  let text = this.html2Text(html);
		  const imgReg = new RegExp("(i?)(<img)([^>]+>)", "gmi");
		  const customDataReg = /data-custom=".+"/;
		  text = text.replace(imgReg, (img) => {
		    if (img.includes('class="at_el"')) {
		      const atInfoArr = img
		        .match(customDataReg)[0]
		        .slice(13, -1)
		        .split("&amp;");
		      atUsersInfo.push({
		        atUserID: atInfoArr[0].slice(7),
		        groupNickname: atInfoArr[1].slice(15),
		      });
		      return `@${atInfoArr[0].slice(7)} `;
		    }
		    if (img.includes('class="emoji_el"')) {
		      return img.match(customDataReg)[0].slice(23, -1);
		    }
		    return "";
		  });
		  return {
		    text,
		    atUsersInfo,
		  };
		}
	}
};
</script>

<style lang="scss" scoped>
.chating_footer {
    background-color: #f0f2f6;
}

.custom_editor {
    flex: 1;
}

.forbidden_footer {
    width: 750rpx;
    height: 112rpx;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #f0f2f6;
}

.chat_footer {
    flex-direction: row;
    align-items: flex-end; 
    background-color: #f0f2f6;
    padding: 16rpx 20rpx;
}

.input_content {
    flex: 1;
    margin-left: 20rpx;
    margin-right: 20rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    min-height: 72rpx;
    /* padding: 10rpx; 移除了 padding，让 editor 占满点击区域 */
}

.record_btn {
    background-color: #ffffff;
    height: 72rpx;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
}

.record_text {
	font-size: 30rpx;
	color: #333333;
	font-weight: bold;
}

.quote_message {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 12rpx;
    padding: 8rpx;
    background-color: #f5f5f5;
    border-radius: 6rpx;
}

.quote_content {
    flex: 1;
    lines: 2;
    text-overflow: ellipsis;
    font-size: 24rpx;
    color: #666666;
}

.footer_action_area {
    flex-direction: row;
    align-items: center;
    height: 72rpx; 
}

.footer_icon_left {
	width: 56rpx;
	height: 56rpx;
	margin-bottom: 8rpx;
}

.footer_icon_right {
	width: 56rpx;
	height: 56rpx;
	margin-right: 20rpx;
}

.btnSend {
    width: 110rpx;
    height: 64rpx;
    background-color: #1ab84d;
    border-radius: 8rpx;
    justify-content: center;
    align-items: center;
}

.btnSend_text {
	color: #fff;
	font-size: 28rpx;
}

.panel-container {
	width: 750rpx;
	background-color: #f0f2f6;
	overflow: hidden;
}
</style>