qzw_xcx/pages/index/hotel.vue

<template>
    <view>
         <view style="height: 50upx;"></view>
        <scroll-view  style="height: 95vh;" class="floor-list"
         :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
         refresher-enabled="true">
       <view class="scrollswiper">
                <swiper class="swiper" :indicator-dots="indicatorDots" :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>
               <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 class="topright">
               <uniIcon type="arrowright" size="22" color="#666666" />
           </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" @click="gocollect" v-if="has_collected == 1"  size="22" color= "#D9332E" /> 
           </view>
       </view>
       
	   <view v-if="store_summary" style="padding: 0 32upx;">{{store_summary}}</view>
       <view>
                  <van-tabs v-model="activeindex" @click="onChange">
                    <van-tab  :name="0" title="服务">
                  <view>
                      <view class="giveList">
                          <view class="giveItem" v-for="(item,index) in category_list" :key="index" @click="godetail(item)">
                            <image :src="item.pic" 
							style="width:100%;height: 100upx;background: #909399">
							</image>
                            <p style="text-align: center;">{{item.gc_name}}</p>
                          </view>
                           
                      </view>
                  
                  <view style="padding: 0upx 18upx;">
                      <view style="width: 95%;margin: 0 auto;">
                              <view @click="choseType(1)" :class="tabIndex==1 ? 'active' : ''" class="typeItem">
                                  综合
                              </view>
                              <view @click="choseType(2)"   class="typeItem">
                                <view class="iconClass">
                                    <view :class="tabIndex==2 ? 'active' : ''">上新</view>
                                    <view style="display: flex;flex-direction: column;margin-left: 10rpx;">
                                        <view @click.stop="changeisclick(1)"><van-icon size="8px" name="arrow-up"    :class="istopclick==1 ? 'active' : ''"  /></view>
                                        <view @click.stop="changeisclick(2)">
											<van-icon  :class="istopclick==2 ? 'active' : ''"  size="8px" name="arrow-down" />
										</view>
                                    </view>
                                </view>
                              </view>
                              <view @click="choseType(3)"  class="typeItem">
                                  <view class="iconClass">
                                      <view :class="tabIndex==3 ? 'active' : ''">价格</view>
                                      <view style="display: flex;flex-direction: column;margin-left: 10rpx;">
                                         <view @click.stop="changeisclick(3)" >
											 <van-icon    :class="istopclick==3 ? 'active' : ''" size="8px" name="arrow-up" />
										 </view> 
										 <view   @click.stop="changeisclick(4)">
											  <van-icon  :class="istopclick==4 ? 'active' : ''" size="8px" name="arrow-down" />
										 </view>
                                         
                                      </view>
                                  </view>
                                  
                              </view>
                              <view  @click.stop="choseType(4)" class="typeItem">
								    <view :class="tabIndex==4 ? 'active' : ''">分类</view>
                              </view>
                          </view>
                  </view>
				  <view v-if="tabIndex==4">
						  <view style="margin: 10upx 36upx;float: left;" 
						   v-for="(item, index) in category_list" :key="index"
							 @click.stop="confirm(item)" >
							 {{item.gc_name}}
						  </view> 
				  </view>
                 <!-- 商品列表 -->
                 <shopList :productList="goods_list" />
                  </view> 
                 </van-tab>
                    <van-tab  :name="1" title="评价">
                     <!-- 评价列表 -->
                     <assess :feedback_list="feedback_list" />
                 </van-tab>
                    <van-tab  :name="2" title="酒店信息">
						<view style="padding: 20upx 32upx 0upx 32upx;margin-bottom: 200upx;">
							  <rich-text :nodes="store_description"></rich-text> 
						</view>
                 </van-tab>
                  </van-tabs>
               <view v-if="activeindex == 2" class="bottomButton">
                     <button type="warn">您的入住意见反馈(反馈送圈币)</button>
                </view>
       </view>
       </scroll-view>
       <logionDialog @confirmDiaolog="confirmDiaolog"  @cancelDiaolog="cancelDiaolog" :showdialog="showdialog"/>
    </view>
</template>
  
