xiangqin/pages/index/registerVip.vue

<template>
	<view>
		<view class="u-flex u-row-between" style="height: 80rpx;background-color: #fff;position:fixed;top:0;width: 750rpx;line-height: 80rpx;padding: 0 30rpx;box-sizing: border-box;color: #666666;font-size: 26rpx;">
			<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">
				筛选 <u-icon name="hourglass"  size="20" color="#000"></u-icon>
			</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: 40rpx;position: relative;" v-for="(item,index) in list" :key="index" @click="toinfo(item)">
			<view class="">
				<image :src="item.headimg" mode="" style="width: 336rpx;
				height: 336rpx;
				border-radius: 20rpx;"></image>
			</view>
	<view class="" style="font-size: 32rpx;padding: 20rpx;">
		{{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="u-flex u-row-between"  style="font-size: 24rpx;padding: 20rpx;color: #888888;">
		<text>{{item.province_id?item.province_id+'·':''}}{{item.age?item.age+'·':''}}{{item.height?item.height:''}}</text>
		<image src="../../static/index/dazhaohu.png" mode="" style="width: 128rpx;height: 48rpx;vertical-align: middle;position: absolute;top: 24rpx;right: 16rpx;" @click.stop="tomessage(item)"></image>
	</view>
		</view>
		</view>
		<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 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>
</template>

<script>
	import Showtoast from'../../components/Showtoast.vue'
	export default {
		components:{
			Showtoast
		},
		onLoad() {
			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 {
				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:[]
				
			}
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			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.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={
					page:this.page,
					age_min:this.age.length==0?'':this.age[0],
					age_max:this.age.length==0?'':this.age[1],
					nature:this.work.length==0?'':this.work.toString(),
					education:this.education.length==0?'':this.education.toString(),
					sex:this.sex
				}
				uni.$u.http.post('/api/Index/registered_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;
}
</style>