jiaoyi-uni/pages/service/msg.vue

<template>
	<view class="page">
		<view class="flex_c pages" @touchmove="touchmove">
			<scroll-view class="scroll-view flex1" scroll-y scroll-with-animation :scroll-top="top" scroll-with-animation @scroll="scroll" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" upper-threshold="80" :scroll-into-view="scrollIntoViewId">
				<view class="scroll-view-msg" style="padding: 30rpx 30rpx;">
					<template v-for="(item, index) in 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="content">
								<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 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 v-if="item.msgType == 'text'">
									<view v-html="renderTextMessage(item.content)"></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
							: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>
			<view>
				<emoji v-model="isEmoji" @onEmoji="onEmoji" @deleteFn="deleteFn" @sendingText="sendingText" @sendingEmojiPack="sendingEmojiPack"></emoji>
			</view>
		</view>
	</view>
</template>

<script>
var {Push} = require("@/static/js/push.js")
import * as Api from "@/static/api/msg.js";
import form from "@/static/js/form.js";
let cursor = 0; //输入框光标
var app;
import emoji from '@/components/bottom-operation/emoji.vue';
import { mapState } from 'vuex';
import {
	show,
	formatDate,
	throttle,
	openimg,
	getLocation,
	to as tofn
} from '@/utils/index.js';
import { EmojiDecoder, emojiMap } from '@/utils/EmojiDecoder.js';
const emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/';
const decoder = new EmojiDecoder(emojiUrl, emojiMap);
export default {
	components: {
		emoji
	},
	data() {
		return {
			text: '',
			list: [],
			allLoaded:false,
			msgPage:2,
			top: 0, // 绑定给 scroll-view 的滚动位置
			isEmoji:false,
			isMore:false,
			keyboardHeight:0,
			pushObj:null,
            wsAuth:"https://tran.jsshuita.cn/plugin/webman/push/auth",
            wsUrl: 'wss://tran.jsshuita.cn/ws',
			_friendAvatar:"",
			_selfAvatar:"",
			isKeyboard:false,
			screenWidth:0,
			currentTop: 0,
			anchorOffset: 0, // 锚点相对于容器的偏移
			scrollIntoViewId:""
		};
	},
	computed: mapState({
		//显示时间
		renderMessageDate() {
			return (message, index) => {
				if (this.list[index + 1]?.timestamp - message.timestamp  > 3 * 60 * 1000) {
					return formatDate(message.timestamp, 'timestamp');
				}
				return '';
			};
		},
	}),
	onLoad(options) {
		app = this;
		app.optionsData = options;
		uni.setNavigationBarTitle({
			title:"加载中..."
		});
		const systemInfo = uni.getSystemInfoSync();
		app.screenWidth = systemInfo.screenWidth;
		app.getService(options)
	},
	beforeDestroy() {
		cursor = 0;
		this.pushObj.disconnect()
	},
	methods: {
		anchorScroll(id) {
			// 直接赋值已声明变量，无需$set
			this.scrollIntoViewId = 'msg-' + id
		},
		scroll(e){
			if (!this.allLoaded) {
				this.currentTop = e.detail.scrollTop
			};
		},
		// 滚动到底部
		scrolltolower() {
			// if (this.history.allLoaded) return;
			// console.log('触底')
			// this.getMoreMsg()
			// this.loadHistoryMessage();
		},
		previewImg(url){
			uni.previewImage({
				urls:[url],
				success() {},
				fail() {}
			})
		},
		// 滚动到顶部
		scrolltoupper() {
			if (this.allLoaded) return;
			this.getMoreMsg()
		},
		getMoreMsg(){
			this.allLoaded = true;
			var formData = this.optionsData;
			const tokenPoi = uni.getStorageSync("contact");
			formData.page = this.msgPage;
			formData.poi = tokenPoi.poi_id;
			const anchorMsgId = this.list[0].messageId
			Api.msg(formData).then(async (res)=>{
				if(res.code == 0) {
					return this.$dialog.showSuccess(res.msg)
				}
				if (res.data.rows.length > 0) {
					this.msgPage ++;
					// this.allLoaded = false;
					var msgData = res.data.rows;
					var pushData = [];
					if (msgData.length > 0) {
						msgData.forEach(item => pushData.push(app.formatMsg(item)))
					}
					// console.log("pushData",pushData)
					// app.list = [...app.list,...pushData]
					app.list.unshift(...pushData)
					this.$nextTick(() => {
						this.anchorScroll(anchorMsgId)
					})
					setTimeout(() => this.allLoaded = false, 60)
				} else {
					this.allLoaded = true;
				}
			})
		},
		// 实测新增DOM高度（精准适配动态气泡高度）
		calcNewAddHeight(addCount) {
		  return new Promise(resolve => {
			uni.createSelectorQuery()
			  .in(this)
			  .selectAll('.scroll-view-msg')
			  .boundingClientRect(rects => {
				// 前面addCount条是本次新增历史消息
				const addRects = rects.slice(0, addCount)
				const sum = addRects.reduce((p, c) => p + c.height, 0)
				resolve(sum)
			  })
			  .exec()
		  })
		},
		quickQs(data){
			setTimeout(()=>{
				console.log('quickQs',data)
			},200)
			if (!data.answer) return ;
			app.list.push({
				content: data.answer,
				userType: 'self',
				avatar: app._selfAvatar,
				msgType:"text",
				list:[],
				messageId: Date.now(),
				timestamp: Date.now(),
			})
			app.scrollToBottom()
		},
		renderTextMessage(text) {
			if (!text) return "";
			text = text.replace(/\n/g, '');
			if (!text) return '<span>' + '[未知内容]' + '</span>';
			return '<span>' + decoder.decode(text) + '</span>';
		},
		getService(options){
			Api.checkIn(options).then((res)=>{
				uni.setNavigationBarTitle({
					title:"与"+res.data.store.name+"对话中"
				})
				app._selfAvatar = res.data.avatar.self;
				app._friendAvatar = res.data.avatar.friend;
				var msgData = res.data.msg.rows;
				var pushData = [];
				if (msgData.length > 0) {
					msgData.forEach(item => pushData.push(app.formatMsg(item)))
				}
				var quickData = res.data.quick;
				pushData.push({
					content: quickData.star_msg,
					userType: 'friend',
					avatar: res.data.avatar.friend,
					msgType:"quick",
					list:quickData.quick
				})
				// app.list.unshift(...pushData)
				app.list = [...app.list,...pushData]
				this.$nextTick(() => {
					this.anchorScroll(this.list.at(-1).messageId)
				})
				this.scrollToBottom()
			})
		},
		formatMsg(item){
			var payload = "";
			if (item.type == 'text') {
				payload = item.content
			}
			if (item.type == 'order') {
				var order = JSON.parse(item.content)
				payload = order
			}
			if (item.type == 'pay') {
				var order = JSON.parse(item.content)
				payload = order
			}
			if (item.type == 'address') {
				var order = JSON.parse(item.content)
				payload = order
			}
			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,
			};
			console.log("message",message)
			return message
		},
		tapMore(){
			
		},
		keyboardheightchange(e){
			// app.$dialog.showSuccess('asdasdasd')
			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)
		},
		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);
			}
		},
		tapEmoji() {
			this.isEmoji = !this.isEmoji;
			if (this.isEmoji) {
				this.isKeyboard = true;
			}
			this.isMore = false;
			setTimeout(()=>{
				this.scrollToBottom()
			}, 150)
		},
		sendingText() {
			if (!this.text) return ;
			app.sendMessage(this.text,"text");
			this.text = ''
			this.scrollToBottom()
		},
		sendMessage(payload,type){
			const message = {
				content: payload,
				userType: 'self',
				avatar: app._selfAvatar,
				msgType:type,
				list:[],
				messageId: Date.now(),
				timestamp: Date.now(),
			};
			app.list.push(message);
		},
		chooseImage() {
			uni.chooseImage({
				// sourceType: 'album',
				success: (res) => {
					this.list.push({
						content: res.tempFilePaths[0],
						userType: 'self',
						messageType: 'image',
						avatar: this._selfAvatar
					})
					this.scrollToBottom()
					// 模拟对方回复
					setTimeout(()=>{
						this.list.push({
							content: '你好呀，朋友~',
							userType: 'friend',
							avatar: this._friendAvatar
						})
						this.scrollToBottom()
					}, 1500)
				}
			})
		},
		scrollToBottom() {
			if (this.isEmoji) {
				var px = 600 * (app.screenWidth / 750)
				this.top = (this.list.length + px) * 1000
			} else {
				this.top = (this.list.length + parseInt(this.keyboardHeight)) * 1000
			}
		},
		pushList(message){
			app.list.push(message);
		}
	}
}
</script>

