baiyuApp/pages_im/pages/conversation/notifyMessageList/index.vue

<template>
	<page-meta :root-font-size="$store.getters.storeRootFontSize"></page-meta>
	<view class="page_container">
		<custom-nav-bar :title="navTitle" />
		<u-list @scrolltolower="scrolltolower" lowerThreshold="100" class="notify_list" height="1">
			<u-list-item v-for="(message, index)  in getRenderList" :key="message.clientMsgID+index">
				<view v-if="getTimeLine" class="time_gap_line">
					{{ getTimeLine(message, getRenderList[index - 1]) }}
				</view>
				<notify-message-render :source="message" />
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import CustomNavBar from '../../../components/CustomNavBar/index.vue';
import NotifyMessageRender from './NotifyMessageRender.vue';
import dayjs from 'dayjs';
export default {
	components: {
		CustomNavBar,
		NotifyMessageRender
	},
	data() {
		return {
			loading: false,
			navTitle:"系统通知"
		};
	},
	computed: {
		...mapGetters(['storeCurrentConversation', 'storeHistoryMessageList', 'storeHasMoreMessage', 'storeCurrentUserID']),
		getRenderList() {
			return this.storeHistoryMessageList.reverse();
		},
		getTimeLine() {
		  return (message, preMessage) => {
		    const sendTime = message.sendTime;
		    const preSendTime = preMessage?.sendTime;
			
			console.log("qxj sendTime:"+sendTime+" preSendTime:"+preSendTime);
		    
		    // 只在时间间隔大于10分钟时才显示时间线
		    if ((preSendTime && sendTime - preSendTime > 600000) || preSendTime==undefined) {
		     
			  const now = dayjs();
		      const messageDate = dayjs(sendTime);
		      
		      // 检查是否在今天
		      if (messageDate.isSame(now, 'day')) {
		        // 检查是否在几秒内
		        if (now.diff(messageDate, 'second') < 60) {
		          return '刚刚';
		        }
		        // 今天且大于一分钟，显示小时:分钟
		        return messageDate.format('HH:mm');
		      }
		      
		      // 检查是否是昨天
		      if (messageDate.isSame(now.subtract(1, 'day'), 'day')) {
		        return '昨天 ' + messageDate.format('HH:mm');
		      }
		      
		      // 检查是否在今年
		      if (messageDate.isSame(now, 'year')) {
		        // 今年但不是今天或昨天，显示月日 小时:分钟
		        return messageDate.format('MM-DD HH:mm');
		      }
		      
		      // 今年以前，显示年月日 小时:分钟
		      return messageDate.format('YYYY-MM-DD HH:mm');
		    }
		    
		    return null;
		  };
		}
	},
	onLoad() {
		this.loadMessageList();
	},
	onUnload() {
		this.resetConversationState();
		this.resetMessageState();
	},
	methods: {
		...mapActions('conversation', ['resetConversationState']),
		...mapActions('message', ['getHistoryMesageList', 'resetMessageState']),
		scrolltolower() {
			if (!this.loading && this.storeHasMoreMessage) {
				this.loadMessageList(true);
			}
		},
		async loadMessageList(isLoadMore = false) {
			this.loading = true;
			const options = {
				conversationID: this.storeCurrentConversation.conversationID,
				count: 20,
				startClientMsgID: this.storeHistoryMessageList[0]?.clientMsgID ?? '',
				viewType: 0
			};
			try {
				const { emptyFlag } = await this.getHistoryMesageList(options);
			} catch (e) {
				console.log(e);
			}

			this.loading = false;
		}
		
	}
};
</script>

<style lang="scss" scoped>
.page_container {
	@include colBox(false);
	height: 100vh;
	background-color: #f8f8f8;

	.notify_list {
		flex: 1;
		padding-top: 14rpx;
		padding-bottom: 20rpx;
	}
}

.time_gap_line {
	position: relative;
	padding: 0 10vw 0rpx;
	text-align: center;
	font-size: 13px;
	color: #A5A5A5;
}
</style>