jiaoyi-uni/pages/service/chat/chat.vue

<template>
	<view>
		<view class="flex_c page" @touchmove="touchmove">
			<scroll-view class="flex1 scroll-Y" @tap.stop="onPage" id="scroll-view" lower-threshold="100" scroll-y
				scroll-with-animation :scroll-top="scroll_top" @scroll="scroll" @scrolltoupper="scrolltoupper"
				@scrolltolower="scrolltolower">
				<view class="scroll-view-str" :style="{height: `${reserveHeight}px`}" v-if="reserveHeight>0"></view>
				<view class="messageList_">
					<template v-for="(item, index) in history.messages">
						<!-- #ifdef APP || H5 -->
						<view class="z_index2" :class="`oneheight_${index}`" style="transform: rotate(-180deg)"
							:key="item.messageId + index" v-if="!item.isHide">
							<view class="icon_ text_26 color__ time">
								{{ renderMessageDate(item, index) }}
							</view>
							<view :key="item.messageId + index" v-if="!item.recalled">
								<item :isMy="isSelf(item.senderId)" :myid="myid" :item="item" @onClick="onItem"
									@onLongpress="onLongpress" @mention="mention" @imgLoad="imgLoad"></item>
							</view>
							<view class="icon_ text_26 recalled" v-else>
								<view class="">
									<text v-if="isSelf(item.senderId)">你</text>
									<text v-else>{{ item.senderData.name }}</text>
									撤回了一条消息
								</view>
								<view class="recalled-edit" v-if="item.type === 'text' && isSelf(item.senderId)"
									@click="recalledEdit(item)">重新编辑</view>
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP -->
						<view class="z_index2" style="transform: rotate(-180deg)" :key="item.messageId"
							v-if="!item.isHide">
							<view class="icon_ text_26 color__ time">
								{{ renderMessageDate(item, index) }}
							</view>
							<view :key="item.messageIds" v-if="!item.recalled">
								<item :isMy="isSelf(item.senderId)" :myid="myid" :item="item" @onClick="onItem"
									@onLongpress="onLongpress" @mention="mention"></item>
							</view>
							<view class="icon_ text_26 recalled" v-else>
								<view class="">
									<text v-if="isSelf(item.senderId)">你</text>
									<text v-else>{{ item.senderData.name }}</text>
									撤回了一条消息
								</view>
								<view class="recalled-edit" v-if="item.type === 'text' && isSelf(item.senderId)"
									@click="recalledEdit(item)">重新编辑</view>
							</view>
						</view>
						<!-- #endif -->
					</template>
				</view>
			</scroll-view>
			<view class="bottomOperationRef">
				<view class="bottom-btn-group">
					<view class="btn-item">
						<image src="https://jymini.oss-cn-guangzhou.aliyuncs.com/mini/star.svg"></image>
						<view class="name">评价服务</view>
					</view>
					<view class="btn-item" @click="showOrder(1)">
						<image src="https://jymini.oss-cn-guangzhou.aliyuncs.com/mini/order.svg"></image>
						<view class="name">我的订单</view>
					</view>
				</view>
				<view class="bottom-operation-box">
					<view class="input-text">
						<textarea class="input" auto-height="true" confirm-type="send" type="text" :focus="isFocus"
							:maxlength="-1" :adjust-position="false" v-model="text" confirm-hold
							:show-confirm-bar="false" @input="input" @confirm="sendingText" @focus="focus"
							@blur="blured" @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 class="safe-box"></view>
				<view class="keyboardheight" :style="{ height: keyboardHeight + 'px' }"></view>
			</view>
			
			
			<view>
				<emoji v-model="isEmoji" @onEmoji="onEmoji" @deleteFn="deleteFn" @sendingText="sendingText"
					@sendingEmojiPack="sendingEmojiPack"></emoji>
			</view>
			<view>
				<more v-model="isMore" @onMore="onMore"></more>
			</view>
			
		</view>
		
		<uni-popup ref="orderpopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
			<view class="order-popup">
				<view class="order-title">
					<view class="name">我的订单</view>
					<view class="close" @click="showOrder(2)"><image src="/static/image/close.png"></image></view>
				</view>
				<view class="order-body"></view>
			</view>
		</uni-popup>		
	</view>
</template>

