talk_appAmin/pages/Friend/messagechat.vue

<!-- 消息聊天 -->
<template>
	<view class="uninavbar">
		<uni-nav-bar statusBar="false" left-icon="left" @clickLeft="ReturnPage" :fixed="true" :border="false"
			background-color="#ffffff" :title="title" />
	</view>

	<view class="container" :class="{ show: IsShwo }">
		<scroll-view class="scroll-container" scroll-y="true" :scroll-with-animation="true"
			:scroll-into-view="lastMessageId">

			<view v-for="item in arrlist" :key="index" :id="'ms' + item.id">
				<view v-if="item.send != myuserid">
					<view>
						<view class="contentmessagetimes" v-if="IsSendTime(item.sendTime)">
							<text class="contentmessagetimetext">{{ ReturnTime(item.sendTime) }}</text>
						</view>
					</view>
					<view class="contentmessage">
						<view>
							<image class="contentmessageimage" :src="bindIcon(youavatar)"></image>
						</view>
						<view style="margin-left: 16rpx;">
							<view class="message" v-if="item.messageType == 51">
								<text class="messagetext">{{ item.messageText }}</text>
							</view>
							<view v-else class="mymessageImage">
								<up-image :show-loading="true" :src="bindIcon(item.messageText)" radius="12rpx"
									width="240rpx" height="300rpx"></up-image>
							</view>
						</view>
					</view>
				</view>


				<view v-else>
					<!-- v-if="IsSendTime(item.sendTime)" -->
					<view>
						<!-- <p>{{ReturnTime(item.sendTime)}}</p> -->
						<view class="contentmessagetimes" v-if="IsSendTime(item.sendTime)">
							<text class="contentmessagetimetext">{{ ReturnTime(item.sendTime) }}</text>
						</view>
					</view>
					<view class="mycontentmessage">
						<view>
							<view v-if="item.messageType == 51" class="mymessage">
								<text class="mymessagetext">{{ item.messageText }}</text>
							</view>
							<view v-else class="mymessageImage">
								<up-image :show-loading="true" :src="bindIcon(item.messageText)" radius="12rpx"
									width="240rpx" height="300rpx"></up-image>
							</view>
						</view>
						<view>
							<image class="mycontentmessageimage" :src="avatar"></image>
						</view>
					</view>
				</view>

			</view>
		</scroll-view>
	</view>

	<view class="bottm" :class="{ show: IsShwo }">
		<view
			style="position: fixed; z-index: -1; background-color: #ffffff; top: calc(100vh - 100rpx); bottom: 0;left: 0;right: 0;">
		</view>
		<view class="imageview" @click="ShowBottom()">
			<image class="messageaddimage" src="../../static/images/sign/messageadd.png"></image>
		</view>
		<view class="botomview">
			<view class="viewtextarea">
				<textarea class="classtextarea" v-model="messageinput" auto-height placeholder="请输入内容"
					@focus="onFocus" />
				<view class="bottombutton" @click="ButtonSend()">
					<text>发送</text>
				</view>
			</view>
		</view>
	</view>

	<view class="popup" :class="{ show: IsShwo }">
		<view style="display: flex;margin-left: 32rpx;margin-top: 24rpx;">
			<view>
				<fileUpload v-model="messageinput" @dropDownValueChange="fruitValueChange" :limit="1"></fileUpload>
				<view @click="UpPorops()">
					<text class="textpopup" style="margin-top: 4rpx;">相册</text>
				</view>
			</view>
			<view style="margin-left: 48rpx;" @click="UpReport()">
				<image class="imagepopup" src="../../static/images/sign/report.png"></image>
				<view>
					<text class="textpopup">举报</text>
				</view>
			</view>
		</view>
	</view>



</template>

<script setup>
import fileUpload from '@/pages/common/file/fileUpload/sendImage.vue'
import navbar_neadVue from "@/pages/common/navbar/navbar_nead.vue";
import {
	onMounted,
	ref,
	getCurrentInstance,
	reactive,
	nextTick,
	watch
} from "vue"
import {
	onReachBottom,
	onLoad,
	onShow,
	onPageScroll
} from "@dcloudio/uni-app";
import {
	GetListid
} from "@/api/signln/SignTa/SignTa";


