sugarpark-mini-program/pages/search/search.vue

<template>
	<view class="container">
		<view id="topnav" class="topnav flex-start" :style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`}">
			<image :src="`${assetsUrl}back.png`" mode="widthFix" class="back" @click="back" ></image>
		</view>
		<view class="search-box flex-start" :style="{'padding-top':`${topbarOffsetHeight+5}px`}">
			<view class="input-box flex-start">
				<image :src="`${assetsUrl}search-input-serch.png`" mode="aspectFill" class="search-img"></image>
				<input :focus="inputFocus" type="text" placeholder="输入昵称进行搜索" placeholder-style="font-size:24rpx;color:#7D7DA4;" class="search-input font24 fw400" v-model="inputText" confirm-type="search" @confirm="search" @input="search">
			</view>
			<!-- <view class="cancel font28 fw400" @click="search" v-if="users.length===0||user">
				搜索
			</view>
			<view class="cancel font28 fw400" @click="cancel" v-else>
				取消
			</view> -->
		</view>
		<view class="his-input" v-if="inputText===null" :style="{'padding-top':`${topbarOffsetHeight+56}px`}">
			
			<view class="his-item flex-between" v-for="(item,index) in searchs" :key="index">
				<view class="his-left flex-start" @click="chooseHisItem(index)">
					<image :src="`${assetsUrl}search-time.png`" mode="aspectFill" class="his-icon"></image>
					<text class="his-text font28 fw400">{{item}}</text>
				</view>
				<image :src="`${assetsUrl}search-close.png`" mode="aspectFill" class="his-close" @click="closeHisItem(index)"></image>
			</view>
			<view class="tip font24 fw400" v-if="searchs.length>0" @click="clearAll">
				清空搜索记录
			</view>
		</view>
		<view :style="{'padding-top':`${topbarOffsetHeight+56}px`}" v-if="users&&users.length>0">
			<view class="list-item flex-start" v-for="(item,index) in users" :key="index" @click="toDetail(item.id)">
				<view class="list-head-box">
					<image :src="item.iconThumbnail" mode="aspectFill" class="list-head-img"></image>
					<view class="list-head-dot" style="background-color: #38E825;" v-if="item.lastActiveTime<=30"></view>
					<view class="list-head-dot" style="background-color: #0ABDEF;" v-else-if="item.lastActiveTime>30&&item.lastActiveTime<=1440"></view>
				</view>
				<view class="list-info-box">
					<view class="name-box flex-between">
						<view class="name flex-start">
							<view class="name-text font28 fw600">
								{{item.nick}}
							</view>
							<image :src="`${assetsUrl}friends-vip.png`" mode="aspectFill" class="name-img" v-if="item.vip"></image>
							<image :src="`${assetsUrl}friends-godness.png`" mode="aspectFill" class="name-img-godness" v-if="item.goddess"></image>
							<image :src="`${assetsUrl}friends-real.png`" mode="aspectFill" class="name-img" v-else-if="item.realMan"></image>
						</view>
						<view class="distance font22 fw400" v-if="item.distance&&item.distance!=='NaNm'">
							{{item.distance}}
						</view>
					</view>
					<view class="sex-box flex-center" :style="{'background-color':`${item.sex==='Male'?'rgba(108,82,244,0.21)':''}`}">
						<image :src="`${assetsUrl}friends-female.png`" mode="aspectFill" class="sex-img" v-if="item.sex==='Famale'"></image>
						<image :src="`${assetsUrl}friends-male.png`" mode="aspectFill" class="sex-img" v-if="item.sex==='Male'"></image>
						<view class="el font20 fw500 sex-text1" v-if="item.sex==='Famale'">
							{{item.ageInfo.age}}
						</view>
						<view class="el font20 fw500 sex-text2" v-if="item.sex==='Male'">
							{{item.ageInfo.age}}
						</view>
					</view>
					<view class="tip-box font28 fw400 el" v-if="item.desc">
						签名：{{item.desc}}
					</view>
					<view class="tip-box font28 fw400 el" v-else>
						签名：暂无介绍
					</view>
				</view>
				<view class="img-box flex-between" v-if="item.lastNews">
					<image :src="item.lastNews.mediaUrls[0]" mode="aspectFill" class="ib1"></image>
					<image :src="item.lastNews.mediaUrls[1]" mode="aspectFill" class="ib2"></image>
					<image :src="item.lastNews.mediaUrls[2]" mode="aspectFill" class="ib3"></image>
				</view>
			</view>
		</view>
		<view class="no-more font24 fw400" v-if="users!==null">没有更多了</view>
		<Status type="noData" text="暂无数据" v-if="showNoData"></Status>
	</view>
</template>

<script>
	import Status from '@/components/Status/Status.vue';
	import wxMap from '@/static/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js';
	const wxMapSdk=new wxMap({key:'E5SBZ-T2YC3-CBL3F-YGFQQ-26PP2-ERFII'});
	export default {
		components: {
			Status
		},
		data() {
			return {
				assetsUrl: this.$util.assetsUrl,
				inputText:null,
				searchOptions:{
					completeUser:{},
					geo:{
						lat:0,
						lon:0
					},
					listType:'',
					page:{
						index:1,
						size:20,
						sortValues:[]
					},
					prefer:{
						cityCode:null,
						femaleGoddess:false,
						femaleNew:false,
						maleNew:false,
						maleVip:false,
						maxAge:null,
						minAge:null,
						nick:'',
						onlineIn24Hour:null,
						onlineIn30Min:null,
						sortType:'Recommend'
					}
				},
				users:null,
				searchs:[],
				inputFocus:true,
				showNoData:false
			};
		},
		onLoad() {
			this.searchs=uni.getStorageSync('searchHistory')||[];
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.statusBarHeight;
			},
			topbarOffsetHeight() {
				return this.$store.state.topbarOffsetHeight;
			},
			userInfo(){
				return this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'))
			}
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			search(){
				if(this.inputText===null){
					this.users=null;
					return;
				}
				if(this.inputText===''){
					this.users=null;
					this.inputText=null;
					return;
				}
				this.searchs=uni.getStorageSync('searchHistory')||[];
				if(this.searchs.includes(this.inputText)){
					this.searchs.splice(this.searchs.indexOf(this.inputText),1);
				}
				if(this.searchs.length>=10){
					this.searchs.shift();
				}
				this.searchs.unshift(this.inputText);
				uni.setStorageSync('searchHistory',this.searchs);
				let user=JSON.parse(uni.getStorageSync('user'))
				this.searchOptions.listType=user.sex==='male'?'MaleReco':'FaMaleReco';
				this.searchOptions.geo.lat=this.$store.state.latitude;
				this.searchOptions.geo.lon=this.$store.state.longitude;
				this.searchOptions.prefer.nick=this.inputText;
				this.searchOptions.completeUser=user;
				this.$api.public.search(this.searchOptions).then(res=>{
					if(res.status==='Succ'){
						for(let i=0;i<res.data.users.length;i++){
							res.data.users[i].lastActiveTime=this.$moment(new Date()).diff(res.data.users[i].lastActive,'minutes');
						}
						console.log(res.data.users);
						this.users=res.data.users;
						this.showNoData=this.users.length===0?true:false;
					}
				})
			},
			cancel(){
				this.users=null;
				this.inputText=null;
			},
			chooseHisItem(index){
				this.inputText=this.searchs[index];
				this.$nextTick(()=>{
					this.inputFocus=true;
				})
				this.search();
				
			},
			closeHisItem(index){
				this.searchs.splice(index,1);
				uni.setStorageSync('searchHistory',this.searchs);
			},
			clearAll(){
				uni.setStorageSync('searchHistory',[]);
				this.searchs=[]
			},
			toDetail(id){
				uni.showLoading({})
				let user=JSON.parse(uni.getStorageSync('user'));
				this.$api.public.userDetail({getAlbum:true,completeUser:user,uponUserId:id}).then(res=>{
					if(res.data.frozen){
						uni.showToast({
							title:'该用户已被冻结',
							icon:'none'
						});
						return;
					}
					if(res.data.sex===user.sex){
						uni.showToast({
							title:'同性用户不能查看主页',
							icon:'none'
						})
					}
					else{
						this.otherInfo=res.data;
						uni.setStorageSync('otherInfo',JSON.stringify(res.data));
						uni.hideLoading();
						uni.navigateTo({
							url:`/pages/friends/user?id=${id}`
						})
					}
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
		width: 100vw;
		min-height: 100vh;
		background-color: $bgcolor1;
		overflow: hidden;
		.topnav {
			margin: 0 32rpx;
			width: 100vw;
			align-items: center;
			position: fixed;
			background-color: $bgcolor1;
			z-index: 11;
			padding-bottom: 10rpx;
			.back{
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}
		.search-box{
			margin: 0 32rpx;
			height: 96rpx;
			width: 686rpx;
			align-items: center;
			position: fixed;
			background-color: $bgcolor1;
			z-index: 10;
			padding-bottom: 10rpx;
			
			.input-box{
				flex: 1;
				margin: 20rpx 0rpx;
				height: 80rpx;
				background-color: #332D4C;
				padding: 0rpx 24rpx;
				border-radius: 40rpx;
				.search-img{
					width: 40rpx;
					height: 40rpx;
				}
				.search-input{
					flex: 1;
					color: $fontcolor5;
					margin-left: 5rpx;
				}
			}
			.cancel{
				color: #D4D4F1;
				margin-left: 16rpx;
			}
		}
		.his-input{
			margin: 0 32rpx;
			margin-top: 24rpx;
			.his-item{
				padding: 28rpx 0rpx;
				.his-left{
					flex: 1;
					.his-icon{
						width: 40rpx;
						height: 40rpx;
					}
					.his-text{
						color: #D4D4F1;
						margin-left: 16rpx;
					}
				}
				.his-close{
					width: 32rpx;
					height: 32rpx;
					padding: 8rpx;
				}
			}
			.tip{
				color: #D4D4F1;
				text-align: center;
				text-decoration: underline;
			}
		}
		.list-item{
			margin: 0 32rpx;
			flex-wrap: wrap;
			padding: 40rpx 0rpx;
			.list-head-box{
				width: 136rpx;
				height: 136rpx;
				position: relative;
				.list-head-img{
					width: 136rpx;
					height: 136rpx;
					background-color: #ffffff;
					border-radius: 136rpx;
				}
				.list-head-dot{
					width: 24rpx;
					height: 24rpx;
					border-radius: 24rpx;
					position: absolute;
					background-color: aqua;
					bottom: 2rpx;
					right: 2rpx;
					border: 2rpx solid $bgcolor2;
				}
			}
			.list-info-box{
				box-sizing: border-box;
				width: 544rpx;
				padding-left: 32rpx;
				height: 136rpx;
				flex-direction: column;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				.name-box{
					width: 100%;
					.name{
						.name-text{
							color: $fontcolor5;
						}
						.name-img{
							width: 68rpx;
							height: 32rpx;
							margin-left: 8rpx;
							
						}
						.name-img-godness{
							width: 76rpx;
							height: 40rpx;
							margin-left: 8rpx;
							transform: translateY(-5rpx);
						}
					}
					.distance{
						color: $fontcolor3;
					}
				}
				.sex-box{
					padding: 0 15rpx;
					height: 32rpx;
					background: rgba(226, 53, 104, 0.2);
					border-radius: 25rpx;
					margin-top: 12rpx;
					.sex-img{
						width: 24rpx;
						height: 24rpx;
					}
					.sex-text1{
						color:#E23568;
						margin-left: 4rpx;
					}
					.sex-text2{
						color:#6C52F4;
						margin-left: 4rpx;
					}
				}
				.tip-box{
					color: $fontcolor3;
					width: 100%;
					margin-top: 10rpx;
				}
				
			}
			.img-box{
				width: 544rpx;
				height: 168rpx;
				margin-left: 168rpx;
				margin-top: 24rpx;
				.ib1{
					width: 168rpx;
					height: 168rpx;
					border-radius: 16rpx 0rpx 0rpx 16rpx;
					background: $fontcolor5;
				}
				.ib2{
					width: 168rpx;
					height: 168rpx;
					background: $fontcolor5;
				}
				.ib3{
					width: 168rpx;
					height: 168rpx;
					border-radius: 0rpx 16rpx 16rpx 0rpx;
					background: $fontcolor5;
				}
			}
		}
}
</style>