<script>
var app;
let getSelectedTextRangeSetInterval = null;
let inputValue = '';
let cursor = 0; //输入框光标
let scroll_top = 0;
import emoji from '@/components/bottom-operation/emoji.vue';
import more from '@/components/bottom-operation/more.vue';
import item from '@/components/item/index';
// 浏览照片数组
let imageList = [];
// 是否是手动触发的列表滑动
let isBottomOperationScrollToBottom = false;
import {
	show,
	formatDate,
	throttle,
	openimg,
	getLocation,
	to as tofn
} from '@/utils/index.js';
import {
	mapState
} from 'vuex';
var {Push} = require("@/static/js/push.js")
import * as Api from "@/static/api/service.js";
export default {
	components: {
		emoji,
		more,
		item
	},
	data() {
		return {
			serviceId:null, // 客服ID
			reserveHeight:0,
			isFocus: false, //键盘焦点
			isEmoji:false,
			isMore:false,
			keyboardHeight:0,
			optionsData:null,
			testData:null,
			text:"",
			// 历史数据
			history: {
				messages: [],
				allLoaded: false
			},
			showOrderState:false,
			storeData:null,
			sendId:null,
			myid:"",
			pushObj:null,
            wsAuth:"http://192.168.3.16:9881/plugin/webman/push/auth",
            // wsAuth:"https://panel.huiyinduo.cn/plugin/webman/push/auth",
            wsUrl: 'ws://192.168.3.16:3131',
			page:2,
			size:10
		}
	},
	computed: mapState({
		//显示时间
		renderMessageDate() {
			return (message, index) => {
				if (message.timestamp - this.history.messages[index + 1]?.timestamp > 3 * 60 * 1000) {
					return formatDate(message.timestamp, 'timestamp');
				}
				return '';
			};
		},
		// 是否本人isMy
		isSelf() {
			return (senderId) => {
				const {
					member_id = this.myid
				} = {"member_id":this.myid};
				return senderId === `${member_id}`;
			};
		},
	}),
	onLoad(options) {
		var app = this;
		app.optionsData = options;
		uni.setNavigationBarTitle({
			title:"加载中..."
		});
		app.getService(options)
	},
	beforeDestroy() {
		cursor = 0;
		this.pushObj.disconnect()
	},
	onPageScroll(e) {
		// this.$refs.bottomOperationRef.closeAll();
	},
	onReady() {
		// this.videoPlayer.context = uni.createVideoContext('videoPlayer', this);
	},
	methods: {
		initPush(){
			var _this = this;
			this.pushObj = new Push({
				"url":this.wsUrl,
				"app_key":"265c33b73d5c04f918978577df2c48d2",
				"auth":this.wsAuth
			});
			var user_channel = this.pushObj.subscribe('user-' + this.myid);
			user_channel.on('message', function (data) {
				// console.log(data);
				_this.formatMsg(data);
			})
		},
		imgLoad(data){},
		onItem(data){
			console.log(data)
			switch(data.type) {
				case "order":
					var order = data.payload.order;
				break;
				case "image":
					uni.previewImage({
						urls:[data.payload.url]
					})
				break;
				case "pay":
					var payInfo = data.payload.pay;
					if (payInfo.status == 1) {
						return this.$dialog.showSuccess("已完成支付")
					}
					Api.pricePay({order:payInfo.order}).then((res)=>{
						if (res.code == 0) {
							return app.$dialog.showSuccess(res.msg)
						}
						uni.requestPayment({
							orderInfo:res.data.pay,
							service:5,
							success(resp){
								if (resp.code == 0) { // res.code=0时，才表示支付成功
									app.$dialog.showSuccess("支付成功","none",function(){
										app.getService(app.optionsData)
									});
								}
							},
							fail(resp) {
								app.$dialog.showSuccess("支付失败，可再次重试","none");
							}
						})
					})
				break;
				default:
				break;
			}
		},
		onLongpress(data){
			
		},
		// 滚动中
		scroll(e) {
			scroll_top = e.detail.scrollTop;
			// this.$refs.operateRef.close();
			if (isBottomOperationScrollToBottom) return;
			// this.$refs.bottomOperationRef.closeAll();
		},
		// 滚动到底部
		scrolltolower() {
			if (this.history.allLoaded) return;
			console.log('触底')
			this.getMoreMsg()
			// this.loadHistoryMessage();
		},
		// 滚动到顶部
		scrolltoupper() {
			console.log('滚动到顶部')
		},
		showOrder(type){
			if (type == 2) {
				this.$refs.orderpopup.close()
				return ;
			}
			this.$refs.orderpopup.open()
		},
		getMoreMsg(){
			this.history.allLoaded = true;
			var formData = this.optionsData;
			formData.page = this.page;
			Api.msg(formData).then((res)=>{
				if(res.code == 0) {
					return this.$dialog.showSuccess(res.msg)
				}
				if (res.data.rows.length > 0) {
					this.page ++;
					var msgData = []
					var list = res.data.rows
					
					// 同步混入数据
					list.forEach((item, ix) => {
						var payload = {};
						if (item.type == 'text') {
							payload.text = item.content
						}
						if (item.type == 'order') {
							var order = JSON.parse(item.content)
							payload.order = order
						}
						if (item.type == 'pay') {
							var order = JSON.parse(item.content)
							payload.pay = order
						}
						if (item.type == 'image') {
							payload = {
								contentType: 'image/png',
								name: 'uni-image.png',
								size: 82942,
								url: item.content,
								width: 2732,
								height: 2732,
								thumbnail: item.content
							};
						}
						const message = {
							groupId: item.poi_id,
							senderData: {
								avatar:item.avatar
							},
							senderId: (item.source==1?item.openid:item.service_id),
							messageId: item.msgId,
							payload: payload,
							timestamp: item.time,
							type: item.type,
							recalled: false,
							status: 'success',
							isHide: 0
						};
						msgData[ix] = message
					});
					// console.log(msgData)
					// 模拟只有少量数据
					// this.history.messages = [list[0],list[1],list[2]];
					this.history.messages = [...this.history.messages, ...msgData];
					this.history.allLoaded = false;
					// if (this.history.messages.length > 20) return;
					// msgData.forEach((item,index)=>{
					// 	this.formatMsg(item);
					// })
				} else {
					this.history.allLoaded = true;
				}
			})
		},
		getService(options){
			Api.shareout(options).then((res)=>{
				if (res.code && res.code == 0) {
					return app.$dialog.showSuccess(res.msg)
				}
				console.log(res.data)
				uni.setNavigationBarTitle({
					title:"与"+res.data.store.poi_name+"对话中"
				})
				this.storeData = res.data.store;
				this.sendId = res.data.sendId;
				this.serviceId = res.data.serviceId;
				this.myid = res.data.sendId;
				if (res.data.code == 3) { // 无客服在线
					
				}
				if (res.data.msg.rows.length > 0) {
					var msgData = res.data.msg.rows
					msgData.forEach((item,index)=>{
						this.formatMsg(item);
					})
				}
				this.initPush()
			})
		},
		formatMsg(item){
			var payload = {};
			if (item.type == 'text') {
				payload.text = item.content
			}
			if (item.type == 'order') {
				var order = JSON.parse(item.content)
				payload.order = order
			}
			if (item.type == 'pay') {
				var order = JSON.parse(item.content)
				payload.pay = order
			}
			if (item.type == 'image') {
				payload = {
					contentType: 'image/png',
					name: 'uni-image.png',
					size: 82942,
					url: item.content,
					width: 2732,
					height: 2732,
					thumbnail: item.content
				};
			}
			const message = {
				groupId: item.poi_id,
				senderData: {
					avatar:item.avatar
				},
				senderId: (item.source==1?item.openid:item.service_id),
				messageId: item.msgId,
				payload: payload,
				timestamp: item.time,
				type: item.type,
				recalled: false,
				status: 'success',
				isHide: 0
			};
			this.pushList(message);
		},
		// 更多操作相关===============
		onMore(item) {
			// console.log(item)
			switch (item.type) {
				case 'img':
					this.sendImageMessage();
					break;
				case 'video':
					this.sendVideoMessage();
					break;
				case 'order':
					this.sendOrder();
					break;
			}
		},
		sendOrder(){
			
		},
		// 创建发送照片内容
		sendImageMessage() {
			console.log('upload')
			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)
				}
			});
		},
		// 创建发送照片内容
		createImageMessage(file) {
			this.sendMessage({
				payload: {
					contentType: 'image/png',
					name: 'uni-image.png',
					size: 82942,
					url: file.path,
					width: 2732,
					height: 2732,
					thumbnail: file.path
				},
				type: 'image'
			});
		},
		// 创建发送视频内容
		sendVideoMessage() {
			uni.chooseVideo({
				success: async (res) => {
					console.log(res);
					this.createVideoMessage(res);
				}
			});
		},
		createVideoMessage(file) {
			this.sendMessage({
				payload: {
					video: {
						name: '3003009356267921_uni-video.mp4',
						url: file.tempFilePath,
						width: 640,
						height: 352,
						contentType: 'video/mp4',
						size: 501774,
						duration: 8.32
					},
					thumbnail: {
						name: 'uni-thumbnail.jpg',
						url: '封面路径',
						width: 364,
						height: 200,
						contentType: 'image/jpg'
					}
				},
				type: 'video'
			});
		},
		sendMessage({payload,type}){
			const message = {
				groupId: this.storeData.poi_id,
				senderData: {},
				senderId: this.sendId,
				messageId: Date.now(),
				payload: payload,
				timestamp: Date.now(),
				type: type,
				recalled: false,
				status: 'success',
				isHide: 0
			};
			this.pushList(message);
		},
		// 组装item
		initMessageItem(message, index) {
			message['isHide'] = 0;
			if (index === 0 && (message.type === 'text' || message.type === 'text_quote')) {
				this.onSetText(message.payload.text);
			}
		},
		// 文本触发效果相关========
		onSetText(text) {
			// 触发礼花
			throttle(() => {
				if (text.includes('[彩带]')) {
					this.$refs.mScreenAnimationLihua.show();
					uni.vibrateLong();
				}
			}, 4000);
		},
		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);
			}
		},
		onEmoji(key) {
			const text = `${this.text.slice(0, cursor)}${key}${this.text.slice(cursor)}`;
			this.text = text;
		},
		tapEmoji() {
			this.isEmoji = !this.isEmoji;
			if (this.isEmoji) {
				this.isKeyboard = true;
			}
			this.isMore = false;
		},
		tapMore() {
			this.isMore = !this.isMore;
			this.isEmoji = false;
		},
		touchmove(){
			this.isFocus = false;
			this.isFocisEmojius = false;
			this.isMore = false;
			this.isKeyboard = false;
			this.keyboardHeight = 0
		},
		onPage(){},
		// 监听输入
		input() {
			// if (inputValue.length > this.text.length) {} else {
			// 	const str = this.text.charAt(this.text.length - 1);
			// }
			// inputValue = this.text;
		},
		blured(){
			this.isFocus = false;
			this.keyboardHeight = 0
		},
		// 获取焦点
		focus(e) {
			this.testData = JSON.stringify(e.detail);
			this.isFocus = true;
			this.isEmoji = false;
			this.isMore = false;
			this.keyboardHeight = (e.detail.height==100)?0:e.detail.height
		},
		keyboardheightchange(e){
			// app.$dialog.showSuccess('asdasdasd')
			console.log(e)
		},
		sendingText() {
			if (this.text === '')
				return ;
			let body = this.text;
			if (this.text.length >= 50) {
				body = this.text.substring(0, 30) + '...';
			}
			Api.send({type:"text",content: this.text,sendId: this.serviceId,groupId: this.storeData.poi_id}).then((res)=>{
				if (res.code == 0) {
					return this.$dialog.showSuccess(res.msg)
				}
				this.sendMessage({
					payload: {
						text: this.text
					},
					type: 'text'
				});
				this.text = '';
			})
		},
		async pushList(message) {
			this.initMessageItem(message);
			this.history.messages.unshift(message);
			// 是否触发文字动效果
			if (message.type === 'text' || message.type === 'text_quote') {
				this.onSetText(message.payload.text);
			}
			// 缓存照片地址，
			if (message.type === 'image' || message.type === 'image_transmit') {
				imageList.push(message.payload.url);
			}
		},
		
	}
}
</script>

