qzw_xcx/pages/index/index.vue

<template>
	<view class="content">
	<!-- <view>
		<view>点击授权{{hasLogin}}</view>
		<button @click="wxlogion"   open-type="getUserInfo">请点击授权</button>
	 </view> -->
	 <logionDialog @confirmDiaolog="confirmDiaolog"  @cancelDiaolog="cancelDiaolog" :showdialog="showdialog"/>
	 <scroll-view  style="height: 100vh;" class="floor-list"
	  :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
	  refresher-enabled="true">
	 <uniNavBar class="top" :shadow="false"  :fixed="false" color="#333333" background-color="#FFFFFF">
	 	<block style="width: 70%;" slot="left">
	 		<view class="city">
	 			<view style="font-size: 35upx;">{{ location }}</view>
	 		</view>
	 	</block>
			<view  class="input-view" style="float: right;">
			  <uni-icon  size="22" @click="scan" type="scan"></uni-icon>
			</view>
		<block  slot="right">
			<view  @click="goinfor">
				<uni-icon  size="22" type="chat"></uni-icon>
			</view>
		</block>
	 </uniNavBar>
	<view @click="goSearch" class="searchType" style="background: #fff;">
		 <view class="input-view">
		 	<uni-icon type="search" size="22" color="#666666" />
		 	<input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" @confirm="confirm" />
		 </view>
	 </view>
	 <view   @tap="shopDetail" class="scrollswiper">
		 <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item>
				<view class="swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item>
		 </swiper>
	 </view>
	 <view class="tips">
		 在附近酒店找到您入住的酒店
	 </view>
	 <view style="border-bottom: 2upx solid #EEEEEE;width: 100%;margin-bottom: 24upx 0;"></view>
	
	<view  @tap="openinfo">
     <view class="hotelList">
		 <view class="hotleLeft">
			 <image  style="width: 214upx;height: 152upx;" src=""/>
		 </view>
		 <view class="hotelright">
		 	<view style="font-size: 36upx;color: #303133;">华南城市酒店</view>
		    <view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
				<view style="font-size: 40upx; color: #303133;"> 0.0</view>
				<view>月访客990</view>
				<view>8km</view>
			</view>
			<view class="undertip">
				<view class="tipsTop">有停车为</view>
				<view class="tipsTop">内置酒店</view>
			</view>
	 </view>
	 </view>
	 </view>
     </scroll-view>

	</view>
</template>

