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>
	   				<view style="height: 100%;" class="swiper-item uni-bg-red">A</view>
	   			</swiper-item>
	   			<swiper-item>
	   				<view style="height: 100%;" class="swiper-item uni-bg-green">B</view>
	   			</swiper-item>
	   			<swiper-item>
	   				<view style="height: 100%;" class="swiper-item uni-bg-blue">C</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;">{{iScrolltop}}华南城市酒店</view>
		   <view>
			   <uniIcon type="star" size="22" color="#909399"></uniIcon>
		   </view>
	   </view>
	   
	   <view>
	   		   <van-tabs v-model="active" @click="onChange">
	   			 <van-tab  :name="0" title="服务">
				  <view>
				  	<view class="giveList">
				  		<view class="giveItem">
				  		  <image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553409398864&di=4a12763adccf229133fb85193b7cc08f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201703%2F19%2F20170319150032_MNwmn.jpeg" style="width:100%;height: 100upx;background: #909399"></image>
				  		  <p style="text-align: center;">商品销售</p>
				  		</view>
				  	 	
				  	</view>
				  
				  <view style="padding: 40upx 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;">
										<van-icon size="8px" name="arrow-up" />
										<van-icon  size="8px" name="arrow-down" />
									</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;">
					  					<van-icon size="8px" name="arrow-up" />
					  					<van-icon  size="8px" name="arrow-down" />
					  				</view>
					  			</view>
					  			
					  		</view>
					  		<view  @click="choseType(4)" class="typeItem">
					  		<van-dropdown-menu  active-color="#ee0a24" :overlay="false">
					  		    <van-dropdown-item
								title="分类"  id="item">
									   <view @click="confirm()" style="display: flex; flex-direction: wrap;">
										   <van-cell style="margin: 10upx 15upx;"  v-for="(item, index) in option1" :key="index"    title="包邮">{{item.text}}</van-cell>
									   </view>
									   
					  			 </van-dropdown-item>
					  		</van-dropdown-menu>
					  		</view>
					  	</view>
						
						
					 
				  </view>
				   
				 <!-- 商品列表 -->
				 <shopList />
				  
				  </view> 
				  
				 </van-tab>
	   			 <van-tab  :name="1" title="评价">
					 <!-- 评价列表 -->
					 <assess />
				 </van-tab>
	   			 <van-tab  :name="2" title="酒店信息">
					   
						 <view class="hoteletail">
							 <view class="hotlItem">酒店信息</view>
							 <view>
								 
							 </view>
						 </view>
						 
						 <view class="hotlItem">
							 <view>酒店地址</view>
							 <view>1111111</view>
						 </view>
						 
						 
						 <view class="hotlItem">
							 <view>酒店电话</view>
							 <view>55555555</view>
						 </view>
						
						
					 
				 </van-tab>
	   		   </van-tabs>
			   <view v-if="active == 3" class="bottomButton">
			   	  <button type="warn">您的入住意见反馈(反馈送圈币)</button>
			    </view>
	   </view>
	   </scroll-view>
	   
	</view>
</template>
  
<script>
	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'  // 评价列表
	export default {
		components: {
			uniIcon,
			uniNavBar,
			commoNar,
			assess,
			shopList
		},
		data() {
			return {
				tabIndex: 0,
				menu: [{
					name: '综合',
					id: '0'
				}, {
					name: '上新',
					id: '1'
				}, {
					name: '价格',
					id: '2'
				},
				{
					name:'分类',
					id:'3'
				}
				],
				option1: [
				      { text: '全部', value: 1 },
				      { text: '商品销售', value: 2 },
					  
				    ],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				active: 1,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				 option1: [
				      { text: '全部商品', value: 0 },
				      { text: '新款商品', value: 1 },
				      { text: '活动商品', value: 2 }
				    ],
				    value1: 0,
					iScrolltop: 1
			}
		},
		
		// 初次渲染进来关闭分享菜单栏
		onReady:function(){
			uni.hideShareMenu({
				  success(res) {
					  console.log(res)
					  console.log("kkkkkkkkkkkk")
				  },
				  fail(res){
					  console.log(res)
					  console.log("dddddd")
				  } 
			});
		},
		methods: {
			choseType(e) {
				console.log(e);
				this.tabIndex = e
			},
			onChange(event) {
					this.active = event.detail.name;
					console.log(this.active)
			},
			confirm() {
				this.selectComponent('#item').toggle();
			},
			upper(e) {
				console.log(e)
				console.log("顶部")
			},
			
			// 滚到底部
			lower(e) {
				console.log("底部")
			},
			
			// 滚动时触发
			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 {
		width: 18%;
		height: 120upx;
		margin: 10upx 20upx;
		/* 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: space-around;
	}
		
	.hotlItem {
		padding: 22upx 30upx;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
	}
	.bottomButton {
		width: 95%;
		left: 2.5%;
		position: absolute;
		bottom: 0;
	}
		
	.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>