zh_order_food_xcx/pages-buy/group.vue

<template>
	<view class="group-box iPhone-bottom box-border-box flex-common-css">
		<Nav class="nav-b" title='团购专区'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-box" @scroll='scroll' @scrolltolower="scrolltolower"
			:scroll-top='scroll_top' :scroll-with-animation="false">
			<view class="">
				<view class="p-12-24 box-border-box class-b">
					<view class="display-flex p-24 box-border-box nav-list bgc-f b-rad-16 mb-12">
						<view class="text-align-center nav-item" v-for="(item,i) in navList" :key="i"
							@click="selectType(item.id)">
							<image class="nav-img" :src="item.img" mode="scaleToFill"></image>
							<view class="fs-24 w-96" :class="navId == item.id?'fw-600 fc-41ABF5':'fw-400'">{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="p-12-24 box-border-box sift-box align-items-center" :class="siftType?'bgc-f':''">
					<view class="mr-20 sift-item align-items-center flex-justify-center"
						:class="[{'bgc-F5F5F6':siftType},{'bgc-f':!siftType},{'siftClass':siftClassID === 1}]"
						@click="siftClick(1)">
						<view class="" :class="[{'fc-41ABF5':siftClassID === 1}]">
							{{siftDistance}}
						</view>
					</view>
					<view class="mr-12 sift-item align-items-center flex-justify-center"
						:class="[{'bgc-F5F5F6':siftType},{'bgc-f':!siftType},{'siftClass':siftClassID === 2}]"
						@click="siftClick(2)">
						<view class="" :class="[{'fc-41ABF5':siftClassID === 2}]">
							{{siftSort}}
						</view>
					</view>

				</view>
				<view class="pop-box" :style="[{'top': pop_top + 'px'}]" :class="[{'pop-box-z':pop_type}]">
					<view class="pop-content" :class="pop_type?'pop-box-true':'pop-box-false'">
						<view class="">
							1111111111111111111000000000000000000000000000000000000000000000000000000000
						</view>
					</view>
					<view v-show="pop_type" class="pop-mask" @click="pop_type = !pop_type"></view>
				</view>
				<view class="p-12-24 box-border-box">
					<view class="h-200" v-for="(item,index) in 10">
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		groupList
	} from '@/api/groupOrder.js';
	import tools from "@/service/tools";
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import {
		getGroup
	} from "@/api/category.js"
	export default {
		components: {
			EnBlank
		},
		data() {
			return {
				navId: 0,
				navList: [{
					name: "全部",
					id: 0,
					img: require('@/static/img/buy/t-all.png')
				}],
				siftType: false, // 粘性状态
				siftClassID: 0, // 粘性样式Id
				scrollTopNum: 0, //当前滚动条高度
				scroll_top: 0, //滚动条高度
				pop_top: 0, // pop距头部距离
				pop_type: false,
				pop_type_two: false,
				navListHeight: '', //头部模块高度
				siftDistance: '附近', //距离筛选
				siftSort: '距离优先', //排序筛选
				page: 1,
				total: 0,
				list: []
			}
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page += 1;
				this.getList();
			}
		},
		onShow() {
			this.getGroup()
			this.page = 1;
			this.list = [];
			this.getList();
		},
		onLoad() {},
		mounted() {
			this.getHeight()
		},
		methods: {
			siftClick(num) {
				this.scroll_top = this.scrollTopNum
				this.$nextTick(function() {
					this.scroll_top = this.navListHeight
				});
				setTimeout(() => {
					this.siftClassID = num
					this.pop_type = true
				}, 400)
			},
			scroll(e) {
				this.scrollTopNum = e.detail.scrollTop
				if (e.detail.scrollTop > (this.navListHeight - 1)) {
					this.siftType = true
				} else {
					this.siftType = false
				}
			},
			getHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.class-b').boundingClientRect(data => {
					if (data) {
						// data.height 就是元素的高度
						this.navListHeight = data.height
					}
				}).exec()
				let Hone = 0
				uni.getSystemInfo({
					success: (e) => {
						let statusBarH = e.statusBarHeight + 10
						let custom = 0;
						custom = wx.getMenuButtonBoundingClientRect()
						let customBarH = custom.height;
						Hone = statusBarH + customBarH;
					}
				})
				let HTwo = 0
				const navT = uni.createSelectorQuery().in(this);
				navT.select('.sift-box').boundingClientRect(data => {
					if (data) {
						// data.height 就是元素的高度
						HTwo = data.height
						console.log(HTwo, '222222222');
					}
				}).exec();
				setTimeout(() => {
					this.pop_top = Number(Hone) + Number(HTwo)
					console.log(this.pop_top, '-----------');
				}, 500)
			},
			scrolltolower(e) {
				console.log(e);
			},
			getGroup() {
				let operate_id = uni.getStorageSync('operate_id');
				let school_id = uni.getStorageSync('school_id');
				getGroup({
					operate_id: operate_id,
					school_id: school_id
				}).then((res) => {
					if (res.code === 1) {
						this.navList = [...this.navList, ...res.data]
					}
				})
			},
			getList() {
				let school_id = uni.getStorageSync('school_id');
				groupList({
					school_id: school_id,
					page: this.page
				}).then((res) => {
					if (res.code === 1) {
						this.list = [...this.list, ...res.data.items];
						this.total = res.data.total;
					}
				})
			},
			todet(item) {
				uni.navigateTo({
					url: '/pages-buy/group-det?id=' + item.id
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.pop-box {
		width: 100%;
		// height: 100vh;
		height: 84rpx;
		position: fixed;
		left: 0;
		top: 0;
		overflow: hidden;
		// z-index: -1;
		// transition: all 0.3s ease-in-out;
	}
	// .pop-box-z {
	// 	z-index: 2;
	// 	transition: all 0.3s ease-in-out;
	// }
	.pop-box-true {
		// display: block;
		// transition: all .3s inherit;
		/* 定义过渡效果 */
		transition: transform 0.3s ease-in-out;
		transform: translateY(0);
	}

	.pop-box-false {
		// display: none;
		transition: transform 0.3s ease-in-out;
		transform: translateY(-100%);
	}

	.pop-content {
		width: 100%;
		height: 500rpx;
		background: #fff;
		border-radius: 0 0 20rpx 20rpx;
		position: absolute;
		left: 0;
		// top: var(--pop_top)px;
		z-index: 10;
		// transition: all .3s inherit;
		/* 定义过渡效果 */
		/* 初始平移状态 */
	}

	.pop-mask {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		position: absolute;
		left: 0;
		// top: 0;
	}

	.siftClass {
		color: #41ABF5;
		border: 1rpx solid #41ABF5;
		background: #deeffb;
		box-sizing: border-box;
	}

	.h-200 {
		width: 100%;
		height: 200px;
		margin-bottom: 20px;
		background: rebeccapurple;
	}

	.scroll-view-box {
		overflow: auto;
	}

	.sift-box {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 200;
		overflow-x: scroll;
	}

	.sift-content-box {
		width: 100%;
		height: 300rpx;
		position: absolute;
		top: 74rpx;
		left: 0;
	}

	.sift-item {
		min-width: 150rpx;
		max-width: 280rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 8rpx;
		transition: all .5s ease;
	}

	.group-box {}

	.nav-list {
		overflow-x: scroll;
	}

	.nav-item {
		width: 96rpx;
		height: 126rpx;
		margin-right: 48rpx;
	}

	.nav-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 5px;
		margin: 0 auto 12rpx auto;
	}

	.w-96 {
		// width: 96rpx;
	}
</style>