jp-xqjy/pages/praise/iPraise.vue

<template>
	<view>
		<u-navbar><view class="navbar-tit">我点赞的</view></u-navbar>

		<view class="friendList">
			<view class="friendList-item" v-for="(item ,index) in likeList" :key="item.id" @click="gotoUrl('pages/friend/personal?id='+item.id)">
				<u-image class="friendList-img" :src="item.faceImage" height="160" width="160" border-radius="10">
				</u-image>
				<view class="friendList-text">
					<view class="friendList-name">
						<span>{{item.realName}}</span>
						<u-icon v-if="item.gender" custom-prefix="custom-icon" name="women-line" color="#FF695B"></u-icon>
						<u-icon v-else custom-prefix="custom-icon" name="men-line" color="#1677FF"></u-icon>
					</view>
					<view class="friendList-info">
						<span>{{item.age}}岁 · {{item.height}}cm{{item.weight?' · '+item.weight+'kg':''}}</span>
					</view>
					<view class="friendList-label">
						<view class="friendList-label-item">
							<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
							<span>{{item.orgAreaName}}</span>
						</view>
						<view class="friendList-label-item">
							<span>{{item.educationN}}</span>
						</view>
						<view class="friendList-label-item">
							<span>{{item.industryN}}</span>
						</view>
					</view>
				</view>
			</view>
			<u-divider color="#B6BDC3" v-if="likeList.length ==recordsTotal" style="margin-top:20px;" bg-color="#f4f0f0">已经到底了</u-divider>
		</view>
	</view>
</template>

<script>
	import * as likesApi from '@/apis/likes.js'
	
	export default {
		data() {
			return {
				likeList: [],
				pageIndex: 1,
				recordsTotal: 0,
			}
		},
		onReachBottom() {
			if (this.likeList.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			getMyLikeList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.likeList = [];
					this.pageIndex = 1;
				}
				var data = {
					pageSize:5,
					pageIndex: this.pageIndex
				};
				likesApi.iLikeList(data).then((res) => {
					this.likeList = [
						...this.likeList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal
					uni.hideLoading();
				}).catch(error => {
					uni.showToast({
						title: error,icon: "none"
					})
				})
			},
			myLoadmore() {	
				this.pageIndex += 1;
				this.getMyLikeList()
			},
			onReady() {
				this.getMyLikeList();
			}
		}
	}
</script>
<style>
	page {
		background-color: #f4f0f0;
	}
</style>
<style lang="scss" scoped>
	.navbar-tit{
			padding-left:15px;
			font-size: 24px;
		}
	

	.friendList {
		padding: 15px;
		.friendList-item {
			display: flex;
			background-color: #fff;
			padding: 12px;
			border-radius: 12px;
			margin-bottom: 15px;

			.friendList-text {
				flex: 1;
				min-width: 0;
				margin-left: 12px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.friendList-name {
					font-weight: normal;

					span {
						font-size: 18px;
						margin-right: 8px;
					}
				}

				.friendList-info {
					color: #999;
					font-size: 12px;
				}

				.friendList-label {
					display: flex;
					align-items: center;

					.friendList-label-item {
						background: #F1F3F4;
						padding: 2px 8px;
						color: #A2A9B5;
						border-radius: 4px;
						font-size: 12px;
						margin-right: 8px;

						span {
							margin-left: 3px;
						}
					}
				}
			}
		}
	}
</style>