<script>
	import {
		mapMutations,mapState
	} from 'vuex'
	import uniNavBar from '@/component/uni-nav-bar/uni-nav-bar.vue'
	import uniIcon from '@/component/uni-icon/uni-icon.vue'
	import logionDialog from '@/component/loginDialog.vue'
	export default {
		components: {
			uniNavBar,
			uniIcon,
			logionDialog
		},
		data() {
			return {
				showdialog: false,   // 点击确定显示弹窗
			    background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				title: 'Hello',
				location:'测试定位信息',
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		computed:{
			...mapState([
			  'hasLogin',
			  'userInfo'
			]),
		},
		onLoad() {
			this.isGetLocation();  // 检查是否开启定位权限
			this.isUserInfo();  // 检查是否允许获取用户授权
			 // 用户授全
			 		
	    },
		methods: {
			...mapMutations(['login','showDialog']),
			goinfor() {
				console.log(this.hasLogin);
				console.log(this.userInfo);
				if(this.hasLogin) {
					uni.navigateTo({
					   url: '../myCenter/information'  // 我的收藏
					})
					
				}else {
					this.showdialog = true;
				}
				
			},
			// 关闭弹窗
			cancelDiaolog() {
				this.showdialog = false;
			},
			// 确定
			confirmDiaolog() {
				this.showdialog = false;
				uni.navigateTo({
				   url: '../myCenter/information'  // 我的收藏
				})
			},
			goSearch() {
				uni.navigateTo({
					url: './searchresult'  // 我的搜索
				})
			},
			// 滚动到顶部
			upper(e) {
				console.log(e)
				console.log("顶部")
			},
			
			// 滚到底部
			lower(e) {
				console.log("底部")
			},
			
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			isGetLocation(a="scope.userLocation"){ //  检查当前是否已经授权访问scope属性W
					let _this=this;
					uni.getSetting({
					    success(res) {
							// 用户定位接口
							if (!res.authSetting[a]) {  // 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
								_this.getAuthorizeInfo()
							}else{
								_this.getLocationInfo()
							}
							
						}
					});
				},
			//  进入判断是否授权
			isUserInfo(b='scope.userInfo') {
				let _this = this;
				uni.getSetting({
					success(res) {
						if(!res.authSetting[b]) {
							_this.showDialog(false);
						}else {
							_this.showDialog(true);
						}
					}
				})
			},
			getAuthorizeInfo(a="scope.userLocation"){  //uniapp弹窗弹出获取授权弹窗
					let _this=this;
					uni.authorize({
						scope: a,
						success() { //允许授权
						   console.log("调用位置授权")
							_this.getLocationInfo();
						},
						fail(){    //拒绝授权
						  _this.$msg("你拒绝了授权，无法获得周边信息")
							
						}
					})
				},
			
			//wgs84togcj02  转火星坐标
			 wgs84togcj02: function (lng, lat) {
			      const PI = 3.1415926535897932384626
			      const a = 6378245.0
			      const ee = 0.00669342162296594323
			      // WGS84转GCj02
			      let dlat = this.transformlat(lng - 105.0, lat - 35.0)
			      let dlng = this.transformlng(lng - 105.0, lat - 35.0)
			      let radlat = lat / 180.0 * PI
			      let magic = Math.sin(radlat)
			      magic = 1 - ee * magic * magic
			      let sqrtmagic = Math.sqrt(magic)
			      dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
			      dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
			      let mglat = lat + dlat
			      let mglng = lng + dlng
			      // 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
			      return {lng: mglng, lat: mglat}
			      // return gcj02tobd09(mglng, mglat)
			    },
			  transformlat: function (lng, lat) {
			      const PI = 3.1415926535897932384626
			      let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
			      ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
			      ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
			      ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
			      return ret
			    },
			    transformlng: function (lng, lat) {
			      const PI = 3.1415926535897932384626
			      let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
			      ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
			      ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
			      ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
			      return ret
			    },

		    getLocationInfo(){  //获取地理位置
		    		let _this=this;
		    		uni.getLocation({
		    			type: 'wgs84',
		    			success (res) {
		    				console.log(res)
		    				let latitude,longitude;
		    				latitude = res.latitude.toString();
		    				longitude = res.longitude.toString();
							let ws = _this.wgs84togcj02(latitude,longitude) // 转换成gcjo2
						    let lng = ws.lng
						    let lat = ws.lat
							console.log(lng);console.log(lat)
							_this.loaction = '测试定位';
							request({
								url:'',
								methods:'',
								success: (res) => {
									console.log(res);
									cosnole.log("请求成功")
								}
							})
		    				// uni.request({
		    				// 	header:{
		    				// 		"Content-Type": "application/text"
		    				// 	},
		    				// 	url:'',
		    				// 	success(re) {
		    				// 		console.log("中文位置")
		    				// 		console.log(re)	   
		    				// 		if(re.statusCode===200){
		    				// 			console.log("获取中文街道地理位置成功")
		    				// 		}else{
		    				// 			console.log("获取信息失败，请重试！")
		    				// 		}
		    				// 	 }
		    				// });
		    			},
						fail(res) {
							if(res.errMsg == 'getLocation:fail:system permission denied') {
								_this.$msg("定位失败开启手机微信定位权限")
							}
							console.log(res.errMsg)
							
						}
		    		});
		    	},
			
			// 确定登录
			wxlogion() {
			// 	let  that = this;
			//     uni.getUserInfo({
			// 	     success(res) {
			// 			 that.login(res.userInfo);
			// 			 that.showDialog(true);
			// 	     },
			// 	     fail(res) {
			// 			that.$msg("授权失败")
			// 	     }
			//     })
		 },
		 
		 // 点击扫码
		 scan(){
		 	uni.scanCode({
		 		success: (res) => {
		 			console.log(res);
		 		}
		 	});
		 },
		 
		 // 跳转到新页面  酒店详情
		 openinfo() {
			  uni.navigateTo({
			                     url: './hotel',
			                 });
		 },
		 
		 // 跳转到商品详情
		 shopDetail() {
			uni.navigateTo({
			                   url: './shop',
			               }); 
		 }
		}
}
</script>

<style>
   .top .uni-navbar__header-btns  {
		width: 80%!important;
	}
	.top .uni-navbar__header-container {
		width: 50%!important;
	}
		
	.content {
		background: #fff;
	}
	.city {
		width: 100%;
		height: 100%;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50upx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
	.van-cell--borderless {
		background-color: #e7e7e7!important;
	}
	.searchType .input-view {
		width: 85%;
		display: flex;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 15px;
		padding: 0 4%;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
		margin: 24upx auto;
	}
	
	.searchType .input-view .uni-icon {
		line-height: 30px !important;
	}
	
	.searchType .input-view .input {
		height: 30px;
		line-height: 30px;
		width: 94%;
		padding: 0 3%;
	}
	.uni-navbar--border::after {
		background: #fff!important;
	}
	.swiper {
		height: 300upx;
	}
	.swiper-item {
		display: block;
		height: 300upx;
		line-height: 300upx;
		text-align: center;
	}
		
	.scrollswiper {
		width: 90%;
		margin: 20upx auto;
	}
		
	.tips {
		color: #303133;
		font-size: 28upx;
		text-align: center;
		margin: 24upx 0;
	}
		
    .hotelList {
		display: flex;
		flex-direction: row;
		padding: 24upx 32upx;
	}
		
	.hotleLeft {
		width: 214upx;
		height: 152upx;
		background-color: #007AFF;
	}
		
	.hotelright {
		padding-left: 16upx;
		display: flex;
		flex-direction: column;
		width: 100%;
	}
		
	.undertip {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.tipsTop {
		border: 2upx solid #BBBBBB;
		margin-right: 14upx;
		color: #BBBBBB;
		padding: 4upx;
	}
</style>