chunwan/pages/peiwan/index.vue

<template>
	<view class="home">
		<view class="home-navbar">
			<u-navbar :is-back="false">
				<view class="slot-wrap">
					<view class="address" @click="openPage(2)">
						<image src="@/static/dingwei.png"></image>{{city}}
					</view>
					<view class="search" @click="openPage(3)">
						<image src="@/static/icon-search.png"></image>
						请输入名称搜索
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="home-tab">
			<view class="tab">
				<u-tabs :list="list" bg-color="transparent" :is-scroll="true" active-color="#222222" inactive-color="#666666" font-size="30" :active-item-style="activeStyle" bar-height="10" bar-width="60" v-model="current" @change="changeTabs"></u-tabs>
			</view>
		</view>
		<view class="home-banner">
			<image src="@/static/banner1.png" @click="openPage(6)"></image>
		</view>
		<view class="home-list">
			<view class="item" v-for="(a,i) in sellerUserList" :key="i" @click="openPage(7,a.id)">
				<view class="pic">
					<image :src="a.faceImage?a.faceImage:a.img"></image>
				</view>
				<view class="info">
					<view class="name">{{a.nickname}}<view class="vip" v-if="a.memberflag >=1">VIP{{a.memberflag}}</view></view>
					<view class="desc">{{a.age}}岁/{{a.distance}}m</view>
				</view>
				<view class="chat">
					<image src="@/static/xin.png"></image>
					约玩
				</view>
			</view>
		</view>
		<view class="empty" v-if="total == 0 ">
			<image src="@/static/empty.png"></image>
			<view class="txt">暂无数据</view>
		</view>
		<unverified :isPopup="isPopup" />
		<u-popup v-model="show" mode="top" :mask-close-able='false' :zIndex="5">
			<view class="permissions_box">
				当您使用APP时，应用程序可以提供基于位置的服务、定位导航、附近搜索等功能。
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				list:[],
				activeStyle:{'fontSize': '35rpx'},
				isShow: false,
				city: "",
				isPopup: false,
				info: {},
				page: 1,
				show: false,
				total: 1,
				sellerUserList: []
			}
		},
		onPullDownRefresh() {
			const that = this;
			setTimeout(()=>{
				that.page = 1;
				that.sellerUserList = [];
				that.getsellerUserList();
				uni.stopPullDownRefresh();
			},2000)
		},
		onLoad() {
			const that = this;
			that.city = uni.getStorageSync("jingweiInfo")?uni.getStorageSync("jingweiInfo").formatted:""
			if(!that.city){
				// APP检查权限
				if(uni.getSystemInfoSync().platform == 'android') {
					plus.android.checkPermission(
						'android.permission.ACCESS_FINE_LOCATION',
						granted => {
						  if (granted.checkResult==-1){
							that.show=true
							that.getLocation();
						  }else{
							that.show=false
							// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
							that.getLocation();
						  }
						},
						error => {
						  console.error('Error checking permission:', error.message);
						}
					  );
					 that.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION')
					return ;
				}else{
					that.getLocation();
				}
			}else{
				that.getsellerUserList();
			}
			
		},
		onReady() {
			const that = this;
			uni.$on("clickTap", res=>{
				that.city = res.name;
				that.page = 1;
				that.sellerUserList = [];
				that.getsellerUserList();
			});
			uni.$on("closeSharePopup",res=>{
				that.isPopup = false;
			})
			uni.$on("onPopup",res=>{
				if(res == 1){
					that.show=false
				}
			})
		},
		onReachBottom() {
			const that = this;
			uni.showLoading({
				title: "加载中"
			})
			that.page ++;
			setTimeout(function() {
				that.getsellerUserList(1);
			}, 1000);
		},
		methods: {
			//实时上传轨迹
			trackUpload(res){
				this.$api.trackUpload({
					userId: uni.getStorageSync("userInfo").id,
					lat: res.latitude,
					lon: res.longitude,
				});
			},
			recorderAuthModal: function () {
				const that = this;
				uni.showModal({
					title: '定位权限说明',
					content: '便于您使用该功能在当前位置查询所在门店，请您确认授权，否则无法使用该功能。',
					cancelText: '关闭',
					confirmText: '去授权',
					success(res) {
						that.show=false
						if (res.confirm) {
							permision.gotoAppPermissionSetting()
						}
					}
				})
			},
			async requestAndroidPermission(permisionID) {
				const that = this;
				var result = await permision.requestAndroidPermission(permisionID);
				if(result != 1){
					that.recorderAuthModal();
				}else{
					that.show=false
					// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
					that.getLocation();
				}
			},
			getLocation() {
				const that = this;
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success(res1) {
						console.log(res1)
						that.trackUpload(res1)
						let latitude = res1.latitude,longitude = res1.longitude;
						let url = `https://restapi.amap.com/v3/geocode/regeo?output=json&location=${longitude},${latitude}&key=4a6e2ba8eac3864f0d88f9b5abd026e6&radius=1000`
						uni.request({
							url,
							success(res) {
								console.log(res)
								if(res.data.regeocode.addressComponent){
									let city = res.data.regeocode.addressComponent.city.length==0?res.data.regeocode.addressComponent.province:res.data.regeocode.addressComponent.city
									that.city = res.data.regeocode.formatted_address.split(res.data.regeocode.addressComponent.township)[1]
									that.show=false;
									uni.setStorageSync("jingweiInfo",{...res1,...res.data.regeocode.addressComponent,formatted: that.city});
									that.getList();
									that.getUserInfo();
								}
							}
						})
					}
				})
			},
			//获取用户信息
			async getUserInfo() {
				const { code, data , msg } = await this.$api.findUserInfo({userId: uni.getStorageSync("userInfo").id});
				if(code == 200){
					this.userInfo = data;
					uni.setStorageSync("userInfo",data);
				}else{
					uni.showToast({
						title: msg,
						position: "bottom",
						icon: "none",
					})
				}
			},
			//数组对象去重
			arrayUnique (arr, name) {
				var hash = {};
				return arr.reduce(function (item, next) {
					hash[next[name]]
						? ""
						: (hash[next[name]] = true && item.push(next));
					return item;
				}, []);
			},
			async getList() {
				const {code,data} = await this.$api.sitterList({
					userId: uni.getStorageSync("userInfo").id,
					page: 1,
					limit: 20
				})
				if(code == 200){
					this.list = [{'name': '全部'},...data.list];
					this.getsellerUserList();
				}
			},
			async getsellerUserList(type) {
				const {code,data} = await this.$api.sellerUserList({
					userId: uni.getStorageSync("userInfo").id,
					configid: this.current==0?-1:this.list[this.current].id,
					page: this.page,
					limit: 20,
					city: uni.getStorageSync("jingweiInfo").new_city?uni.getStorageSync("jingweiInfo").new_city:uni.getStorageSync("jingweiInfo").city,
					lat: uni.getStorageSync("jingweiInfo").latitude,
					lon: uni.getStorageSync("jingweiInfo").longitude,
				})
				if(type == 1){
					uni.hideLoading()
				}
				if(code == 200){
					this.total = data.total;
					this.sellerUserList = this.arrayUnique([...this.sellerUserList,...data.list],'id')
				}
			},
			openPage(index,id){
				if(index == 1){
					uni.navigateTo({
						url: "/pages/peiwan/detail?id="+id
					})
				}else if(index == 2){
					uni.navigateTo({
						url: "/pages/index/city"
					})
				}else if(index == 3){
					uni.navigateTo({
						url: "/pages/index/search?type=2"
					})
				}else if(index == 6){
					if(this.userInfo.realnameFlag == 0){
						this.isPopup = true
						return ;
					}
					uni.navigateTo({
						url: "/pages/peiwan/apply"
					})
				}else if(index == 7){
					uni.navigateTo({
						url: "/pages/peiwan/detail?id="+id
					})
				}
			},
			changeTabs(index){
				this.current = index
				this.page = 1;
				this.sellerUserList = [];
				this.getsellerUserList();
			},
		}
	}
