交友

pages/friend/index.vue

@@ -17,32 +17,6 @@
 		</view>
 
 		<view class="friendList">
-			<view class="friendList-item">
-				<u-image class="friendList-img" src="/static/img/user1.jpg" height="160" width="160" border-radius="10">
-				</u-image>
-				<view class="friendList-text">
-					<view class="friendList-name">
-						<span>刘子琪</span>
-						<u-icon custom-prefix="custom-icon" name="men-line" color="#1677FF"></u-icon>
-					</view>
-					<view class="friendList-info">
-						24岁 · 160cm · 51kg
-					</view>
-					<view class="friendList-label">
-						<view class="friendList-label-item">
-							<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
-							<span>沙市</span>
-						</view>
-						<view class="friendList-label-item">
-							<span>本科</span>
-						</view>
-						<view class="friendList-label-item">
-							<span>互联网/IT</span>
-						</view>
-					</view>
-				</view>
-			</view>
-			
 			<view class="friendList-item" v-for="(item ,index) in friendList" :key="item.id" @click="gotoUrl('pages/user/index?id='+item.id)">
 				<u-image class="friendList-img" src="item.faceImage" height="160" width="160" border-radius="10">
 				</u-image>
@@ -52,23 +26,23 @@
 						<u-icon custom-prefix="custom-icon" name="men-line" color="#1677FF"></u-icon>
 					</view>
 					<view class="friendList-info">
-						{{item.age}}岁 · {{item.height}}cm · {{item.weight}}kg
+						<span>{{item.age}}岁 · {{item.height}}cm</span>&nbsp;<span v-if="item.weight != null">· {{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.workplace}}</span>
+							<span>{{item.orgAreaName}}</span>
 						</view>
 						<view class="friendList-label-item">
 							<span>{{item.educationN}}</span>
 						</view>
 						<view class="friendList-label-item">
-							<span>{{item.industryN}}/IT</span>
+							<span>{{item.industryN}}</span>
 						</view>
 					</view>
 				</view>
 			</view>
-			<u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#f4f0f0">已经到底了</u-divider>
+			<u-divider v-if="friendList.length == recordsTotal" color="#B6BDC3" style="margin-top:20px;" bg-color="#f4f0f0">已经到底了</u-divider>
 		</view>
 	</view>
 </template>
@@ -92,6 +66,8 @@
 				znqk: '', //子女情况
 				pageIndex: 1,
 				pageSize: 20,
+				recordsTotal: 0,
+				list: [],
 				friendList: [],
 				tabList: [{
 					name: '全部'
@@ -108,6 +84,11 @@
 			}
 			this.getFriendList();
 		},
+		onReachBottom() {
+			if (this.friendList.length < this.recordsTotal) {	
+				this.myLoadmore();
+			}
+		},
 		methods: {
 			change(index) {
 				this.current = index;
@@ -162,15 +143,22 @@
 					pageSize: this.pageSize
 				};
 				friendApi.findFriendsList(data).then((res) => {
-					var jsonData = res.data.data;
-					this.friendList = jsonData;
+					this.friendList = [
+						...this.friendList,
+						...res.data.data
+					];
+					this.recordsTotal = res.data.recordsTotal;
 					uni.hideLoading();
 				}).catch(error => {
 					uni.showToast({
 						title: error
 					})
 				})
-			}
+			},
+			myLoadmore() {			
+				this.pageIndex += 1;
+				this.getFriendList()
+			},
 		}
 	}
 </script>