zyejMAll-mobile/pages/chat/chatList.vue

<template>
	<s-layout title="消息列表" class="chatMerchant">
		<!-- <view class="invoiceTitle">
			<uni-search-bar placeholder="搜索好友" radius="30" bgColor="#E3E3E3" cancelButton="none" clearButton="none"
				@confirm="search" v-model="state.searchVal" />
		</view> -->

		<view class="invoList" v-if="state.userList.length>0">
			<view class="invoice_item" v-for="(item,index) in state.userList" @tap.stop="gotoChat(item.id,item.userId,item.userAvatar,item.userNickname)"
				:key="index">
				<uni-badge class="uni-badge-left-margin" :text="item.adminUnreadMessageCount|| 0" absolute="rightTop" size="small">
					<image :src="item.userAvatar"></image>
				</uni-badge>
				<view class="userName_item">
					<view class="userName">{{item.userNickname}}</view>
					<view class="userMessage">
						{{item.messageText || item.lastMessageContent}}
					</view>
				</view>
			</view>
		</view>
		<view class="noInvoices" v-else>
			<image src="/static/data-empty.png"></image>
			没有信息呦~
		</view>
		<!-- <view class="addInvoiceBtn" @tap.stop="addInvoice">添加抬头发票</view> -->
	</s-layout>
</template>

<script setup>
	import DeliveryApi from '@/sheep/api/trade/delivery';
	import KeFuApi from '@/sheep/api/promotion/kefu';
	import {
		onMounted,
		onUnmounted,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';

	// const numData = computed(() => sheep.$store('user').numData);
	let pollingInterval = null;
	const state = reactive({
		searchVal: '',
		userList: [
		],
	})
	
	// 启动轮询
	function startPolling() {
	  getChatUserList();
	  pollingInterval = setInterval(() => {
	    getChatUserList();
	  }, 5000);
	}
	
	// 停止轮询
	function stopPolling() {
	  if (pollingInterval) {
	    clearInterval(pollingInterval);
	    pollingInterval = null;
	  }
	}

	onMounted(() => {
		startPolling();
		// getChatUserList()
	})
	onUnmounted(()=>{
		stopPolling();
	})

	const getChatUserList = async () => {
		const {
			data
		} = await KeFuApi.getKefuChatuserList();
		console.log("chatList",data)
		// console.log("用户列表",data[0].adminUnreadMessageCount);
		const cleanContent = (content) => {
		  if (typeof content !== "string") return null; // 确保是字符串
		  return content.trim().replace(/^\uFEFF/, ""); // 去除 BOM 标记和多余空格
		};
		
		// 处理数据
		try {
		  const newData = data.map((item) => {
		    let parsedContent = null;
		
		    // 清理 lastMessageContent
		    const cleanedContent = cleanContent(item.lastMessageContent);
		
		    // 尝试解析 JSON
		    try {
		      parsedContent = JSON.parse(cleanedContent);
		    } catch (parseError) {
		      // 如果无法解析，直接返回原对象
		      return item;
		    }
		
		    // 检查是否包含 text 字段
		    if (parsedContent && parsedContent.text) {
		      // 返回新对象，包含原字段和新字段
		      return {
		        ...item, // 保留原字段
		        messageText: parsedContent.text, // 新字段
		      };
		    }
		
		    // 如果没有 text 字段，直接返回原对象
		    return item;
		  });
		
		  console.log("处理后的数据:", newData);
		  state.userList = newData
		} catch (error) {
		  console.error("处理数据时出错:", error);
		}
		// state.userList = data
	}
	const gotoChat = (conId,userId,userAvatar,toUserName) => {
		console.log("用户id", userId)
		uni.navigateTo({
			url:"/pages/chat/chatKefu?userinfo="+conId+"&userid="+userId+"&useravatar="+userAvatar+"&touserName="+toUserName
		})
	}
	const searchValue = ref("")
	const searchHandle = () => {
		console.log("点击了搜索")
	}
	//页面自带的刷新
	onPullDownRefresh(() => {
		// sheep.$store('user').updateUserData();
		getChatUserList()
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	});
</script>

<style lang="scss" scoped>
	// .addInvoiceBtn{
	// 	width: 90%;
	// 	height: 95rpx;
	// 	line-height: 95rpx;
	// 	text-align: center;
	// 	border-radius: 100rpx;
	// 	position: fixed;
	// 	color: white;
	// 	font-size: 36rpx;
	// 	background-color: #7D9337;
	// 	bottom: 50rpx;
	// 	left: 50%;
	// 	transform: translateX(-50%);
	// }
	.noInvoices{
		    width: 100%;
		    display: flex;
		    padding-top: 135rpx;
		    text-align: center;
		    flex-direction: column;
		    align-items: center;
		    font-size: 31rpx;
			color: #B0B0B0;
			>image{
				margin-bottom: 20rpx;
			}
	}
	::v-deep .uni-searchbar {
		padding: 5px 0 !important;
	}

	.invoiceTitle {
		width: 95%;
		margin: 0 auto;
		padding: 2rpx 0 16rpx 0;
		height: 80rpx;
	}

	.invoList {
		width: 100%;
		background-color: #F5F5F5;

		.invoice_item {
			width: 100%;
			margin: 0 auto;
			padding: 21rpx 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: white;
			display: flex;
			position: relative;
			
			::v-deep .uni-badge-left-margin {
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100%;

				}
			}


			.invoice_no {
				margin-bottom: 10rpx;
			}

			.userName_item {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				margin-left: 20rpx;

				.userName {
					font-size: 32rpx;
				}

				.userMessage {
					color: gray;
					line-height: 1.2;
					max-height: 3.6em;
					overflow-y: hidden;
				}
			}
		}
		.invoice_item::after{
			content:'';
			position: absolute;
			left: 5%;
			bottom: 0;
			width: 90%;
			height: 1rpx; /* 调整为你需要的边框厚度 */
			background-color: #dadada;
		}
	}
</style>