qzw_xcx/pages/index/hoteldetail.vue

<template>
	<view>
		
	  <view style='width: 100%;height: 70upx;'>
	      <view style="width: 95%;margin: 0 auto;height: 80upx;position: fixed;top:0;width: 100%;background-color: #fff;z-index:99;">
			 <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  @click.stop="choseType(4)" class="typeItem">
				<view :class="ishowpull ? 'active' : ''">分类
					<img v-if="!ishowpull" style="width: 36upx;height: 36upx;" src='../../static/sortb.png' />
					<img v-if="ishowpull" style="width: 36upx;height: 36upx;" src='../../static/sortb_up.png' />
				</view>
			 </view>
	      </view>
			
	  </view>
	     <view style="clear: both;
		    width: 100%;
			overflow: hidden;
			position: fixed;
			z-index: 99;
			background: #fff;">
			<view style="padding: 10upx  12upx;display: flex;flex-wrap: wrap;" v-if="ishowpull">
			  <view  class="spacedance"
			   v-for="(item, index) in category_list" :key="index"
				 @click.stop="confirm(item)" >
				 {{item.gc_name}}
			  </view> 
			</view>
			</view>
		  <scroll-view  class="floor-list"
		   :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
		   refresher-enabled="true">
		  <!-- 商品列表 -->
		  <shopList  :goodId="store_id" :productList="goods_list" />
		   </scroll-view>
		    <Gobacktop @getop="getop" v-if="isTop" />
		  </view>
		  
</template>

<script>
    import shopList from '@/component/shopList.vue'  // 商品列表	
	import Gobacktop from '@/component/Gobacktop.vue'
	export default {
		components: {
		    shopList,
			Gobacktop
		},
		data() {
			return {
				ishowpull: false,
				isTop: 0,
				isprice: 0,
				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){
			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: {
			getop() {
				this.scrollTop = this.old.scrollTop
                this.$nextTick(function(){
                    this.scrollTop=0;
                });
				this.isTop = false;
			},
			choseType(e) {
		      this.page = 1;
			  this.tabIndex = e;
			  //this.goods_list = [];
			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.gc_id_1 = '';
					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.gc_id_1 = '';
					this.chosegoods_price = !this.chosegoods_price;
					this.getshopdetail(2);
				}else if(this.tabIndex ==4) {  // 分类
					this.istopclick = 0;
					this.isprice = 0;
					this.goods_price = ''; 
					this.goods_commonid = '';
					this.chosegoods_price = true;
					this.chosegoods_commonid = true;
					this.ishowpull = !this.ishowpull;
				}
			
			},
			
			// 点击图标上下筛选切换
			changeisclick(e) {
				
			},
			confirm(e) {
				this.tabIndex = 0;
				this.gc_id_2 = e.gc_id;
				this.ishowpull = false;
				this.getshopdetail(2);
			},
			// 获取商品详情
			getshopdetail(e) {
				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;
									}
									if(e == 2) {
										_this.goods_list = [];
									}
									_this.goods_list = _this.goods_list.concat(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;
						let array = [{gc_id:'',gc_name:'全部'}];
						that.category_list = array.concat(category_list)
						
					}
				})
			},
			// 滚动到顶部
			upper(e) {
				console.log("顶部")
			},
			
			// 滚到底部
			lower(e) {
				if(this.ispill) {
					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
			}
		}
	}
</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: center;

	}
	.spacedance {
		border:1px solid #666;
		flex: 1;width: 20%;
		text-align: center;
		min-width: 20%;
		max-width: 20%;
		margin: 6rpx 0 25rpx 4%;
		padding:4upx 0;
	}
</style>