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="chatData.service" v-if="item.userType === 'friend'" class="avatar" mode="widthFix"></image>
								<view class="message-con">
									<view v-if="item.msgType == 'text'" @click="clickText(item.content)">
										<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="chatData.self" 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";
var {Push} = require("@/static/js/push.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:"http://192.168.3.16:9881/plugin/webman/push/auth",
				url: 'ws://192.168.3.16:3131',
			},
			isFocus:false,
			chatData:{
				userId:"",
				self:"",
				service:"",
				serviceId:0, // 客服ID
			},
			isServiceUser:0, // 1已转人工 0未转人工
			quickData:{}
		}
	},
	onLoad() {
		app = this;
		const systemInfo = uni.getSystemInfoSync();
		app.screenWidth = systemInfo.screenWidth;
		// this.getMessage()
		this.getServiceData();
		uni.setNavigationBarTitle({
			title:"加载中..."
		})
	},
	computed: mapState({
		//显示时间
		renderMessageDate() {
			return (message, index) => {
				if (message.timestamp - this.msgData.list[index + 1]?.timestamp  > 3 * 60 * 1000) {
					return formatDate(message.timestamp, 'timestamp');
				}
				return '';
			};
		},
	}),
	beforeDestroy() {
		cursor = 0;
		this.pushData.obj.disconnect()
		clearInterval(getSelectedTextRangeSetInterval);
	},
	methods: {
		previewImg(data){
			return openimg(1,[data])
		},
		clickText(text){
			const regex = /(1[3-9]\d{9})|(\d{3,4}-\d{7,8})|(\d{7,12})/g;
			const matches = text.match(regex);
			if (!matches) return ;
			uni.makePhoneCall({
				phoneNumber:matches[0],
				success() {

				},
				fail(){

				}
			})
		},
		async getServiceData(){
			var formData = {};
			const tokenPoi = uni.getStorageSync("contact");
			formData.poi = tokenPoi.poi_id;
			formData.page = app.msgData.page;
			formData.size = app.msgData.rows;
			var resp = await this.$api.chat.service.get(formData);
			if (resp.code == 0) {
				show(resp.msg);
				uni.navigateBack();
				return ;
			}
			uni.setNavigationBarTitle({
				title:resp.data.store.shopName
			})
			app.chatData.userId = resp.data.userId;
			app.chatData.self = resp.data.avatar;
			app.chatData.service = resp.data.service;
			app.chatData.serviceId = resp.data.chat_id;
			var msgData = resp.data.msg.data;
			var pushData = [];
			var quickData = resp.data.quick;
			app.quickData = quickData
			pushData.push({
				content: quickData.star_msg,
				userType: 'friend',
				avatar: resp.data.service,
				msgType:"quick",
				list:quickData.quick,
				messageId: Date.now(),
				timestamp: Date.now(),
			})
			if (msgData.length > 0) {
				msgData.forEach(item => pushData.push(app.formatMsg(item)))
			}
			this.msgData.list = pushData;
			app.msgData.page = 2;
			setTimeout(()=>{
				this.scrollToBottom()
			}, 150)
			app.initPush();
		},
		initPush(){
			var _this = this;
			this.pushData.obj = new Push({
				"url":this.pushData.url,
				"app_key":"265c33b73d5c04f918978577df2c48d2",
				"auth":this.pushData.auth
			});
			var user_channel = this.pushData.obj.subscribe('user-' + this.chatData.userId);
			user_channel.on('message', function (data) {
				const pushData = _this.formatMsg(data);
				_this.msgData.list.unshift(pushData);
				_this.scrollToBottom()
			})
		},
		quickQs(data){
			if (!data.answer) return ;
			app.msgData.list.unshift({
				content: data.answer,
				userType: 'friend',
				avatar: app.chatData.service,
				msgType:"text",
				list:[],
				messageId: Date.now(),
				timestamp: Date.now(),
			})
			app.scrollToBottom()
		},
		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)
		},
		formatMsg(item){
			var payload = "";
			if (item.type == 'text') {
				payload = item.content
			}
			if (item.type == 'order') {
				payload = JSON.parse(item.content)
			}
			if (item.type == 'pay') {
				payload = JSON.parse(item.content)
			}
			if (item.type == 'address') {
				payload = JSON.parse(item.content)
			}
			if (item.type == 'image') {
				payload = item.content
			}
			const message = {
				content: payload,
				userType: item.userType,
				avatar: item.avatar,
				msgType:item.type,
				list:[],
				messageId: item.msgId,
				timestamp: item.time,
			};
			return message
		},
		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':
					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);
			}
		},
		async sendingText(){
			if (app.text === '') return ;
			console.log("app.chatData.serviceId",app.chatData.serviceId)
			if (app.chatData.serviceId == 0) {
				app.text = ''
				app.sendMessage(app.quickData.unline_msg,"text",'friend');
				app.scrollToBottom()
				return ;
			}
			app.msgData.isSend = true;
			const sendMsg = app.text;
			app.text = ''
			var formData = {};
			const tokenPoi = uni.getStorageSync("contact");
			formData.groupId = tokenPoi.poi_id;
			formData.type = "text";
			formData.content = sendMsg;
			formData.chatId = app.chatData.serviceId;
			var resp = await app.$api.chat.sendText.post(formData);
			app.msgData.isSend = false;
			if (resp.code == 0) {
				return show(resp.msg);
			}
			app.sendMessage(sendMsg,"text");
			app.scrollToBottom()
		},
		sendMessage(content,type,user = "self"){
			const message = {
				content: content,
				userType: user,
				avatar: "/static/logo.jpg",
				msgType:type,
				list:[],
				messageId: Date.now(),
				timestamp: Date.now(),
			};
			app.msgData.list.unshift(message);
		},
		// 创建发送照片内容
		sendImageMessage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: async (res) => {
					res.tempFiles.forEach((file) => {
						console.log(file);
						this.createImageMessage(file);
					});
				},
				fail(e) {
					console.log("选择失败",e)
				}
			});
		},
		// 创建发送照片内容
		async createImageMessage(file) {
			var formData = {};
			const tokenPoi = uni.getStorageSync("contact");
			formData.groupId = tokenPoi.poi_id;
			formData.type = "image";
			formData.chatId = app.chatData.serviceId;
			var resp = await app.$api.chat.sendImage.post({'path':file.path,"param":formData});
			var respData = JSON.parse(resp);
			app.msgData.isSend = false;
			if (respData.code !== 1) {
				return show(respData.msg);
			}
			app.sendMessage(respData.data.path,"image");
			app.scrollToBottom()
		},
		getMessage(){
			let get = async ()=>{
				this.msgData.allLoaded = true;
				var formData = {};
				const tokenPoi = uni.getStorageSync("contact");
				formData.poi = tokenPoi.poi_id;
				formData.page = app.msgData.page;
				formData.size = app.msgData.rows;
				let resp = await app.$api.chat.msg.get(formData);
				var msgData = resp.data.data.data;
				var pushData = [];
				if (msgData.length > 0) {
					msgData.forEach(item => pushData.push(app.formatMsg(item)))
				}
				const selector = `msg-${msgData?.[0]?.messageId}`;;
				this.msgData.list = this.msgData.list.concat(pushData);
				// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
				this.$nextTick(()=>{
					// 设置当前滚动的位置
					this.scrollIntoViewId = selector;
					if(msgData.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-image {
	image {
		width: 140rpx;
	}
}
.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;
}
.isrobot{
	color: blue;
	font-size: 28upx;
	line-height: 48upx;
	margin-top: 10rpx;
}
</style>