import {
	listNotificationHistorical,
	getNotificationHistorical,
	delNotificationHistorical,
	addNotificationHistorical,
	updateNotificationHistorical,
	listNotificationHistoricalUser
} from "@/api/signln/NotificationHistorical/NotificationHistorical";
const {
	proxy
} = getCurrentInstance();
const messageinput = ref(null);

const myuserid = ref(0);
const co = ref(null);

// 图片
const fileList1 = ref();

const socket = ref(null);
const message = ref('');
const IsShwo = ref(false)
import {
	useRouter,
	useRoute
} from 'vue-router';
const route = useRoute();
const title = ref("");
const uid = ref(0);

const myavatar = ref();
const youavatar = ref();

onLoad(() => {
	//获取$("#")
	const getuser = GetListid().then(res => {
		myuserid.value = res;
		console.log("党情登录用户" + myuserid.value)

		if (myuserid.value != 0) {
			WebSockOpen(myuserid.value)
			GetList();
		}
	})

	uni.getStorage({
		key: 'userInfo',
		success: function (res) {
			const storedUserInfo = res.data;
			uid.value = storedUserInfo.friendid;
			title.value = storedUserInfo.title;
			myavatar.value = storedUserInfo.myavatar;
			youavatar.value = storedUserInfo.youavatar;
			console.log('User info retrieved successfully:', storedUserInfo.myavatar);
		},
		fail: function (err) {
			console.error('Failed to retrieve user info:', err);
		}
	});
})



const lastMessageId = ref(null);



function WebSockOpen(id) {
	socket.value = proxy.$store.state.chat.socket;
	console.log("socketInfo:", proxy.$store.state.chat.socket);
}
const usermessInfo = ref(proxy.$store.state.chat.userMessageinfo)
// 使用 watch 监听 count 的变化
watch(
	() => proxy.$store.state.chat.userMessageinfo,
	(newVal, oldVal) => {
		IsSendTime();
		arrlist.value.push(newVal)
		console.log("新数据：22，",arrlist.value);
		setTimeout(() => {
				lastMessageId.value = 'ms' + arrlist.value[arrlist.value.length - 1].id;
				// console.log(lastMessageId.value)
			}, 10);
		
	}
);
onShow(() => {
	proxy.$store.dispatch('webSockerInfo')
	
})

// 判断键盘是否升起
function onFocus() {
	// console.log("键盘升起")
	IsShwo.value = false;
};


const arrlist = ref();
// 获取历史记录
function GetList() {
	MyList();
}

function MyList() {
	var data = {
		// pageNum: 1,
		// pageSize: 10,
		senderId: null,
		receiverId: null,
		messageType: null,
		sendTime: null,
		readTime: null,
		status: null,
		messageText: null,
		send: null
	}
	data.senderId = myuserid.value;
	data.receiverId = uid.value;

	// console.log(data);

	listNotificationHistoricalUser(data).then(response => {
		// console.log(response.rows.length)
		arrlist.value = response.rows;
		console.log(arrlist.value);
		IsSendTime();
		if (arrlist.value != null) {
			setTimeout(() => {
				lastMessageId.value = 'ms' + arrlist.value[arrlist.value.length - 1].id;
				// console.log(lastMessageId.value)
			}, 30);
		}

	});
}

// 发送消息
function ButtonSend() {
	if (messageinput.value == null) {
		proxy.$modal.msgError("空消息，请输入内容！");
		return;
	}

	const form = {
		senderId: null,
		receiverId: null,
		messageType: null,
		sendTime: null,
		readTime: null,
		status: null,
		messageText: null,
		send: null
	}

	form.messageText = messageinput.value;
	form.receiverId = uid.value;
	form.senderId = myuserid.value;
	form.status = 0;
	form.messageType = 51;//文字
	// form.sendTime = new Date();
	form.send = myuserid.value;
	toWSMessage(form);
	console.log(form)
	addNotificationHistorical(form).then(response => {
		// console.log(response)
		GetList();
	});
	messageinput.value = null;
}

// 弹起底部
function ShowBottom() {
	IsShwo.value = !IsShwo.value;
}

//相册
function UpPorops() {

}



//举报
function UpReport() {

	var data = {
		userid: myuserid.value,
		reportId: uid.value
	}

	// console.log(data);

	uni.setStorage({
		data: data,
		key: "data",
		success() {
			proxy.$tab.navigateTo("/pages/Friend/violationreporting")
		}
	})
}

