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;">
	                      <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;">
	                         <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="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
				},
				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.tabIndex = e;
			  if(this.tabIndex == 1) {
			  	this.istopclick = 0;
			  	this.goods_price = ''; 
			  	this.goods_commonid = '';
			  }else if(this.tabIndex == 2){
			  		this.istopclick = 1;
			  		this.goods_commonid = 'asc';
					this.goods_price = ''; 
					this.gc_id_2 = '';
			  }else if(this.tabIndex == 3){
			  		this.istopclick = 3;
			  		this.goods_price = 'asc';
					this.goods_commonid = '';
					this.gc_id_2 = '';
			  	}else if(this.tabIndex ==4) {
			  		this.istopclick = 0;
			  		this.goods_price = ''; 
			  		this.goods_commonid = '';
			  	}
			  this.getshopdetail();
			},
			changeisclick(e) {
				this.istopclick = e;
				this.gc_id_2 = '';
				if(e == 2) {
					this.goods_commonid = 'desc';
					this.goods_price = ''
					this.tabIndex = 2;
				}else if(e == 4) {
					this.goods_price = 'desc';
					this.goods_commonid = '';
					this.tabIndex = 3;
				}else if(e == 1) {
					this.tabIndex = 2;
					this.goods_commonid = 'asc';
					this.goods_price = ''
				}else if(e == 3) {
					this.tabIndex = 3;
					this.goods_commonid = '';
					this.goods_price = 'asc';
				}
				 this.getshopdetail();
			},
			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>