heshanApp/pages_im/components/ChooseIndexList/index.vue

<template>
	<u-index-list @scrolltolower="scrolltolower" class="user_list" activeColor="#FF5030" inactiveColor="#757575" :style="{ height: height }" :index-list="indexList">
		<template v-for="(item, index) in itemArr">
			<u-index-item :key="index">
				<u-index-anchor class="user_anchor" :text="indexList[index]"></u-index-anchor>
				<user-item
					@itemClick="itemClick"
					@updateCheck="updateCheck"
					:checked="checkedIDList.includes(cell.userID)"
					:disabled="disabledIDList.includes(cell.userID)"
					:checkVisible="showCheck"
					v-for="cell in item"
					:item="cell"
					:key="cell.userID"
				/>
			</u-index-item>
		</template>
		
		<view v-if="showBot" class="friendCount">{{ this.friendsNum }}个好友</view>
	</u-index-list>
</template>

<script>
import UserItem from '../UserItem/index.vue';
export default {
	name: 'ChooseIndexList',
	components: {
		UserItem
	},
	props: {
		height: {
			type: String,
			default: '0px'
		},
		indexList: {
			type: Array,
			default: () => []
		},
		itemArr: {
			type: Array,
			default: () => []
		},
		checkedIDList: {
			type: Array,
			default: () => []
		},
		disabledIDList: {
			type: Array,
			default: () => []
		},
		showCheck: {
			type: Boolean,
			default: false
		}
	},
	mounted() {
		setTimeout(()=>{
			this.showBot=this.indexList.length>0;
		},1000);
		this.getFriendsCount();
	},
	data() {
		return {
			showBot:false,
			friendsNum:0
		};
	},
	methods: {
		itemClick(item) {
			this.$emit('itemClick', item);
		},
		updateCheck(item) {
			this.$emit('updateCheck', item);
		},
		scrolltolower() {
			this.$emit('scrolltolower');
		},
		getFriendsCount(){
			for (var index = 0; index < this.itemArr.length; index++) {
				let  itemArr = this.itemArr[index];
				this.friendsNum+=itemArr.length;
			}
		}
	}
};
</script>

<style scoped lang="scss">
.user_list {
	flex: 1;
	::v-deep uni-scroll-view {
		max-height: 100% !important;
	}
}

.user_anchor {
	background-color: #f8f8f8 !important;
	border: none !important;
}

.friendCount{
	font-size: 20px;
	color: #666;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
	margin-bottom: 30px;
}
	
</style>