h5-sugarpark/src/views/mine/guest.vue

<template>
	<div class="container" ref="scrolllist" @scroll.passive="scrollEvent">
		<div id="topnav" class="topnav flex-between" :style="{'padding-top':`${statusBarHeight}px`}">
			<div class="nav-item flex-center" @click="back">
				<img :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></img>
			</div>
			<div class="nav-text font32 fw600">
				{{pageName}}
			</div>
			<div class="nav-item"></div>
		</div>
		<div class="list" :style="{'padding-top':`${statusBarHeight+60}px`}">
			<div class="list-item flex-start" v-for="(item,index) in listData" :key="index" @click="toDetail(item.id)" >
				<div class="list-head-box">
					<div class="list-head-img-drop" v-if="userInfo.sex==='Male'&&!userInfo.vip||userInfo.sex==='Famale'&&!userInfo.realMan"></div>
					<img :src="item.iconThumbnail" mode="aspectFill" class="list-head-img"></img>
					<div class="list-head-dot" style="background-color: #38E825;" v-if="item.lastActiveTime<=30"></div>
					<div class="list-head-dot" style="background-color: #0ABDEF;" v-else-if="item.lastActiveTime>30&&item.lastActiveTime<=1440"></div>
				</div>
				<div class="list-info-box">
					<div class="name-box flex-between">
						<div class="name flex-start">
							
							<div class="name-text font28 fw600" v-if="userInfo.sex==='Male'&&!userInfo.vip||userInfo.sex==='Famale'&&!userInfo.realMan">
								- - - - 
							</div>
							<div class="name-text font28 fw600" v-else>
								{{item.nick}}
							</div>
							<img :src="`${assetsUrl}friends-vip.png`" mode="aspectFill" class="name-img" v-if="item.vip"></img>
							<img :src="`${assetsUrl}friends-godness.png`" mode="aspectFill" class="name-img-godness" v-if="item.goddess"></img>
							<img :src="`${assetsUrl}friends-real.png`" mode="aspectFill" class="name-img" v-else-if="item.realMan"></img>
						</div>
						<div class="distance font22 fw400" v-if="item.distance">
							{{item.distance}}
						</div>
					</div>
					<div class="sex-box flex-center">
						<img :src="`${assetsUrl}friends-female.png`" mode="aspectFill" class="sex-img"></img>
						<div class="el font20 fw500 sex-text">
							{{item.ageInfo.age}}
						</div>
					</div>
					<div class="tip-box font28 fw400 el">
						签名：{{item.desc}}
					</div>

				</div>
				<div class="img-box flex-between" v-if="item.lastNews">
					<img :src="item.lastNews.mediaUrls[0]" mode="aspectFill" class="ib1"></img>
					<img :src="item.lastNews.mediaUrls[1]" mode="aspectFill" class="ib2"></img>
					<img :src="item.lastNews.mediaUrls[2]" mode="aspectFill" class="ib3"></img>
				</div>
			</div>
			<Status type="noData" text="暂无数据" v-if="showNoData"></Status>
			<div class="no-more font24 fw400" v-if="listData.length!==0&&listData.length>=scrollTotal">没有更多了</div>
		</div>
	</div>
</template>

