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="titeTop"  :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>
						  <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">
													<!-- <van-icon size="8px" name="arrow-up"    :class="istopclick==1 ? 'active' : ''"  /> -->
													<img style="width: 36upx;height: 36upx;vertical-align: middle;" src='../../static/sort.png' />
												</view>
												<view  v-if="istopclick==1">
													<!-- <van-icon size="8px" name="arrow-up"    :class="istopclick==1 ? 'active' : ''"  /> -->
													<img style="width: 36upx;height: 36upx;vertical-align: middle;" src='../../static/sort_down.png' />
												</view>
												<view  v-if="istopclick==2">
													<!-- <van-icon  :class="istopclick==2 ? 'active' : ''"  size="8px" name="arrow-down" /> -->
													<img style="width: 36upx;height: 36upx;vertical-align: middle;"  src='../../static/sort_up.png' />
												</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">
													<img style="width: 36upx;height: 36upx;vertical-align: middle;" src='../../static/sort.png' />
												 </view>
												 <view  v-if="isprice==3">
													<img style="width: 36upx;height: 36upx;vertical-align: middle;" src='../../static/sort_down.png' />
												 </view>
												 <view  v-if="isprice==4">
													<img style="width: 36upx;height: 36upx;vertical-align: middle;"  src='../../static/sort_up.png' />
												 </view>
												 
											  </view>
										  </view>
									  </view>
									  <view  @click.stop="choseType(4)" class="typeItem">
											<view :class="ishowpull ? 'active' : ''">分类
												<img v-if="!ishowpull" style="width: 36upx;height: 36upx;" src='../../static/sortb.png' />
												<img v-if="ishowpull" style="width: 36upx;height: 36upx;" src='../../static/sortb_up.png' />
											</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">
								  <view>联系酒店</view>
								  <view v-if="storeinformation.store_phone!='' ">{{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" 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: [{gc_id_1:'',gc_name:'全部'}], // 一级菜单栏
                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,	
            }
        },
        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.isfx){
				this.isfx=true;
			}else{
				this.isfx=false;
			}
			this.goodId = options.id;  // 商品和酒店Id
			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: {
			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) {
				// uni.showLoading({
				//     title: '加载中'
				// });
				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);
									 _this.category_list = category_list.splice(0,10);
								},
				})
			},
		
            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');
						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() {
                uni.navigateBack()
            },
            
        }
    }
</script>
  
<style scoped>
	.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;
    }
    .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;
        /* justify-content: space-between; */
        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;
        position: fixed;
        background-color: #fff;
        top: 65upx;
		left: 0;
        z-index: 99;
    }
    .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>