import {
	useStore
} from 'vuex';
const store = useStore();
const QNDomain = store.state.user.QNDomain;

function bindIcon(icon) {
	return QNDomain + icon;
}

const avatar = ref(proxy.$store.state.user.avatar)




function closeWebSocket() {
	if (socket.value) {
		// socket.value.close();
	}
}

// 返回后更新上一页数据
function ReturnPage() {
	// 关闭 WebSocket 
	closeWebSocket();

	uni.navigateBack({
		delta: 1 // 返回的页面层数
	});
}


//存放照片的地方
const picList = ref();

function fruitValueChange(e) {
	console.log(e)
	picList.value = e;

	// console.log("发送")
	console.log(messageinput.value)

	const form = {
		senderId: null,
		receiverId: null,
		messageType: null,
		sendTime: null,
		readTime: null,
		status: null,
		messageText: null,
		send: null
	}

	form.messageText = picList.value;
	form.receiverId = uid.value;
	form.senderId = myuserid.value;
	form.status = 0;
	form.messageType = 52;
	form.send = myuserid.value;
	addNotificationHistorical(form).then(response => {
		// console.log(response)
		GetList();
	});
	messageinput.value = null;
}
const toWSMessage = (e) => {
	// proxy.$store.dispatch('webSockerInfo')
	console.log("socket:", socket.value);
	// console.log(e)
	const info = {
		fromid: null,
		toid: null,
		content: null
	}
	info.fromid = e.senderId;
	info.toid = e.receiverId;
	info.content = e.messageText;
	// console.log(info)
	if (socket.value) {
		try {
			socket.value.send(JSON.stringify(info));
		} catch (e) {
			console.log("eee:", e);
		}

	}
}

// 监听WebSocket连接
function onSocketOpen() {
	// console.log('WebSocket连接已打开！');
}

// 监听WebSocket错误
function onSocketError() {
	// console.log('WebSocket连接打开失败，请检查！');
}


// 时间函数
function ReturnTime(res) {
	// console.log(res);
	var time = new Date(res);
	// console.log(time);
	var now = new Date();
	// console.log(now);
	// console.log("当前时间"+time.getDate() + "闲杂世家"+now.getDate());
	var year = time.getFullYear();
	var month = time.getMonth() + 1;
	var date = time.getDate();
	var hours = time.getHours();
	var minutes = time.getMinutes();
	var months = month.toString().padStart(2, '0');
	var hours = hours.toString().padStart(2, '0');
	var min = minutes.toString().padStart(2, '0');
	if (time.getDate() == now.getDate()) {
		return `${hours}:${min}`;
	} else {
		return `${year}.${months}.${date} ${hours}:${min}`;
	}
}

// 判断在5分钟内发的消息不显示时间
function IsSendTime(time) {
	var time = new Date(time).getDate();
	var lasttime = new Date(arrlist.value[arrlist.value.length - 2].sendTime).getDate();
	var result = time - lasttime;
	if (result == 0) {
		return false;
		// console.log(result)
	} else {
		return true;
	}
}
</script>

<style lang="scss" scoped>
@import '@/pages/common/navbar/navbar.css';

page {
	background-color: #F4F5F6;
}

.bottm {
	width: 750rpx;
	height: 100rpx;
	background: #ffffff;
	border-bottom: 1rpx solid #3477fc;

}

.botomview {
	margin-top: 12rpx;
	margin-left: 32rpx;
	padding-top: 1rpx;
}

.viewtextarea {
	display: flex;
	width: 606rpx;
	min-height: 80rpx;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	background: #f7f8fa;
	margin-top: 12rpx;
}

.imageview {
	float: right;
	margin-top: 20rpx;
	margin-right: 32rpx;
}

.messageaddimage {
	width: 60rpx;
	height: 60rpx;
}

.classtextarea {
	width: 480rpx;
	min-height: 32rpx;
	display: block;
	margin: auto 0;
	line-height: 80rpx;
	padding-left: 32rpx;
	resize: none;
}

.bottombutton {
	width: 104rpx;
	height: 56rpx;
	border-radius: 28rpx 28rpx 28rpx 28rpx;
	background: #3477fc;
	display: block;
	margin: auto 0;
	margin-right: 12rpx;
	margin-left: 1rpx;
}

