qzw_xcx/pages/index/hotel.vue

<template>
	<view>
		<van-skeleton :loading="loading">
			<view class="home" v-if="isfx" @click="openHome()"><image src="../../static/bottombtn0101.png"></image></view>
			<view style="height: 65upx;"></view>
			<scroll-view
				style="height: 95vh;"
				class="floor-list"
				: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 store_slide" :key="index">
							<view style="height: 100%;" class="swiper-item"><image style="height: 100%;width: 100%;" :src="item" /></view>
						</swiper-item>
					</swiper>
				</view>

				<view class="flex-box flex-v-ce search" :class="iScrolltop == 2 ? 'activeColor' : ''">
					<view @tap="goback()" class="topleft"><uniIcon type="back" size="22" color="#666666" /></view>
					<view @click="gotosearch">
						<view class="input-view">
							<uniIcon type="search" size="22" color="#666666" />
							<input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" @confirm="confirm" />
						</view>
					</view>
				</view>
				<view class="tip">
					<view style="font-size: 36upx;color: #303133;">{{ hotelitle }}</view>
					<view>
						<van-icon name="star-o" @click="gocollect" v-if="has_collected == 0" size="22" />
						<van-icon name="star-o" @click="gocollect" v-if="has_collected == 1" size="22" color="#D9332E" />
					</view>
				</view>
				<view v-if="store_summary" style="color: #666;padding: 0 32upx 10upx 32upx;">{{ store_summary }}</view>
				<view>
					<van-tabs title-active-color="#D9332E" v-model="activeindex" @click.stop="onChange">
						<van-tab :name="0" title="服务项目">
							<view>
								<swiper class="swiper2" :style="{height:sHeight}" @change="transition">
									<swiper-item class="flex-box flex-d-wrap" v-for="(item, index) in category_list" :key="index">
										<view class="giveItem" v-for="(item2, index2) in item" :key="index2" @click.stop="godetail(item2)">
											<image :src="item2.pic" style="width:100%;height: 69%;"></image>
											<p style="text-align: center;font-size: 24rpx;">{{ item2.gc_name }}</p>
										</view>
									</swiper-item>
								</swiper>
								<view class="flex-box flex-center-center" style="margin-bottom: 20upx;">
									<view v-for="(item, index) in category_list" :key="index" class="swiperDian" :class="isActive==index ? 'activeDian':''"></view>
								</view>