<style lang="scss">
@import '@/static/index.scss';

.order-popup .order-title{display: flex;align-items: center;justify-content: space-between;font-size: 28upx;padding: 20upx;}
.order-popup .order-title image{width: 40upx;height: 40upx;}
.order-popup .order-body{height: 40vh;overflow: auto;}

.bottomOperationRef{background-color: #f6f6f6;}
.bottom-btn-group{display: flex;gap: 20upx;padding: 10rpx 14rpx;}
.bottom-btn-group .btn-item{display: flex;align-items: center;gap: 10upx;font-size: 24upx;background-color: #f6f6f6;padding: 10rpx 14rpx;border-radius: 10upx;}
.bottom-btn-group .btn-item image{width: 30upx;height: 30upx;}
.bottom-operation-box{display: flex;padding: 20rpx 20rpx 0 20rpx;gap: 20rpx;align-items: flex-end;}
.bottom-operation-box .check-img{display: flex;align-items: center;justify-content: center;}
.bottom-operation-box .check-img .check-icon{width: 84rpx;height: 84rpx;display: flex;align-items: center;justify-content: center;}
.bottom-operation-box .check-img image{width: 75%;height: 75%;}
.bottom-operation-box .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: #fff}
.bottom-operation-box .input{margin: 10rpx 0;width: 100%;font-size: 24upx;height: 100%;background-color: transparent;min-height: 48rpx;
    max-height: 300rpx;}
.safe-box{width: 100%;height: env(safe-area-inset-bottom);background-color: #f6f6f6;}
.page {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #ededed;
}
.scroll-Y {
	width: 100%;
	height: 0;
	transition: all 0.2s;
	transform: rotate(180deg);
	background-color: #ededed;
	padding: 20upx 0;
	::-webkit-scrollbar {
		display: none;
	}
}
.scroll-view-str {
	width: 100%;
}

.time {
	width: 100%;
	color: #a3a3a3;
	line-height: 100rpx;
}

.recalled {
	width: 100%;
	height: 50rpx;
	margin: 20rpx 0;
	color: #a3a3a3;

	.recalled-edit {
		color: #5a6693;
		margin-left: 14rpx;
	}
}
</style>