qzw_xcx/pages/index/hoteldetail.vue

<template>
	<view>
		<scroll-view  style="height: 100vh;" class="floor-list"
		 :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
		 refresher-enabled="true">
	  <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;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 style="padding: 10upx  12upx;display: flex;flex-wrap: wrap;" v-if="tabIndex==4">
			  <view style=" flex: 1;width: 20%;min-width: 20%;max-width: 20%;margin: 24rpx 0 25rpx 4%;" 
			   v-for="(item, index) in category_list" :key="index"
				 @click.stop="confirm(item)" >
				 {{item.gc_name}}
			  </view> 
		  </view>
		  <!-- 商品列表 -->
		  <shopList :productList="goods_list" />
		   </scroll-view>
		  </view>
		  
</template>

<script>
    import shopList from '@/component/shopList.vue'  // 商品列表	
	export default {
		components: {
		    shopList
		},
		data() {
			return {
				goods_list:[],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				chosegoods_commonid:　true,
				chosegoods_price: true,
				ispull: false,
				istopclick: 0,
				tabIndex: 	1,
				title:'',
				store_id:'',
				category_list:[],
				page: 1,
				page_size: 10,
				gc_id_1:'',//	一级分类id
				gc_id_2:'',//	二级分类id
				goods_commonid:'',//	上新排序 desc-降序 asc-尚需
				goods_price	:'',//	价格排序 desc-降序 asc-尚需
				praise	:'',//	好评率排序 desc-降序 asc-尚需
			}
		},
		onLoad(options){
			console.log(options)
			this.title = options.gc_name;
			this.gc_id_1 = options.id;
			this.store_id = options.store_id;
			uni.setNavigationBarTitle({
			    title: options.gc_name
			});
			this.getshopdetail();
			this.hotelsecondmenu(); // 二级菜单
		},
		methods: {
			choseType(e) {
		      this.page = 1;
			  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?'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();
			},
			
			// 点击图标上下筛选切换
			changeisclick(e) {
				
			},
			confirm(e) {
				console.log(e);
				this.tabIndex = 0;
				console.log(this.tabIndex);
				this.gc_id_2 = e.gc_id;
				this.getshopdetail();
			},
			// 获取商品详情
			getshopdetail() {
				let _this = this;
				this.request({
				                url:"/v2/entry/storeGoods",
				                method:'get',
				                data: {
				                         store_id: _this.store_id,
										 page: _this.page,
										 goods_commonid: _this.goods_commonid, // 上新排序
										 goods_price: _this.goods_price,
										 gc_id_1: _this.gc_id_1,
										 gc_id_2: _this.gc_id_2
				                    },
								success: function(res) {
									if(res.data.data.goods_list.length>10) {
										_this.ispill = true;
									}else {
										_this.ispill = false;
										
									}
									_this.goods_list = res.data.data.goods_list;
								},
			    })
			},
			// 二级菜单
			hotelsecondmenu(){
				let that = this;
				this.request({
					url:'/v1/entry/storeCategory2',
					method:'POST',
					data: {
						store_id: this.store_id,
						gc_id: this.gc_id_1
					},
					success: function(res) {
						let { category_list } = res.data.data;
						that.category_list = category_list;
					}
				})
			},
			// 滚动到顶部
			upper(e) {
				console.log("顶部")
			},
			
			// 滚到底部
			lower(e) {
				
				if(this.ispull) {
					this.page = this.page + 1;
					this.gethotelist();
				}
			},
			
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			}
		}
	}
</script>

<style>
	.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;
	}
</style>