提交

pages/friend/index.vue

@@ -2,17 +2,23 @@
 	<view>
 		<view class="home-head">
 			<view class="homeTab">
-				<u-tabs :list="tabList" :current="current" @change="change" :show-bar="false" active-color="#333" inactive-color="#c4c0c0"></u-tabs>
+				<u-tabs :list="tabList" :current="current" @change="change" :show-bar="false" active-color="#333"
+					inactive-color="#c4c0c0"></u-tabs>
 			</view>
-			<view class="homeAdd">
+			<view class="homeAdd" v-if="current == '0'">
 				<u-icon custom-prefix="custom-icon" name="filter-2-fill"></u-icon>
 				<span>筛选</span>
 			</view>
+			<view class="homeAdd" v-if="current == '1'">
+				<u-icon custom-prefix="custom-icon" name="refresh-line"></u-icon>
+				<span @click=refreshClick>刷新</span>
+			</view>
 		</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>
+				<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>
@@ -35,113 +41,199 @@
 					</view>
 				</view>
 			</view>
-			<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-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>
 				<view class="friendList-text">
 					<view class="friendList-name">
-						<span>刘子琪</span>
+						<span>{{item.realName}}</span>
 						<u-icon custom-prefix="custom-icon" name="men-line" color="#1677FF"></u-icon>
 					</view>
 					<view class="friendList-info">
-						24岁 · 160cm · 51kg
+						{{item.age}}岁 · {{item.height}}cm · {{item.weight}}kg
 					</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>
+							<span>{{item.workplace}}</span>
 						</view>
 						<view class="friendList-label-item">
-							<span>本科</span>
+							<span>{{item.educationN}}</span>
 						</view>
 						<view class="friendList-label-item">
-							<span>互联网/IT</span>
+							<span>{{item.industryN}}/IT</span>
 						</view>
 					</view>
 				</view>
 			</view>
-			
-			
 			<u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#f4f0f0">已经到底了</u-divider>
 		</view>
- 	</view>
+	</view>
 </template>
 
 <script>
+	import * as friendApi from '@/apis/friend.js'
+
 	export default {
 		data() {
 			return {
+				type: '', //全部0,猜你喜欢1(不传默认查全部)
+				memberId: '', //未登录不传,登陆了传当前用户ID
+				oppositeSex: '', //只看异性1,不传值为查看所有
+				ageStart: '', //年龄起
+				ageEnd: '', //年龄止
+				heightStart: '', //身高起
+				heightEnd: '', //身高止
+				qy: '', //籍贯(单位所属区域)
+				xl: '', //学历
+				hyqk: '', //婚姻情况
+				znqk: '', //子女情况
+				pageIndex: 1,
+				pageSize: 20,
+				friendList: [],
 				tabList: [{
 					name: '全部'
 				}, {
 					name: '猜你喜欢'
 				}],
 				current: 0,
+				randomList: [],
 			}
 		},
+		onLoad(op) {
+			if(this.carhelp.getPersonInfo().id != null) {
+				this.memberId = this.carhelp.getPersonInfo().id;
+			}
+			this.getFriendList();
+		},
 		methods: {
 			change(index) {
 				this.current = index;
+				this.type = index;
+				this.getFriendList();
+			},
+			refreshClick() {
+				var data = {
+					type: 'type',
+					memberId: 'memberId',
+					oppositeSex: 'oppositeSex',
+					ageStart: 'ageStart',
+					ageEnd: 'ageEnd',
+					heightStart: 'heightStart',
+					heightEnd: 'heightEnd',
+					qy: 'qy',
+					xl: 'xl',
+					hyqk: 'hyqk',
+					znqk: 'znqk'
+				};
+				var list = [];
+				console.log(data.type)
+				
+				for(var i = 0; i < 3; i++) {
+					var num=Math.floor(Math.random()*11+1);
+				}
+			},
+			getFriendList() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				var data = {
+					type: this.type,
+					memberId: this.memberId,
+					oppositeSex: this.oppositeSex,
+					ageStart: this.ageStart,
+					ageEnd: this.ageEnd,
+					heightStart: this.heightStart,
+					heightEnd: this.heightEnd,
+					qy: this.qy,
+					xl: this.xl,
+					hyqk: this.hyqk,
+					znqk: this.znqk,
+					pageIndex: this.pageIndex,
+					pageSize: this.pageSize
+				};
+				friendApi.findFriendsList(data).then((res) => {
+					var jsonData = res.data.data;
+					this.friendList = jsonData;
+					uni.hideLoading();
+				}).catch(error => {
+					uni.showToast({
+						title: error
+					})
+				})
 			}
 		}
 	}
 </script>
 <style>
-	page{
+	page {
 		background-color: #f4f0f0;
 	}
 </style>
 <style lang="scss" scoped>
-	.home-head{
+	.home-head {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding-right: 15px;  
-		background-color: #FFF; 
-		.homeAdd{
+		padding-right: 15px;
+		background-color: #FFF;
+
+		.homeAdd {
 			color: #FF5E5E;
-			span{
+
+			span {
 				margin-left: 3px;
 			}
 		}
 	}
 
-	.friendList{
+	.friendList {
 		padding: 15px;
-		.friendList-item{
+
+		.friendList-item {
 			display: flex;
 			background-color: #fff;
-			padding:12px;
+			padding: 12px;
 			border-radius: 12px;
 			margin-bottom: 15px;
-			.friendList-text{
+
+			.friendList-text {
 				flex: 1;
 				min-width: 0;
 				margin-left: 12px;
 				display: flex;
 				flex-direction: column;
 				justify-content: space-between;
-				.friendList-name{
+
+				.friendList-name {
 					font-weight: normal;
-					span{
+
+					span {
 						font-size: 18px;
 						margin-right: 8px;
 					}
 				}
-				.friendList-info{
+
+				.friendList-info {
 					color: #999;
 					font-size: 12px;
 				}
-				.friendList-label{
+
+				.friendList-label {
 					display: flex;
 					align-items: center;
-					.friendList-label-item{
+
+					.friendList-label-item {
 						background: #F1F3F4;
-						padding:2px 8px;
+						padding: 2px 8px;
 						color: #A2A9B5;
 						border-radius: 4px;
 						font-size: 12px;
 						margin-right: 8px;
-						span{
+
+						span {
 							margin-left: 3px;
 						}
 					}