qzw_xcx/pages/index/hotelsearch.vue

<template>
	<view class="searchType" style="background: #fff;height: 100vh;">
		 <van-cell value-class="searchclass">
			 <template slot="title">
				<view class="input-view">
					<uni-icon type="search" size="22" color="#666666" />
					<input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" 
					@input="confirm" />
				</view> 
			 </template>
			 <template>
				 <view @click="search">搜索</view>
			 </template>
		 </van-cell>
		 
		 <view style="padding: 30upx 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 ><van-icon size="8px" name="arrow-up"    :class="istopclick==1 ? 'active' : ''"  /></view>
		 			           <view>
		 			 				<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>
									 <van-icon    :class="istopclick==3 ? 'active' : ''" size="8px" name="arrow-up" />
								 </view> 
								 <view>
									  <van-icon  :class="istopclick==4 ? 'active' : ''" size="8px" name="arrow-down" />
								 </view>
		 			            
		 			         </view>
		 			     </view>
		 			     
		 			 </view> -->
					<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  v-if="istopclick==0">
					    	<img style="width: 36upx;height: 36upx;vertical-align: middle;" src='../../static/sort.png' />
					    </view>
					    <view  v-if="istopclick==1">
					    	<img style="width: 36upx;height: 36upx;vertical-align: middle;" src='../../static/sort_down.png' />
					    </view>
					    <view  v-if="istopclick==2">
					    	<img style="width: 36upx;height: 36upx;vertical-align: middle;"  src='../../static/sort_up.png' />
					    </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 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>
		 			
		 </view>
		 <scroll-view  style="height: 95vh;" class="floor-list"
		 			 :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
		 			 :refresher-enabled="false">
		 <!-- 商品列表 -->
		      <shopList  :goodId="store_id" :productList="goods_list" />
		  </scroll-view>
		   <Gobacktop @getop="getop" v-if="isTop" />
		  <!-- <shopList :goodId="goodId" :productList="goods_list" /> -->
	 </view>
</template>

<script>
	import Gobacktop from '@/component/Gobacktop.vue'
	import uniIcon from '@/component/uni-icon/uni-icon.vue'
	import shopList from '@/component/shopList.vue'  // 商品列表
	export default {
		components: {
			uniIcon,
			shopList
		},
		onLoad(a) {
			this.goodId = a.store_id;
			//this.gethotelist();
		},
		data() {
			return {
				isTop: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				isDetail: 1,
				isprice: 0,
				page: 1,
				goodId:0,
				tabIndex: 1,
				istopclick: 0,
				goods_price:'',
				goods_commonid:"",
				chosegoods_commonid:　true,
				chosegoods_price: true,
				searchvalue:'',
				goods_list:[]
			}
		},
		methods: {
			getop() {
				this.scrollTop = this.old.scrollTop
                this.$nextTick(function(){
                    this.scrollTop=0;
                });
				this.isTop = false;
			},
			search() {
				this.goods_list = [];
				this.getshopdetail();
			},
			confirm(e) {
				this.searchvalue = e.detail.value;
				// /this.getshopdetail();
			},
			// 滚动到顶部
			upper(e) {
				
			},
			
			// 滚到底部
			lower(e) {
				
				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;
				}
				this.old.scrollTop = e.detail.scrollTop
			},
			// 获取商品详情
			getshopdetail(e) {
				if(this.searchvalue == '') {
						 this.$msg("关键字不能为空")
						 return;
				}
				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,
										 keyword: this.searchvalue
				                    },
								success: (res) => {
									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;
									}
								},
			    })
			},
			choseType(e) {
				if(this.searchvalue == '') {
					 this.$msg("关键字不能为空")
					 return;
				}
				  this.page = 1;
				  this.tabIndex = e;
				if(this.tabIndex == 1) {  // 服务
					this.istopclick = 0;
					this.isprice = 0;
					this.gc_id_2 = '';
					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.isprice = this.chosegoods_price?3:4;
						this.goods_price = this.chosegoods_price?'desc':'asc';
						this.goods_commonid = '';
						this.istopclick = 0;
						this.chosegoods_price = !this.chosegoods_price;
						this.getshopdetail(2);
					}
				
			},
		}
	}
</script>

<style>
.searchType .input-view {
		width: 80%;
		display: flex;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 15px;
		padding: 0 4%;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
		margin: 24upx 0 24upx 32upx;
	}
	
	.searchType .input-view .uni-icon {
		line-height: 30px !important;
	}
	
	.searchType .input-view .input {
		height: 30px;
		line-height: 30px;
		width: 94%;
		padding: 0 3%;
	}
	.van-cell__title {
		flex: 6!important;
	}
	.searchclass {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.active {
	    color: #F76260;
	}
	.typeItem {
	    width: 33%;
	    display: inline-block;
	    text-align: center;
	}  
	.iconClass {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: center;
	}
	
</style>