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">
				筛选 <u-icon name="hourglass"  size="20" color="#000"></u-icon>
			</view>
		</view>
		<view class="" style="background-color: #fff;width: 690rpx;margin:0 30rpx 20rpx;border-radius: 40rpx;" v-for="(item,index) in list" :key="index" @click="toinfo(item)">
			<view class="">
				<image :src="item.headimg" mode="" style="width: 690rpx;
				height: 640rpx;
				border-radius: 40rpx;"></image>
			</view>
	<view class="" style="font-size: 40rpx;padding: 20rpx;">
		{{item.nickname}} <image src="../../static/index/2@2x.png" mode="" style="width: 36rpx;height: 36rpx;margin:0 20rpx" v-show="item.sex==1"></image> <image src="../../static/profile/8@2x.png" mode="" style="width: 104rpx;height: 36rpx;"  v-show="item.sex==2"></image>
	</view>
	<view class="u-flex u-row-between"  style="font-size: 28rpx;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: 190rpx;height: 68rpx;vertical-align: middle;" @click.stop="tomessage(item)"></image>
	</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>
	</view>
</template>

<script>
	export default {
		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()
		},
		data() {
			return {
				columns1:[],
				columns: [
					[18],
					[18]
				],
				sexcolumns: [
					['男','女']
				],
				showsex:false,
				showage:false,
				list:[],
				page:1,
				info:{},
				sex:''
			}
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			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
			},
			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.$u.toast('您暂未认证')
					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){
				uni.navigateTo({
					url:'../profile/otherPage?id='+item.id
				})
			},
			getList(){
				uni.$u.http.post('/api/Index/registered_user',{page:this.page}).then(res => {
				this.list=[...this.list,...res.data]
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	padding: 80rpx 0;
	background-color: #F6F2FD;
}
</style>