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="box-border-box p-12-24 search-box">
					<view class="head-search align-items-center">
						<!-- <uni-icons class="s-icon" type="search" size="19"></uni-icons> -->
						<image class="wh-32" src="@/static/img/index/ss.png" mode=""></image>
						<input class="input" v-model="search" type="text" placeholder="搜一搜带你玩周边">
						<view class="head-search-buttom text-align-center fs-28 fw-500 fc-f" @click="searchFun()">搜索
						</view>
					</view>
				</view>
				<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':''"
					@touchmove.stop.prevent="stopScroll">
					<view class="mr-20 sift-item align-items-center flex-justify-center"
						:class="[{'bgc-F5F5F6':siftType},{'bgc-f':!siftType},{'siftClass':siftClassID === 1 && pop_type}]"
						@click="siftClick(1)">
						<view class="" :class="[{'fc-41ABF5':siftClassID === 1 && pop_type}]">
							{{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 && pop_type}]"
						@click="siftClick(2)">
						<view class="" :class="[{'fc-41ABF5':siftClassID === 2 && pop_type}]">
							{{siftSort}}
						</view>
					</view>
					<view class="pop-content" :style="[{'top': pop_top + 'px'}]"
						:class="pop_type?'pop-box-true':'pop-box-false'" @click="gbPopType">
						<view class="pop-select-box" @click.stop="noPopType">
							<view class="">
								1111111111111111111000000000000000000000000000000000000000000000000000000000
							</view>
							<view class="" v-for="(item,index) in 2">
								电风扇电风扇
							</view>
						</view>
					</view>
				</view>
				<view v-show="pop_type" :style="[{'top': pop_top + 'px'}]" class="pop-mask" @click="gbPopType"
					@touchmove.stop.prevent="stopScroll"></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,
				navListHeight: '', //头部模块高度
				siftDistance: '附近', //距离筛选
				siftSort: '距离优先', //排序筛选
				page: 1,
				total: 0,
				list: [],
				search: ''
			}
		},
		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: {
			noPopType() {},
			stopScroll(event) {
				// 阻止默认的滑动行为
				event.preventDefault();
			},
			siftClick(num) {
				this.scroll_top = this.scrollTopNum
				if (this.scrollTopNum < this.navListHeight) {
					this.$nextTick(function() {
						this.scroll_top = this.navListHeight
					});
				}
				setTimeout(() => {
					this.siftClassID = num
					this.pop_type = true
				}, 200)
			},
			gbPopType() {
				this.pop_type = !this.pop_type
			},
			scroll(e) {
				this.scrollTopNum = e.detail.scrollTop
				if (e.detail.scrollTop > (this.navListHeight - 1)) {
					this.siftType = true
				} else {
					this.siftType = false
				}
			},
			getHeight() {
				this.$nextTick(() => {
					let HThree = 0
					const navH = uni.createSelectorQuery().in(this);
					navH.select('.search-box').boundingClientRect(data => {
						if (data) {
							// data.height 就是元素的高度
							HThree = data.height
							console.log(HThree, '333333333');
						}
					}).exec();
					const query = uni.createSelectorQuery().in(this);
					query.select('.class-b').boundingClientRect(data => {
						if (data) {
							// data.height 就是元素的高度
							this.navListHeight = Number(data.height) + Number(HThree)
						}
					}).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');
				this.navList = {
					name: "全部",
					id: 0,
					img: require('@/static/img/buy/t-all.png')
				}
				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-true {
		// display: block;
		// transition: all .3s inherit;
		/* 定义过渡效果 */
		height: 500rpx;
		// height: 200rpx;
		// min-height: 200rpx;
		transition: height 0.3s ease-in-out;
		// transform: translateY(0);
	}

	.pop-box-false {
		// display: none;
		height: 0px;
		transition: height 0.3s ease-in-out;
		// transform: translateY(-250px);
	}

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

	.pop-select-box {
		position: relative;
		z-index: 15;
		background: #fff;
		border-radius: 0 0 20rpx 20rpx;
	}

	.pop-mask {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, .5);
		position: fixed;
		left: 0;
		z-index: 10;
		// 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;
		position: relative;
	}

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

	.head-search {
		width: 100%;
		position: relative;
	}

	.s-icon {
		position: absolute;
		left: 24rpx;
		top: 20rpx;
	}

	.input {
		width: 100%;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 200rpx;
		box-sizing: border-box;
		padding: 0 130rpx 0 68rpx;
		font-size: 32rpx;
	}

	.head-search-buttom {
		width: 120rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #2CE6F8 0%, #41ABF5 100%);
		border-radius: 200rpx;
		line-height: 60rpx;
		position: absolute;
		right: 6rpx;
		top: 6rpx;
	}

	.wh-32 {
		position: absolute;
		left: 24rpx;
		top: 20rpx;
		width: 32rpx;
		height: 32rpx;
	}
</style>