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': `${topbarOffsetHeight}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:'加载中1'
		// })
		// 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)
		// });
		console.log('----onLoad---')
		this.login();
		// this.computedScollviewHeight();
		// this.getNearTopsMData();
		// this.getNearTopsHData();
		// this.getRecommendTopsMData();
		// this.getRecommendTopsHData();
		// this.getNearList();
		// this.getRecommendList();
		this.showGetLocation = false;

	},
	created(){
		this.$nextTick(() => {
			this.computedScollviewHeight();
			this.getNearTopsMData();
			this.getNearTopsHData();
			this.getRecommendTopsMData();
			this.getRecommendTopsHData();
			this.getNearList();
			this.getRecommendList();
		})
		// this.computedScollviewHeight();
		// this.getNearTopsMData();
		// this.getNearTopsHData();
		// this.getRecommendTopsMData();
		// this.getRecommendTopsHData();
	},
	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(z = {}) {
			let user = uni.getStorageSync('user');
			console.log('user', user)
			// let user=JSON.parse(uni.getStorageSync('user'));
			this.$api.public.mineDetail({
				getAlbum: true,
				completeUser: z
			}).then(res => {
				console.log('res---mineDetail', 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;
				}
			}).catch((error) => {
				console.log('error---mineDetail', error)
			});
		},
		login() {
			const that = this;
			// if(uni.getStorageSync('isLogin')==='yes'){
			// 	console.log('uni.getStorageSync(isLogin)',uni.getStorageSync('isLogin'))
			// 	this.getMineData();
			// 	this.computedLocation();
			// 	return;
			// }
			this.$api.login.wxLogin({
				scene: "VerCodeLogin",
				verCodeLogin: {
					phone: '18086848344',
					verCode: '230414'
				}
			}).then(result => {
				console.log('result--------', result)
				if (result.status === 'Succ') {
					console.log('进来了--------')
					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.wxLoginInfo.unionId);
					uni.setStorageSync('LL_Okn', result.data.wxLoginInfo.openId);
					uni.setStorageSync('LL_Tkn', result.data.wxLoginInfo.token);
					uni.setStorageSync('isLogin', 'yes');
					// uni.setStorageSync('LL_Csi',JSON.stringify({
					// 	"id":result.data.userToken.user.id,
					// 	"phone":result.data.userToken.user.phone,
					// 	"nick":result.data.userToken.user.nick,
					// 	"sex":result.data.userToken.user.sex
					// }));
					// this.getMineData(result.data.userToken.user);
				} else {
					uni.showToast({
						title: result.message,
						icon: 'none'
					})
				}
			}).catch((error) => {
				console.log('error---wxLogin', error)
			});
			// 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('免密登录11',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() {
			console.log('----附近下拉刷新、加载更多')
			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() {
			this.scrollHeight = uni.getSystemInfoSync().windowHeight - this.$store.state.tabbarHeight;
			console.log(this.scrollHeight)
			// 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 => {
				console.log('recommendTopsM',res)
				// console.log('--------getRecommendTopsMData------mmm',res)
				this.recommendTopsM = res.data.list;
			}).catch(err => {
				console.log('getRecommendTopsMData---', err)
			})
		},
		getRecommendTopsHData() {
			this.rankingOptions.type = 'H';
			this.$api.public.ranking(this.rankingOptions).then(res => {
				console.log('recommendTopsH', 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 => {
				console.log('nearTopsM', 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 => {
				console.log('-------getNearTopsHData', 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.type = '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() {
			// console.log('------------------------------------------------------------gggg')
			// let user=JSON.parse(uni.getStorageSync('user'));
			// this.nearListOptions.type=user.sex==='male'?'MaleNearby':'FamaleNearby';
			this.nearListOptions.type = '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;
			console.log('---1046', this.nearListOptions)
			this.$api.public.friends(this.nearListOptions).then(res => {
				console.log('--------getNearList', 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;
				}
			}).catch(err => {
				// this.showNoData=this.nearList.length===0?true:false;
				console.log('err1094', err)
			})
		},
		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>