im/pages/conversation/conversationList/index.vue

<template>
	<view class="conversation_container">
		<chat-header ref="chatHeaderRef" />
		<scroll-view class="scroll-view" 
			scroll-y="true" 
			refresher-enabled="true" 
			:refresher-triggered="triggered"
			:scroll-top="scrollTop" 
			:scroll-with-animation="true" 
			@scroll="scroll" 
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore" 
			@scrolltolower="scrolltolower">
			<uni-swipe-action ref="swipe_action">
				<uni-swipe-action-item 
					:right-options="swipe_actions" 
					@click="actionClick($event,item)" 
					v-for="item in storeConversationList" 
					:key="item.conversationID" >
					<conversation-item @longtapEvent="showExtendMenu(item)" :source="item"/>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</scroll-view>
		<view class="loading_wrap" v-if="storeProgress > 0 && storeProgress < 100">
			<u-loading-icon :vertical="true" :text="storeProgress + '%'"></u-loading-icon>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex";
	import IMSDK from "openim-uniapp-polyfill";
	import ChatHeader from "./components/ChatHeader.vue";
	import ConversationItem from "./components/ConversationItem.vue";
	import {getConversationContent,formatConversionTime,prepareConversationState,} from "@/util/imCommon";


	export default {
		components: {
			ChatHeader,
			ConversationItem,
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
                swipe_actions: [
					{
						text: '取消',
						style: {
							backgroundColor: '#1184ed'
						}
					},
					{
						text: '隐藏',
						style: {
							backgroundColor: '#fa9d3a'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#f85050'
						}
					}
				],
				triggered: false,
				refreshing: false,
			};
		},
		computed: {
			...mapGetters(["storeConversationList", "storeIsSyncing", "storeProgress",'storeCurrentUserID']),
		},
		onReady() {
			// #ifdef APP
			this.$nextTick(() => plus.navigator.closeSplashscreen());
			// #endif
		},
		onLoad() {
			//console.log(this.storeConversationList);
			this._freshing = false;
			this.triggered = true;
			setTimeout(()=>{
				// uni.switchTab({
				// 	url:"/pages/user/index/index"
				// })
				// uni.navigateTo({
				// 	url:"/pages/user/vip/vip"
				// });
				prepareConversationState(this.storeConversationList[0]);
			},1000)
		},
		methods: {
			test(){
				console.log(11);
			},
			showExtendMenu(item){
				const _this = this;
				const menu = [item.recvMsgOpt===0 ? '关闭免打扰':'免打扰',item.isPrivateChat? '关闭阅后即焚':'开启阅后即焚','隐藏',item.isPinned ? '取消置顶':'置顶','删除'];
				uni.showActionSheet({
					itemList:menu,
					success(e) {
						switch(menu[e.tapIndex]){
							case '免打扰':
								IMSDK.asyncApi('setConversation', IMSDK.uuid(), {
									conversationID: conversationId,
									recvMsgOpt: 2
								})
								break;
							case '关闭免打扰':
								IMSDK.asyncApi('setConversation', IMSDK.uuid(), {
									conversationID: conversationId,
									recvMsgOpt: 0
								})
								break;
							case '开启阅后即焚':
								IMSDK.asyncApi('setConversation', IMSDK.uuid(), {
									conversationID: conversationId,
									isPrivateChat: true,
									burnDuration:60
								})
								break;
							case '关闭阅后即焚':
								IMSDK.asyncApi('setConversation', IMSDK.uuid(), {
									conversationID: conversationId,
									isPrivateChat: false
								})
								break;
							case '隐藏':
								IMSDK.asyncApi('hideConversation', IMSDK.uuid(), item.conversationID)
								break;
							case '置顶':
								_this.setPinConversation(item.conversationID,true);
								break;
							case '取消置顶':
								_this.setPinConversation(item.conversationID,false);
								break;
							case '删除':
								_this.deleteConversation(item.conversationID);
								break;
						}
					}
				});
			},
			actionClick(e,item){
				const _this = this;
				this.$refs.swipe_action.closeAll();
				switch(e.index){
					case 0:
						break;
					case 1:
						IMSDK.asyncApi('hideConversation', IMSDK.uuid(), item.conversationID)	
						break;
					case 2:
						_this.deleteConversation(item.conversationID);
						break;
				}
			},
			
			deleteConversation(conversationID){
				IMSDK.asyncApi(IMSDK.IMMethods.DeleteConversationAndDeleteAllMsg, IMSDK.uuid(), conversationID).then(res=>{
					console.log('删除成功');
				}).catch(e=>{
					
				})
			},
			setPinConversation(conversationId,status){
				IMSDK.asyncApi('setConversation', IMSDK.uuid(), {
				    conversationID: conversationId,
				    isPinned: status
				})
			},
			
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.queryList(true);
			},
			onRestore() {
				this.triggered = "restore";
				console.log("onRestore");
			},
			scrolltolower() {
				this.queryList();
			},
			async queryList(isFirstPage = false) {
				//console.log(1);
				await this.$store.dispatch("conversation/getConversationList",isFirstPage);
				//console.log(2);
				this.triggered = false;
				this._freshing = false;
			},
			closeAllSwipe() {
				this.$refs.swipeWrapperRef.closeAll();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.conversation_container {
		@include colBox(false);
		height: 100vh;
		overflow-y: hidden;
	}

	.conversation_search {
		padding: 0 44rpx 24rpx;
	}

	.z-paging-content {
		flex: 1;
	}

	.swipe_wrapper {
		@include colBox(false);
		flex: 1;
		width: 100%;
		overflow-y: auto;
	}

	.scroll-view {
		height: 0;
		flex: 1;
	}

	.loading_wrap {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	::v-deep.u-swipe-action-item__right__button__wrapper__text {
		-webkit-line-clamp: 2 !important;
		max-width: 32px;
	}
</style>