sugarpark-mini-program/pages/mine/guest.vue

<template>
	<view class="container">
		<view id="topnav" class="topnav flex-between"  :style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`}">
			<view class="nav-item flex-center" @click="back">
				<image :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></image>
			</view>
			<view class="nav-text font32 fw600">
				{{pageName}}
			</view>
			<view class="nav-item"></view>
		</view>
		<scroll-view 
		scroll-y="true" 
		:style="{'height': `${scrollHeight}px`,'padding-top':`${topNavHeight}px`}"
		v-if="scrollHeight>0"
		lower-threshold="200"
		refresher-enabled="true"
		:refresher-triggered="scrollTriggered"
		:refresher-threshold="45" 
		refresher-default-style="white"
		refresher-background="#151126" 
		@refresherrefresh="scrollRefresh" 
		@refresherpulling="scrollPulling"
		@refresherrestore="scrollRestore" 
		@refresherabort="scrollAbort"
		@scrolltolower="scrollToBottom"
		>
			<view class="list-item flex-start" v-for="(item,index) in listData" :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}}
						</view>
					</view>
					<view class="sex-box flex-center">
						<image :src="`${assetsUrl}friends-female.png`" mode="aspectFill" class="sex-img"></image>
						<view class="el font20 fw500 sex-text">
							{{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>
			<Status type="noData" text="暂无数据" v-if="showNoData"></Status>
			<view class="no-more font24 fw400" v-if="listData.length!==0&&listData.length>=scrollTotal">没有更多了</view>
		</scroll-view>
	</view>
</template>

<script>
	import wxMap from '@/static/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.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:this.$util.assetsUrl,
				pageName:'',
				scrollHeight:0,
				topNavHeight:0,
				pageType:'',
				getOptions:{
					index:1,
					size:20,
					sortValues:[]
				},
				listData:[],
				scrollTotal:0,
				scrollRefreshing:false,
				scrollTriggered:true,
				showNoData:false,
				user:null,
				otherInfo:null
			};
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.statusBarHeight;
			},
			topbarOffsetHeight() {
				return this.$store.state.topbarOffsetHeight;
			},
			latitude(){
				return this.$store.state.latitude;
			},
			longitude(){
				return this.$store.state.longitude;
			},
		},
		onLoad(option) {
			console.log(option)
			this.pageType=option.pagetype;
			this.pageName=option.name;
			this.computedScollviewHeight();
			this.getGuestData();
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			/**
			 * 计算scroll高度
			 */
			computedScollviewHeight() {
				let query = uni.createSelectorQuery().in(this);
				let heightLeaf =0;
				query.select('#topnav').boundingClientRect(data => {
					this.topNavHeight=data.height;
					heightLeaf += data.height;
				}).exec(() => {
					let sysInfo = uni.getSystemInfoSync();
					this.scrollHeight = sysInfo.windowHeight - heightLeaf;
				});
			
			},
			/**
			 * 推荐下拉刷新、加载更多
			 */
			scrollRefresh(){
				if (this.scrollRefreshing) 
				{
					return;
				}
				this.scrollRefreshing = true;
				setTimeout(() => {
					this.scrollTriggered = false;
					this.scrollRefreshing = false;
				}, 1000)
				this.getOptions={
					index:1,
					size:20,
					sortValues:[]
				}
				this.getGuestData();
			},
			scrollPulling(e) {},
			scrollRestore() {this.scrollTriggered = true;},
			scrollAbort() {},
			scrollToBottom(){
				if(this.listData.length>=this.scrollTotal){return;}
				this.getOptions.index++;
				this.getGuestData();
			},
			getGuestData(){
				let user=JSON.parse(uni.getStorageSync('user'));
				this.$api.public.guestor({
					completeUser:user,
					listType:this.pageType,
					page:this.getOptions,
					prefer:{
						nick:null,
						onlineIn24Hour:false
					},
					uponUserId:user.id
				}).then(res=>{
					if(res.data.users&&res.data.users.length===0){this.showNoData=true;}
					if(this.getOptions.index>1){
						this.listData=[...this.listData,...res.data.users];
					}
					else{
						this.listData=res.data.users;
					}
					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');
						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)
						}
					});
				})
			},
			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.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;
	height: 100vh;
	background-color: $bgcolor1;
	position: relative;
	overflow: hidden;
	.topnav {
		padding: 0 10rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 100;
		background-color: $bgcolor1;
		.nav-item{
			width: 40rpx;
			height: 40rpx;
			margin-left: 16rpx;
			
			.nav-img{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.nav-text{
			flex: 1;
			color: $fontcolor5;
			height: 40rpx;
			text-align: center;
		}
	}
	.list-item{
		flex-wrap: wrap;
		padding: 40rpx 32rpx;
		.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{
				width: 74rpx;
				height: 32rpx;
				background: rgba(226, 53, 104, 0.2);
				border-radius: 25rpx;
				margin-top: 12rpx;
				.sex-img{
					width: 24rpx;
					height: 24rpx;
				}
				.sex-text{
					color:#E23568 ;
				}
			}
			.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>