qzw_xcx/pages/index/index.vue

<template>
	<view class="content">
	<view style="postion: fixed;top:0;">
	 <uniNavBar class="top"  :shadow="false"  :fixed="false" color="#333333" background-color="#FFFFFF">
	 	<block  style="width: 70%;padding-left: 32upx;" slot="left">
	 		<view class="city" v-if="!allow">
	 			<view style="font-size: 35upx;">
				  <image @click="refeshadress" v-if="isrefesh" src="../../static/address.png" style="width: 50rpx;height: 50rpx;vertical-align: middle;padding-right:10upx;" ></image>
				  <image @click="refeshadress"  v-if="!isrefesh" src="../../static/home_local2.png" style="width: 50rpx;height: 50rpx;vertical-align: middle;padding-right:10upx;" ></image>
				  {{ location }}
				</view>
	 		</view>
			<button plain="true" style="border: none;" 
			  v-if="allow" @opensetting='handler'
			  open-type="openSetting" >定位失败，点击重新获取</button>
	 	</block>
			<view class="input-view" style="float: right;visibility: hidden;">
			  <uni-icon color="#606266" size="22" @click="scan" type="scan"></uni-icon>
			</view>
		<block  slot="right">
			<view  @click="goinfor">
				<uni-icon color="#606266" 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="搜索您入住的酒店" disabled="true" />
		 </view>
	 </view>
	 </view>
	 <scroll-view  class="floor-list" style="height: 95vh;" 
	  :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
	  :refresher-enabled="false">
	 <view  class="scrollswiper">
		 <swiper class="swiper" 
		  indicator-dots circular=true
		 :autoplay="autoplay" 
		 :interval="interval" 
		 :duration="duration"
		 > 
			<swiper-item v-for="(item,index) in backgroundlist" :key="index">
			<view class="swiper-item"  @tap="shopDetail(item)" >
				 <image style="height: 100%;width: 100%;" :src='pictureUrl +"/uploads/home/adv/"+item.adv_code' />
		    </view>
			</swiper-item>
		 </swiper>
	 </view>
	
	 <view class="tips">
		 <view style="font-weight: bold;font-size: 34rpx;">附近酒店</view>
		 <view style="color: #909399;">在此找到您入住的酒店</view>
	 </view>
	 <view style="border-bottom: 2upx solid #EEEEEE;width: 100%;margin-bottom: 24upx 0;"></view>
	
	<view v-if="!allow">
     <view class="hotelList" v-for='(item,index) in hotelist' :key="index" @click="openinfo(item)">
		 <view class="hotleLeft">					
			 <image  style="width: 214upx;height: 152upx;border-radius: 10upx;" :src="pictureUrl+'/uploads/home/store/'+item.store_id+'/'+item.store_banner" />
		 </view>
		 <view class="hotelright">
		 	<view style="font-size: 28upx;color: #303133;font-weight: bold;">{{item.store_name}}
			</view>
		    <view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding: 10rpx 0;">
				<view style="font-size: 46upx; color: #303133;font-weight: 900;">{{intToFloat(item.store_servicecredit)}}</view>
				<view style="color: #606266;font-size: 24upx;">月访客{{item.store_visitor}}</view>
				<view style="color: #606266;font-size: 24upx;">{{item.distance}}</view>
			</view>
			<view class="undertip">
				<view  v-for="(items,index) in item.tageslist" :key="index" class="tipsTop">{{items}}</view>
			</view>
	 </view>
	 </view>
	 </view>
	 <view v-if="allow" style="text-align: center;margin: 100upx 0;">
		 定位失败暂时获取不到周边酒店信息哦
	 </view>
     </scroll-view>
	 <!-- || !successlogion -->
	 <unipopup :images="images" v-if="enable == 1" :show="ishow"/>
	 <Gobacktop @getop="getop" v-if="isTop" />
	</view>
</template>