<!-- 								<view class="giveList">
									<view class="giveItem" v-for="(item, index) in category_list" :key="index" @click.stop="godetail(item)">
										<image :src="item.pic" style="width:100%;height: 69%;"></image>
										<p style="text-align: center;font-size: 24rpx;">{{ item.gc_name }}</p>
									</view>
								</view> -->
								<view style="padding: 0upx 18upx 20upx 18upx;">
									<view style="width: 95%;margin: 0 auto;">
										<view @click.stop="choseType(1)" :class="tabIndex == 1 ? 'active' : ''" class="typeItem">综合</view>
										<view @click.stop="choseType(2)" class="typeItem">
											<view class="iconClass">
												<view :class="tabIndex == 2 ? 'active' : ''">上新</view>
												<view style="display: flex;flex-direction: column;margin-left: 10rpx;">
													<view v-if="istopclick == 0">
														<image style="width: 36upx;height: 36upx;vertical-align: middle;" src="../../static/sort.png"></image>
													</view>
													<view v-if="istopclick == 1">
														<image style="width: 36upx;height: 36upx;vertical-align: middle;" src="../../static/sort_down.png"></image>
													</view>
													<view v-if="istopclick == 2">
														<image style="width: 36upx;height: 36upx;vertical-align: middle;" src="../../static/sort_up.png"></image>
													</view>
												</view>
											</view>
										</view>
										<view @click.stop="choseType(3)" class="typeItem">
											<view class="iconClass">
												<view :class="tabIndex == 3 ? 'active' : ''">价格</view>
												<view style="display: flex;flex-direction: column;margin-left: 10rpx;">
													<view v-if="isprice == 0">
														<image style="width: 36upx;height: 36upx;vertical-align: middle;" src="../../static/sort.png"></image>
													</view>
													<view v-if="isprice == 3">
														<image style="width: 36upx;height: 36upx;vertical-align: middle;" src="../../static/sort_down.png"></image>
													</view>
													<view v-if="isprice == 4">
														<image style="width: 36upx;height: 36upx;vertical-align: middle;" src="../../static/sort_up.png"></image>
													</view>
												</view>
											</view>
										</view>
										<view @click.stop="choseType(4)" class="typeItem">
											<view :class="ishowpull ? 'active' : ''">
												分类
												<image v-if="!ishowpull" style="width: 36upx;height: 36upx;" src="../../static/sortb.png"></image>
												<image v-if="ishowpull" style="width: 36upx;height: 36upx;" src="../../static/sortb_up.png"></image>
											</view>
										</view>
									</view>
								</view>
								<view v-if="ishowpull" style="display: flex;flex-wrap: wrap;padding: 10upx  12upx;">
									<view class="spacedance" v-for="(item, index) in classify" :key="index" @click.stop="confirm(item)">{{ item.gc_name }}</view>
								</view>
								<!-- 商品列表 -->
								<shopList :goodId="goodId" :productList="goods_list" />
								<view v-if="isDetail == 1" class="fontcenter">加载中...</view>
								<view v-if="isDetail == 2" class="fontcenter">暂无更多商品</view>
							</view>
						</van-tab>
						<van-tab :name="1" :title="'评价' + '  ' + feedback_count">
							<!-- 评价列表 -->
							<assess :feedback_list="feedback_list" :showpicture="showpicture" />
						</van-tab>
						<van-tab :name="2" title="酒店信息">
							<view style="padding: 20upx 32upx 0upx 32upx;margin-bottom: 200upx;">
								<view style="padding-bottom: 10upx;">商家信息</view>
								<rich-text :nodes="store_description"></rich-text>
								<view class="newadress">
									<view>酒店地址</view>
									<view v-if="storeinformation.store_address != ''">{{ storeinformation.store_address }}</view>
									<view v-else>暂无</view>
								</view>
								<view class="newadress" @click="openPhone">
									<view>联系酒店</view>
									<view v-if="storeinformation.store_phone != ''" style="color: #D9332E;">{{ storeinformation.store_phone }}</view>
									<view v-else>暂无</view>
								</view>
							</view>
						</van-tab>
					</van-tabs>
				</view>
			</scroll-view>
			<view v-if="activeindex == 2" class="bottomButton"><button type="warn" @click="gofeedback">您的入住意见反馈(反馈送圈币)</button></view>
			<Gobacktop @getop="getop" :height="80" v-if="isTop" />
		</van-skeleton>
	</view>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import uniIcon from '@/component/uni-icon/uni-icon.vue';