.bottombutton>text {
	font-weight: 400;
	width: 57rpx;
	height: 28rpx;
	font-size: 28rpx;
	text-align: left;
	color: #FFFFFF;
	display: block;
	margin: auto;
	line-height: 56rpx;
}

.scroll-container {
	flex: 1;
	overflow: auto;
}

.container {
	/* top: 10rpx; */
	/* position: relative; */
	/* bottom: 100rpx; */
	display: flex;
	flex-direction: column;
	height: calc(100vh - 300rpx);

	flex: 1;
	/* 让内容元素占据可用空间 */
	margin-bottom: 120rpx;
	/* 让内容元素距离底部100rpx */
}

.ShowBottom {
	width: 750rpx;
	height: 210rpx;
	background: #3477fc;
	bottom: -100rpx;
	left: 0;
	right: 0;
	position: fixed;

	transform: translateY(0);
	transition: transform 0.3s ease-in-out;
}

.show {
	transform: translateY(-210rpx);
	/* 显示视图 */
}


.page {
	position: relative;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.content {
	flex: 1;
	overflow: auto;
}

.popup {
	position: fixed;
	left: 0;
	right: 0;
	bottom: -210rpx;
	/* 初始位置隐藏在视图外 */
	height: 210rpx;
	background-color: #fff;
	transform: translateY(0);
	transition: transform 0.2s ease-in-out;
}

.popup.show {
	transform: translateY(-210rpx);
}

.imagepopup {
	width: 120rpx;
	height: 120rpx;
}

.textpopup {
	font-weight: 400;
	width: 57rpx;
	height: 28rpx;
	font-size: 28rpx;
	text-align: left;
	color: #999999;
	display: block;
	margin: auto;
}

.contentmessage {
	display: flex;
	margin-top: 24rpx;
	margin-left: 32rpx;
}

.mycontentmessage {
	display: flex;
	justify-content: flex-end;
	margin-right: 32rpx;
	margin-top: 24rpx;
}

.contentmessagetime {
	/* width: 300rpx; */
	height: 28rpx;
	border-radius: 14rpx 14rpx 14rpx 14rpx;
	opacity: 0.1;
	background: #000000;
	margin: auto;
	margin-top: 48rpx;
}

.contentmessagetime>p {
	/* display: inline-block; */
	font-weight: 400;
	height: 17rpx;
	font-size: 20rpx;
	text-align: center;
	color: #FFFFFF;
	display: block;
	margin: auto;
	line-height: 28rpx;
}

.contentmessagetimes {
	display: block;
	margin: auto;
	margin-top: 48rpx;
	text-align: center;
}

.contentmessagetimetext {
	border-radius: 14rpx 14rpx 14rpx 14rpx;
	background: #000000;
	opacity: 0.1;
	display: inline-block;
	font-weight: 400;
	height: 28rpx;
	font-size: 20rpx;
	text-align: center;
	color: #FFFFFF;
	line-height: 28rpx;
	padding-left: 13rpx;
	padding-right: 13rpx;
	/* padding-top: 1rpx; */
}

.contentmessageimage {
	width: 82rpx;
	height: 82rpx;
	border-radius: 82rpx;
}

.mycontentmessageimage {
	width: 82rpx;
	height: 82rpx;
	border-radius: 82rpx;
	margin-left: 18rpx;
	margin-top: -1rpx;
}


.message {
	/* max-width: 500rpx; */
	/* width: 288rpx; */
	/* height: 82rpx; */
	/* max-height: 10000rpx; */
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	background: #ffffff;
}

.mymessge {
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	background: #3477fc;
}

.messagetext {
	font-weight: 400;
	max-width: 500rpx;
	padding-right: 24rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	font-size: 30rpx;
	text-align: left;
	color: #000000;

	display: inline-block;
	margin: auto;
	/* line-height: 82rpx; */
	margin-left: 24rpx;
}

.mymessage {
	max-width: 500rpx;
	/* width: 168rpx; */
	/* height: 82rpx; */
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	background: #3477fc;
}

.mymessagetext {
	font-weight: 400;
	max-width: 500rpx;
	padding-right: 24rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	font-size: 30rpx;
	text-align: left;

	color: #FFFFFF;
	/* float: right; */
	display: inline-block;
	margin: auto;
	/* line-height: 82rpx; */
	margin-left: 24rpx;
}
</style>