519 lines
9.7 KiB
Vue
519 lines
9.7 KiB
Vue
<!-- 消息聊天 -->
|
||
<template>
|
||
|
||
<navbar_neadVue :title="title" background_color="#ffffff"></navbar_neadVue>
|
||
|
||
|
||
<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 class="contentmessagetime">
|
||
<p>{{item.readTime}}</p>
|
||
</view>
|
||
<view class="contentmessage">
|
||
<view>
|
||
<image class="contentmessageimage" src="../../static/images/icon/tu4-1.jpg"></image>
|
||
</view>
|
||
<view style="margin-left: 16rpx;">
|
||
<view class="message">
|
||
<text class="messagetext">{{item.messageText}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view v-else>
|
||
<view class="contentmessagetime">
|
||
<p>{{item.sendTime}}</p>
|
||
</view>
|
||
<view class="mycontentmessage">
|
||
<view>
|
||
<view class="mymessage">
|
||
<text class="mymessagetext">{{item.messageText}}</text>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<image class="mycontentmessageimage" src="../../static/images/icon/tu4-1.jpg"></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" placeholder="请输入内容" rows="1" />
|
||
<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>
|
||
<image class="imagepopup" src="../../static/images/sign/porops.png"></image>
|
||
<view @click="UpPorops()">
|
||
<text class="textpopup">相册</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 navbar_neadVue from "@/pages/common/navbar/navbar_nead.vue";
|
||
import {
|
||
onMounted,
|
||
ref,
|
||
getCurrentInstance,
|
||
reactive,
|
||
nextTick
|
||
} from "vue"
|
||
|
||
import {
|
||
GetListid
|
||
} from "@/api/signln/SignTa/SignTa";
|
||
|
||
|
||
import {
|
||
listNotificationHistorical,
|
||
getNotificationHistorical,
|
||
delNotificationHistorical,
|
||
addNotificationHistorical,
|
||
updateNotificationHistorical,
|
||
listNotificationHistoricalUser
|
||
} from "@/api/signln/NotificationHistorical/NotificationHistorical";
|
||
|
||
const messageinput = ref(null);
|
||
|
||
const myuserid = ref(0);
|
||
|
||
|
||
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);
|
||
onMounted(() => {
|
||
//获取$("#")
|
||
const getuser = GetListid().then(res => {
|
||
myuserid.value = res;
|
||
console.log("党情登录用户" + myuserid.value)
|
||
|
||
if (myuserid.value != 0) {
|
||
WebSockOpen(myuserid.value)
|
||
GetList();
|
||
}
|
||
})
|
||
uid.value = route.query.id;
|
||
console.log(uid)
|
||
title.value = route.query.name;
|
||
})
|
||
|
||
const lastMessageId = ref(null);
|
||
|
||
|
||
|
||
function WebSockOpen(id) {
|
||
const url = 'ws://127.0.0.1:8080/text/text?' + id;
|
||
|
||
console.log(url)
|
||
|
||
socket.value = new WebSocket(url);
|
||
|
||
socket.value.onopen = () => {
|
||
console.log('WebSocket连接已打开');
|
||
};
|
||
|
||
socket.value.onmessage = (event) => {
|
||
console.log('收到WebSocket消息：', event.data);
|
||
|
||
const jsonObject = JSON.parse(event.data);
|
||
|
||
console.log(jsonObject);
|
||
arrlist.value.push(jsonObject);
|
||
};
|
||
|
||
socket.value.onerror = (error) => {
|
||
console.error('WebSocket发生错误：', error);
|
||
};
|
||
|
||
socket.value.onclose = () => {
|
||
console.log('WebSocket连接已关闭');
|
||
};
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
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;
|
||
listNotificationHistoricalUser(data).then(response => {
|
||
console.log(response.rows.length)
|
||
arrlist.value = response.rows;
|
||
console.log(arrlist.value);
|
||
|
||
|
||
setTimeout(() => {
|
||
lastMessageId.value = 'ms' + arrlist.value[arrlist.value.length - 1].id;
|
||
console.log(lastMessageId.value)
|
||
}, 30);
|
||
});
|
||
}
|
||
|
||
// 发送消息
|
||
function ButtonSend() {
|
||
// 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 = messageinput.value;
|
||
form.receiverId = uid.value;
|
||
form.senderId = myuserid.value;
|
||
form.status = 0;
|
||
form.messageType = 1;
|
||
form.sendTime = new Date();
|
||
form.send = myuserid.value;
|
||
|
||
console.log(form)
|
||
addNotificationHistorical(form).then(response => {
|
||
console.log(response)
|
||
GetList();
|
||
});
|
||
messageinput.value = null;
|
||
|
||
}
|
||
|
||
// 弹起底部
|
||
function ShowBottom() {
|
||
IsShwo.value = !IsShwo.value;
|
||
}
|
||
|
||
//相册
|
||
function UpPorops() {
|
||
|
||
}
|
||
|
||
const {
|
||
proxy
|
||
} = getCurrentInstance();
|
||
|
||
//举报
|
||
function UpReport() {
|
||
proxy.$tab.navigateTo("/pages/Friend/violationreporting")
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import '@/pages/common/navbar/navbar.css';
|
||
|
||
|
||
.bottm {
|
||
width: 750rpx;
|
||
height: 100rpx;
|
||
background: #ffffff;
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
border-bottom: 1rpx solid #3477fc;
|
||
}
|
||
|
||
.botomview {
|
||
margin-left: 32rpx;
|
||
}
|
||
|
||
.viewtextarea {
|
||
display: flex;
|
||
width: 606rpx;
|
||
height: 80rpx;
|
||
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
||
background: #f7f8fa;
|
||
}
|
||
|
||
.imageview {
|
||
float: right;
|
||
margin-top: 12rpx;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.messageaddimage {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.classtextarea {
|
||
display: block;
|
||
margin: auto 0;
|
||
line-height: 80rpx;
|
||
padding-left: 32rpx;
|
||
}
|
||
|
||
.bottombutton {
|
||
width: 104rpx;
|
||
height: 56rpx;
|
||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||
background: #3477fc;
|
||
display: block;
|
||
margin: auto 0;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.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 {
|
||
font-weight: 400;
|
||
/* width: 166rpx; */
|
||
height: 17rpx;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
display: block;
|
||
margin: auto;
|
||
}
|
||
|
||
.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> |