import uniNavBar from '@/component/uni-nav-bar/uni-nav-bar.vue';
import commoNar from '@/component/commoNar.vue'; // 筛选栏
import shopList from '@/component/shopList.vue'; // 商品列表
import assess from '@/component/assess.vue'; // 评价列表
import Gobacktop from '@/component/Gobacktop.vue';
export default {
	components: {
		uniIcon,
		uniNavBar,
		commoNar,
		assess,
		shopList,
		Gobacktop
	},
	data() {
		return {
			isfx: false,
			firstloading: 0,
			showpicture: false,
			loading: true,
			storeinformation: {},
			isTop: 0,
			feedback_count: 0,
			hoteldetail: {},
			has_collected: 0, // 收藏酒店
			chosegoods_commonid: true,
			chosegoods_price: true,
			firstwo: 1,
			isDetail: 1,
			pictureUrl: this.pictureUrl,
			showdialog: false,
			store_description: '', //酒店信息
			store_summary: '', // 标签
			store_slide: [], //banner
			goods_list: [], // 首页酒店商品列表
			isnexttwo: 1,
			feedback_list: [], // 评价列表
			hotelitle: '', // 酒店名称
			istopclick: 0,
			page: 1,
			goodId: 0,
			page_size: 10,
			gc_id_1: '', //	一级分类id
			gc_id_2: '', //	二级分类id
			goods_commonid: '', //	上新排序 desc-降序 asc-尚需
			goods_price: '', //	价格排序 desc-降序 asc-尚需
			praise: '', //	好评率排序 desc-降序 asc-尚需
			keyword: '', //g	关键字搜索
			category_list: [], // 一级菜单栏
			tabIndex: 1,
			isprice: 0,
			menu: [
				{
					name: '综合',
					id: '0'
				},
				{
					name: '上新',
					id: '1'
				},
				{
					name: '价格',
					id: '2'
				},
				{
					name: '分类',
					id: '3'
				}
			],
			ishowpull: false,
			classify: [],
			background: ['color1', 'color2', 'color3'],
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			activeindex: 0,
			scrollTop: 0,
			old: { scrollTop: 0 },
			value1: 0,
			iScrolltop: 1,
			sHeight:'100px',//商品分类轮播高度
			isActive:0//商品分类默认选中
		};
	},
	onShareAppMessage(res) {
		uni.showShareMenu({
			withShareTicket: true
		});
		let that = this;
		let id = this.goodId; // 酒店id
		if (res.from === 'button') {
			// 来自页面内分享按钮
		}
		return {
			title: that.hotelitle,
			path: `/pages/index/hotel?id=${id}`,
			imageUrl: that.store_slide[0]
		};
	},
	// 初次渲染进来关闭分享菜单栏
	onReady: function() {},
	onLoad(options) {
		if (options.q) {
			var str = decodeURIComponent(options.q);
			var num = str.indexOf('=');
			var id = str.slice(num + 1);
			this.goodId = id; // 商品和酒店Id
		} else {
			this.goodId = options.id; // 商品和酒店Id
		}

		if (options.isfx) {
			this.isfx = true;
		} else {
			this.isfx = false;
		}
		this.activeindex = 0;
		this.getshopdetail(); // 获取商品详情
		this.hotelmenu(); // 一级菜单
		this.gethoteil(); // 获取酒店信息
		uni.$on('changshow', e => {
			this.changeshow();
		});
		uni.$on('changpicture', e => {
			this.changimg();
		});
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'successlogion'])
	},
	methods: {
		transition(e){
			this.isActive=e.detail.current;
		},
		openPhone(){
			uni.makePhoneCall({
			    phoneNumber: this.storeinformation.store_phone //仅为示例
			});
		},
		changeshow() {
			this.showpicture = false;
		},
		changimg() {
			this.showpicture = true;
		},
		getop() {
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(function() {
				this.scrollTop = 0;
			});
			this.isTop = false;
		},
		// 入住酒店反馈
		gofeedback() {
			if (this.hoteldetail.can_feedback == 0) {
				this.$msg(this.hoteldetail.feedback_msg);
				return;
			}
			let store_id = this.goodId;
			uni.navigateTo({
				url: `/pages/index/feedback?store_id=${store_id}`
			});
		},
		// 搜说
		gotosearch() {
			let store_id = this.goodId;
			uni.navigateTo({
				url: `/pages/index/hotelsearch?store_id=${store_id}`
			});
		},
		// 收藏
		gocollect() {
			if (this.hasLogin && this.successlogion) {
				this.request({
					url: '/v1/favorites/collect',
					method: 'post',
					data: {
						type: 'store',
						fav_id: this.goodId
					},
					success: res => {
						if (res.data.data.action == 'add') {
							this.$msg('收藏成功');
						} else {
							this.$msg('取消收藏');
						}
						this.gethoteil();
					}
				});
			} else {
				// this.showdialog = true;
				uni.navigateTo({
					url: '/pages/myCenter/logion'
				});
			}
		},
		choseType(e) {
			this.tabIndex = e;
			this.isDetail = 1;
			this.page = 1;
			if (this.tabIndex == 1) {
				// 服务
				this.istopclick = 0;
				this.isprice = 0;
				this.gc_id_1 = '';
				this.goods_price = '';
				this.goods_commonid = '';
				this.getshopdetail(2);
			} else if (this.tabIndex == 2) {
				//伤
				this.chosegoods_price = true;
				this.istopclick = this.chosegoods_commonid ? 1 : 2;
				this.isprice = 0;
				this.goods_price = '';
				this.goods_commonid = this.chosegoods_commonid ? 'asc' : 'desc';
				this.chosegoods_commonid = !this.chosegoods_commonid;
				this.getshopdetail(2);
			} else if (this.tabIndex == 3) {
				// 价格
				this.chosegoods_commonid = true;
				this.istopclick = 0;
				this.isprice = this.chosegoods_price ? 3 : 4;
				this.goods_price = this.chosegoods_price ? 'desc' : 'asc';
				this.goods_commonid = '';
				this.chosegoods_price = !this.chosegoods_price;
				this.getshopdetail(2);
			} else if (this.tabIndex == 4) {
				// 分类
				this.ishowpull = !this.ishowpull;
				this.istopclick = 0;
				this.isprice = 0;
				this.goods_price = '';
				this.goods_commonid = '';
				this.chosegoods_price = true;
				this.chosegoods_commonid = true;
			}
		},
		// 点击切换上下
		changeisclick(e) {},
		openHome() {
			uni.switchTab({
				url: `/pages/index/index`
			});
		},
		godetail(item) {
			let id = item.gc_id; // 一级菜单id
			let store_id = this.goodId;
			let gc_name = item.gc_name;
			uni.navigateTo({
				url: `/pages/index/hoteldetail?id=${id}&gc_name=${gc_name}&store_id=${store_id}`
			});
		},

		// 获取酒店商品列表
		getshopdetail(e) {
			this.request({
				url: '/v2/entry/storeGoods',
				method: 'get',
				data: {
					store_id: this.goodId,
					page: this.page,
					goods_commonid: this.goods_commonid, // 上新排序
					goods_price: this.goods_price,
					gc_id_1: this.gc_id_1
				},
				success: res => {
					// uni.hideLoading()
					if (this.firstloading == 0) {
						this.loading = false;
					}
					this.firstloading = 1;
					if (e == 2) {
						this.goods_list = [];
					}
					this.goods_list = this.goods_list.concat(res.data.data.goods_list);
					if (res.data.data.goods_list.length < 10) {
						this.isDetail = 2;
					}
				}
			});
		},
		// 一级菜单
		hotelmenu() {
			let _this = this;
			this.request({
				url: '/v1/entry/storeCategory',
				method: 'get',
				data: {
					store_id: this.goodId
				},
				success: function(res) {
					let { category_list } = res.data.data;
					category_list.forEach((item, idx) => {
						item.text = item.gc_name;
						item.value = idx;
					});
					let array = [{ gc_id: '', gc_name: '全部' }];
					_this.classify = array.concat(category_list);
					if(category_list.length>5){
						_this.sHeight="200px";
					}
					_this.category_list =_this.group(category_list,10);
				}
			});
		},
		group(array, subGroupLength) {
			  let index = 0;
			  let newArray = [];
			  while(index < array.length) {
				  newArray.push(array.slice(index, index += subGroupLength));
			  }
			  return newArray;
		},
		onChange(event) {
			this.activeindex = event.detail.name;
			this.page = 1;
			if (event.detail.name == 1) {
				this.getcomment();
			} else if (event.detail.name == 0) {
				this.getshopdetail();
			}
		},
		// 获取酒店评价
		getcomment() {
			this.request({
				url: '/v1/store/feedbackList',
				method: 'POST',
				data: {
					page: this.page,
					page_size: 10,
					store_id: this.goodId
				},
				success: res => {
					this.feedback_list = res.data.data.feedback_list;
					if (res.data.data.feedback_list.length < 10) {
						this.isnexttwo = 2;
					}
					if (this.firstloading == 0) {
						this.loading = false;
					}
					this.firstloading = 1;
				}
			});
		},
		// 获取酒店信息
		gethoteil() {
			this.request({
				url: '/v1/store/info',
				method: 'get',
				data: {
					store_id: this.goodId
				},
				success: res => {
					
					if (this.firstloading == 0) {
						this.loading = false;
					}
					this.firstloading = 1;
					let { data } = res.data;
					this.store_slide = [];
					this.hoteldetail = data;
					this.feedback_count = data.feedback_count;
					this.hotelitle = data.store_name;
					data.store_slide.forEach(item => {
						if (item.indexOf('jpg') != -1) {
							this.store_slide.push(item);
						}
					});
					let src = this.pictureUrl + '/uploads/home/store/' + data.store_id + '/' + data.store_banner;
					if (this.store_slide.length == 0) {
						this.store_slide.push(src);
					}
					this.storeinformation = data;
					this.store_summary = data.store_summary;
					const regex = new RegExp('<img', 'gi');
					if (data.store_description) {
						data.store_description = data.store_description.replace(regex, `<img style="width: 100%;height: auto!important;display: block;text-align: center;"`);
						this.store_description = data.store_description;
					}
					this.has_collected = data.has_collected; // 是否收藏
				}
			});
		},

		changemenu(e) {},
		confirm(e) {
			this.tabIndex = 0;
			this.ishowpull = false;
			this.gc_id_1 = e.gc_id;
			this.getshopdetail(2);
		},
		upper(e) {},

		// 滚到底部
		lower(e) {
			if (this.isnexttwo == 1 && this.activeindex == 1) {
				this.page = this.page + 1;
				this.getcomment();
			} else if (this.isDetail == 1) {
				this.page = this.page + 1;
				this.getshopdetail();
			}
		},

		// 滚动时触发
		scroll(e) {
			if (e.detail.scrollTop > 400) {
				this.isTop = true;
			} else {
				//当距离小于500时显示回到顶部按钮
				this.isTop = false;
			}
			if (e.detail.scrollTop > 160) {
				this.iScrolltop = 2;
			} else {
				this.iScrolltop = 1;
			}
			this.old.scrollTop = e.detail.scrollTop;
		},

		// 返回上一页
		goback() {
			this.openHome();
			// uni.navigateBack()
		}
	}
};
</script>

