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>
		 			
		 </view>
		  <shopList :productList="goods_list" />
	 </view>
</template>

<script>
	import uniIcon from '@/component/uni-icon/uni-icon.vue'
	import shopList from '@/component/shopList.vue'  // 商品列表
	export default {
		components: {
			uniIcon,
			shopList
		},
		onLoad(a) {
			console.log(a);
			this.goodId = a.store_id;
			//this.gethotelist();
		},
		data() {
			return {
				page: 1,
				goodId:0,
				tabIndex: 1,
				istopclick: 0,
				goods_price:'',
				goods_commonid:"",
				chosegoods_commonid:　true,
				chosegoods_price: true,
				searchvalue:'',
				goods_list:[]
			}
		},
		methods: {
			search() {
				this.getshopdetail();
			},
			confirm(e) {
				this.searchvalue = e.detail.value;
				// /this.getshopdetail();
			},
			// 获取商品详情
			getshopdetail() {
				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) => {
									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) {
			    this.tabIndex = e;
				if(this.searchvalue == '') {
					return;
				}
				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?'desc':'asc';
						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();
			},
		}
	}
</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>