onecric_h5/pages/Live/compontent/screen-chat.vue

<!-- 聊天 -->
<template>
	<view class="chat" @click.stop="">
		<div class="message-box">
			<div class="flex">
				<div class="msgLi bg2" v-if="roomInfo.title">
					{{ roomInfo.title }}
				</div>
			</div>
			<div class="flex">
				<view class="msgLi" style="color: rgb(220, 60, 35);">
					{{system.live_notice}}
				</view>
			</div>
			<view class="flex" v-for="(item,index) in messageList1" :key="index" :id="`view${index}`">
				<div class="msgLi">
					<div class="flex">
						{{item.nick}}：
						<div class="msg" v-html="getText(item.normal.text)"></div>
					</div>
				</div>
			</view>
		</div>
		<div class="detail-input" @click="inputShowFun">
			<div class="box flex">
				{{ $t('live.enter') }}
				<image class="emoji-btn" src="/static/image/live/live-6.png" mode="">
        </image>
			</div>
		</div>
		<view class="detail-input fiexd" v-if="inputShow">
			<view class="box flex">
        <view class="detail-input-i flex">
          <input type="text" :focus="focusAuto" v-model="content" @focus="focus" @keydown.enter="setMessage" value="" :placeholder="$t('live.enter')" />
        </view>
        <image class="emoji-btn" src="/static/image/live/live-6.png" mode="" @click="emoji = !emoji">
        </image>
				<image class="send" @click="setMessage" src="/static/image/send.svg" mode="">
				</image>
			</view>
			<view class="TUI-Emoji" v-if="emoji">
				<view v-for="(item, index) in emojiList" :key="index" class="TUI-emoji-image">
					<image :data-name="item.emojiName" class="emoji-image" :src="item.url" @tap="handleEnterEmoji">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		emojiName,
		emojiUrl,
		emojiMap
	} from '@/config/emojiMap';
