yijianbao_user_uniapp/pages_im/pages/common/previewHistoryMessage/index.vue

<template>
	<view class="page_container">
		<custom-nav-bar :title="conversationData.showName" />

		<scroll-view id="scroll_view" :style="{ height: `1px` }" :scroll-top="scrollTop" scroll-y
			:scroll-into-view="scrollIntoView" upper-threshold="250" @scrolltoupper="fetchTopMessage"
			@scrolltolower="fetchBottomMessage">
			<view id="scroll_wrap">
				<u-loadmore nomoreText="" :status="topLoadMoreStatus" />
				<message-item-render v-for="(item, index) in chatLogs" :key="item.clientMsgID"
					:isActive="item.clientMsgID === jumpMessage.clientMsgID" isPreview :source="item"
					:preMessage="chatLogs[index - 1]" :isSender="item.sendID === storeCurrentUserID"
					@messageItemRender="messageItemRender" />
			</view>
		</scroll-view>
		<u-loading-page :loading="initLoading"></u-loading-page>
	</view>
</template>

<script>
	import IMSDK from "openim-uniapp-polyfill";
	import CustomNavBar from "../../../components/CustomNavBar/index.vue";
	import MessageItemRender from "../../../pages/conversation/chating/components/MessageItem/index.vue";
	import {
		mapGetters
	} from "vuex";

	export default {
		name: "",
		components: {
			CustomNavBar,
			MessageItemRender,
		},
		data() {
			return {
				conversationData: {},
				jumpMessage: {},
				chatLogs: [],
				scrollTop: 0,
				scrollIntoView: "",
				initLoading: true,
				topHasMore: true,
				topLoading: false,
				bottomHasMore: true,
				bottomLoading: false,
			};
		},
		computed: {
			...mapGetters(["storeCurrentUserID"]),
			topLoadMoreStatus() {
				if (!this.topHasMore) {
					return "nomore";
				}
				return this.topLoading ? "loading" : "loadmore";
			},
			bottomLoadMoreStatus() {
				if (!this.bottomHasMore) {
					return "nomore";
				}
				return this.bottomLoading ? "loading" : "loadmore";
			},
		},
		onLoad(options) {
			if (options.conversationData) {
				this.conversationData = JSON.parse(options.conversationData);
			}
			if (options.jumpMessage) {
				this.jumpMessage = JSON.parse(options.jumpMessage);
			}
			this.initMessageData();
		},
		methods: {
			messageItemRender(clientMsgID) {
				if (clientMsgID === this.jumpMessage.clientMsgID) {
					this.$nextTick(() => {
						this.scrollIntoView = `auchor${this.jumpMessage.clientMsgID}`;
						this.initLoading = false;
					});
				}
			},
			async initMessageData() {
				const options = {
					startMessage: this.jumpMessage,
					viewType: 1,
					before: 20,
					after: 20
				};
				try {
					const {
						data
					} = await IMSDK.asyncApi(
						'fetchSurroundingMessages',
						IMSDK.uuid(),
						options,
					)
					const targetIndex = data.messageList.findIndex((msg) => msg.clientMsgID === this.jumpMessage
						.clientMsgID);
					this.topHasMore = targetIndex >= 20;
					this.bottomHasMore = data.messageList.length - targetIndex - 1 >= 20;
					this.chatLogs = data.messageList;
				} catch (error) {
					console.log(error)
				}
				this.initLoading = false;
			},
			fetchTopMessage() {
				if (this.topLoading || !this.topHasMore) {
					return;
				}
				this.topLoading = true;
				const options = {
					conversationID: this.conversationData.conversationID,
					userID: "",
					groupID: "",
					count: 20,
					startClientMsgID: this.chatLogs[0].clientMsgID,
					viewType: 1,
				};
				IMSDK.asyncApi(
						IMSDK.IMMethods.GetAdvancedHistoryMessageList,
						IMSDK.uuid(),
						options,
					)
					.then(({
						data
					}) => {
						this.chatLogs = [...data.messageList, ...this.chatLogs];
						this.topHasMore = !data.isEnd;
					})
					.finally(() => (this.topLoading = false));
			},
			fetchBottomMessage() {
				if (this.bottomLoading || !this.bottomHasMore) {
					return;
				}
				this.bottomLoading = true;
				const options = {
					conversationID: this.conversationData.conversationID,
					userID: "",
					groupID: "",
					count: 20,
					startClientMsgID: this.chatLogs[this.chatLogs.length - 1].clientMsgID,
					viewType: 1,
				};
				IMSDK.asyncApi(
						IMSDK.IMMethods.GetAdvancedHistoryMessageListReverse,
						IMSDK.uuid(),
						options,
					)
					.then(({
						data
					}) => {
						this.chatLogs = [...this.chatLogs, ...data.messageList];
						this.bottomHasMore = !data.isEnd;
					})
					.finally(() => (this.bottomLoading = false));
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page_container {
		#scroll_view {
			flex: 1;
		}
	}
</style>