qzw_xcx/pages/index/index.vue

<template>
	<view class="content">
		<!-- <userInfo /> -->
	<!-- <view>
		<view>点击授权{{showModal}}</view>
		<button v-if="showModal" open-type="getUserInfo" @click="wxlogion">请点击授权</button>
	 </view> -->
	 <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>
				<uni-icon  size="22" type="chat"></uni-icon>
			</view>
		</block>
	 </uniNavBar>
	<view  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 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>
	
	
	<scroll-view  style="height: 100vh;" class="floor-list"
	 :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
	 refresher-enabled="true">
	
	<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'
	export default {
		components: {
			uniNavBar,
			uniIcon
		},
		data() {
			return {
			    background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				title: 'Hello',
				location:'测试定位信息',
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		computed:{
			...mapState([
			  'showModal',
			  'userInfo'
			]),
		},
		onLoad() {
			this.isGetLocation();  // 检查是否开启定位权限
			this.isUserInfo();  // 检查是否允许获取用户授权
			 // 用户授全
			 		
	    },
		methods: {
			...mapMutations(['login','showDialog']),
			// 滚动到顶部
			upper(e) {
				console.log(e)
				console.log("顶部")
			},
			
			// 滚到底部
			lower(e) {
				console.log("底部")
			},
			
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			isGetLocation(a="scope.userLocation"){ //  检查当前是否已经授权访问scope属性WEW
					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(true);
						}else {
							_this.showDialog(false);
						}
					}
				})
			},
			getAuthorizeInfo(a="scope.userLocation"){  //uniapp弹窗弹出获取授权弹窗
					let _this=this;
					uni.authorize({
						scope: a,
						success() { //允许授权
						   console.log("调用位置授权")
							_this.getLocationInfo();
						},
						fail(){    //拒绝授权
						  _this.$msg("你拒绝了授权，无法获得周边信息")
							
						}
					})
				},
		    getLocationInfo(){  //获取地理位置
		    		let _this=this;
		    		uni.getLocation({
		    			type: 'wgs84',
		    			success (res) {
		    				console.log(res)
		    				let latitude,longitude;
		    				latitude = res.latitude.toString();
		    				longitude = res.longitude.toString();
							this.loaction = '测试定位';
		    				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(false);
			     },
			     fail(res) {
				 that.$msg("授权失败")
			//      uni.showModal({
			// 		title: 'shouquanshibai',
			// 	   })
			     }
			    })
		 },
		 
		 // 点击扫码
		 scan(){
		 	uni.scanCode({
		 		success: (res) => {
		 			console.log(res);
		 		}
		 	});
		 },
		 
		 // 跳转到新页面
		 openinfo() {
			  uni.navigateTo({
			                     url: './hotel',
			                 });
		 },
		}
}
</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>