jiaoyi-uni2/奥莱优品/pages/service/chat.vue

<template>
	<view class="content">
		<!-- <view class="send-load" v-if="msgData.flag">数据加载中...</view> -->
		<view class="send-load" v-if="msgData.isSend">发送中...</view>
		<view class="chat-content" @touchmove="touchmove">
			<scroll-view class="chat-body" scroll-y scroll-with-animation :scroll-top="scrollTop" scroll-with-animation @scroll="scroll" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" upper-threshold="80" :scroll-into-view="scrollIntoViewId" refresher-background="transparent">
				<!-- <view class="msgLoading" v-if="msgData.flag">数据加载中...</view> -->
				<view class="scroll-view-msg" style="padding: 30rpx 30rpx;">
					<template v-for="(item, index) in msgData.list">
						<view class="msgContent" :id="'msg-' + item.messageId">
							<view class="text_26 color__ time">
								{{ renderMessageDate(item, index) }}
							</view>
							<view class="message" :class="[item.userType]">
								<image :src="item.avatar" v-if="item.userType === 'friend'" class="avatar" mode="widthFix"></image>
								<view class="message-con">
									<view v-if="item.msgType == 'text'">
										<view v-html="renderTextMessage(item.content)"></view>
									</view>
									<view class="m-address" v-if="item.msgType == 'address'">
										<view class="image"><image :src="item.content.img" mode="widthFix"></image></view>
										<view class="infos">
											<view class="title">{{item.content.name}}</view>
											<view class="desc">{{item.content.order?item.content.order:'-'}}</view>
										</view>
									</view>
									<view class="m-address" v-if="item.msgType == 'order'">
										<view class="image"><image :src="item.content.img" mode="widthFix"></image></view>
										<view class="infos">
											<view class="title">{{item.content.name}}</view>
											<view class="desc">{{item.content.order?item.content.order:'-'}}</view>
										</view>
									</view>
									<view class="m-image" v-if="item.msgType == 'image'">
										<image :src="item.content" mode="widthFix" @click="previewImg(item.content)"></image>
									</view>
									<view class="m-address" v-if="item.msgType == 'pay'">
										<view class="image"><image :src="item.content.img" mode="widthFix"></image></view>
										<view class="infos">
											<view class="title">{{item.content.name}}</view>
											<view class="price">¥ {{item.content.price?item.content.price:'-'}}</view>
										</view>
									</view>
									<view class="" v-if="item.msgType == 'quick'">
										<view class="quickCon">{{item.content}}</view>
										<view class="quickList" v-if="item.list.length > 0">
											<view class="list-items" v-for="(qItem,indx) in item.list" @click="quickQs(qItem)">
											{{qItem.question}}
											</view>
										</view>
									</view>
								</view>
								<image :src="item.avatar" v-if="item.userType === 'self'" class="avatar" mode="widthFix"></image>
							</view>
						</view>
					</template>
				</view>
			</scroll-view>
			<view class="tool">
				<view class="tool-option">
					<view class="input-text">
						<textarea class="input" placeholder="输入点什么呢..." auto-height="true" confirm-type="send" type="text"
							:maxlength="-1" :adjust-position="false" v-model="text" confirm-hold @focus="focus" :focus="isFocus" @blur="isFocus = false"
							:show-confirm-bar="false" @confirm="sendingText" @keyboardheightchange="keyboardheightchange" />
					</view>
					<view class="check-img">
						<view class="check-icon" @click="tapEmoji"><image src="@/static/image/face.svg" mode="aspectFill"></image></view>
						<view class="check-icon" @click="tapMore"><image src="@/static/image/more.svg" mode="aspectFill"></image></view>
					</view>
				</view>
			</view>
			<template v-if="keyboardHeight>0">
				<view class="keyboardheight" :style="{ height: keyboardHeight + 'px' }"></view>
			</template>
			<emoji v-model="isEmoji" @onEmoji="onEmoji" @deleteFn="deleteFn" @sendingText="sendingText" @sendingEmojiPack="sendingEmojiPack"></emoji>
			<more v-model="isMore" @onMore="sendingMore"></more>
		</view>
	</view>
</template>

<script>
var app;
let cursor = 0; //输入框光标
let getSelectedTextRangeSetInterval = null;
import { mapState } from 'vuex';
import {
	show,
	formatDate,
	throttle,
	openimg,
	getLocation,
	to as tofn
} from '@/utils/js/index.js';
import { getHistoryMsg } from "@/utils/js/history-msg.js";

import emoji from '@/components/chat/emoji';
import more from '@/components/chat/more';
import { EmojiDecoder, emojiMap } from '@/utils/js/EmojiDecoder.js';
const emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/';
const decoder = new EmojiDecoder(emojiUrl, emojiMap);

