xiangqin/pages/index/renzhengVip.vue

<template>
	<view>
		<view class="u-flex u-row-between" style="height: 80rpx;background-color: #fff;position:fixed;width: 750rpx;line-height: 80rpx;padding: 0 30rpx;box-sizing: border-box;color: #666666;font-size: 26rpx;z-index: 999;" :style="{'top':navBarHeight+'px'}">
			<view class="tab_item" :class="{'select_tab':current==index}" v-for="(item,index) in tabList" :key="index" @click="tabClick(index)">
				{{item}}
			</view>
			<!-- <view class="u-flex"  >
				<view class="u-flex" @click="showsex=true">
					性别 <u-icon name="arrow-down-fill" size="10" color="#000"></u-icon>
				</view>
				<view class="u-flex" style="margin-left: 30rpx;" @click="showage=true">
					年龄 <u-icon name="arrow-down-fill"  size="10" color="#000"></u-icon>
				</view>
			</view> -->
			<view class="u-flex" @click="popup=true" style="font-size: 26rpx;color: #000000;">
				筛选 <image src="../../static/index/shaixuan.png" mode="" style="width: 24rpx;height: 24rpx;vertical-align: middle;margin-left: 4rpx;"></image>
			</view>
		</view>
		<view class="u-flex u-row-between" style="flex-wrap: wrap;padding: 0 30rpx;">
		<view class="" style="background-color: #fff;width: 336rpx;margin: 0 0 20rpx;border-radius: 20rpx;position: relative;height: 600rpx;box-sizing: border-box;" v-for="(item,index) in list" :key="index" @click="toinfo(item)">
			<view class="" style="position: relative;">
				<image :src="item.headimg" mode="aspectFill" style="width: 336rpx;
				height: 336rpx;
				border-radius: 20rpx;"></image>
				<image src="../../static/index/notice.png" mode="" style="width: 48rpx;height: 48rpx;vertical-align: middle;position: absolute;bottom: 16rpx;right: 20rpx;" @click.stop="tomessage(item)"></image>
				<!-- <view class=" u-flex u-row-center" style="width: 144rpx;
