im/pages/conversation/conversationList/index.vue

<template>
	<view class="conversation_container">
		<chat-header ref="chatHeaderRef" />
		<uni-swipe-action ref="swipe_action">
			<template v-for="item in storeConversationList" >
			<uni-swipe-action-item 
				v-if="item.sendID !='system1'"
				:right-options="swipe_actions" 
				@click="actionClick($event,item)" 
				:key="item.conversationID" >
				<conversation-item @longtapEvent="showExtendMenu(item)" :source="item"/>
			</uni-swipe-action-item>
			</template>
		</uni-swipe-action>
		<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'
						}
					}
				],
				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;
			if(process.env.NODE_ENV == 'development'){
				setTimeout(()=>{
					// uni.switchTab({
					// 	url:"/pages/user/index/index"
					// })
					// uni.navigateTo({
					// 	url:"/pages/conversation/groupAlbum/groupAlbum?groupID=1731702760"
					// });
					//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 '免打扰':
								_this.setConversation({
									conversationID: item.conversationID,
									recvMsgOpt: 2
								})
								break;
							case '关闭免打扰':
								_this.setConversation({
									conversationID: item.conversationID,
									recvMsgOpt: 0
								})
								break;
							case '开启阅后即焚':
								_this.setConversation({
									conversationID: item.conversationID,
									isPrivateChat: true,
									burnDuration:60
								})
								break;
							case '关闭阅后即焚':
								_this.setConversation({
									conversationID: item.conversationID,
									isPrivateChat: false
								})
								break;
							case '隐藏':
								IMSDK.asyncApi('hideConversation', IMSDK.uuid(), item.conversationID)
								break;
							case '置顶':
								_this.setConversation({
									conversationID: item.conversationID,
									isPinned: true
								});
								break;
							case '取消置顶':
								_this.setConversation({
									conversationID: item.conversationID,
									isPinned: 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){
				this.$store.dispatch('conversation/deleteConversation',conversationID).then(res=>{
					console.log('删除成功');
				}).catch(e=>{
					
				})
			},

			async setConversation(data){
				await IMSDK.asyncApi('setConversation', IMSDK.uuid(), data);
			},
			
			onRefresh() {
				if (this.refreshing) return;
				console.log('onRefresh');
				this.refreshing = true;
				this.queryList(true);
			},
			scrolltolower() {
				this.queryList();
			},
			async queryList(isFirstPage = false) {
				await this.$store.dispatch("conversation/getConversationList",isFirstPage);
				uni.stopPullDownRefresh();
				this.refreshing = false;
			},
			closeAllSwipe() {
				this.$refs.swipeWrapperRef.closeAll();
			},
		},
		onReachBottom() {
			this.scrolltolower();
		},
		onPullDownRefresh() {
			this.queryList(true);
		},
		onPageScroll(res) {
			this.old.scrollTop = res.scrollTop;
		}
	};
</script>

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

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

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

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

	.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>