<style lang="scss" scoped>
.pages {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #ededed;
}
.m-image image{width: 200rpx;}
.m-address{display: flex;align-items: center;gap: 20rpx;min-width: 70vw;}
.self .m-address{transform: rotate(180);}
.m-address .image image{width: 120upx;}
.m-address .infos{flex: 1;overflow: hidden;}
.m-address .infos .title{font-size: 28upx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.m-address .infos .desc{font-size: 20upx;color: #999;margin-top: 20rpx;}
.m-address .infos .price{font-size: 28upx;color: #f00;margin-top: 20rpx;}
.safe-box{width: 100%;height: env(safe-area-inset-bottom);}
.scroll-view {
	/* #ifdef H5 */
	height: calc(100vh - 44px);
	/* #endif */
	/* #ifndef H5 */
	height: 0;
	/* #endif */
	background: #eee;
	box-sizing: border-box;
}
.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;
	}
	.content {
		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;
		}
		.content {
			position: relative;
			&::after {
				position: absolute;
				content: '';
				width: 0;
				height: 0;
				border: 16rpx solid transparent;
				border-left: 16rpx solid #fff;
				right: -28rpx;
				top: 24rpx;
			}
		}
	}
	&.friend {
		.content {
			position: relative;
			&::after {
				position: absolute;
				content: '';
				width: 0;
				height: 0;
				border: 16rpx solid transparent;
				border-right: 16rpx solid #fff;
				left: -28rpx;
				top: 24rpx;
			}
		}
	}
}

.tool {
	// min-height: 120rpx;
	// position: fixed;
	// right: 0;
	// left: 0;
	// bottom: 0;
	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;
	}
	.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>