height: 28rpx;
background: rgba(0,0,0,0.5);
border-radius: 14rpx;position: absolute;left: 16rpx;bottom: 16rpx;text-align: center;align-items: center;" v-if="item.province_id">
					<image src="../../static/index/address.png" mode="" style="width: 20rpx;height: 20rpx;vertical-align: middle;"></image>
					<text style="color: #fff;font-size: 16rpx;">现居地:{{item.province_id}}</text>
				</view> -->
			</view>
			<view class=" u-flex u-row-center" style="width: 124rpx;height: 28rpx;background: rgba(0,0,0,0.5);border-radius: 14rpx;position: absolute;top: 20rpx;left: 40rpx;text-align: center;align-items: center;transform: scale(1.2);" v-if="item.vip_level==1">
				<image src="../../static/index/level.png" mode="" style="width: 20rpx;height: 20rpx;vertical-align: middle;"></image><text style="font-size: 16rpx;color: #fff;">身份已认证</text>
			</view>
	<view class="" style="font-size: 32rpx;padding:8rpx 20rpx;font-weight: 600;color: #000;">
		{{item.nickname}} 
		<!-- <image src="../../static/index/2@2x.png" mode="" style="width: 36rpx;height: 36rpx;margin:0 20rpx -6rpx" v-show="item.sex==1"></image> <image src="../../static/index/1@2x.png" mode="" style="width: 36rpx;height: 36rpx;margin:0 20rpx -6rpx"  v-show="item.sex==2"></image> -->
	</view>
	<view class="" style="font-size: 24rpx;color: #888888;padding:8rpx 20rpx;">
		性别：<text style="color: #333333;">{{item.sex==1?'男':'女'}}</text>
	</view>
	<view class="" style="font-size: 24rpx;color: #888888;padding:8rpx 20rpx;" >
		年龄：<text style="color: #333333;" v-if="item.age">{{item.age}}岁</text>
	</view>
	<view class="" style="font-size: 24rpx;color: #888888;padding:8rpx 20rpx;" >
		身高：<text style="color: #333333;" v-if="item.height">{{item.height}}cm</text>
	</view>
	<view class="" style="font-size: 24rpx;color: #888888;padding:8rpx 20rpx;" >
		现居地：<text style="color: #333333;" v-if="item.province_id"> {{item.province_id}}</text>
	</view>
	<!-- <view class="u-flex u-row-between"  style="font-size: 24rpx;padding: 20rpx;color: #888888;">
		<text>{{item.sex==1?'男':'女'}}{{item.age?'·'+item.age:''}}{{item.height?'·'+item.height:''}}</text>
		
		<image src="../../static/profile/88@2x.png" mode="" style="width: 124rpx;height: 28rpx;vertical-align: middle;position: absolute;top: 20rpx;left: 20rpx;transform: scale(1.3);" v-if="item.vip_level==1"></image>
		<image src="../../static/profile/8@2x.png" mode="" style="width: 84rpx;height: 28rpx;vertical-align: middle;position: absolute;top: 20rpx;left: 20rpx;transform: scale(1.3);" v-else></image>
	</view> -->
		</view>
		
		</view>
		<u-empty
		        mode="list"
		        icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="list.length==0"
		>
		</u-empty>
		<u-picker :show="showsex" :columns="sexcolumns" keyName="name" @confirm='changesex' @cancel='showsex=false' :closeOnClickOverlay='true'>
				</u-picker>
				<u-picker :show="showage" @cancel='showage=false' title="年龄" ref="uPicker" :columns="columns" @confirm="confirm"  @change="changeage">
				</u-picker>
				<u-popup :show="popup"  :round="10" mode="bottom" :closeable='true' @close="popup=false" @open="open">
					<view class="" style="padding: 30rpx 30rpx 0;">
						<view class="" style="font-size: 32rpx;color: #000;font-weight: 600;margin: 20rpx 0;">
							年龄
						</view>
						<view class="u-flex u-row-between" style="flex-wrap: nowrap;">
							<view class="">
								<u-input inputAlign="center" v-model="age_min" type="number" :customStyle="inputstyle" placeholder="请输入年龄"></u-input>
							</view>
							<text>至</text>
							<view class="">
								<u-input inputAlign="center" v-model="age_max" type="number" :customStyle="inputstyle" placeholder="请输入年龄"></u-input>
							</view>
						</view>
					</view>
						<view style="width: 750rpx;padding: 30rpx;box-sizing: border-box;">
				           <view class="" style="font-size: 32rpx;color: #000;font-weight: 600;margin: 20rpx 0;">
				           	工作性质<text style="font-size: 22rpx;color: #888888;font-weight: 400;">/多选</text>
				           </view>
						   <view class="u-flex" style="flex-wrap: wrap;">
						   	<view class="item" :class="{'select':item.isSelect}" v-for="(item,index) in workList" @click="workClick(item)" :key="index">
						   		{{item.name}}
						   	</view>
						   </view>
						   <view class="" style="font-size: 32rpx;color: #000;font-weight: 600;margin: 20rpx 0;">
						   	学历<text style="font-size: 22rpx;color: #888888;font-weight: 400;">/多选</text>
						   </view>
						   <view class="u-flex" style="flex-wrap: wrap;">
						   	<view class="item1" :class="{'select':item.isSelect}" v-for="(item,index) in educationList" @click="educationClick(item)" :key="index">
						   		{{item.name}}
						   	</view>
						   </view>
						   <view class="u-flex u-row-between" style="margin: 60rpx auto 0;width: 690rpx;">
						   	<view class="" style="width: 250rpx;
		height: 84rpx;
		background: #F6F3FD;
		border-radius: 50rpx;line-height: 84rpx;text-align: center;color: #777777;
		font-size: 36rpx;box-sizing: border-box;" @click="reset">
						   		<text style="background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;">重置</text>
						   	</view>
							<view class="" style="width: 410rpx;
		height: 84rpx;
		background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
		border-radius: 42rpx;font-size: 36rpx;color: #fff;line-height: 84rpx;text-align: center;" @click="submit">
								确定
							</view>
						   </view>
						</view>
					</u-popup>
					<Showtoast @canceltoast='canceltoast' :showtoast='showtoast' />
			</view>
			
	</view>
</template>

