jp-xqjy/pages/friend/index.vue

<template>
	<view>
		<u-navbar :is-back="false" :border-bottom="false"><view class="navbar-tit">交友</view></u-navbar>
		<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>
			</view>
			<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>
				<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>
				<view class="friendList-text">
					<view class="friendList-name">
						<span>{{item.realName}}</span>
						<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
					</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>
						</view>
						<view class="friendList-label-item">
							<span>{{item.educationN}}</span>
						</view>
						<view class="friendList-label-item">
							<span>{{item.industryN}}/IT</span>
						</view>
					</view>
				</view>
			</view>
			<u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#f4f0f0">已经到底了</u-divider>
		</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 {
		background-color: #f4f0f0;
	}
</style>
<style lang="scss" scoped>

	.home-head {
		.navbar-tit{
			padding-left:15px;
			font-size: 24px;
		}
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 15px;
		background-color: #FFF;

		.homeAdd {
			color: #FF5E5E;

			span {
				margin-left: 3px;
			}
		}
	}

	.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>