talk_appAmin/pages/message/index.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=" item.statusone == 0">
			  </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;
    // 这里有点特殊，由于数据库设计有问题，导致发送一条数据实际存储两条，发送方看到的是一条，
    // 接收方看到的是另一个条，所有这里有一个已读未读反过来的问题
    if(e.status == 1){
    	sendercont.value[userIndex].statusone = 0
    }else {
    	endercont.value[userIndex].statusone = 1
    }
  }
  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 => {
		console.log("信息：",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 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;
  height: 100%;
  
}
.work-container{
	background-color: #fff;
	height: 100%;
	overflow: scroll;
}
.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>