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
			style="height: 95vh;"
			class="floor-list"
			:scroll-top="scrollTop"
			scroll-y="true"
			@scroll="scroll"
			@scrolltoupper="upper"
			@scrolltolower="lower"
			:refresher-enabled="false"
		>
			<shopList :store_id="store_id" :productList="goods_list" />
			<view v-if="ispill" class="fontcenter">加载中...</view>
			<view v-if="!ispill" class="fontcenter">暂无更多商品</view>
		</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 {
			loadingpull: true,
			ispill: true,
			ishowpull: false,
			isTop: 0,
			isprice: 0,
			goods_list: [],
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			chosegoods_commonid: true,
			chosegoods_price: true,
			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;
			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);
			} 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) {
			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: 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) {},

		// 滚到底部
		lower(e) {
			if (this.ispill) {
				this.page = this.page + 1;
				this.getshopdetail();
			}
		},

		// 滚动时触发
		scroll(e) {
			if (e.detail.scrollTop > 250) {
				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;
}
.fontcenter{
	margin: 10rpx 0;
}
</style>