257 lines
6.7 KiB
Vue
257 lines
6.7 KiB
Vue
<template>
|
||
<view class="work-container">
|
||
<view>
|
||
<!-- 顶部导航栏 -->
|
||
<u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
|
||
<template #left>
|
||
<view class="text1">消息</view>
|
||
</template>
|
||
<template #right>
|
||
<image :src="adUser" style="width: 52rpx;height: 44rpx" @click="toadUser"></image>
|
||
</template>
|
||
</u-navbar>
|
||
</view>
|
||
<!-- 内容 -->
|
||
<view>
|
||
<up-swipe-action v-for="item in sendercont" :key="item.userId"
|
||
style="margin-left: 32rpx; margin-right: 32rpx; margin-top: 48rpx;">
|
||
<up-swipe-action-item :options="options1" v-if="item.userId != myuserid" :auto-close="true"
|
||
@click="hanver(item.userId)">
|
||
<view class="contentbox, swipe-action__content__text" style="display: flex;"
|
||
@click="gotoAddr(item.userId, item.nickName, item.avatar)">
|
||
<view>
|
||
<!-- <view class="contentboxtop" v-if="myuserid.value == item.senderId.value && item.statusone == 0">
|
||
</view> -->
|
||
<view class="red-dot" v-if="item.showRedDot"></view>
|
||
<image class="contentboximage" :src="bindIcon(item.avatar)"></image>
|
||
</view>
|
||
<view style="margin-left: 26rpx;width: 612rpx;">
|
||
<text class="contentboxtexttop">{{ item.nickName }}</text>
|
||
<text v-if="myuserid.value == item.senderId.value && item.sendTime != null" class="contentboxtextmiddle"
|
||
id="contentboxtmiddle">{{ ReturnTime(item.sendTime) }} </text>
|
||
<text v-if="myuserid.value == item.senderId.value && item.messageType == 51"
|
||
class="contentboxtextbottom">{{ item.messageText }}</text>
|
||
<text v-else-if="myuserid.value == item.senderId.value && item.messageType == 52"
|
||
class="contentboxtextbottom">[图片]</text>
|
||
</view>
|
||
</view>
|
||
</up-swipe-action-item>
|
||
</up-swipe-action>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
onReachBottom,
|
||
onLoad,
|
||
onShow,
|
||
onPageScroll
|
||
} from "@dcloudio/uni-app";
|
||
import { onMounted, ref, reactive, getCurrentInstance, onUnmounted, watch } from 'vue';
|
||
import { listFriendShip, getFriendShip, delFriendShip, addFriendShip, updateFriendShip, listFriendShipId } from "@/api/signln/FriendShip/FriendShip";
|
||
import { GetListid } from "@/api/signln/SignTa/SignTa";
|
||
import { listLatestarticle, listmysend,listNotificationHistoricalUser } from "@/api/signln/NotificationHistorical/NotificationHistorical";
|
||
import { useStore } from 'vuex';
|
||
import { getLocalFileInfo } from 'qiniu-js/esm/utils';
|
||
const { proxy } = getCurrentInstance();
|
||
const store = useStore();
|
||
const imagesrc = ref();
|
||
const options1 = reactive([
|
||
{ text: '已读', style: { backgroundColor: '#3c9cff' } },
|
||
]);
|
||
const show1 = ref(false)
|
||
const iconConfig = proxy.iconConfig;
|
||
const adUser = iconConfig.adUser;
|
||
const fileTypeInfo1 = ref("image")
|
||
const fileTypeInfo2 = ref("video")
|
||
const QNDomain = store.state.user.QNDomain
|
||
const bgColor = ref('#6AA2FF');
|
||
const sendercont = ref([]);
|
||
watch(
|
||
() => proxy.$store.state.chat.userMessageinfo,
|
||
(newVal, oldVal) => {
|
||
console.log("新消息22，", newVal);
|
||
console.log("旧数据：", sendercont.value);
|
||
newMessageInfo(newVal);
|
||
},
|
||
{ deep: true }
|
||
);
|
||
const newMessageInfo = (e) => {
|
||
const userIndex = sendercont.value.findIndex(user => user.receiverId == e.senderId);
|
||
if(userIndex !== -1) {
|
||
sendercont.value[userIndex].messageText = e.messageText;
|
||
sendercont.value[userIndex].sendTime = e.sendTime;
|
||
sendercont.value[userIndex].showRedDot = true; // 显示小红点
|
||
}
|
||
console.log("原始数据：",sendercont.value);
|
||
}
|
||
const toadUser = () => {
|
||
proxy.$tab.navigateTo('/pages/message/adUser');
|
||
}
|
||
function bindIcon(icon) {
|
||
return QNDomain + icon;
|
||
}
|
||
const myuserid = ref(0);
|
||
onMounted(() => {
|
||
GetListid().then(res => {
|
||
myuserid.value = res;
|
||
console.log("当前登录用户" + myuserid.value)
|
||
})
|
||
})
|
||
onUnmounted(() => {
|
||
clearInterval(timer);
|
||
});
|
||
onShow(() => {
|
||
onWebSocket();
|
||
GetListSend();
|
||
timer = setInterval(GetListSend, 60000);
|
||
})
|
||
function GetListSend() {
|
||
listmysend().then(res => {
|
||
sendercont.value = res.rows;
|
||
})
|
||
}
|
||
const onWebSocket = () => {
|
||
proxy.$store.dispatch('webSockerInfo')
|
||
}
|
||
function hanver(res) {
|
||
MyList(res);
|
||
}
|
||
function MyList(youid) {
|
||
var data = {
|
||
senderId: myuserid.value,
|
||
receiverId: youid,
|
||
messageType: null,
|
||
sendTime: null,
|
||
readTime: null,
|
||
status: null,
|
||
messageText: null,
|
||
send: null
|
||
}
|
||
listNotificationHistoricalUser(data).then(response => {
|
||
GetListSend();
|
||
});
|
||
}
|
||
function gotoAddr(id, name, youavatar) {
|
||
console.log("点击了");
|
||
const userInfo = {
|
||
friendid: id,
|
||
title: name,
|
||
myavatar: null,
|
||
youavatar: youavatar,
|
||
};
|
||
|
||
uni.setStorage({
|
||
key: 'userInfo',
|
||
data: userInfo,
|
||
success: function () {
|
||
proxy.$tab.navigateTo("/pages/Friend/messagechat")
|
||
},
|
||
});
|
||
}
|
||
function handleItemClick(userId) {
|
||
const user = sendercont.value.find(item => item.userId === userId);
|
||
if(user) {
|
||
user.showRedDot = false; // 点击后隐藏小红点
|
||
}
|
||
// 这里也可以添加点击事件要做的其他逻辑，如导航到聊天页
|
||
}
|
||
function ReturnTime(res) {
|
||
var time = new Date(res);
|
||
var now = new Date();
|
||
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}`;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* #ifndef APP-NVUE */
|
||
page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
min-height: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.text1 {
|
||
font-weight: 600;
|
||
font-size: 48rpx;
|
||
text-align: left;
|
||
color: #FFFFFF;
|
||
}
|
||
.contentbox {
|
||
height: 82rpx;
|
||
display: flex;
|
||
}
|
||
|
||
.contentboximage {
|
||
width: 82rpx;
|
||
height: 82rpx;
|
||
border-radius: 82rpx;
|
||
}
|
||
|
||
.contentboxtop {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
background: #fa3939;
|
||
border-radius: 24rpx;
|
||
position: fixed;
|
||
left: 56rpx;
|
||
z-index: 3;
|
||
}
|
||
.contentboxtexttop {
|
||
font-weight: 600;
|
||
height: 30rpx;
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.contentboxtextmiddle {
|
||
font-weight: Regular;
|
||
height: 17rpx;
|
||
font-size: 20rpx;
|
||
text-align: right;
|
||
color: #999999;
|
||
vertical-align: middle;
|
||
float: right;
|
||
display: block;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.contentboxtextbottom {
|
||
font-weight: Regular;
|
||
height: 26rpx;
|
||
font-size: 26rpx;
|
||
text-align: left;
|
||
color: #999999;
|
||
vertical-align: middle;
|
||
display: block;
|
||
line-height: 26rpx;
|
||
margin-top: 12rpx;
|
||
}
|
||
.red-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
background-color: red;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
</style> |