export default {
	components: {
		emoji,more
	},
	data() {
		return {
			scrollIntoViewId:"",
			keyboardHeight:0,
			isEmoji:false,
			isMore:false,
			isKeyboard:false,
			text:"",
			scrollTop:0,
			msgData: {
				list:[],
				allLoaded:false, // 请求开关
				rows:20,	//每页数量
				page:1,	//页码
				flag:true,	// 请求开关
				isSend:false,
				last:0
			},
			screenWidth:0,
			pushData: {
				obj:null,
				auth:"https://tran.jsshuita.cn/plugin/webman/push/auth",
				url: 'wss://tran.jsshuita.cn/ws',
			},
			isFocus:false
		}
	},
	onLoad() {
		app = this;
		const systemInfo = uni.getSystemInfoSync();
		app.screenWidth = systemInfo.screenWidth;
		this.getMessage()
		uni.setNavigationBarTitle({
			title:"与xxx对话"
		})
	},
	computed: mapState({
		//显示时间
		renderMessageDate() {
			return (message, index) => {
				if (this.msgData.list[index + 1]?.timestamp - message.timestamp  > 3 * 60 * 1000) {
					return formatDate(message.timestamp, 'timestamp');
				}
				return '';
			};
		},
	}),
	beforeDestroy() {
		cursor = 0;
		clearInterval(getSelectedTextRangeSetInterval);
	},
	methods: {
		focus(){
			this.setCursor();
		},
		setCursor() {

		},
		scroll(){},
		// 滚动到顶部
		scrolltoupper(){
			if (this.msgData.allLoaded) return;
			this.getMessage()
		},
		scrolltolower() {},
		keyboardheightchange(e){
			const height = e.detail.height;
			if (height > 0) {
				this.isEmoji = false;
				this.isMore = false;
				this.isKeyboard = true;
			} else {
				this.isKeyboard = false;
			}
			this.keyboardHeight = height;
			setTimeout(()=>{
				this.scrollToBottom()
			}, 150)
		},
		tapEmoji() {
			this.isEmoji = !this.isEmoji;
			if (this.isEmoji) {
				this.isKeyboard = true;
			}
			this.isMore = false;
			setTimeout(()=>{
				this.scrollToBottom()
			}, 150)
		},
		tapMore(){
			this.isMore = !this.isMore;
			if (this.isMore) {
				this.isKeyboard = true;
			}
			this.isEmoji = false;
			setTimeout(()=>{
				this.scrollToBottom()
			}, 150)
		},
		sendingMore(data){
			switch (data.type) {
				case 'img':
					show("暂未开通");
					// this.sendImageMessage();
					break;
				case 'video':
					show("暂未开通");
					break;
				case 'order':
					show("暂未开通");
					// this.showOrder(1);
					break;
			}
		},
		scrollToBottom() {
			if (this.isEmoji) {
				var px = 600 * (app.screenWidth / 750)
				this.scrollTop = (this.msgData.list.length + px) * 1000
			} else if (this.isMore) {
				var px = 430 * (app.screenWidth / 750)
				this.scrollTop = (this.msgData.list.length + px) * 1000
			} else {
				this.scrollTop = (this.msgData.list.length + parseInt(this.keyboardHeight)) * 1000
			}
		},
		touchmove(){
			this.isFocus = false;
			this.isFocisEmojius = false;
			this.isEmoji = false;
			this.isMore = false;
			this.isKeyboard = false;
			this.keyboardHeight = 0
		},
		onEmoji(key) {
			const text = `${this.text.slice(0, cursor)}${key}${this.text.slice(cursor)}`;
			this.text = text;
		},
		sendingEmojiPack(){},
		// 删除表情
		deleteFn() {
			const str = this.text.charAt(this.text.length - 1);
			if (str === ']') {
				let metaChars = /\[.*?(\u4e00*\u597d*)\]/g;
				let xstr = '';
				this.text.replace(metaChars, (match) => {
					xstr = match;
				});
				var text = this.text;

				function del(str) {
					return text.slice(0, text.length - str.length);
				}
				this.text = del(xstr);
			} else {
				this.text = this.text.substring(0, this.text.length - 1);
			}
		},
		sendingText(){
			if (app.text === '') return ;
			app.msgData.isSend = true;
			const sendMsg = app.text;
			app.text = ''
			setTimeout(function(){
				app.msgData.isSend = false;
				app.sendMessage(sendMsg,"text");
				app.scrollToBottom()
			},2000)
		},
		sendMessage(content,type){
			const message = {
				content: content,
				userType: 'self',
				avatar: "/static/logo.jpg",
				msgType:type,
				list:[],
				messageId: Date.now(),
				timestamp: Date.now(),
			};
			app.msgData.list.unshift(message);
		},
		getMessage(){
			let get = async ()=>{
				this.msgData.allLoaded = true;
				let data = await getHistoryMsg({
					page:this.msgData.page,
					rows: this.msgData.page == 3 ? 5 : this.msgData.rows
				});
				const selector = `msg-${data?.[0]?.messageId}`;;
				this.msgData.list = this.msgData.list.concat(data);
				// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
				this.$nextTick(()=>{
					// 设置当前滚动的位置
					this.scrollIntoViewId = selector;
					if(data.length < this.msgData.rows){
						this.msgData.allLoaded = true;
						this.msgData.flag = false;
						// 当前消息数据条数小于请求要求条数时，则无更多消息，不再允许请求。
						// 可在此处编写无更多消息数据时的逻辑
					}else{
						this.msgData.flag = true;
						this.msgData.allLoaded = false;
						this.msgData.page ++;
					}

				})
			}
			get();
		},
		renderTextMessage(text) {
			if (!text) return "";
			text = text.replace(/\n/g, '');
			if (!text) return '<span>' + '[未知内容]' + '</span>';
			return '<span>' + decoder.decode(text) + '</span>';
		},
	}
}
</script>