<script>
	import {
		mapMutations,mapState
	} from 'vuex'
    import uniIcon from '@/component/uni-icon/uni-icon.vue'
	import logionDialog from '@/component/loginDialog.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'  // 评价列表
    export default {
        components: {
            uniIcon,
            uniNavBar,
            commoNar,
            assess,
            shopList,
			logionDialog
        },
        data() {
            return {
				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,
                menu: [{
                    name: '综合',
                    id: '0'
                }, {
                    name: '上新',
                    id: '1'
                }, {
                    name: '价格',
                    id: '2'
                },
                {
                    name:'分类',
                    id:'3'
                }
                ],
                background: ['color1', 'color2', 'color3'],
                indicatorDots: true,
                autoplay: true,
                interval: 2000,
                duration: 500,
                activeindex: 1,
                scrollTop: 0,
                old: {
                    scrollTop: 0
                },
                    value1: 0,
                    iScrolltop: 1
            }
        },
        
        // 初次渲染进来关闭分享菜单栏
        onReady:function(){
            // uni.hideShareMenu({
            //       success(res) {
            //           console.log(res)
            //           console.log("kkkkkkkkkkkk")
            //       },
            //       fail(res){
            //           console.log(res)
            //           console.log("dddddd")
            //       } 
            // });
        },
		onLoad(options){
			this.goodId = options.id;  // 商品和酒店Id
			this.getshopdetail(); // 获取商品详情
			this.hotelmenu();  // 一级菜单
			this.gethoteil();  // 获取酒店信息
			this.activeindex = 0;
		},
		computed:{
			...mapState([
			  'hasLogin',
			  'userInfo'
			]),
		},
        methods: {
			
			// 收藏
			gocollect() {
				if(this.hasLogin) {
				 this.request({
				 	url: '/v1/favorites/collect',
				 	method: 'post',
				 	data: {
				 		type:'store',
				 		fav_id: this.goodId
				 	},
				 	success: () => {
				 		this.gethoteil()
				 	}
				 })
				}else {
					this.showdialog = true;
				}
			},
			// 关闭弹窗
			cancelDiaolog() {
				this.showdialog = false;
			},
			// 确定
			confirmDiaolog() {
				this.showdialog = false;
			},
			choseType(e) {
			    this.tabIndex = e;
				this.goods_list = [];
				if(this.tabIndex == 1) {  // 服务
					this.istopclick = 0;
					this.gc_id_1 = '';
					this.goods_price = ''; 
					this.goods_commonid = '';
				}else if(this.tabIndex == 2){ //价格
				        this.chosegoods_price = true;
						console.log(this.chosegoods_commonid);
						this.istopclick = this.chosegoods_commonid?1:2;
						this.goods_price = ''; 
						this.goods_commonid = this.chosegoods_commonid?'asc':'desc';
						this.gc_id_1 = '';
						this.chosegoods_commonid = !this.chosegoods_commonid;
				}else if(this.tabIndex == 3){ // 上新
						this.chosegoods_commonid = true;
						console.log(this.chosegoods_price);
						this.istopclick = this.chosegoods_price?3:4;
						this.goods_price = this.chosegoods_price?'asc':'desc';
						this.goods_commonid = '';
						this.gc_id_1 = '';
						this.chosegoods_price = !this.chosegoods_price;
					}else if(this.tabIndex ==4) {  // 分类
						this.istopclick = 0;
						this.goods_price = ''; 
						this.goods_commonid = '';
						this.chosegoods_price = true;
						this.chosegoods_commonid = true;
					}
				this.getshopdetail();
			},
			// 点击切换上下
			changeisclick(e) {
				
			},
			godetail(item) {
				console.log(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() {
				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) => {
									
									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;
									 })
									 _this.category_list = category_list;
								},
				})
			},
		
           
            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;
						}
					}
				})
			},
			// 获取酒店信息
            gethoteil() {
				this.request({
					url:'/v1/store/info',
					method:'get',
					data: {
						store_id: this.goodId
					},
					success: (res) => {
						let { data } = res.data;
						this.hotelitle = data.store_name;
						this.store_slide = data.store_slide;
						this.store_summary = data.store_summary;
						this.store_description = data.store_description;
						this.has_collected = data.has_collected; // 是否收藏
					}
				})
			},
			
		
			changemenu(e) {
				
			},
            confirm(e) {
				this.tabIndex = 0;
				this.gc_id_1 = e.gc_id;
				this.getshopdetail();
            },
            upper(e) {
                console.log("顶部")
            },
            
            // 滚到底部
            lower(e) {
				console.log(this.activeindex)
				console.log(this.isDetail)
				if(this.activeindex == 1) {
					if(this.isnexttwo == 1) {
						this.page = this.page + 1;
					}
					this.getcomment();
				
				}else if(this.activeindex == 0 && this.isDetail == 1) {
					this.page = this.page + 1;
					this.getshopdetail();
				}
            },
            
            // 滚动时触发
            scroll(e) {
                this.old.scrollTop = e.detail.scrollTop
                if(e.detail.scrollTop > 160) {
                    this.iScrolltop = 2;
                }else {
                    this.iScrolltop = 1;
                }
            },
            
            // 返回上一页
            goback() {
                uni.navigateBack()
            },
            
        }
    }
</script>
  
<style>
    .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: 300upx;
    }
    .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: 120rpx;
        flex: 1;
        width: 20%;
        min-width: 20%;
        max-width: 20%;
        margin: 24rpx 0 25rpx 4%;
        /* background-color: #909399 */
    }
    .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 {
        
    }
        
    .topright {
        
    }
     .input-view {
        width: 85%;
        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);
        border-radius:15px;
        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: 50upx;
        z-index: 99;
    }
    .listType {
    }
</style>