chunwan/pages/index/search.vue

<template>
	<view class="search">
		<view class="search-hd">
			<view class="a">
				<image src="@/static/search.png"></image>
				<input type="search" v-model="nickname" placeholder="请输入名称搜索" />
				<view class="btn" v-if="type==1" @click="customerRecommendList()">搜索</view>
				<view class="btn" v-else @click="customerRecommendList()">搜索</view>
			</view>
			<view class="b" @click="openPage(1)">
				<image src="@/static/filter.png"></image>
			</view>
		</view>
		<view class="search-bd">
			<view class="item" v-for="(a,i) in commentList" :key="i">
				<view class="pic" @click="openPage(4,a.id)">
					<image :src="a.faceImage?a.faceImage:a.img"></image>
				</view>
				<view class="info" @click="openPage(4,a.id)">
					<view class="name">{{a.nickname}}<view class="vip" v-if="a.memberflag>=1">VIP{{a.memberflag}}</view></view>
					<view class="desc">{{a.age}}岁/{{a.height}}cm</view>
				</view>
				<view class="chat" v-if="type == 1" @click="openPage(5,a)">
					<image src="@/static/xin.png"></image>
					搭讪
				</view>
				<view class="chat" v-else @click="openPage(6,a)">
					<image src="@/static/xin.png"></image>
					约玩
				</view>
			</view>
			<view class="empty" v-if="isShow">
				<image src="@/static/empty.png"></image>
				<view class="txt">暂无数据</view>
			</view>
		</view>
		<unverified :isPopup="isPopup" />
		<insufficient :isCoins="isCoins" />
		<dashan :isDashan="isDashan" :info="info"></dashan>
		<u-popup v-model="show" mode="center" border-radius="20">
			<view class="filter">
				<view class="title">筛选</view>
				<view class="content">
					<view class="a">
						<view class="fl">年龄</view>
						<view class="fr">18-80</view>
					</view>
					<view class="b">
						<sliderRange
						  :value="rangeValue"
						  :min="18"
						  :max="80"
						  :step="1"
						  :bar-height="3"
						  :block-size="26"
						  background-color="#EEEEF6"
						  active-color="#222222"
						  :decorationVisible="false"
						  @change="handleRangeChange"
						></sliderRange>
					</view>
				</view>
				<view class="btns">
					<view class="reset" @click="openPage(2)">重置</view>
					<view class="sure" @click="openPage(3)">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import sliderRange from '@/components/sliderRange.vue'
	export default {
		components: {
			sliderRange
		},
		data() {
			return {
				nickname: "",
				isShow: true,
				rangeValue: [18,80],
				show: false,
				isPopup: false,
				isDashan: false,
				isCoins: false,
				type: 1,
				startAge: "",
				endAge: "",
				commentList: [],
				info: {},
				page: 1,
				total: 1
			};
		},
		onLoad(o) {
			const that = this;
			that.type = o.type
			uni.$on("closeSharePopup",res=>{
				that.isPopup = false;
				that.isDashan=  false;
				that.isCoins=  false;
			})
			
			uni.$on("openCoinsPopup",res=>{
				that.isCoins = res
			})
		},
		onReachBottom() {
			const that = this;
			uni.showLoading({
				title: "加载中"
			})
			if(that.commentList.length <= that.total){
				that.page ++;
				setTimeout(function() {
					that.customerRecommendList(1);
				}, 1000);
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			//获取用户信息
			async getUserInfo() {
				const { code, data , msg } = await this.$api.findUserInfo({userId: uni.getStorageSync("userInfo").id});
				if(code == 200){
					this.userInfo = data;
					uni.setStorageSync("userInfo",data);
				}else{
					uni.showToast({
						title: msg,
						position: "bottom",
						icon: "none",
					})
				}
			},
			//数组对象去重
			arrayUnique (arr, name) {
				var hash = {};
				return arr.reduce(function (item, next) {
					hash[next[name]]
						? ""
						: (hash[next[name]] = true && item.push(next));
					return item;
				}, []);
			},
			//首页附近
			async customerRecommendList(){
				const { code, data , msg } = await this.$api.customerRecommendList({
					userId: uni.getStorageSync("userInfo").id,
					nickname: this.nickname,
					startAge: this.startAge,
					endAge: this.endAge,
					page: this.page,
					limit: 20,
				});
				if(code == 200){
					this.commentList = this.arrayUnique([...this.commentList,...data.list],'id')
					this.total = data.total
					this.isShow = data.total==0?true:false
				}
			},
			openPage(index,id){
				if(index == 1){
					this.show = !this.show
				}else if(index == 2){
					this.rangeValue = [18,80]
				}else if(index == 3){
					this.show = false;
					this.customerRecommendList();
				}else if(index == 4){
					uni.navigateTo({
						url: "/pages/peiwan/detail?id="+id
					})
				}else if(index == 5){
					if(this.userInfo.realnameFlag == 0 || this.userInfo.faceFlag == 0 || this.userInfo.phoneFlag == 0){
						this.isPopup = true
						return ;
					}
					this.info = id
					this.info.userid = id.id
					this.isDashan = true;
				}else if(index == 6){
					if(this.userInfo.realnameFlag == 0 || this.userInfo.faceFlag == 0 || this.userInfo.phoneFlag == 0){
						this.isPopup = true
						return ;
					}
					uni.navigateTo({
						url: "/pages/peiwan/detail?id="+id
					})
				}
			},
			handleRangeChange(e){
				this.rangeValue = e
				this.startAge = e[0]
				this.endAge = e[1]
			},
		}
	}
</script>

<style scoped lang="scss">
.search{
	.filter{
		width: 630rpx;
		height: 500rpx;
		.title{
			padding: 40rpx 0 30rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #222222;
			text-align: center;
			border-bottom: 1px solid #EAEAEA;
		}
		.content{
			padding: 40rpx;
			overflow: hidden;
			.a{
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
				justify-content: space-between;
			}
			.b{
				width: 100%;
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 30rpx;
				color: #222222;
				justify-content: space-between;
				position: relative;
				margin-top: 45rpx;
			}
		}
		.btns{
			height: 90rpx;
			border-top: 1px solid #EAEAEA;
			display: flex;
			align-items: center;
			.reset{
				flex: 1;
				border-right: 1px solid #EAEAEA;
				text-align: center;
				font-size: 30rpx;
				color: #222222;
				font-weight: 500;
				text-align: center;
				line-height: 90rpx;
			}
			.sure{
				flex: 1;
				text-align: center;
				font-size: 30rpx;
				color: #222222;
				font-weight: 500;
				text-align: center;
				line-height: 90rpx;
			}
		}
	}
	&-hd{
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		.a{
			width: 620rpx;
			height: 70rpx;
			background: #F6F6F6;
			border-radius: 70rpx;
			border: 1px solid #EAEAEA;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			box-sizing: border-box;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 14rpx;
			}
			input{
				height: 50rpx;
				line-height: 50rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #212121;
				flex: 1;
			}
			.btn{
				width: 100rpx;
				line-height: 60rpx;
				background: linear-gradient(0deg, #000000, #3D3B38);
				box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
				border-radius: 60rpx;
				text-align: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
		.b{
			flex: 1;
			text-align: center;
			image{
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	&-bd{
		padding: 0 25rpx 25rpx;
		overflow: hidden;
		.empty{
			padding: 150rpx 0;
			text-align: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			image{
				display: block;
				width: 460rpx;
				height: 400rpx;
				margin: 0 auto;
			}
		}
		.item{
			width: 100%;
			height: 200rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 10rpx 0px rgba(0,0,0,0.06);
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			.pic{
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
				overflow: hidden;
				margin-right: 20rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.info{
				flex: 1;
				.name{
					font-weight: 500;
					font-size: 32rpx;
					color: #222222;
					display: flex;
					align-items: center;
					.vip{
						width: 60rpx;
						line-height: 32rpx;
						background: url(@/static/vip-bg.png) center top no-repeat;
						background-size: contain;
						text-align: center;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						overflow: hidden;
						margin-left: 20rpx;
					}
				}
				.desc{
					width: 180rpx;
					line-height: 40rpx;
					background: #F2F2F2;
					border-radius: 40rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					text-align: center;
					margin-top: 20rpx;
				}
			}
			.chat{
				width: 150rpx;
				height: 90rpx;
				background: linear-gradient(0deg, #000000, #3D3B38);
				box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
				border-radius: 90rpx;
				margin-left: 20rpx;
				text-align: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				image{
					width: 65rpx;
					height: 32rpx;
					display: block;
					margin: 15rpx auto 5rpx;
				}
			}
		}
	}
}
</style>