</script>

<style scoped lang="scss">
.home{
	.empty{
		padding: 150rpx 0;
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #222222;
		image{
			display: block;
			width: 460rpx;
			height: 400rpx;
			margin: 0 auto;
		}
	}
	&-navbar{
		width: 100%;
		overflow: hidden;
		.slot-wrap{
			width: 100%;
			padding: 0 25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			.address{
				font-weight: 400;
				font-size: 30rpx;
				white-space: nowrap;
				color: #222222;
				text-overflow: ellipsis;
				overflow: hidden;
				max-width: 250rpx;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-right: 7rpx;
					position: relative;
					top: 5rpx;
				}
			}
			.search{
				width: 436rpx;
				height: 70rpx;
				background: #F5F5F5;
				border-radius: 70rpx;
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-right: 7rpx;
					margin-left: 25rpx;
				}
			}
		}
	}
	&-banner{
		padding: 0 15rpx;
		overflow: hidden;
		margin-top: 10rpx;
		text-align: center;
		image{
			width: 720rpx;
			height: 220rpx;
		}
	}
	&-tab{
		overflow: hidden;
		width: 100%;
	}
	&-list{
		padding: 0 25rpx 25rpx;
		overflow: hidden;
		.item{
			width: 100%;
			height: 200rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 10rpx 0px rgba(0,0,0,0.06);
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			&:first-child{
				margin-top: 0;
			}
			.pic{
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
				overflow: hidden;
				margin-right: 20rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.info{
				flex: 1;
				.name{
					font-weight: 500;
					font-size: 32rpx;
					color: #222222;
					display: flex;
					align-items: center;
					.vip{
						width: 60rpx;
						line-height: 32rpx;
						background: url(@/static/vip-bg.png) center top no-repeat;
						background-size: contain;
						text-align: center;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						overflow: hidden;
						margin-left: 20rpx;
					}
				}
				.desc{
					width: 180rpx;
					line-height: 40rpx;
					background: #F2F2F2;
					border-radius: 40rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					text-align: center;
					margin-top: 20rpx;
				}
			}
			.chat{
				width: 150rpx;
				height: 90rpx;
				background: linear-gradient(0deg, #000000, #3D3B38);
				box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
				border-radius: 90rpx;
				margin-left: 20rpx;
				text-align: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				image{
					width: 65rpx;
					height: 32rpx;
					display: block;
					margin: 15rpx auto 5rpx;
				}
			}
		}
	}
}	
</style>