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>{{rangeValues[0]}}~{{rangeValues[1]}}</p>
					</view>
					<view class="screenCon-con">
						<view class="screenCon-slider">
							<RangeSlider
								:width="slideWidth"
								:height="slideHeight"
								:blockSize="slideBlockSize"
								:min="slideMin"
								:max="slideMax"
								:values="rangeValues"
								:step="step"
								:liveMode="isLiveMode"
								@rangechange="onRangeChange"
							>
								<view slot="minBlock" class="range-slider-block"></view>
								<!-- 左边滑块的内容 -->
								<view slot="maxBlock" class="range-slider-block"></view>
								<!-- 右边滑块的内容 -->
							</RangeSlider>
						<!-- 	<u-slider v-model="value"></u-slider> -->
						</view>
					</view>
				</view>
				<view class="screenCon-item">
					<view class="screenCon-tit">
						<span>身高</span><p>{{rangeValues2[0]}}~{{rangeValues2[1]}}</p>
					</view>
					<view class="screenCon-con">
						<view class="screenCon-slider">
							<RangeSlider
									:width="slideWidth"
									:height="slideHeight"
									:blockSize="slideBlockSize"
									:min="slideMin2"
									:max="slideMax2"
									:values="rangeValues2"
									:step="step"
									:liveMode="isLiveMode"
									@rangechange="onRangeChange2"
								>
									<view slot="minBlock" class="range-slider-block"></view>
									<!-- 左边滑块的内容 -->
									<view slot="maxBlock" class="range-slider-block"></view>
									<!-- 右边滑块的内容 -->
								</RangeSlider>
							<!-- 	<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="qyActiveClass == index ? 'choice-item active':'choice-item'"
								v-for="(item ,index) in qyList" :key="item.id" @click="qyClick(item,index)">{{item.name}}</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="xlActiveClass == index ? 'choice-item active':'choice-item'"
								v-for="(item ,index) in xlList" :key="item.id" @click="xlClick(item,index)">{{item.name}}</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="hyqkActiveClass == index ? 'choice-item active':'choice-item'"
								v-for="(item ,index) in hyqkList" :key="item.id" @click="hyqkClick(item,index)">{{item.name}}</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="znqkActiveClass == index ? 'choice-item active':'choice-item'"
								v-for="(item ,index) in znqkList" :key="item.id" @click="znqkClick(item,index)">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="screenCon-btn">
					<u-button type="error" shape="circle" :custom-style="customStyle" @click="sure">确定</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'
	import * as loginApi from '@/apis/login.js'
	import RangeSlider from '../../components/range-slider/range-slider.vue';
 
	export default {
		data() {
			
			return {
				
				rangeValues: [22, 35],
				slideWidth: 600,
				slideHeight: 80,
				slideBlockSize: 30,
				//年龄
				slideMin: 18,
				slideMax: 80,
				//身高
				slideMin2: 140,
				slideMax2: 220,
				isLiveMode: true,
				rangeValues2: [170, 180],
				step:1,
				
				data: {
					type: '', //全部0,猜你喜欢1(不传默认查全部)
					memberId: '', //未登录不传,登陆了传当前用户ID
					oppositeSex: '', //只看异性1,不传值为查看所有
					ageStart: '', //年龄起
					ageEnd: '', //年龄止
					heightStart: '', //身高起
					heightEnd: '', //身高止
					qy: '', //籍贯(单位所属区域)
					xl: '', //学历
					hyqk: '', //婚姻情况
					znqk: '', //子女情况
					pageIndex: 1,
					pageSize: 20
				},				
				recordsTotal: 0,
				list: [],
				friendList: [],
				qyList: [], //所属区域
				xlList: [], //学历
				hyqkList: [], //婚姻情况
				znqkLis: [], //子女情况
				qyActiveClass: 0,
				xlActiveClass: 0,
				hyqkActiveClass: 0,
				znqkActiveClass: 0,
				tabList: [{
					name: '全部'
				}, {
					name: '猜你喜欢'
				}],
				current: 0,
				randomList: [],
				show: false,
				checked: false,
				customStyle:{
					background: '#FF5E5E'
				},
				value: 30
			}
		},
		components: {
			RangeSlider
		},
		onLoad(op) {
			if(this.carhelp.getPersonInfo().id != null) {
				this.data.memberId = this.carhelp.getPersonInfo().id;
			}
			this.getFriendList();
			this.getConditionList();
		},
		onReachBottom() {
			if (this.friendList.length < this.recordsTotal) {	
				this.myLoadmore();
			}
		},
		methods: {
		 
			pad: function(num, n) {
				return Array(n - ('' + num).length + 1).join(0) + num;
			},
		
			onRangeChange: function(e) {
				this.rangeValues = [e.minValue, e.maxValue];			
			},
			onRangeChange2: function(e) {
				this.rangeValues2 = [e.minValue, e.maxValue];
			},
			formatTimeBySliderValue(value) {
				//按比例，将滑块上面的数值进行转换为时间形式
				//转换为分钟数
				let minutes = (24 * 60 * value) / this.slideMax;
				//转换为小时数
				let hours = parseInt(minutes / 60);
				//剩余分钟数
				let minutes_min = parseInt(minutes % 60);
				return '' + this.pad(hours, 2) + ':' + this.pad(minutes_min, 2) + ':' + '00';
			},
			qyClick(item,index) {
				this.qyActiveClass = index;
				this.data.qy = item.value;
			},
			xlClick(item,index) {
				this.xlActiveClass = index;
				this.data.xl = item.value;
			},
			hyqkClick(item,index) {
				this.hyqkActiveClass = index;
				this.data.hyqk = item.value;
			},
			znqkClick(item,index) {
				this.znqkActiveClass = index;
				this.data.znqk = item.value;
			},
			sure() {
				this.friendList = [];
				if(this.checked) {
					this.data.oppositeSex = '1';
				}
				this.data.ageStart = this.rangeValues[0];
				this.data.ageEnd = this.rangeValues[1];	
				this.data.heightStart = this.rangeValues2[0];
				this.data.heightEnd = this.rangeValues2[1];
				if(this.data.qy == ''){
					this.data.qy = this.qyList[0].value;
				}
				if(this.data.xl == ''){
					this.data.xl = this.xlList[0].value;
				}
				if(this.data.hyqk == ''){
					this.data.hyqk = this.hyqkList[0].value;
				}
				if(this.data.znqk == ''){
					this.data.znqk = this.znqkList[0].value;
				}
				
				this.getFriendList();
				this.show = false;
			},
			change(index) {
				this.current = index;
				this.data.type = index;
				this.getFriendList();
			},
			myLoadmore() {
				this.data.pageIndex += 1;
				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,
				})
				friendApi.findFriendsList(this.data).then((res) => {
					this.friendList = [
						...this.friendList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
					uni.hideLoading();
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getConditionList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				loginApi.getBaseDictionary().then((res) => {
					this.qyList = res.data.qyList;
					this.xlList = res.data.xlList;
					this.hyqkList = res.data.hyqkList;
					this.znqkList = res.data.znqkList;
					uni.hideLoading();
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
		}
	}
</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>