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="showClick">
				<u-icon custom-prefix="custom-icon" name="filter-2-fill"></u-icon>
				<span>筛选</span>
			</view>
			<view class="homeAdd" v-if="current == '1'" @click="refreshClick">
				<u-icon custom-prefix="custom-icon" name="refresh-line"></u-icon>
				<span>刷新</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 @click="reset">重置</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"
								ref="refsValues"
							>
								<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"
									ref="refsValues2"
								>
									<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="choice-item" :class="qyActiveClass == index ? 'active' : ''"
								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="choice-item" :class="xlActiveClass == index ? 'active' : ''"
								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="choice-item" :class="hyqkActiveClass == index ? 'active' : ''"
								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="choice-item" :class="znqkActiveClass == index ? 'active' : ''"
								v-for="(item ,index) in znqkList" :key="item.id" @click="znqkClick(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="choice-item" :class="item.hobbyChecked ? 'active' : ''" 
								v-for="(item ,index) in interests" :key="item.id" @tap="selectInterest(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/friend/personal?id='+item.id)">
				<u-image class="friendList-img" :src="item.faceImage+'?x-oss-process=image/resize,m_fill,w_256,h_256'" height="160" width="160" border-radius="10">
				</u-image>
				<view class="friendList-text">
					<view class="friendList-name">
						<span>{{showName(item.realName)}}</span>
						<u-icon v-if="item.gender" custom-prefix="custom-icon" name="women-line" color="#FF695B"></u-icon>
						<u-icon v-else custom-prefix="custom-icon" name="men-line" color="#1677FF"></u-icon>
					</view>
					<view class="friendList-info">
						<span>{{item.age}}岁 · {{item.height}}cm{{item.weight?' · '+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,
				
				type: '', //全部0,猜你喜欢1(不传默认查全部)
				memberId: '', //未登录不传,登陆了传当前用户ID
				pageIndex: 1,
				pageSize: 20,
				recordsTotal: 0,
				list: [],
				friendList: [],
				qyList: [], //所属区域
				xlList: [], //学历
				hyqkList: [], //婚姻情况
				znqkList: [], //子女情况
				hobbyInfoList: [], //兴趣爱好
				interests: [],
				qyActiveClass: 0,
				xlActiveClass: 0,
				hyqkActiveClass: 0,
				znqkActiveClass: 0,
				form: {
					oppositeSex: '', //只看异性1,不传值为查看所有
					ageStart: '', //年龄起
					ageEnd: '', //年龄止
					heightStart: '', //身高起
					heightEnd: '', //身高止
					qy: '', //籍贯(单位所属区域)
					xl: '', //学历
					hyqk: '', //婚姻情况
					znqk: '', //子女情况
					hobbys: '', //兴趣爱好
				},
				tabList: [{
					name: '全部'
				}, {
					name: '猜你喜欢'
				}],
				current: 0,
				randomList: [],
				show: false,
				checked: true,
				customStyle:{
					background: '#FF5E5E'
				},
				value: 30,
			}
		},
		components: {
			RangeSlider
		},
		onLoad(op) {
			if(this.carhelp.getPersonInfo().id != null) {
				this.memberId = this.carhelp.getPersonInfo().id;
				this.form.memberId = this.carhelp.getPersonInfo().id;
			}
			this.getFriendList();
			this.getConditionList();
		},
		onReachBottom() {
			if (this.friendList.length < this.recordsTotal) {	
				this.myLoadmore();
			}
		},
		methods: {
			showClick() {
				if(this.memberId != null) {
					this.show = true;
				} else {
					uni.showToast({
						title: "请用户先登录",
						icon: "none"
					})
				}
			},
			reset() {
				this.checked = true;
				
				this.rangeValues = [22,35];
				this.$refs.refsValues.originalMinValue=22
				this.$refs.refsValues.originalMaxValue=35
				
				this.rangeValues2 = [170, 180];
				this.$refs.refsValues2.originalMinValue=170
				this.$refs.refsValues2.originalMaxValue=180
				
				this.qyClick(this.qyList[0],0);
				this.xlClick(this.xlList[0],0);
				this.hyqkClick(this.hyqkList[0],0);
				this.znqkClick(this.znqkList[0],0);
				
				for(let i=0;i<this.interests.length;i++) {
					this.interests[i].hobbyChecked = false;
				}
			},
			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.form.qy = item.value;
			},
			xlClick(item,index) {
				this.xlActiveClass = index;
				this.form.xl = item.value;
			},
			hyqkClick(item,index) {
				this.hyqkActiveClass = index;
				this.form.hyqk = item.value;
			},
			znqkClick(item,index) {
				this.znqkActiveClass = index;
				this.form.znqk = item.value;
			},
			selectInterest(index) {
				let interest = this.interests;
				interest[index].hobbyChecked = !interest[index].hobbyChecked;
				this.interests= interest;
			},
			sure() {
				this.form.hobbys = '';
				this.friendList = [];
				if(this.checked) {
					this.form.oppositeSex = '1';
				}
				this.form.ageStart = this.rangeValues[0];
				this.form.ageEnd = this.rangeValues[1];	
				this.form.heightStart = this.rangeValues2[0];
				this.form.heightEnd = this.rangeValues2[1];
				if(this.form.qy == ''){
					this.form.qy = this.qyList[0].value;
				}
				if(this.form.xl == ''){
					this.form.xl = this.xlList[0].value;
				}
				if(this.form.hyqk == ''){
					this.form.hyqk = this.hyqkList[0].value;
				}
				if(this.form.znqk == ''){
					this.form.znqk = this.znqkList[0].value;
				}
				
				for(let i=0;i<this.interests.length;i++)
				{
					if(this.interests[i].hobbyChecked)
					{
						if(this.form.hobbys.length>0)
						{
							this.form.hobbys+=','
						}
						this.form.hobbys += this.interests[i].id;
					}
				}
				
				this.list = this.form;
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				friendApi.findFriendsList(this.form).then((res) => {
					this.friendList = [
						...this.friendList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
					uni.hideLoading();
				}).catch(error => {
					uni.showToast({
						title: error,icon: "none"
					})
				})
				this.show = false;
			},
			change(index) {
				if(this.memberId != null) {
					this.current = index;
					this.type = index;
					if(this.type == '1') {
						this.refreshClick();
					} else {
						this.getFriendList(true);
					}
				} else {
					uni.showToast({
						title: "请用户先登录",
						icon: "none"
					})
				}
			},
			refreshClick() {
				this.friendList = [];
				let formList = [];
				for(var item in this.list) {
					var sgd = {};
					sgd[item] = this.list[item]
					formList.push(sgd);
				}
				let refreshList = [];
				for(var i=0; i<3; i++) {
					var num=Math.floor(Math.random()*9+0);
					refreshList.push(formList[num]);
				}
				refreshList.push({type: '1'});
				refreshList.push({memberId: this.memberId});
				
				if(refreshList.oppositeSex == null) {
					refreshList.push({oppositeSex: this.list.oppositeSex});
				}
				
				var obj = {};
				for(var m in refreshList) {
					for(var n in refreshList[m]) {
						obj[n] = refreshList[m][n];
					}
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				friendApi.findFriendsList(obj).then((res) => {
					this.friendList = [
						...this.friendList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
					uni.hideLoading();
				}).catch(error => {
					uni.showToast({
						title: error,icon: "none"
					})
				})	
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getFriendList()
			},
			getFriendList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.friendList = [];
					this.pageIndex = 1;
				}
				friendApi.findFriendsList({
					type: this.type,
					memberId: this.memberId,
					oppositeSex: '1',
					pageIndex: 1,
					pageSize: 20
				}).then((res) => {
					this.friendList = [
						...this.friendList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
					uni.hideLoading();
				}).catch(error => {
					uni.showToast({
						title: error,icon: "none"
					})
				})
			},
			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;					
					this.xlList.splice(0,0,{id: '1',name:'不限',value:''});
					this.hyqkList.splice(0,0,{id: '1',name:'不限',value:''});
					this.znqkList.splice(0,0,{id: '1',name:'不限',value:''});
					
					this.hobbyInfoList = res.data.hobbyInfoList;
					if(this.hobbyInfoList){
						let hobbyList = [];
						hobbyList = this.hobbyInfoList;
						for(let i = 0;i< hobbyList.length;i++)
						{
							let hobby = {id:hobbyList[i].id,name:hobbyList[i].name,hobbyChecked:false};
							this.interests.push(hobby);
						}
					}
					uni.hideLoading();
				}).catch(error => {
					uni.showToast({
						title: error,icon: "none"
					})
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #f4f0f0;
	}
</style>
<style lang="scss" scoped>
	.screenCon-btn{
		padding: 15px;
		position: sticky;
		bottom: 0;
		background-color: white;
		box-shadow: 0px -4px 2px #FAFAFA;
	}
	.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: 500px;
		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;
		z-index: 99;
		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>