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="fromData.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="fromData.category_id == 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) || fromData.distance != 0}]">
							{{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) || fromData.orderBy != 0}]">
							{{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="select-box p-24 box-border-box">
								<view class="distance-box" v-show="siftClassID === 1">
									<view class="mb-16 fs-30 fc-3 fw-500">
										我的附近
									</view>
									<view class="align-items-center flex-wrap-wrap">
										<view class="distance-label text-align-center mb-12"
											v-for="(item,index) in distance_label" :key="item.id"
											:class="fromData.distance===item.id?'siftClass':'bgc-F5F5F6'"
											@click="distanceClick(item)">
											{{item.name}}
										</view>
									</view>
								</view>
								<view class="sort-box" v-show="siftClassID === 2">
									<view class="sort-select-box text-align-left" v-for="(item,index) in sort_label"
										:key="item.id" @click="sortSelectClick(item)"
										:class="fromData.orderBy===item.id?'fc-41ABF5':''">
										{{item.name}}
									</view>
								</view>
							</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">
					<shopListVue ref="shopListRef"></shopListVue>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		groupList
	} from '@/api/groupOrder.js';
	import tools from "@/service/tools";
	import shopListVue from './group-mod/shop-list.vue';
	import {
		getGroup
	} from "@/api/category.js"
	export default {
		components: {
			shopListVue
		},
		data() {
			return {
				fromData: {
					operate_id: '',
					lat: '',
					lon: '',
					search: '',
					category_id: 0,
					distance: 0,
					orderBy: 0,
					page: 1
				},
				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: '默认排序', //排序筛选
				distance_label: [{
					name: '附近',
					id: 0
				}, {
					name: '500m',
					id: 0.5
				}, {
					name: '1km',
					id: 1
				}, {
					name: '3km',
					id: 3
				}, {
					name: '5km',
					id: 5
				}, {
					name: '10km',
					id: 10
				}],
				sort_label: [{
					name: '默认排序',
					id: 0
				}, {
					name: '距离优先',
					id: 1
				}, {
					name: '销量优先',
					id: 2
				}]
			}
		},
		onShow() {
			this.getGroup()
			this.fromData.page = 1;
			this.getList();
		},
		onLoad() {},
		mounted() {
			this.getHeight()
		},
		methods: {
			distanceClick(item) {
				// 距离筛选
				if (this.fromData.distance === item.id) {
					this.gbPopType()
				} else {
					this.fromData.distance = item.id
					this.siftDistance = item.name
					this.fromData.page = 1;
					this.getList()
					this.gbPopType()
				}
			},
			sortSelectClick(item) {
				// 排序筛选
				if (this.fromData.orderBy === item.id) {
					this.gbPopType()
				} else {
					this.fromData.orderBy = item.id
					this.siftSort = item.name
					this.fromData.page = 1;
					this.getList()
					this.gbPopType()
				}
			},
			selectType(num) {
				if (this.fromData.category_id === num) {
					return
				}
				this.fromData.category_id = num
				this.fromData.page = 1;
				this.getList()
			},
			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
					});
				}
				if (this.pop_type && this.siftClassID === num) {
					this.pop_type = false
				} else {
					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) {
				++this.fromData.page
				this.getList()
			},
			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]
					}
				})
			},
			searchFun() {
				if (this.fromData.search) {
					this.fromData.page = 1;
					this.getList()
				} else {
					tools.error("请输入搜索内容")
				}
			},
			getList() {
				this.fromData.operate_id = uni.getStorageSync('operate_id');
				this.fromData.lon = uni.getStorageSync('lon');
				this.fromData.lat = uni.getStorageSync('lat');
				console.log(this.fromData);
				this.$refs.shopListRef.groupShop(this.fromData)
			}
		},
	}
</script>

<style scoped lang="scss">
	.select-box {}

	.distance-box {}

	.sort-box {}

	.distance-label {
		width: 32%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 8rpx;
		margin-right: 1%;
	}

	.sort-select-box {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		padding: 15rpx 0;
	}

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