<style lang="scss" scoped>
.chat-content{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #ededed;
	display: flex;
	flex-direction: column;
	z-index: 98;
}
.m-address{
	display: flex;align-items: center;gap: 20rpx;min-width: 70vw;
	&.self{
		transform: rotate(180);
	}
	.image {
		image{width: 120upx;}
	}
	.infos{
		flex: 1;overflow: hidden;
		.title{font-size: 28upx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
		.desc{font-size: 20upx;color: #999;margin-top: 20rpx;}
		.price{font-size: 28upx;color: #f00;margin-top: 20rpx;}
	}
}
.send-load {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	text-align: center;
	font-size: 28rpx;
	color: $main-text-color;
	background-color: #f4f4f5;
	padding: 10rpx 0;
}
.msgLoading{
	text-align: center;
	padding: 10rpx 0;
}
.chat-body{
	height: 0;
	flex: 1;
	.scroll-view-msg{
		display: flex;
		flex-direction: column-reverse;
		flex-wrap: nowrap;
		align-content: flex-start;
		justify-content: flex-end;
		align-items: stretch;
	}
	.message {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
		.quickList{
			margin-top: 10upx;
			.list-items {
				color: blue;
				font-size: 28upx;
				line-height: 48upx;
			}
		}
		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
		}
		.message-con {
			min-height: 80rpx;
			max-width: 80vw;
			box-sizing: border-box;
			font-size: 28rpx;
			line-height: 1.3;
			padding: 20rpx;
			border-radius: 10rpx;
			background: #fff;
			image {
				// width: 200rpx;
			}
		}
		&.self {
			justify-content: flex-end;
			.avatar {
				margin: 0 0 0 30rpx;
			}
			.message-con {
				position: relative;
				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-left: 16rpx solid #fff;
					right: -28rpx;
					top: 24rpx;
				}
			}
		}
		&.friend {
			.message-con {
				position: relative;
				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-right: 16rpx solid #fff;
					left: -28rpx;
					top: 24rpx;
				}
			}
		}
	}
}
.tool {
	background: #fff;
	padding: 20rpx 0 20rpx 0;
	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)/2) !important;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom)/2) !important;
	.tool-option{
		display: flex;
		align-items: flex-start;
		box-sizing: border-box;
		padding: 0 20rpx;
	}
	.tool-bar {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 0 20rpx;
		.bar-item {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			gap: 10rpx;
			color: #333;
			margin-bottom: 20rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.input-text{
		flex: 1;width: 100%;
		box-sizing: border-box;
		padding: 10rpx 14rpx;
		min-height: 84rpx;
		max-height: 300rpx;
		overflow: auto;
		border-radius: 10rpx;
		background-color: #eee;
		.input{
			margin: 10rpx 0;
			width: 100%;
			font-size: 28upx;
			height: 100%;
			background-color: #eee;
			min-height: 48rpx;
			max-height: 300rpx;
		}
	}
	.check-img{
		display: flex;align-items: center;justify-content: center;
		.check-icon{width: 84rpx;height: 84rpx;display: flex;align-items: center;justify-content: center;}
		image{width: 75%;height: 75%;}
	}

	.thumb {
		width: 64rpx;
	}
}
.time {
	width: 100%;
	color: #a3a3a3;
	line-height: 100rpx;
	text-align: center;
	font-size: 24rpx;
}

</style>