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

<template>
	<view class="container">
		<TabBar :tabIndex="tabIndex" ></TabBar>
		<uni-popup ref="popup" type="center">
			<Popup :content1="popup.content1" :content2="popup.content2" :tip1="popup.tip1" :tip2="popup.tip2" :btntext="popup.btntext" @closePopup="closePopup"  @toLogin="toLogin" :btnEvent="'toLogin'"></Popup>
		</uni-popup>
		<view id="topnav" class="topnav flex-start"
			:style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`}">
			<view class="nav-item" v-for="(item,index) in navs" :key="index" :style="{
				'font-size':`${navIndex===index?'40rpx':'32rpx'}`,
				'color':`${navIndex===index?'#ffffff':''}`,
				'font-weight':`${navIndex===index?'#ffffff':''}`}"
				@click="navClick(index)">
				
				<view class="nav-item-text fw700">{{item}}</view>
			</view>
			<image :src="`${assetsUrl}friends-searchicon.png`" mode="aspectFit" class="nav-search" @click="toSearch"></image>
			<image :src="`${assetsUrl}friends-circle.png`" mode="aspectFit" class="nav-item-bg" :style="{'left':`${navIndex*158}rpx`}" ></image>
		</view>
		
		<swiper class="outer-swiper" :current="navIndex" :style="{'height':`${scrollHeight}px`}" @change="outerSwiperChange">
			<swiper-item class="outer-swiper-item">
				<scroll-view class="scroll-view" 
					v-if="scrollHeight>0"
					scroll-y="true" 
					lower-threshold="200"
					:style="{'height':`${scrollHeight}px`}" 
					refresher-enabled="true" 
					:refresher-triggered="recommendTriggered"
					:refresher-threshold="45" 
					refresher-default-style="white"
					refresher-background="#151126" 
					@refresherrefresh="recommendRefresh" 
					@refresherpulling="recommendPulling"
					@refresherrestore="recommendRestore" 
					@refresherabort="recommendAbort"
					@scrolltolower="recommendToBottom"
					show-scrollbar="false"
					>
				<view slot="refresher" class="refresh-container" style="display: block; width: 100%; height: 80px; background: blue; display: flex; align-items: center;">
				    <view class="view1" style="position: absolute; text-align: center; width: 100%;">
				      下拉刷新
				    </view>
				</view>
					<image :src="`${assetsUrl}friends-bg.png`" mode="widthFix" class="tops-bg" v-if="recommendTopsM.length>0"></image>
					<view class="tops-nav flex-center" v-if="recommendTopsM.length>0">
						<view class="tops-nav-item" :class="topsIndex===index?'font32 fw600 tops-nav-item-active':''" v-for="(item,index) in tops" :key="index" @click="topsNavClick(index)">
							{{item}}
						</view>
						<view class="tops-line" :style="{'left':`${topsIndex*160+250}rpx`}"></view>
					</view>
					<swiper :current="topsIndex" class="swiper" @change="swiperChange" v-if="recommendTopsM.length>0">
						<swiper-item class="swiper-item">
							<view class="tops flex-between">
								<view class="tops-third flex-center">
									<view class="tt-item flex-center" @click="toDetail(recommendTopsM[1].userId)">
										<view class="tt-item-bg"></view>
										<image :src="`${assetsUrl}friends-2.png`" mode="aspectFill" class="tt-item-img"></image>
										<image :src="recommendTopsM[1].icon" class="tt-item-head-box" style="border: 2rpx solid #E2E2E2;"></image>
										<view class="tt-item-name font28 fw600 el">
											{{recommendTopsM[1].nick}}
										</view>
										<view class="tt-item-num-box flex-center">
											<image :src="`${assetsUrl}friends-heart.png`" mode="aspectFill" class="tt-item-num-img"></image>
											<view class="tt-item-num-text font22 fw600">
												{{recommendTopsM[1].val}}
											</view>
										</view>
									</view>
									<view class="tt-item  flex-center" style="margin: 0rpx 16rpx;" @click="toDetail(recommendTopsM[0].userId)">
										<view class="tt-item-bg-center" style="width: 228rpx;"></view>
										<image :src="`${assetsUrl}friends-1.png`" mode="aspectFill" class="tt-item-img" style="transform: translateY(0rpx);"></image>
										<image :src="`${assetsUrl}friends-1-bling.png`" mode="aspectFill" class="tt-item-img-border" style="transform: translateY(-60rpx);"></image>
										<image :src="recommendTopsM[0].icon" class="tt-item-head-box" style="border: 2rpx solid #FFEC36;transform: translateY(-18rpx);"></image>
										<view class="tt-item-name font28 fw600 el">
											{{recommendTopsM[0].nick}}
										</view>
										<view class="tt-item-num-box flex-center">
											<image :src="`${assetsUrl}friends-heart.png`" mode="aspectFill" class="tt-item-num-img"></image>
											<view class="tt-item-num-text font22 fw600">
												{{recommendTopsM[0].val}}
											</view>
										</view>
									</view>
									<view class="tt-item  flex-center" @click="toDetail(recommendTopsM[2].userId)">
										<view class="tt-item-bg"></view>
										<image :src="`${assetsUrl}friends-3.png`" mode="aspectFill" class="tt-item-img"></image>
										<image :src="recommendTopsM[2].icon" class="tt-item-head-box" style="border: 2rpx solid #E19865;"></image>
										<view class="tt-item-name font28 fw600 el">
											{{recommendTopsM[2].nick}}
										</view>
										<view class="tt-item-num-box flex-center">
											<image :src="`${assetsUrl}friends-heart.png`" mode="aspectFill" class="tt-item-num-img"></image>
											<view class="tt-item-num-text font22 fw600">
												{{recommendTopsM[2].val}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item  class="swiper-item">
							<view class="tops flex-between">
								<view class="tops-third flex-center">
									<view class="tt-item flex-center" @click="toDetail(recommendTopsH[1].userId)">
										<view class="tt-item-bg"></view>
										<image :src="`${assetsUrl}friends-2.png`" mode="aspectFill" class="tt-item-img"></image>
										<image :src="recommendTopsH[1].icon" class="tt-item-head-box" style="border: 2rpx solid #E2E2E2;"></image>
										<view class="tt-item-name font28 fw600 el">
											{{recommendTopsH[1].nick}}
										</view>
										<view class="tt-item-num-box flex-center">
											<image :src="`${assetsUrl}friends-sugar.png`" mode="aspectFill" class="tt-item-num-img"></image>
											<view class="tt-item-num-text font22 fw600">
												{{recommendTopsH[1].val}}
											</view>
										</view>
									</view>
									<view class="tt-item  flex-center" style="margin: 0rpx 16rpx;" @click="toDetail(recommendTopsH[0].userId)">
										<view class="tt-item-bg-center" style="width: 228rpx;"></view>
										<image :src="`${assetsUrl}friends-1.png`" mode="aspectFill" class="tt-item-img" style="transform: translateY(-5rpx);"></image>
										<image :src="`${assetsUrl}friends-1-bling.png`" mode="aspectFill" class="tt-item-img-border" style="transform: translateY(-60rpx);"></image>
										<image :src="recommendTopsH[0].icon" class="tt-item-head-box" style="border: 2rpx solid #FFEC36;transform: translateY(-18rpx);"></image>
										<view class="tt-item-name font28 fw600 el">
											{{recommendTopsH[0].nick}}
										</view>
										<view class="tt-item-num-box flex-center">
											<image :src="`${assetsUrl}friends-sugar.png`" mode="aspectFill" class="tt-item-num-img"></image>
											<view class="tt-item-num-text font22 fw600">
												{{recommendTopsH[0].val}}
											</view>
										</view>
									</view>
									<view class="tt-item  flex-center"  @click="toDetail(recommendTopsH[2].userId)">
										<view class="tt-item-bg"></view>
										<image :src="`${assetsUrl}friends-3.png`" mode="aspectFill" class="tt-item-img"></image>
										<image :src="recommendTopsH[2].icon" class="tt-item-head-box" style="border: 2rpx solid #E19865;"></image>
										<view class="tt-item-name font28 fw600 el">
											{{recommendTopsH[2].nick}}
										</view>
										<view class="tt-item-num-box flex-center">
											<image :src="`${assetsUrl}friends-sugar.png`" mode="aspectFill" class="tt-item-num-img"></image>
											<view class="tt-item-num-text font22 fw600">
												{{recommendTopsH[2].val}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="location flex-between" @click="computedLocation" v-if="showGetLocation">
						<image :src="`${assetsUrl}friends-pos.png`" mode="aspectFill" class="l-pos"></image>
						<text class="l-text font24 fw400">点此开启位置权限，获得更精准推荐！</text>
						<view class="l-open font24 fw400">开启</view>
					</view>
					<view class="list-item flex-start" v-for="(item,index) in recommendList" :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 class="no-more font24 fw400" v-if="recommendList.length!==0&&recommendList.length>=recommendTotal">没有更多了</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="outer-swiper-item">
				<scroll-view class="scroll-view" 
					v-if="scrollHeight>0"
					scroll-y="true" 
					lower-threshold="200"
					:style="{'height':`${scrollHeight}px`}" 
					refresher-enabled="true" 
					:refresher-triggered="nearTriggered"
					:refresher-threshold="45" 
					refresher-default-style="white"
					refresher-background="#151126" 
					@refresherrefresh="nearRefresh" 
					@refresherpulling="nearPulling"
					@refresherrestore="nearRestore" 
					@refresherabort="nearAbort"
					@scrolltolower="nearToBottom"
					:show-scrollbar="false"
				>
					<image :src="`${assetsUrl}friends-bg.png`" mode="widthFix" class="tops-bg" v-if="!showGetLocation"></image>
					<view class="tops-nav flex-center" v-if="!showGetLocation">
						<view class="tops-nav-item" :class="topsIndex===index?'font32 fw600 tops-nav-item-active':''" v-for="(item,index) in tops" :key="index" @click="topsNavClick(index)">
							{{item}}
						</view>
						<view class="tops-line" :style="{'left':`${topsIndex*160+250}rpx`}"></view>
					</view>
					<swiper :current="topsIndex" class="swiper" @change="swiperChange"  v-if="!showGetLocation">
						<swiper-item class="swiper-item">
							<view class="tops flex-between">
								<view class="tops-third flex-center">
									<view class="tt-item flex-center" @click="toDetail(nearTopsM[1].userId)">
										<view class="tt-item-bg"></view>
										<image :src="`${assetsUrl}friends-2.png`" mode="aspectFill" class="tt-item-img"></image>
										<image :src="nearTopsM[1].icon" class="tt-item-head-box" style="border: 2rpx solid #E2E2E2;"></image>
										<view class="tt-item-name font28 fw600 el">
											{{nearTopsM[1].nick}}
										</view>
										<view class="tt-item-num-box flex-center">
											<image :src="`${assetsUrl}friends-heart.png`" mode="aspectFill" class="tt-item-num-img"></image>
											<view class="tt-item-num-text font22 fw600">
												{{nearTopsM[1].val}}
											</view>
										</view>
									</view>
									<view class="tt-item  flex-center" style="margin: 0rpx 16rpx;" @click="toDetail(nearTopsM[0].userId)">
										<view class="tt-item-bg-center" style="width: 228rpx;"></view>
										<image :src="`${assetsUrl}friends-1.png`" mode="aspectFill" class="tt-item-img" style="transform: translateY(-5rpx);"></image>
										<image :src="`${assetsUrl}friends-1-bling.png`" mode="aspectFill" class="tt-item-img-border" style="transform: translateY(-60rpx);"></image>
										<image :src="nearTopsM[0].icon" class="tt-item-head-box" style="border: 2rpx solid #FFEC36;transform: translateY(-18rpx);"></image>
										<view class="tt-item-name font28 fw600 el">
											{{nearTopsM[0].nick}}
										</view>
										<view class="tt-item-num-box flex-center">
											<image :src="`${assetsUrl}friends-heart.png`" mode="aspectFill" class="tt-item-num-img"></image>
											<view class="tt-item-num-text font22 fw600">
												{{nearTopsM[0].val}}
											</view>
										</view>
									</view>
									<view class="tt-item  flex-center" @click="toDetail(nearTopsM[2].userId)">
										<view class="tt-item-bg"></view>
										<image :src="`${assetsUrl}friends-3.png`" mode="aspectFill" class="tt-item-img"></image>
										<image :src="nearTopsM[2].icon" class="tt-item-head-box" style="border: 2rpx solid #E19865;"></image>
										<view class="tt-item-name font28 fw600 el">
											{{nearTopsM[2].nick}}
										</view>
										<view class="tt-item-num-box flex-center">
											<image :src="`${assetsUrl}friends-heart.png`" mode="aspectFill" class="tt-item-num-img"></image>
											<view class="tt-item-num-text font22 fw600">
												{{nearTopsM[2].val}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item  class="swiper-item">
							<view class="tops flex-between">
								<view class="tops-third flex-center">
									<view class="tt-item flex-center" @click="toDetail(nearTopsH[1].userId)">
										<view class="tt-item-bg"></view>
										<image :src="`${assetsUrl}friends-2.png`" mode="aspectFill" class="tt-item-img"></image>
										<image :src="nearTopsH[1].icon"  class="tt-item-head-box" style="border: 2rpx solid #E2E2E2;"></image>
										<view class="tt-item-name font28 fw600 el">
											{{nearTopsH[1].nick}}
										</view>
										<view class="tt-item-num-box flex-center">
											<image :src="`${assetsUrl}friends-sugar.png`" mode="aspectFill" class="tt-item-num-img"></image>
											<view class="tt-item-num-text font22 fw600">
												{{nearTopsH[1].val}}
											</view>
										</view>
									</view>
									<view class="tt-item  flex-center" style="margin: 0rpx 16rpx;" @click="toDetail(nearTopsH[0].userId)">
										<view class="tt-item-bg-center" style="width: 228rpx;"></view>
										<image :src="`${assetsUrl}friends-1.png`" mode="aspectFill" class="tt-item-img" style="transform: translateY(-5rpx);"></image>
										<image :src="`${assetsUrl}friends-1-bling.png`" mode="aspectFill" class="tt-item-img-border" style="transform: translateY(-60rpx);"></image>
										<image :src="nearTopsH[0].icon"  class="tt-item-head-box" style="border: 2rpx solid #FFEC36;transform: translateY(-18rpx);"></image>
										<view class="tt-item-name font28 fw600 el">
											{{nearTopsH[0].nick}}
										</view>
										<view class="tt-item-num-box flex-center">
											<image :src="`${assetsUrl}friends-sugar.png`" mode="aspectFill" class="tt-item-num-img"></image>
											<view class="tt-item-num-text font22 fw600">
												{{nearTopsH[0].val}}
											</view>
										</view>
									</view>
									<view class="tt-item  flex-center" @click="toDetail(nearTopsH[2].userId)">
										<view class="tt-item-bg"></view>
										<image :src="`${assetsUrl}friends-3.png`" mode="aspectFill" class="tt-item-img"></image>
										<image :src="nearTopsH[2].icon"  class="tt-item-head-box" style="border: 2rpx solid #E19865;"></image>
										<view class="tt-item-name font28 fw600 el">
											{{nearTopsH[2].nick}}
										</view>
										<view class="tt-item-num-box flex-center">
											<image :src="`${assetsUrl}friends-sugar.png`" mode="aspectFill" class="tt-item-num-img"></image>
											<view class="tt-item-num-text font22 fw600">
												{{nearTopsH[2].val}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="list-item flex-start" v-for="(item,index) in nearList" :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 class="no-more font24 fw400" v-if="nearList.length!==0&&nearList.length>=nearTotal">没有更多了</view>
					<Status :type="statusType" :btnText="statusBtnText" :text="statusText" @btnEvent="computedLocation" v-if="showGetLocation"></Status>
					<Status type="noData" text="暂无数据" v-if="showNoData"></Status>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	import TabBar from '@/components/TabBar/TabBar.vue';
	import Status from '@/components/Status/Status.vue';
	import wxMap from '@/static/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js';
	import TIM from 'tim-wx-sdk';
	import Popup from '@/components/Popup/Popup.vue';
	// import COS from 'cos-wx-sdk-v5';
	import TIMUploadPlugin from 'tim-upload-plugin';

	 // 腾讯位置服务，手机账号：18996226740

	const wxMapSdk=new wxMap({key:'E5SBZ-T2YC3-CBL3F-YGFQQ-26PP2-ERFII'});
	import {get} from '@/util/index.js'
	export default {
		components: {
			TabBar,Status,Popup
		},
		data() {
			return {
				statusType:'noPos',
				statusBtnText:'开启定位',
				statusText:'开启定位后才能帮你找到身边的TA哦',
				assetsUrl: this.$util.assetsUrl,
				tabIndex: 0,
				navs: ['推荐', '附近'],
				navIndex:0,
				tops:['魅力榜','壕气榜'],
				topsIndex:0,
				scrollHeight:0,
				rankingOptions:{
					city:'',
					cityCode:'',
					number:3,
					type:'M'
				},
				popup:{
					content1:'',
					content2:'',
					tip1:'',
					tip2:'',
					btntext:''
				},
				recommendListOptions:{
					filterIds:[],
					page:{
						index:1,
						size:20,
						sortValues:[]
					},
					queryPre:{
						city:'',
						cityCode:'',
						femaleGoddess:false,
						femaleNew:false,
						geo:{
							lat:0,
							lon:0
						},
						maleNew:false,
						maleVip:false
						
					},
					showList: true,
					type: {}
				},
				nearListOptions:{
					filterIds:[],
					page:{
						index:1,
						size:20,
						sortValues:[]
					},
					queryPre:{
						city:'',
						cityCode:'',
						femaleGoddess:false,
						femaleNew:false,
						geo:{
							lat:0,
							lon:0
						},
						maleNew:false,
						maleVip:false
						
					},
					showList: true,
					type: {}
				},
				showGetLocation:false,
				showNoData:false,
				latitude:0,
				longitude:0,
				locationCity:'',
				locationCityCode:'',
				recommendTopsM:[],
				recommendTopsH:[],
				recommendList:[],
				recommendTotal:0,
				recommendRefreshing:false,
				recommendTriggered:true,
				
				nearTopsM:[],
				nearTopsH:[],
				nearList:[],
				nearTotal:0,
				nearRefreshing:false,
				nearTriggered:true,
				otherInfo:null
			};
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.statusBarHeight||20;
			},
			topbarOffsetHeight() {
				return this.$store.state.topbarOffsetHeight||40;
			},
			userInfo(){
				return this.$store.state.userInfo||{};
			}
		},
		onLoad(options) {
			console.log('options',options)
			if(options.invite){
				uni.setStorageSync('invited',options.invite);
			}
			uni.showLoading({
				mask:true,
				title:'加载中'
			})
			this.$api.public.aliossCdn({}).then(cdnRes=>{
				console.log('cdnRes',cdnRes)
				this.$store.commit('setImageCdn',cdnRes.data.pictureCdn);
				this.$store.commit('setVideoCdn',cdnRes.data.videoCdn);
				uni.setStorageSync('imageCdn',cdnRes.data.pictureCdn);
				uni.setStorageSync('videoCdn',cdnRes.data.videoCdn);
			}).catch((error)=>{
				console.log('error---aliossCdn',error)
			});
			this.login();
			this.computedScollviewHeight();
			
		},
		onShow() {
			if(uni.getStorageSync('needFreshList')==='1'){
				this.recommendRefresh();
				this.nearRefresh();
				uni.setStorageSync('needFreshList','0');
			}
		},
		// #ifdef MP
		onShareAppMessage(){
			return {
				title: '糖果公园',
				path: `/pages/login/login?share=${this.userInfo.inviteCode}`,
			}
		},
		// #endif
		methods: {
			getMineData(){
				let user=JSON.parse(uni.getStorageSync('user'));
				this.$api.public.mineDetail({
					getAlbum:true,
					completeUser:user
				}).then(res=>{
					this.$store.commit('setUserInfo',res.data);
					uni.setStorageSync('userInfo',JSON.stringify(res.data));
					if(!res.data.regDone){
						uni.reLaunch({
							url:'/pages/info/sex'
						})
						return;
					}
				})
			},
			login(){
				const that=this;
				if(uni.getStorageSync('isLogin')==='yes'){
					console.log('uni.getStorageSync(isLogin)',uni.getStorageSync('isLogin'))
					this.getMineData();
					this.computedLocation();
					return;
				}
				uni.login({//免密登录
					success:(res)=>{
						that.$api.login.wxLogin({
							scene: "WxMPLogin",
							miniProgramEncryUserInfoParam:{
								jsCode:res.code
							}
						}).then(result=>{
							console.log('result',result)
							if(result.status==='Succ'){
								uni.setStorageSync('openId',result.data.wxLoginInfo.openId);
								uni.setStorageSync('unionId',result.data.wxLoginInfo.unionId);
								this.computedLocation();
								this.getRecommendTopsMData();
								this.getRecommendTopsHData();
								uni.setStorageSync('LL_Ukn',result.data.userToken.ukn);
								uni.setStorageSync('token',result.data.userToken.token);
								uni.setStorageSync('userInfo',JSON.stringify(result.data));
								uni.setStorageSync('user',JSON.stringify(result.data.userToken.user));
								uni.setStorageSync('isLogin','yes');
								this.$api.public.aliossCdn({}).then(cdnRes=>{
									this.$store.commit('setImageCdn',cdnRes.data.pictureCdn);
									this.$store.commit('setVideoCdn',cdnRes.data.videoCdn);
								})
							}
							
							
						}).catch((error)=>{
							console.log('uni.login',error)
						})
					},
					fail: (err) => {
						console.log('免密登录',err)
					}
				});
			},
			closePopup(){
				this.$refs.popup.close();
			},
			imInit(){
				/**
				 * IM初始化
				 */
				if(uni.$TUIKit){
					uni.$TUIKit.logout();
				}
				const SDKAppID = this.$util.IMSDKCode,that=this;
				uni.$TUIKit = TIM.create({
					SDKAppID: SDKAppID
				});
				uni.$TUIKitTIM = TIM;
				uni.$TUIKitEvent = TIM.EVENT;
				uni.$TUIKitVersion = TIM.VERSION;
				uni.$TUIKitTypes = TIM.TYPES; // 监听系统级事件
				uni.$TUIKit.on(uni.$TUIKitEvent.SDK_READY, this.onSDKReady);
				uni.$TUIKit.on(uni.$TUIKitEvent.SDK_NOT_READY, this.onSdkNotReady);
				uni.$TUIKit.on(uni.$TUIKitEvent.KICKED_OUT, this.onKickedOut);
				uni.$TUIKit.on(uni.$TUIKitEvent.ERROR, this.onTIMError);
				uni.$TUIKit.on(uni.$TUIKitEvent.NET_STATE_CHANGE, this.onNetStateChange);
				uni.$TUIKit.on(uni.$TUIKitEvent.SDK_RELOAD, this.onSDKReload);
				uni.$resetLoginData = this.resetLoginData();
				uni.$TUIKit.registerPlugin({ 'tim-upload-plugin':TIMUploadPlugin });
			},
			resetLoginData() {
				if(!uni.getStorageSync('userInfo')){
					return;
				}
				let user=JSON.parse(uni.getStorageSync('userInfo'));
				this.$api.IM.loadSig({}).then(res=>{
					this.$store.commit('setImLoadSig',res.data.sig);
					uni.$TUIKit.login({
						userID:String(user.id),
						userSig:this.$store.state.IMloadSig
					})
				}).catch((err)=>{
					console.log('IM.loadSig',err)
				})
			},
			onTIMError(error) {
			},
			onSDKReady({name}) {
				const isSDKReady = name === uni.$TUIKitEvent.SDK_READY ? true : false;
				if(isSDKReady){
					uni.$emit('isSDKReady', {
						isSDKReady: true
					});
					uni.hideLoading();
				}
				
			},
			
			onNetStateChange() {},
			onSDKReload() {},
			onSdkNotReady() {},
			onKickedOut() {
				uni.showToast({
					title: '您被踢下线',
					icon: 'error'
				});
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			/**
			 * 推荐下拉刷新、加载更多
			 */
			recommendRefresh(){
				if(!uni.getStorageSync('token')){
					setTimeout(() => {
						this.recommendTriggered = false;
						this.recommendRefreshing = false;
					}, 1000)
					return;
				}
				if (this.recommendRefreshing) 
				{
					return;
				}
				this.recommendRefreshing = true;
				setTimeout(() => {
					this.recommendTriggered = false;
					this.recommendRefreshing = false;
				}, 1000)
				this.recommendListOptions.page={
					index:1,
					size:20,
					sortValues:[]
				}
				this.getRecommendTopsMData();
				this.getRecommendTopsHData();
				this.getRecommendList();
			},
			recommendPulling(e) {},
			recommendRestore() {this.recommendTriggered = true;},
			recommendAbort() {},
			recommendToBottom(){
				if(!uni.getStorageSync('token')){return;}
				if(this.recommendList.length>=this.recommendTotal){return;}
				this.recommendListOptions.page.index++;
				this.getRecommendList();
			},
			/**
			 * 附近下拉刷新、加载更多
			 */
			nearRefresh(){
				if (this.nearRefreshing) 
				{
					return;
				}
				this.nearRefreshing = true;
				setTimeout(() => {
					this.nearTriggered = false;
					this.nearRefreshing = false;
				}, 1000)
				this.nearListOptions.page={
					index:1,
					size:20,
					sortValues:[]
				}
				this.getNearTopsMData();
				this.getNearTopsHData();
				this.getNearList();
			},
			nearPulling(e) {},
			nearRestore() {this.nearTriggered = true;},
			nearAbort() {},
			nearToBottom(){
				if(this.nearList.length>=this.nearTotal){return;}
				this.nearListOptions.page.index++;
				this.getNearList();
			},
			/**
			 * 计算scroll高度
			 */
			computedScollviewHeight() {
				let query = uni.createSelectorQuery().in(this);
				let heightLeaf = this.$store.state.tabbarHeight/2;
				query.select('#topnav').boundingClientRect(data => {
					heightLeaf += data.height;
				}).exec(() => {
					let sysInfo = uni.getSystemInfoSync();
					this.scrollHeight = sysInfo.windowHeight - heightLeaf;
				});

			},
			/**
			 * 计算列表定位距离
			 */
			computedLocation(){
					uni.getFuzzyLocation({
						type:'gcj02',
						success:res=>{
							wxMapSdk.reverseGeocoder({
								location:{
									latitude:res.latitude,
									longitude:res.longitude
								},
								success:result=>{
									this.locationCity=result.result.ad_info.city;
									this.latitude=result.result.location.lat;
									this.longitude=result.result.location.lng;
									this.$store.commit('setLatitude',result.result.location.lat);
									this.$store.commit('setLongitude',result.result.location.lng);
									uni.setStorageSync('latitude',result.result.location.lat);
									uni.setStorageSync('longitude',result.result.location.lng);
									uni.setStorageSync('city',this.locationCity);
									this.locationCityCode=result.result.ad_info.city_code.split(result.result.ad_info.nation_code)[1];
									if(!uni.getStorageSync('token')){
										this.getTempRecommendList();
									}
									else{
										this.getNearTopsMData();
										this.getNearTopsHData();
										this.getRecommendTopsMData();
										this.getRecommendTopsHData();
										this.getNearList();
										this.getRecommendList();
										this.showGetLocation=false;
										setTimeout(()=>{
											this.imInit();
										},2000)
									}
									
									
								}
							})
							
						},
						fail:err=>{
							this.showGetLocation=true;
							uni.showModal({
								content: '检测到您没打开地址信息权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success:res=>{
									if(res.confirm){
										uni.openSetting({
											success:ress=>{
												if(ress.authSetting){
													this.computedLocation();
												}
											}
										})
									}
								}
							})
						}
					})
					
			},
			toLogin(){
				uni.reLaunch({
					url:'/pages/login/login'
				})
			},
			navClick(index){
				if(!uni.getStorageSync('token')){
					this.popup={
						content1:'您还未登录',
						content2:'该功能登录后才能使用',
						tip1:'',
						tip2:'',
						btntext:'去登录'
					}
					this.$refs.popup.open();
					return;
				}
				this.rankingOptions.city=(index===0?'':this.locationCity);
				this.rankingOptions.cityCode=(index===0?'':this.locationCityCode);
				this.navIndex=index;
			},
			toSearch(){
				if(!uni.getStorageSync('token')){
					this.popup={
						content1:'您还未登录',
						content2:'该功能登录后才能使用',
						tip1:'',
						tip2:'',
						btntext:'去登录'
					}
					this.$refs.popup.open();
					return;
				}
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			topsNavClick(index){
				this.topsIndex=index;
			},
			outerSwiperChange(e){
				this.navIndex=e.detail.current;
			},
			swiperChange(e){
				this.topsIndex=e.detail.current;
			},
			getRecommendTopsMData(){
				this.rankingOptions.type='M';
				this.$api.public.ranking(this.rankingOptions).then(res=>{
					this.recommendTopsM=res.data.list;
				})
			},
			getRecommendTopsHData(){
				this.rankingOptions.type='H';
				this.$api.public.ranking(this.rankingOptions).then(res=>{
					this.recommendTopsH=res.data.list;
				})
			},
			getNearTopsMData(){
				this.rankingOptions.type='M';
				this.rankingOptions.city=this.locationCity;
				this.rankingOptions.cityCode=this.locationCityCode;
				this.$api.public.ranking(this.rankingOptions).then(res=>{
					this.nearTopsM=res.data.list;
				})
			},
			getNearTopsHData(){
				this.rankingOptions.type='H';
				this.rankingOptions.city=this.locationCity;
				this.rankingOptions.cityCode=this.locationCityCode;
				this.$api.public.ranking(this.rankingOptions).then(res=>{
					this.nearTopsH=res.data.list;
				})
			},
			getTempRecommendList(){//获取免登录体验数据
				this.recommendListOptions.type='FamaleReco';
				this.$api.public.friendsNoAuth(this.recommendListOptions).then(res=>{
					if(res.status==='Succ'){
						uni.hideLoading();
						this.recommendTotal=res.data.page.recordCount;
						this.recommendListOptions.page.sortValues=res.data.sortValues;
						
						let arr=[],obj={latitude:0,longitude:0};
						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');
							obj={latitude:0,longitude:0};
							obj.latitude=res.data.users[i].geo.lat;
							obj.longitude=res.data.users[i].geo.lon;
							arr.push(obj)
						}
						
						wxMapSdk.calculateDistance({
							mode:'straight',
							from:{
								latitude: this.latitude,
								longitude: this.longitude
							},
							to:arr,
							success:dists=>{
								if(dists.message==="query ok"){
									for(let j=0;j<dists.result.elements.length;j++){
											res.data.users[j].distance=(dists.result.elements[j].distance>1000?`${Math.floor(dists.result.elements[j].distance/100)/10}km`:`${dists.result.elements[j].distance}m`)
										
									}
									if(this.recommendListOptions.page.index>1){
										this.recommendList=[...this.recommendList,...res.data.users];
									}
									else{
										this.recommendList=res.data.users;
									}
									this.$forceUpdate();
								}
								
							}
						})
						this.recommendList=res.data.users;
					}
				})
			},
			getRecommendList(){
				let user=JSON.parse(uni.getStorageSync('user'));
				this.recommendListOptions.type=user.sex==='male'?'MaleReco':'FamaleReco';
				this.recommendListOptions.queryPre.city=this.locationCity;
				this.recommendListOptions.queryPre.cityCode=this.locationCityCode;
				this.recommendListOptions.queryPre.geo.lat=this.latitude;
				this.recommendListOptions.queryPre.geo.lon=this.longitude;
				this.$api.public.friends(this.recommendListOptions).then(res=>{
					if(res.status==='Succ'){
						
						this.recommendTotal=res.data.page.recordCount;
						this.recommendListOptions.page.sortValues=res.data.sortValues;
						
						let arr=[],obj={latitude:0,longitude:0};
						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');
							obj={latitude:0,longitude:0};
							obj.latitude=res.data.users[i].geo.lat;
							obj.longitude=res.data.users[i].geo.lon;
							arr.push(obj)
						}
						
						wxMapSdk.calculateDistance({
							mode:'straight',
							from:{
								latitude: this.latitude,
								longitude: this.longitude
							},
							to:arr,
							success:dists=>{
								if(dists.message==="query ok"){
									for(let j=0;j<dists.result.elements.length;j++){
											res.data.users[j].distance=(dists.result.elements[j].distance>1000?`${Math.floor(dists.result.elements[j].distance/100)/10}km`:`${dists.result.elements[j].distance}m`)
										
									}
									if(this.recommendListOptions.page.index>1){
										this.recommendList=[...this.recommendList,...res.data.users];
									}
									else{
										this.recommendList=res.data.users;
									}
									uni.hideLoading();
									this.$forceUpdate();
								}
								
							}
						})
					}
				})
			},
			getNearList(){
				let user=JSON.parse(uni.getStorageSync('user'));
				this.nearListOptions.type=user.sex==='male'?'MaleNearby':'FamaleNearby';
				this.nearListOptions.queryPre.city=this.locationCity;
				this.nearListOptions.queryPre.cityCode=this.locationCityCode;
				this.nearListOptions.queryPre.geo.lat=this.latitude;
				this.nearListOptions.queryPre.geo.lon=this.longitude;
				this.$api.public.friends(this.nearListOptions).then(res=>{
					if(res.status==='Succ'&&res.data.users.length>0){
						
						this.nearTotal=res.data.page.recordCount;
						this.nearListOptions.page.sortValues=res.data.sortValues;
						
						this.showNoData=res.data.users.length===0?true:false;
						let arr=[],obj={latitude:0,longitude:0};
						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');
							obj={latitude:0,longitude:0};
							obj.latitude=res.data.users[i].geo.lat;
							obj.longitude=res.data.users[i].geo.lon;
							arr.push(obj)
						}
						wxMapSdk.calculateDistance({
							mode:'straight',
							from:{
								latitude: this.latitude,
								longitude: this.longitude
							},
							to:arr,
							success:dists=>{
								if(dists.message==="query ok"){
									for(let j=0;j<dists.result.elements.length;j++){
											res.data.users[j].distance=(dists.result.elements[j].distance>1000?`${Math.floor(dists.result.elements[j].distance/100)/10}km`:`${dists.result.elements[j].distance}m`)
									}
									if(this.nearListOptions.page.index>1){
										this.nearList=[...this.nearList,...res.data.users];
									}
									else{
										this.nearList=res.data.users;
									}
									uni.hideLoading()
									this.$forceUpdate();
								}
								
							}
						})
						
					}
					else{
						this.showNoData=this.nearList.length===0?true:false;
					}
				})
			},
			toDetail(id){
				if(!uni.getStorageSync('token')){
					this.popup={
						content1:'您还未登录',
						content2:'该功能登录后才能使用',
						tip1:'',
						tip2:'',
						btntext:'去登录'
					}
					this.$refs.popup.open();
					return;
				}
				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{
						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 60rpx;
			align-items: center;
			position: relative;
			.nav-item {
				color: $fontcolor3;
				margin-right: 72rpx;
				transition: all 0.3s;
				padding: 0 10rpx;
				.nav-item-text{
					position: relative;
					z-index: 1;
				}
			}
			.nav-search{
				width:56rpx;
				height: 56rpx;
				margin-left: 110rpx;
				
			}
			.nav-item-bg{
				position: absolute;
				left: 0;
				bottom: 10rpx;
				width: 92rpx;
				height: 68rpx;
				z-index: 0;
				transition: all .3s;
			}
		}
		.location{
			margin-top: 40rpx;
			padding: 12rpx;
			background-color: $bgcolor3;
			border-radius: 36rpx;
			.l-pos{
				width: 32rpx;
				height: 32rpx;
			}
			.l-text{
				color: $fontcolor2;
				flex: 1;
				text-align: left;
				margin-left: 8rpx;
			}
			.l-open{
				width: 88rpx;
				height: 48rpx;
				border-radius: 24rpx;
				line-height: 48rpx;
				text-align: center;
				background-color: $primary;
				color: $fontcolor5;
			}
		}
		.scroll-view{
			padding: 24rpx 32rpx 0rpx 32rpx;
			box-sizing: border-box;
			.tops-bg{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 0;
			}
			.tops-nav{
				position: relative;
				height: 86rpx;
				z-index: 1;
				.tops-nav-item{
					width: 160rpx;
					text-align: center;
					color: $fontcolor3;
				}
				.tops-nav-item-active{
					color: $fontcolor5 !important;
				}
				.tops-line{
					width: 24rpx;
					height: 4rpx;
					background: $fontcolor5;
					border-radius: 2rpx;
					position: absolute;
					bottom: 0;
					transition: all 0.3s;
				}
			}
			.swiper{
				height: 396rpx;
				.swiper-item{
					height: 100%;
					.tops{
						position: relative;
						height: 100%;
						flex-direction: column;
						
						.tops-third{
							height: 100%;
							.tt-item{
								position: relative;
								flex-direction: column;
								height: 100%;
								width: 208rpx;
								.tt-item-bg{
									width: 196rpx;
									height: 208rpx;
									background: linear-gradient(180deg, rgba(226,226,226,0.1000) 0%, rgba(226,226,226,0) 100%);
									border-radius: 16rpx 16rpx 0rpx 0rpx;
									position: absolute;
									bottom: 0;
								}
								.tt-item-bg-center{
									width: 196rpx;
									height: 248rpx;
									background: linear-gradient(180deg, rgba(255,236,54,0.1000) 0%, rgba(255,236,54,0) 100%);
									border-radius: 16rpx 16rpx 0rpx 0rpx;
									position: absolute;
									bottom: 0;
								}
								.tt-item-img{
									width: 92rpx;
									height: 40rpx;
									transform: translateY(20rpx);
									position: relative;
									z-index:20;
								}
								.tt-item-img-border{
									width: 196rpx;
									height: 192rpx;
									position: absolute;
									left: 0;
									right: 0;
									margin: auto;
									transform: translateY(-30rpx);
								}
								.tt-item-head-box{
									width: 136rpx;
									height: 136rpx;
									border-radius: 68rpx;
									position: relative;
									z-index: 10;
									
								}
								.tt-item-name{
									width: 136rpx;
									height: 40rpx;
									text-align: center;
									line-height: 40rpx;
									color: $fontcolor5;
									margin-bottom: 16rpx;
									margin-top: 14rpx;
								}
								.tt-item-num-box{
									.tt-item-num-img{
										width: 32rpx;
										height: 32rpx;
									}
									.tt-item-num-text{
										color: $fontcolor5;
										margin-left: 8rpx;
									}
								}
							}
						}
					}
				}
			}
			.list-item{
				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>