import bus from '@/utils/bus'
	export default {
		props: ['roomInfo', 'messageList'],
		data() {
			return {
				eyes: false,
				emoji: false,
				show: false,
				tips: 'get code', //验证码倒计时
				type: 1,
				scrollTop: 0,
				emojiList: [],
				mask: {
					background: 'rgba(0, 0, 0, 0.1)'
				},
				figtIndex: null,
				content: '',
				current: 0,
				list: [{
						cate_name: '礼物'
					}
					// , {
					// 	cate_name: '礼包'
					// }
				],
				countryCode: [], //区号
				tournamentList: [],
				inputShow: false,
				focusAuto: false
			}

		},
		beforeMount() {
			for (let i = 0; i < emojiName.length; i++) {
				this.emojiList.push({
					emojiName: emojiName[i],
					url: emojiUrl + emojiMap[emojiName[i]]
				});
			}
		},
		computed: {
			system() {
				return this.$store.state.system
			},
			isLogin() {
				return this.$store.state.isLogin
			},
			infos() {
				return this.$store.state.info
			},
			eyes1() {
				return this.$store.state.eyes1
			},
			messageList1() {
				return this.messageList.filter(item => {
					return item.type != 102
				})
			}
		},
		methods: {
			/* 输入框获取焦点 如果打开了表情框需关闭 */
			focus() {
				if (this.emoji) {
					this.emoji = false
				}
			},

			handleEnterEmoji(event) {
				this.content += event.currentTarget.dataset.name;
				// console.log(event.currentTarget.dataset.name);
				// this.$emit('enterEmoji', {
				// 	detail: {
				// 		message: event.currentTarget.dataset.name
				// 	}
				// });
			},
			// 收到的消息
			scrollToButtom() {
				let that = this;
				const query = uni.createSelectorQuery().in(this);
				let nodesRef = query.select('#message-scroll');
				nodesRef.boundingClientRect(res => {
						if (res) {
							that.scrollTop = res.height;
						}
					})
					.exec();
			},
			// 发送消息
			setMessage() {
				if (!this.content.trim()) return
				if (JSON.stringify(this.infos) == '{}') {
					// return this.$toUrl('/pages/login/index')
				}
				let msg = {
					type: 105,
					normal: {
						isXCBarrage: 0, //是否是气泡 barrageIndex
						xcBarrageUrl: '', //气泡的图片路径
						xcBarrageType: '', //图片路径
						text: this.content,
						exp_icon: this.infos.exp_icon,
						is_guard: this.infos.is_guard,
						is_room: this.infos.id == this.roomInfo.id ? 1 : 0,
						guard_icon: this.infos.is_guard == 1 ? this.infos.guard.icon : ''
					}
				}
				let to = JSON.stringify(this.roomInfo.id)
				const message = uni.$TUIKit.createCustomMessage({
					to,
					conversationType: 'GROUP',
					payload: {
						data: JSON.stringify(msg)
					}
				});
				this.$sendTIMMessage(message);
			},
			$sendTIMMessage(message) {
				let that = this;
				const SDKAppID = getApp().globalData.SDKAppID;
				uni.$TUIKit.sendMessage(message).then((res) => {
					let arr = {
						data: [res.data.message]
					}
					bus.$emit('onMessageReceived', arr)
					that.content = '';
					uni.$aegis.reportEvent({
						name: 'sendMessage',
						ext1: 'sendMessage-success',
						ext2: 'uniTuikitExternal',
						ext3: `${SDKAppID}`,
					})
				}).catch((error) => {
					console.log(error);
					uni.$aegis.reportEvent({
						name: 'sendMessage',
						ext1: `sendMessage-failed#error: ${error}`,
						ext2: 'uniTuikitExternal',
						ext3: `${SDKAppID}`,
					})
				})
				// this.setData({
				// 	displayFlag: ''
				// });
			},
			getText(str) {
				// let str = 'jfkdsj[咒骂]dsjfkljsa[憨笑]哈哈哈，[惊恐]'
				let exp = /\[(.*?)\]/g; //匹配[*] 大括号里面任意内容的正则
				let arr = str.match(exp); //字符串匹配出来的数组
				// console.log(arr);
				if (!arr) return str;

				this.emojiList.forEach((item1, index) => {
					arr.map(item => {
						// console.log(item1);
						if (item1.emojiName === item) {
							str = str.replace(item,
								`<img src='${item1.url}' style="width:20px;height:20px">`
							);
						}
						// console.log(item);
						// let key = `p${item.substr(1, item.length - 2)}`;  //记录大括号里的值 用作id 方便取值
						// if (!this.salaryVars.hasOwnProperty(key)) this.$set(this.salaryVars, key, '');
					}); //循环遍历
				})
				// let arrNum = 取出所有正则匹配值并转换为input

				// console.log(str);
				return str;
			},
			inputShowFun() {
				if (this.$store.state.isLogin != 1) {
					this.$toUrl('/pages/login/login')
					return
				}
				this.inputShow = true
				this.$nextTick(() => {
					this.focusAuto = true
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.TUI-Emoji {
  	background-color: #F5F5F5;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		height: 480rpx;
		overflow-y: scroll;
    border-radius: 10rpx;
	}

	.TUI-emoji-image {
		width: 30px;
		height: 30px;
		margin: 10px;
	}

	.emoji-image {
		width: 100%;
		height: 100%;
	}

	.btn1 {
		color: #fff;
		height: 58rpx;
		width: 160rpx;
		line-height: 58rpx;
		text-align: center;
		border-radius: 100rpx;
		background: #DC3C23;
	}


	.chat {
    flex: 1;
    min-width: 10%;
    max-width: 80%;
		position: relative;
    margin-left: 26rpx;
	}
	.detail-input {
    color: #000;
    position: relative;
		background-color: #F5F5F5;
		padding: 0 12px;
		border-radius: 20px;
		.box {
			justify-content: space-between;
			flex: 1;
			height: 34px;
			font-size: 14px;
			color: #999999;
			
		}
		.detail-input-i {
			flex: 1;
			font-size: 14px;
			input {
				flex: 1;
        height: 34px;
			}
		}
		.emoji-btn {
			width: 27px;
			height: 27px;
      margin-left: 26rpx;
		}
		.send {
			width: 25px;
			height: 25px;
      margin-left: 26rpx;
		}
	}
	.fiexd {
		position: fixed !important;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
	}
	.message-box {
		position: fixed;
		left: 0;
		width: 90%;
		max-width: 450px;
		bottom: 40px;
		max-height: 50vh;
		overflow-y: auto;
		.msgLi {
			max-width: 100%;
			color: #fff;
			font-size: 12px;
			margin-top: 4.5px;
			line-height: 18px;
			padding: 5px 11px;
			border-radius: 14px;
			background-color: rgba(0, 0, 0, .5);
			&.bg2 {
				background-color: rgba(0, 5, 70, 0.6);
			}
			.msg {
				flex: 1;
				min-width: 10%;
				max-width: 100%;
			}
		}
	}
</style>