<style scoped>
.swiperDian{
	width:46upx;
	height: 6upx;
	border-radius: 3px;
	background-color: #C7C7C7;
}
.activeDian{
	background-color: #D9332E;
}
.swiper2{
	width: 100%;
	height: auto;
}
.search{
	position: fixed;
	top: 65upx;
	left: 0;
	right: 0;
	z-index: 99;
}	
.home {
	position: absolute;
	width: 60upx;
	height: 60upx;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 0 3upx #333333;
	text-align: center;
	top: 100upx;
	z-index: 999;
	left: 0;
}
.home image {
	width: 40upx;
	height: 40upx;
	padding-top: 8rpx;
}
.van-tab--active {
	color: #d9332e !important;
}
.newadress {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #f5f5f5;
	padding: 15upx 0;
}
.changfecolor {
	color: green;
}
.scrollswiper {
	width: 100%;
	position: relative;
}
.titleFixed {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
	padding-top: 0;
}

.van-nav-bar {
	padding-top: 0 !important;
	/* background: #000000!important; */
	/* opacity: 0.2; */
	background: rgba(0, 0, 0, 0.2) !important;
}
.swiper {
	height: 380upx;
}
.swiper-item {
	display: block;
	height: 100% !important;
	line-height: 300upx;
	text-align: center;
}

