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'"  @click="show = true">
				<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>
		<u-popup v-model="show" mode="bottom" :closeable="true" border-radius="20" close-icon-pos="top-left">
			<view class="screenTit">
				<h4>条件筛选</h4>
				<span>重置</span>
			</view>
			<view class="screenCon">
				<view class="screenCon-row">
					<span>只看异性</span>
					<u-switch v-model="checked" active-color="#FF5E5E"></u-switch>
				</view>
				<view class="screenCon-item">
					<view class="screenCon-tit">
						<span>年龄</span><p>22~32</p>
					</view>
					<view class="screenCon-con">
						<view class="screenCon-slider">
							<u-slider v-model="value"></u-slider>
						</view>
					</view>
				</view>
				<view class="screenCon-item">
					<view class="screenCon-tit">
						<span>身高</span><p>172~182</p>
					</view>
					<view class="screenCon-con">
						<view class="screenCon-slider">
							<u-slider v-model="value"></u-slider>
						</view>
					</view>
				</view>
				<view class="screenCon-item">
					<view class="screenCon-tit">
						<span>会员所属工会所在地</span>
					</view>
					<view class="screenCon-con">
						<view class="screenCon-choice">
							<view class="choice-item active">荆州市</view>
							<view class="choice-item">荆州区</view>
							<view class="choice-item">沙市区</view>
							<view class="choice-item">江陵县</view>
							<view class="choice-item">公安县</view>
							<view class="choice-item">松滋市</view>
							<view class="choice-item">石首市</view>
							<view class="choice-item">监利市</view>
							<view class="choice-item">洪湖市</view>
						</view>
					</view>
				</view>
				<view class="screenCon-item">
					<view class="screenCon-tit">
						<span>会员所属工会所在地</span>
					</view>
					<view class="screenCon-con">
						<view class="screenCon-choice">
							<view class="choice-item active">不限</view>
							<view class="choice-item">高中及以上</view>
							<view class="choice-item">大专及以上</view>
							<view class="choice-item">本科及以上</view>
							<view class="choice-item">其他</view>
						</view>
					</view>
				</view>
				<view class="screenCon-item">
					<view class="screenCon-tit">
						<span>婚姻状况</span>
					</view>
					<view class="screenCon-con">
						<view class="screenCon-choice">
							<view class="choice-item active">不限</view>
							<view class="choice-item">未婚</view>
							<view class="choice-item">离异</view>
							<view class="choice-item">丧偶</view>
						</view>
					</view>
				</view>
				<view class="screenCon-item">
					<view class="screenCon-tit">
						<span>子女状况</span>
					</view>
					<view class="screenCon-con">
						<view class="screenCon-choice">
							<view class="choice-item active">不限</view>
							<view class="choice-item">无</view>
							<view class="choice-item">有</view>
						</view>
					</view>
				</view>
				<view class="screenCon-btn">
					<u-button type="error" shape="circle" :custom-style="customStyle">确定</u-button>
				</view>
			</view>
		</u-popup>

		<view class="friendList">
			<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">
						<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.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 v-if="friendList.length == recordsTotal" 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,
				recordsTotal: 0,
				list: [],
				friendList: [],
				tabList: [{
					name: '全部'
				}, {
					name: '猜你喜欢'
				}],
				current: 0,
				randomList: [],
				show: false,
				checked: false,
				customStyle:{
					background: '#FF5E5E'
				},
				value: 30
			}
		},
		onLoad(op) {
			if(this.carhelp.getPersonInfo().id != null) {
				this.memberId = this.carhelp.getPersonInfo().id;
			}
			this.getFriendList();
		},
		onReachBottom() {
			if (this.friendList.length < this.recordsTotal) {	
				this.myLoadmore();
			}
		},
		methods: {
			change(index) {
				this.current = index;
				this.type = index;
				this.getFriendList();
			},
			refreshClick() {
				var data = {
					type: 'typedssdf',
					memberId: 'memberId',
					oppositeSex: 'oppositeSex',
					ageStart: 'ageStart',
					ageEnd: 'ageEnd',
					heightStart: 'heightStart',
					heightEnd: 'heightEnd',
					qy: 'qy',
					xl: 'xl',
					hyqk: 'hyqk',
					znqk: 'znqk'
				};
				let list = [];
				for(var item in data) {
					var sgd = {};
					sgd[item] = data[item]
					list.push(sgd);
				}
				console.log(list)
				
				for(var i = 0; i < 3; i++) {
					var num=Math.floor(Math.random()*10+0);
					console.log(list[num])
				}
			},
			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) => {
					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>
<style>
	page {
		background-color: #f4f0f0;
	}
</style>
<style lang="scss" scoped>
	.screenCon-btn{
		padding: 15px;
	}
	.screenCon-slider{
		height: 24px;
	}
	.screenCon-choice{
		display: flex;
		flex-wrap: wrap;
		.choice-item{
			background-color: #F1F3F4;
			border-radius: 4px;
			padding:8px 0;
			color:#6C6A6A;
			width: 22%;
			text-align: center;
			margin-right: 10px;
			margin-bottom: 10px;
		}
		.active{
			background-color: #FF5E5E;
			color:#fff;
		}
	}
	.screenCon-item{
		padding: 10px 0;
		.screenCon-tit{
			display: flex;
			align-items: center;
			span{font-size: 16px;}
			p{font-size: 16px;color:#999;margin-left: 8px;}
		}
		.screenCon-con{
			margin-top: 12px;
		}
	}
	.screenCon-row{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		span{
			font-size: 16px;
		}
	}
	.screenCon{
		height: 540px;
		padding: 0 15px;
		margin-top: 50px;
	}
	.screenTit{
		height: 50px;
		position:fixed;
		left: 0;
		top: 0;
		right: 0;
		background-color: #fff;
		z-index: 2;
		h4{
			position: absolute;
			font-weight: normal;
			left: 50%;
			top:12px;
			font-size: 16PX;
			margin-left: -32px;
		}
		span{
			position: absolute;
			color:#999;
			right: 15px;
			top: 15px;
		}
	}
	
	.navbar-tit{
			padding-left:15px;
			font-size: 24px;
		}
		.home-head {
		
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 15px;
		position: fixed;
		left: 0;
		right: 0;
		top: 55px;
		z-index: 99;
		background-color: #FFF;

		.homeAdd {
			color: #FF5E5E;

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

	.friendList {
		padding: 15px;
		margin-top: 40px;
		.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>