xiangqin/pages/index/pipeizhong.vue

<template>
	<view>
		<view class="index">
			<view class="pipei" v-if="isSearch">
				<view class="bg">
					<image src="../../static/index/pipeibg.png" mode="" :style="{'transform':'scale('+count+')'}"></image>
					<view class="avatar">
						<image :src="userInfo.headimg" mode=""></image>
					</view>
				</view>
				<view class="" style="margin-top: 60rpx;text-align: center;font-size: 28rpx;">
					正在根据你的择偶要求<br> 搜寻匹配的人
				</view>
			</view>
			<view class="list u-flex u-row-between" v-if="!isSearch">
				<view class="item" v-for="(item,index) in list" :key="index" @click="torecommendinfo(item)">
					<view class="">
						<image :src="item.headimg" mode=""></image>
					</view>
					<view class="" style="font-size: 32rpx;padding: 16rpx 0 8rpx 20rpx;">
						{{item.nickname}} <image src="../../static/index/2@2x.png" mode="" style="width: 32rpx;height: 32rpx;margin:0 20rpx;vertical-align: middle;" v-show="itm.sex==1"></image> <image src="../../static/index/1@2x.png" mode="" style="width: 32rpx;height: 32rpx;margin:0 20rpx;vertical-align: middle;"  v-show="itm.sex==2"></image> 
					</view>
					<view class="u-flex u-row-between"  style="font-size: 24rpx;padding: 8rpx 0 34rpx 20rpx;color: #888888;">
						<text>{{item.province_id?item.province_id:''}}{{item.age?'·'+item.age+'岁·':''}}{{item.height?item.height+'cm':''}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSearch:true,
				count:0,
				timer:null,
				list:[],
				userInfo:{}
			}
		},
		onLoad(option) {
			this.userInfo=JSON.parse(uni.getStorageSync('userInfo'))
			this.getList(JSON.parse(option.info))
		},
		onShow() {
			if(this.isSearch){
				this.timer=setInterval(()=>{
					console.log(1)
					if(this.count<1){
						this.count+=0.1
					}
					if(this.count>=1){
						this.count=0
					}
				},200)
			}
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			torecommendinfo(item){
				uni.navigateTo({
					url:'../profile/otherPage?id='+item.id
				})
			},
			getList(data){
				uni.$u.http.post('/api/Index/Intelligent',data).then(res => {
				this.list=res.data
				setTimeout(()=>{
					if(this.list.length==0){
						this.$u.toast('暂未找到合适的伴侣')
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},1000)
					}else{
						this.isSearch=false
					}
					
				},3000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.list{
		flex-wrap: wrap;
		padding: 20rpx 30rpx;
		.item{
			
border-radius: 28rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			image{
				width: 330rpx;
				height: 320rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
			}
		}
	}
	.pipei{
		position: absolute;
		top: 132rpx;
		left: 50%;
		transform: translateX(-50%);
		.bg{
			margin: 0 auto;
			width: 610rpx;
			height: 610rpx;
			position: relative;
			text-align: center;
			image{
				width: 610rpx;
				height: 610rpx;
			}
			.avatar{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				image{
					width: 172rpx;
					height: 172rpx;
					border-radius: 50%;
					border: 8rpx solid #FFFFFF;
				}
			}
		}
	}
page{
	background-color: #F6F2FD;
}
</style>