<script>
	import {
		mapMutations,mapState
	} from 'vuex'
	import unipopup from '@/component/popup.vue'
	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'
	import amap from '@/common/amap-wx.js'
	import Gobacktop from '@/component/Gobacktop.vue'
	export default {
		components: {
			unipopup,
			uniNavBar,
			uniIcon,
			logionDialog,
			Gobacktop
		},
		data() {
			return {
				isrefesh: true,
				lat:'', // 经度
				lot: '', // 维度
				ishow: true,
				firstpoint: true,
				page: 1,
				ispull: true,
				pagesize: 10,
				store_summary:[], // 标签数组
				pictureUrl: this.pictureUrl,
				amapPlugin: null,  
				key: '7277de7a5833626b7da8f2496e9d6bf9',  
				showdialog: false,   // 点击确定显示弹窗
			    backgroundlist: ['color1', 'color2', 'color3'],  // 轮播数组
				hotelist:[], // 酒店数组
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				title: 'Hello',
				location:'正在定位...',
				scrollTop: 0,
	            isTop: false,
				old: {
					scrollTop: 0
				},
				allow:　true,
				images: '',  // 开机图片广告
				enable: '', // 是否展示广告
			}
		},
		computed:{
			...mapState([
			  'hasLogin',
			  'userInfo',
			  'successlogion',
			  'beginload'
			]),
		},
		onLoad() {
			if(this.beginload) {
			this.getpicture(); // 开机广告
			//this.gethotelist(); // 酒店列表
			if(this.allow) {
				
			}else {
				this.gethotelist(); // 酒店列表
			}
			this.amapPlugin = new amap.AMapWX({
				key: this.key  
			});  
			this.isGetLocation();  // 检查是否开启定位权限
			this.isUserInfo();  // 检查是否允许获取用户授权
			 // 用户授全
			this.getswiper();   // 获取首页轮播 
		   }
	    },
		watch: {
			'allow': function(val) {
				if(val) {
					
				}else {
					
					//this.gethotelist(); // 酒店列表
				}
			},
			'beginload':function(val) {
				this.getpicture(); // 开机广告
				// if(this.allow) {
					
				// }else {
				// 	this.gethotelist(); // 酒店列表
				// }
				this.amapPlugin = new amap.AMapWX({
					key: this.key  
				});  
				this.isGetLocation();  // 检查是否开启定位权限
				this.isUserInfo();  // 检查是否允许获取用户授权
				 // 用户授全
				this.getswiper();   // 获取首页轮播 
			}
		},
		methods: {
			...mapMutations(['login','showDialog']),
			// 刷星定位
			refeshadress() {
				this.isrefesh = false;
				this.getRegeo();
			},
			intToFloat(val) {
			    // body...
			    return new Number(val).toFixed(1);
			},
			getpicture() {
				this.request({
					url: '/v1/entry/poster',
					method: 'get',
					success: (res) => {
						let { data } = res.data;
						this.images = data.images;
						this.enable = data.enable;
					}
				})
			},
			
			handler() {
				this.getAuthorizeInfo();
			},
			goinfor() {
				if(this.successlogion && this.hasLogin) {
					
					uni.navigateTo({
					   url: '../myCenter/information'  ,// 我的消息通知
					   
					})
				}else {
					uni.navigateTo({
						url:'/pages/myCenter/logion'
					})
					// this.showdialog = true;
				}
			},
			//
			// // 关闭弹窗
			// cancelDiaolog() {
			// 	this.showdialog = false;
			// },
			// // 确定
			// confirmDiaolog() {
			// 	this.showdialog = false;
			// 	uni.navigateTo({
			// 	   url: '../myCenter/information'  // 我的收藏
			// 	})
			// },
			goSearch() {
				let lat = this.lat;
				let lon = this.lot;
				uni.navigateTo({
					url: `/pages/index/searchresult?lat=${lat}&lon=${lon}`
				})
				
			},
			// 滚动到顶部
			upper(e) {
			
			},
			
			getop() {
				//  setTimeout( () => {  
				// 		uni.pageScrollTo({  
				// 		   duration:0,			//过渡时间必须为0，uniapp bug，否则运行到手机会报错
				// 		   scrollTop: 0,  
				// 		})  
				// },300)  
				   this.scrollTop = this.old.scrollTop
	                this.$nextTick(function(){
	                    this.scrollTop=0;
	                });
					this.isTop = false;
			},
			
			// 滚到底部
			lower(e) {
				this.page = this.page + 1;
				if(this.ispull) {
					this.gethotelist();
				}
			},
			
			// 滚动时触发
			scroll(e) {
				if(e.detail.scrollTop > 400) {
					this.isTop = true;
				}else{ //当距离小于500时显示回到顶部按钮
					this.isTop = false;
				}

				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.getRegeo()
							}
							
						}
					});
				},
			//  进入判断是否授权
			isUserInfo(b='scope.userInfo') {
				let _this = this;
				uni.getSetting({
					success(res) {
						if(!res.authSetting[b]) {
							_this.showDialog(false);
						}else {
							_this.showDialog(true);
							let userInfo = uni.getStorageSync('userInfo');
							 _this.login(userInfo);
						}
					}
				})
			},
			getAuthorizeInfo(a="scope.userLocation"){  //uniapp弹窗弹出获取授权弹窗
					let _this=this;
					uni.authorize({
						scope: a,
						success(res) { //允许授权
							_this.getRegeo();
						},
						fail(){    //拒绝授权
						  _this.allow = true;
						  _this.$msg("你拒绝了授权，无法获得周边信息")
						}
					})
				},

		    getRegeo(){  //获取地理位置
			 let _this=this;
			 uni.showLoading({  
				title: '获取位置中'  
			}); 
			_this.amapPlugin.getRegeo({  
				success: (data) => {
					console.log(data);
					console.log(data.formatted_address);
					this.isrefesh = true;
					this.location = data[0].name;
					this.lat = data[0].latitude; // 经度
					this.lot = data[0].longitude; // 纬度
					this.allow = false;
					this.gethotelist();
					uni.hideLoading();  
				},
				fail: (res) => {
					this.allow = true;
					uni.hideLoading(); 
				}
			});  
		    },
			// 获取首页轮播
			 getswiper() {
				this.request({
	                url:"/v1/entry/adv",
	                method:'get',
					success: (res) => {
						 this.backgroundlist = res.data.data;
					}
			   })
			 },
		 // 获取酒店列表
		 gethotelist() {
			 this.request({
                 url:"/v2/entry/storeList",
                 method:'get',
                 data: {
                         page: this.page,
						 page_size: 10,
						 lat: this.lat,
						 lon: this.lot
                     },
				success: (res) => {
					 let { data,code } = res.data;
					 if(code == 1000) {
						 if(data.store_list.length<10) {
							 this.ispull = false;
						 }
						 // data.store_list.forEach(item => {
						 // 	item.tages = item.store_summary.split('  ');
						 // }) .replace(/(^\s*)|(\s*$)/g, "")
						  data.store_list.forEach((items,index) => {
							items.tages = items.store_summary.split(' ');
							items.tageslist = [];
							items.tages.forEach((item,index) => {
								if(item!='') {
									items.tageslist.push(item);
								}
							})
							
						 })
						 if(this.hotelist.length == 0) {
							 this.hotelist = data.store_list
						 }else {
							 this.hotelist =  this.hotelist.concat(data.store_list);
						 }
						
						
					 }else {
						 this.$msg("网络错误稍后再试")
					 }
				}
		   })
		 },
		
		 // 点击扫码
		 scan(){
		 	uni.scanCode({
		 		success: (res) => {
		 			
		 		}
		 	});
		 },
		 
		 // 跳转到新页面  酒店详情
		 openinfo(item) {
			 let id = item.store_id;
			  uni.navigateTo({
			        url: `/pages/index/hotel?id=${id}`
			  });
		 },
		 
		 // 跳转到商品详情
		 shopDetail(item) {
			 let id = item.adv_target.goods_id;
			 let store_id = item.adv_target.store_id;
			 if(item.adv_target.type == 'goods') {
				 uni.navigateTo({
					url: `/pages/index/shop?id=${id}&store_id=${store_id}`
				}); 
			 }else if(item.adv_target.type == 'store') {
				 let id = item.adv_target.store_id;
				 let title = item.adv_target.store_name;
				 uni.navigateTo({
				   url: `/pages/index/hotel?id=${id}`
				 });
			 }
			
		 }
		
		}
}
</script>

<style>
   .top .uni-navbar__header-btns  {
		width: 77%!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; */
		padding: 20upx 32upx;
		display: flex;
		justify-content: space-between;
		font-size: 30upx;
	}
		
    .hotelList {
		display: flex;
		flex-direction: row;
		padding: 24upx 32upx;
	}
		
	.hotleLeft {
		width: 214upx;
		height: 152upx;
	}
		
	.hotelright {
		padding-left: 16upx;
		display: flex;
		flex-direction: column;
		width: 100%;
	}
		
	.undertip {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.tipsTop {
		border: 2upx solid #606266;
		margin-right: 12upx;
		color: #606266;
		padding: 4upx;
		font-size: 24upx;
		border-radius: 4upx;
		padding: 0 3upx;
	}
</style>