<script>
	import wxMap from '@/static/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js';
	import {assetsUrl} from '../../util/index.js';
	/**
	 * 腾讯位置服务，手机账号：18996226740
	 */
	const wxMapSdk=new wxMap({key:'E5SBZ-T2YC3-CBL3F-YGFQQ-26PP2-ERFII'});
	import Status from '@/components/Status/Status.vue';
	export default {
		components: {
			Status
		},
		data() {
			return {
				assetsUrl,
				pageName:'',
				pageType:'',
				getOptions:{
					index:1,
					size:20,
					sortValues:[]
				},
				listData:[],
				scrollTotal:0,
				showNoData:false,
				user:null,
				isLoad:false
				
				
			};
		},
		computed: {
			latitude(){
				return this.$store.state.latitude;
			},
			longitude(){
				return this.$store.state.longitude;
			},
			userInfo(){
				return localStorage.getItem('userInfo');
			},
			statusBarHeight(){
				return localStorage.getItem('statusBarHeight');
			}
		},
		mounted() {
			this.pageType=this.$route.params.pagetype;
			this.pageName=this.$route.params.name;
			this.getGuestData();
			
		},
		activated() {
			this.pageType=this.$route.params.pagetype;
			this.pageName=this.$route.params.name;
			this.getGuestData();
		},
		methods:{
			back(){
				this.$router.back();
			},
			scrollEvent() {
				let scrollHeight = event.target.scrollHeight;
				let scrollTop = event.target.scrollTop;
				let clientHeight = event.target.clientHeight;
				let scrollBottom = scrollHeight - scrollTop - clientHeight;
				if(scrollBottom<50&&!this.isLoad){
					console.log('到底了')
					this.getOptions.index++;
					this.isLoad=true;
					this.getGuestData();
				}
			},
			getGuestData(){
				let user=JSON.parse(localStorage.getItem('user'));
				this.$api.public.guestor({
					completeUser:user,
					listType:this.pageType,
					page:this.getOptions,
					prefer:{
						nick:null,
						onlineIn24Hour:false
					},
					uponUserId:user.id
				}).then(res=>{
					
					if(this.getOptions.index>1){
						this.listData=[...this.listData,...res.data.users];
					}
					else{
						this.listData=res.data.users;
					}
					if(this.listData&&this.listData.length===0){this.showNoData=true;}
					this.scrollTotal=res.data.page.recordCount;
					let arr=[],obj={latitude:0,longitude:0};
					for(let i=0;i<this.listData.length;i++){
						this.listData[i].lastActiveTime=this.$moment(new Date()).diff(this.listData[i].lastActive,'minutes');
						if(this.listData[i].desc){
							if(this.userInfo.sex==='Male'){
								if(!this.userInfo.vip){
									this.listData[i].desc='- - - -'
								}
							}
							if(this.userInfo.sex==='Famale'){
								if(!this.userInfo.realMan){
									this.listData[i].desc='- - - -'
								}
							}
						}
						else{
							this.listData[i].desc='暂无介绍';
						}
						
						obj={latitude:0,longitude:0};
						obj.latitude=this.listData[i].geo.lat;
						obj.longitude=this.listData[i].geo.lon;
						arr.push(obj)
					}
					wxMapSdk.calculateDistance({
						mode:'straight',
						from:{
							latitude: this.$store.state.latitude,
							longitude: this.$store.state.longitude
						},
						to:arr,
						success:dists=>{
							if(dists.message==="query ok"){
								for(let j=0;j<dists.result.elements.length;j++){
									this.listData[j].distance=(dists.result.elements[j].distance>1000?`${Math.floor(dists.result.elements[j].distance/100)/10}km`:`${dists.result.elements[j].distance}m`)
								}
							}
						},fail:err=>{
							console.log(err)
						}
					});
					this.isLoad=false;
				})
			},
			toDetail(id){
				this.$toast.loading({
				  message: '加载中',
				  forbidClick: true,
				  duration:0
				});
				let user=JSON.parse(localStorage.getItem('user'));
				this.$api.public.userDetail({getAlbum:true,completeUser:user,uponUserId:id}).then(res=>{
					if(res.data.frozen){
						this.$toast('该用户已被冻结');
						return;
						
					}
					else if(res.data.sex===user.sex){
						this.$toast('同性用户不能查看主页');
					}
					else{
						res.data.lastActiveTime=this.$moment(new Date()).diff(res.data.lastActive,'minutes');
						res.data.cover={
							url:'',
							cate:'video',
							isFullScreen:false
						}
						if(res.data.bkg.indexOf('.mp4')!==-1){
							res.data.cover.cate='video';
							res.data.cover.url=res.data.bkg;
						}
						else{
							res.data.cover.cate='img';
							res.data.cover.url=res.data.bkg;
						}
						localStorage.setItem('otherInfo',JSON.stringify(res.data))
						this.$toast.clear();
						this.$router.push({name:'user'});
					}
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
@import "../../public.scss";
.container{
	width: 100vw;
	height: 100vh;
	background-color: $bgcolor1;
	position: relative;
	overflow: auto;
	.topnav {
		padding: 0 5px;
		position: fixed;
		height: 60px;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 100;
		background-color: $bgcolor1;
		.nav-item{
			width: 20px;
			height: 20px;
			padding: 10px;
			
			.nav-img{
				width: 20px;
				height: 20px;
			}
		}
		.nav-text{
			flex: 1;
			color: $fontcolor5;
			height: 20px;
			text-align: center;
		}
	}
	.list{
		padding-top: 60px;
	}
	.list-item{
		flex-wrap: wrap;
		padding: 20px 16px;
		.list-head-box{
			width: 68px;
			height: 68px;
			position: relative;
			.list-head-img-drop{
				backdrop-filter: blur(10px);
				position: absolute;
				left: 0;
				top:0;
				width: 68px;
				height: 68px;
				background-color: rgba(255, 255, 255, 0.1);
				border-radius: 68px;
			}
			.list-head-img{
				width: 68px;
				height: 68px;
				background-color: #ffffff;
				border-radius: 68px;
				
			}
			.list-head-dot{
				width: 12px;
				height: 12px;
				border-radius: 12px;
				position: absolute;
				background-color: aqua;
				bottom: 1px;
				right: 1px;
				border: 1px solid $bgcolor2;
			}
		}
		.list-info-box{
			box-sizing: border-box;
			width: 267px;
			padding-left: 16px;
			height: 68px;
			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: 34px;
						height: 16px;
						margin-left: 8rpx;
						
					}
					.name-img-godness{
						width: 38px;
						height: 20px;
						margin-left: 4px;
						transform: translateY(-2px);
					}
				}
				.distance{
					color: $fontcolor3;
				}
			}
			.sex-box{
				width: 37px;
				height: 16px;
				background: rgba(226, 53, 104, 0.2);
				border-radius: 12px;
				margin-top: 6px;
				.sex-img{
					width: 12px;
					height: 12px;
				}
				.sex-text{
					color:#E23568 ;
				}
			}
			.tip-box{
				color: $fontcolor3;
				width: 100%;
				margin-top: 5px;
			}
			
		}
		.img-box{
			width: 267px;
			height: 84px;
			margin-left: 84px;
			margin-top: 12px;
			.ib1{
				width: 84px;
				height: 84px;
				border-radius: 8px 0px 0px 8px;
				background: $fontcolor5;
			}
			.ib2{
				width: 84px;
				height: 84px;
				background: $fontcolor5;
			}
			.ib3{
				width: 84px;
				height: 84px;
				border-radius: 0px 8px 8px 0px;
				background: $fontcolor5;
			}
		}
	}
}
</style>