qzw_xcx/pages/index/index.vue

<template>
	<view class="content">
		<view style="postion:sticky;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/home_local.png"
								style="width: 40rpx;height: 45rpx;vertical-align: middle;padding-right:10upx;"
							></image>
							<image
								@click="refeshadress"
								v-if="!isrefesh"
								src="../../static/home_local2.png"
								style="width: 40rpx;height: 45rpx;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;"><uni-icon color="#606266" size="24" @click="scan" type="scan"></uni-icon></view>
				<block slot="right">
					<view @click="goinfor" style="padding-top: 8upx;">
						<van-icon v-if="successlogion && hasLogin && msg_count > 0" name="chat-o" color="#606266" size="24px" dot />
						<van-icon v-else name="chat-o" color="#606266" size="24px" />
					</view>
				</block>
			</uniNavBar>
			<view @click="goSearch" class="searchType" style="background: #fff;">
				<view class="input-view">
					<uni-icon type="search" size="22" color="#666666" />
					<view style="color: #999;">搜索您入住的酒店</view>
					<!-- 	<input placeholder-style="text-align: center;"	 confirm-type="search" class="input" type="text" placeholder="搜索您入住的酒店" disabled="true" /> -->
				</view>
			</view>
		</view>
		
		<scroll-view
			class="floor-list"
			style="height:calc(100vh - 172upx);"
			: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 v-if="item.adv_code" style="height: 100%;width: 100%;border-radius: 10upx;" :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
							v-if="item.store_banner"
							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: 2rpx 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>
		
		<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: '', // 是否展示广告
			msg_count: 0,
			timer: ''
		};
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'successlogion', 'beginload'])
	},
	onShow() {
		if (this.successlogion && this.hasLogin) {
			this.getuserinfo();
			this.firstget();
		}
	},
	onHide() {
		clearInterval(this.timer);
		this.timer = null;
	},
	onLoad() {
		if (this.beginload) {
			this.getpicture(); // 开机广告
			if (this.allow) {
			} else {
				this.gethotelist(); // 酒店列表
			}
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			this.isGetLocation(); // 检查是否开启定位权限
			this.isUserInfo(); // 检查是否允许获取用户授权
			this.getswiper(); // 获取首页轮播
		}
		if (this.successlogion && this.hasLogin) {
			this.firstget();
			this.getuserinfo();
		}
	},

	watch: {
		beginload: function(val) {
			this.getpicture(); // 开机广告
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			this.isGetLocation(); // 检查是否开启定位权限
			this.isUserInfo(); // 检查是否允许获取用户授权
			this.getswiper(); // 获取首页轮播
		},
		hasLogin: function(val) {
			if (val) {
				this.firstget();
				this.getuserinfo();
			}
		}
	},
	methods: {
		...mapMutations(['login', 'showDialog']),
		firstget() {
			this.request({
				url: '/v2/member/info',
				method: 'GET',
				success: res => {
					this.msg_count = res.data.data.msg_count;
				}
			});
		},
		getuserinfo() {
			// let second = Math.round((Math.random()+1)*3);
			this.timer = setInterval(() => {
				this.request({
					url: '/v2/member/info',
					method: 'GET',
					success: res => {
						this.msg_count = res.data.data.msg_count;
					}
				});
			}, 180000);
		},
		refeshadress() {
			this.isrefesh = false;
			this.getRegeo();
		},
		intToFloat(val) {
			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'
				});
			}
		},
		goSearch() {
			let lat = this.lat;
			let lon = this.lot;
			uni.navigateTo({
				url: `/pages/index/searchresult?lat=${lat}&lon=${lon}`
			});
		},
		// 滚动到顶部
		upper(e) {},

		getop() {
			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 > 250) {
				this.isTop = true;
			} else {
				//当距离小于500时显示回到顶部按钮
				this.isTop = false;
			}

			this.old.scrollTop = e.detail.scrollTop;
		},
		isGetLocation(a = 'scope.userLocation') {
			//  检查当前是否已经授权访问scope属性W
			uni.getSetting({
				success: res => {
					if (!res.authSetting[a]) {
						// 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
						this.getAuthorizeInfo();
					} else {
						this.getRegeo();
					}
				}
			});
		},
		isUserInfo(b = 'scope.userInfo') {
			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弹窗弹出获取授权弹窗
			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 => {
					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((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 => {
					console.log(res.result);
					if (res.scanType != 'QR_CODE') {
						this.$msg('二维码错误');
					} else {
						var obj = this.GetRequest(res.result);
						uni.navigateTo({
							url: `/pages/index/shop?id=${obj.goods_id}&store_id=${obj.store_id}`
						});
					}
				}
			});
		},

		GetRequest(urlStr) {
			if (typeof urlStr == 'undefined') {
				var url = decodeURI(location.search); //获取url中"?"符后的字符串
			} else {
				var url = '?' + urlStr.split('?')[1];
			}
			var theRequest = new Object();
			var strs;
			if (url.indexOf('?') != -1) {
				var str = url.substr(1);
				strs = str.split('&');
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return theRequest;
		},
		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: 10upx auto;
	display: flex;
	justify-content: center;
}

.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;
	border-radius: 10upx;
	width: 100%;
}
.swiper-item {
	display: block;
	height: 300upx;
	line-height: 300upx;
	text-align: center;
	border-radius: 10upx;
}
swiper-item {
	border-radius: 15upx;
}
.swiper-item image {
	border-radius: 10upx;
}
.scrollswiper {
	width: 90%;
	margin: 20upx auto;
	border-radius: 10upx;
}

.tips {
	/* color: #303133;
		font-size: 28upx;
		text-align: center;
		margin: 24upx 0; */
	padding: 20upx 32upx 0 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: 1upx solid #606266;
	margin-right: 12upx;
	color: #606266;
	font-size: 22rpx;
	border-radius: 5rpx;
	padding: 0rpx 5rpx;
}
.placeholdercenter {
	text-align: center;
}
</style>