im/pages/contact/applicationList/index.vue

<template>
	<view class="application_list_container">
		<custom-nav-bar :title="isGroupApplication ? '新的群聊' : '新的好友'" />
		<view class="pane_row" :style="{ transform: `translateX(${isRecv ? '0' : '-100%'})` }">
			<view class="pane_content">
				<u-list v-if="getRecvRenderData.length > 0" class="application_list">
					<u-list-item v-for="(application,index) in getRecvRenderData" :key="index">
						<application-item :isRecv="true" :application="application" />
					</u-list-item>
				</u-list>
				<u-list v-else-if="getSendRenderData.length > 0" class="application_list">
					<u-list-item v-for="(application,index1) in getSendRenderData"
						:key="index1">
						<application-item :application="application" />
					</u-list-item>
				</u-list>
				<view v-else class="empty">
					<image src="@/static/images/block_empty.png"></image>
					<text class="empty_text">暂无数据</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		ContactMenuTypes
	} from "@/constant";
	import CustomNavBar from "@/components/CustomNavBar/index.vue";
	import ApplicationItem from "./ApplicationItem.vue";
	export default {
		components: {
			CustomNavBar,
			ApplicationItem,
		},
		data() {
			return {
				keyword: "",
				isRecv: true,
				isGroupApplication: false,
			};
		},
		computed: {
			...mapGetters([
				"storeRecvFriendApplications",
				"storeSentFriendApplications",
				"storeRecvGroupApplications",
				"storeSentGroupApplications",
			]),
			getRecvRenderData() {
				const tmpList = this.isGroupApplication ?
					this.storeRecvGroupApplications :
					this.storeRecvFriendApplications;
				tmpList.sort((a, b) => (a.handleResult === 0 ? -1 : 1));
				return tmpList.slice(0, 4);
			},
			getSendRenderData() {
				const tmpList = this.isGroupApplication ?
					this.storeSentGroupApplications :
					this.storeSentFriendApplications;
				tmpList.sort((a, b) => (a.handleResult === 0 ? -1 : 1));
				return tmpList.slice(0, 4);
			},
			tabList() {
				return [{
						name: this.isGroupApplication ? "入群申请" : "好友请求",
					},
					{
						name: "我的请求",
					},
				];
			},
		},
		// watch:{
		// 	getRecvRenderData:{
		// 		handler(v){
		// 			console.log(v)
		// 		},
		// 		immediate: true, // 立即执行一次
		// 		deep: true // 开启深度监听
		// 	},
		// 	getSendRenderData:{
		// 		handler(v){
		// 			console.log(v)
		// 		},
		// 		immediate: true, // 立即执行一次
		// 		deep: true // 开启深度监听
		// 	}
		// },
		onLoad(params) {
			const {
				applicationType
			} = params;
			this.isGroupApplication = applicationType === ContactMenuTypes.NewGroup;
		},
		methods: {
			clickTab({
				index
			}) {
				this.isRecv = index === 0;
			},
			previewAll() {
				uni.navigateTo({
					url: `/pages/contact/applicationListDetails/index?isGroupApplication=${this.isGroupApplication}&isRecv=${this.isRecv}`,
				});
			},
			toSearch() {
				uni.navigateTo({
					url: `/pages/common/searchUserOrGroup/index?isSearchGroup=${this.isGroupApplication}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.empty {
		@include centerBox();
		flex-direction: column;
		margin-top: 25vh !important;

		&_text {
			margin-top: 26rpx;
			color: #8e9ab0;
		}

		image {
			width: 237rpx;
			height: 244rpx;
		}
	}

	.application_list_container {
		@include colBox(false);
		height: 100vh;
		background-color: #f8f9fa;
		overflow-x: hidden;

		.search_bar_wrap {
			height: 34px;
			padding: 12px 22px;
			background-color: #fff;
		}

		.u-tabs {
			background-color: #fff;
		}

		.pane_row {
			display: flex;
			//flex: 1;
			transition: all 0.3s ease 0s !important;
			background-color: #fff;
			margin-top: 20rpx;

			.pane_content {
				@include colBox(false);
				width: 100%;
				//height: 100%;
				//flex: 0 0 100%;

				.pane_title {
					font-size: 28rpx;
					color: #999;
					padding: 12rpx 44rpx;
					background-color: #f8f8f8;
				}

				.application_list {
					flex: 1;
					height: 100% !important;
				}
			}
		}

		.view_all {
			background-color: #fff;
			padding: 44rpx 44rpx;
		}
	}
</style>