.tip {
	display: flex;
	justify-content: space-between;
	padding: 36upx 32upx;
}
.giveList {
	padding: 10upx 12upx;
	display: flex;
	flex-wrap: wrap;
	overflow-x: scroll;
}
.giveItem {
	height: 150rpx;
	flex: 1;
	width: 14%;
	min-width: 14%;
	max-width: 14%;
	/* margin: 24rpx 0 25rpx 4%; */
	margin: 24upx 3%;
}
.active {
	color: #f76260;
}
.typeItem {
	width: 25%;
	display: inline-block;
	text-align: center;
}
.iconClass {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.hotlItem {
	padding: 22upx 30upx;
	border-bottom: 1px solid #eeeeee;
	display: flex;
	justify-content: space-between;
}
.bottomButton {
	width: 95%;
	left: 2.5%;
	position: fixed;
	bottom: 2.5%;
}

.titeTop {
	display: flex;
	align-items: center;
	position: absolute;
	top: 10upx;
	width: 100%;
}
.topleft {
	width: 60upx;
	height: 60upx;
	line-height: 60upx;
	margin: 0 5upx;
}

.topright {
}
.input-view {
	width: 100%;
	display: flex;
	height: 30px;
	border-radius: 15px;
	padding: 0 4%;
	flex-wrap: nowrap;
	margin: 7px 0;
	line-height: 30px;
	margin: 24upx auto;
	background: rgba(0, 0, 0, 1);
	opacity: 0.4;
}

.input-view .uni-icon {
	line-height: 30px !important;
}

.input-view .input {
	height: 30px;
	line-height: 30px;
	width: 94%;
	padding: 0 3%;
}
.activeColor {
	background: #fff !important;
}
.listType {
}
.changeimg {
	width: 100%;
	height: auto !important;
	display: block;
	text-align: center;
}
.spacedance {
	border: 1px solid #eee;
	flex: 1;
	width: 20%;
	text-align: center;
	min-width: 20%;
	max-width: 20%;
	margin: 6rpx 0 15rpx 2%;
	padding: 4upx 8upx;
	color: #666;
}
.fontcenter {
	text-align: center;
	color: #666;
}
/* 轮播切换图标字体红 */
</style>