talk_appAmin/pages/Friend/messagechat.vue

841 lines
17 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!-- 消息聊天 -->
<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 }" :style="`transform: translateY(${-bottombox}px);`">
<scroll-view class="scroll-container" scroll-y="true" :scroll-with-animation="true"
:scroll-into-view="lastMessageId">
<view class="bigbox" @touchmove="watchjilu">
<view class="" style="height: 100rpx;">
</view>
<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>
<view class="bottom_liaotian_box" id="boxlastsss">
</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="botomview">
<view class="viewtextarea">
<textarea class="classtextarea" v-model="messageinput" auto-height placeholder="请输入内容" @focus="onFocus"
@input="input_text" />
<view class="right_shuru">
<view class="bottombutton" @click="ButtonSend()">
<text>发送</text>
</view>
</view>
</view>
</view>
<view class="imageview" @click="ShowBottom()">
<image class="messageaddimage" src="../../static/images/sign/messageadd.png"></image>
</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();
// 底部输入部分的整体高度
var bottombox = ref('100')
onShow(() => {
//获取$("#")
const getuser = GetListid().then(res => {
myuserid.value = res;
console.log("党情登录用户" + myuserid.value)
if (myuserid.value != 0) {
WebSockOpen(myuserid.value)
setTimeout(()=>{
GetList();
},100)
}
})
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);
}
});
setTimeout(() => {
input_text()
}, 500)
input_text()
})
const lastMessageId = ref(null);
import config from "@/config";
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)
// lastMessageId.value = 'boxlastsss';
}, 10);
}
);
onShow(() => {
proxy.$store.dispatch('webSockerInfo')
})
// 判断键盘是否升起
function onFocus() {
// console.log("键盘升起")
if (IsShwo.value) {
bottombox.value -= 100
}
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)
// lastMessageId.value = 'boxlastsss';
}, 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;
if (IsShwo.value) {
movebottom()
bottombox.value += 100
} else {
movebottom()
bottombox.value -= 100
}
}
//相册
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()
}
//存放照片的地方
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);
}
}
}
//输入框变高低
function movebottom() {
uni.createSelectorQuery().select('.bottm').boundingClientRect(data => {
console.log(data.height)
bottombox.value = data.height
}).exec()
uni.createSelectorQuery().select('.bigbox').boundingClientRect(data => {
uni.pageScrollTo({
duration: '300',
scrollTop: 100
})
}).exec()
}
// 输入文字的事件
function input_text() {
setTimeout(() => {
movebottom()
}, 50)
}
// 监听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;
}
}
// 输入情况下查看记录
// function watchjilu(){
// console.log('翻看记录');
// }
</script>
<style lang="scss" scoped>
@import '@/pages/common/navbar/navbar.css';
page {
background-color: #F4F5F6;
height: 100%;
}
.bottm {
width: 750rpx;
background: #ffffff;
display: flex;
padding-bottom: 8rpx;
position: fixed;
bottom: 0;
transition: all 0.357s;
}
.botomview {
margin-left: 32rpx;
}
.viewtextarea {
display: flex;
width: 606rpx;
min-height: 80rpx;
border-radius: 40rpx 40rpx 40rpx 40rpx;
background: #f7f8fa;
margin-top: 12rpx;
}
.right_shuru {
display: flex;
align-items: flex-end;
box-sizing: border-box;
margin-bottom: 16rpx;
}
.imageview {
margin-left: 20rpx;
margin-top: 20rpx;
margin-right: 32rpx;
}
.messageaddimage {
width: 60rpx;
height: 60rpx;
}
.classtextarea {
width: 480rpx;
min-height: 32rpx;
display: block;
margin: auto 0;
line-height: 40rpx;
padding-left: 32rpx;
resize: none;
padding-top: 25rpx;
margin-bottom: 25rpx;
transition: all;
}
.bottombutton {
width: 104rpx;
height: 56rpx;
border-radius: 28rpx 28rpx 28rpx 28rpx;
background: #3477fc;
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: hidden;
width: 100%;
box-sizing: border-box;
}
.bigbox {
padding-bottom: 64px;
}
.container {
/* top: 10rpx; */
/* position: relative; */
/* bottom: 100rpx; */
display: flex;
flex-direction: column;
transition: all 0.25s;
height: 100%;
flex: 1;
box-sizing: border-box;
/* 让内容元素占据可用空间 */
/* 让内容元素距离底部100rpx */
}
.bottom_liaotian_box {
// height:62.10416793823242+82px;
}
.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: all 0.35s;
}
.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>