<script>
	import Showtoast from'../../components/Showtoast.vue'
	export default {
		components:{
			Showtoast
		},
		onLoad() {
			// #ifdef H5
			let res = wx.getSystemInfoSync()
			this.navBarHeight = res.statusBarHeight + 44 //顶部状态栏+顶部导航，大部分机型默认44px
			// #endif
			
			var list=this.columns[0]
			var list1=this.columns[1] 
			for( let i=1;i<66;i++){
				if(list[list.length-1]<65){
					list.push(list[0]+i)
					list1.push(list1[0]+i)
				}
			}
				this.getInfo()
					this.getList()
					this.getWork()
		},
		data() {
			return {
				navBarHeight:0,
				age_min:'',
				age_max:'',
				current:0,
				tabList:['认证会员','注册会员','男会员','女会员'],
				showtoast:false,
				columns1:[],
				columns: [
					[18],
					[18]
				],
				sexcolumns: [
					['男','女']
				],
				showsex:false,
				showage:false,
				list:[],
				page:1,
				info:{},
				sex:'',
				age:[],
				popup:false,
				workList:[],
				educationList:[{name:'高中',isSelect:false},{name:'大专',isSelect:false},{name:'本科',isSelect:false},{name:'研究生',isSelect:false},{name:'博士',isSelect:false}],
				work:[],
				education:[],
				inputstyle:{
					width:'260rpx',
					background: '#F4F4F4',
					borderRadius:' 8rpx'
					
				}
			}
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			tabClick(index){
					if(this.current!=index){
						this.page=1
						this.current=index
						this.getList()
					}
			},
			canceltoast(){
					this.showtoast=false
			},
			submit(){
				var arr=this.educationList.filter(item=>{
					return item.isSelect==true
				})
				var arr1=this.workList.filter(item=>{
					return item.isSelect==true
				})
				if(arr.length!=0){
					this.educationList.forEach(item=>{
						if(item.isSelect){
							this.education.push(item.name)
						}
					})
				}else{
					this.education=[]
				}
				if(arr.length!=0){
					this.workList.forEach(item=>{
						if(item.isSelect){
							this.work.push(item.id)
						}
					})
				}else{
					this.work=[]
				}
				this.page=1
				this.getList()
			this.popup=false	
			},
			reset(){
				this.age_min=''
				this.age_max=''
					this.workList.forEach(item=>{
						item.isSelect=false
					})
					this.educationList.forEach(item=>{
						item.isSelect=false
					})
			},
			educationClick(item){
				item.isSelect=!item.isSelect
			},
			workClick(item){
				item.isSelect=!item.isSelect
			},
			getWork(){
				uni.$u.http.post('/api/index/WorkNature').then(res => {
					res.data.forEach(item=>{
						item.isSelect=false
					})
				this.workList=res.data
				})
			},
			confirm(e){
					this.age=e.value
					this.page=1
					this.getList()
					this.showage=false
			},
			changeage(e) {
				console.log(11,e)
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					this.columns[1]=[...this.columns[0]]
					
					console.log(123,this.columns[1])
					// picker为选择器this实例，变化第二列对应的选项
					// picker.setColumnValues(1, this.columnData[index])
					this.columns[1].splice(0,index)
					this.$set(this.columns,1,this.columns[1])
					
					console.log(456,this.columns[1])
					
				}
			},
			changesex(e){
					  this.sex=e.indexs[0]*1+1
					  this.showsex=false
					  this.page=1
					  this.getList()
			},
			getInfo(){
				uni.$u.http.post('/api/user/userinfo').then(res => {
					if(res.code==1){
						this.info=res.data
						
					}
				})
			},
			tomessage(item){
				if(this.info.vip_level==0){
					this.showtoast=true
					return
				}
				if(this.info.vip_level==2){
					this.$u.toast('经用户反馈，您账户存在违规行为，暂不支持使用该功能')
					return
				}
				if(this.info.vip_level==3){
									this.$u.toast('您的账户已注销，暂不支持使用该功能')
									return
								}
				uni.navigateTo({
					url:'./message?otherid='+item.im_id
				})
			},
			toinfo(item){
				// if(this.info.vip_level==0){
				// 	this.showtoast=true
				// 	return
				// }
				if(this.info.vip_level==2){
					this.$u.toast('经用户反馈，您账户存在违规行为，暂不支持使用该功能')
					return
				}
				if(this.info.vip_level==3){
									this.$u.toast('您的账户已注销，暂不支持使用该功能')
									return
								}
				uni.navigateTo({
					url:'../profile/otherPage?id='+item.id
				})
			},
			getList(){
				let data={
					level:this.current==0?1:this.current==1?0:'',
					page:this.page,
					age_min:this.age_min,
					age_max:this.age_max,
					nature:this.work.length==0?'':this.work.toString(),
					education:this.education.length==0?'':this.education.toString(),
					sex:this.current==2?1:this.current==3?2:''
				}
				uni.$u.http.post('/api/Index/certified_user',data).then(res => {
				if(this.page==1){
					this.list=res.data
				}else{
					this.list=[...this.list,...res.data]
				}
				})
			},
		}
	}
</script>

<style lang="scss">
.item{
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #F0F0F0;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #777777;
		margin-bottom: 20rpx;
	}
	.item:nth-child(3n-1){
		margin: 0 15rpx 20rpx;
	}
	.item1{
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #F0F0F0;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #777777;
		margin-bottom: 20rpx;
	}
	.item1:nth-child(3n-1){
		margin: 0 15rpx 20rpx;
	}
	.select{
		
background: #F6F3FD;
color: #CEACEA;
	}
page{
	padding: 100rpx 0;
	background-color: #F6F2FD;
}
.tab_item{
	width: 132rpx;
	height: 52rpx;
	background: #F0F0F0;
	border-radius: 8rpx;
	color: #777777;
	font-size: 26rpx;
	line-height: 52rpx;
	text-align: center;
}
.select_tab{
	background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
	color: #fff;
	font-weight: 600;
}
</style>