no message

pages-buy/group.vue

@@ -4,6 +4,15 @@
 		<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"
@@ -14,31 +23,36 @@
 						</view>
 					</view>
 				</view>
-				<view class="p-12-24 box-border-box sift-box align-items-center" :class="siftType?'bgc-f':''">
+				<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}]"
+						:class="[{'bgc-F5F5F6':siftType},{'bgc-f':!siftType},{'siftClass':siftClassID === 1 && pop_type}]"
 						@click="siftClick(1)">
-						<view class="" :class="[{'fc-41ABF5':siftClassID === 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}]"
+						:class="[{'bgc-F5F5F6':siftType},{'bgc-f':!siftType},{'siftClass':siftClassID === 2 && pop_type}]"
 						@click="siftClick(2)">
-						<view class="" :class="[{'fc-41ABF5':siftClassID === 2}]">
+						<view class="" :class="[{'fc-41ABF5':siftClassID === 2 && pop_type}]">
 							{{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 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 v-show="pop_type" class="pop-mask" @click="pop_type = !pop_type"></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>
@@ -75,13 +89,13 @@
 				scroll_top: 0, //滚动条高度
 				pop_top: 0, // pop距头部距离
 				pop_type: false,
-				pop_type_two: false,
 				navListHeight: '', //头部模块高度
 				siftDistance: '附近', //距离筛选
 				siftSort: '距离优先', //排序筛选
 				page: 1,
 				total: 0,
-				list: []
+				list: [],
+				search: ''
 			}
 		},
 		onReachBottom() {
@@ -101,15 +115,25 @@
 			this.getHeight()
 		},
 		methods: {
+			noPopType() {},
+			stopScroll(event) {
+				// 阻止默认的滑动行为
+				event.preventDefault();
+			},
 			siftClick(num) {
 				this.scroll_top = this.scrollTopNum
-				this.$nextTick(function() {
-					this.scroll_top = this.navListHeight
-				});
+				if (this.scrollTopNum < this.navListHeight) {
+					this.$nextTick(function() {
+						this.scroll_top = this.navListHeight
+					});
+				}
 				setTimeout(() => {
 					this.siftClassID = num
 					this.pop_type = true
-				}, 400)
+				}, 200)
+			},
+			gbPopType() {
+				this.pop_type = !this.pop_type
 			},
 			scroll(e) {
 				this.scrollTopNum = e.detail.scrollTop
@@ -120,36 +144,47 @@
 				}
 			},
 			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;
-					}
+				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)
 				})
-				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);
@@ -157,12 +192,17 @@
 			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]
+						this.navList = [this.navList, ...res.data]
 					}
 				})
 			},
@@ -188,55 +228,52 @@
 </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);
+		height: 500rpx;
+		// height: 200rpx;
+		// min-height: 200rpx;
+		transition: height 0.3s ease-in-out;
+		// transform: translateY(0);
 	}
 
 	.pop-box-false {
 		// display: none;
-		transition: transform 0.3s ease-in-out;
-		transform: translateY(-100%);
+		height: 0px;
+		transition: height 0.3s ease-in-out;
+		// transform: translateY(-250px);
 	}
 
 	.pop-content {
 		width: 100%;
-		height: 500rpx;
-		background: #fff;
-		border-radius: 0 0 20rpx 20rpx;
-		position: absolute;
+		// 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: 100%;
+		height: 100vh;
 		background: rgba(0, 0, 0, .5);
-		position: absolute;
+		position: fixed;
 		left: 0;
+		z-index: 10;
 		// top: 0;
 	}
 
@@ -256,6 +293,7 @@
 
 	.scroll-view-box {
 		overflow: auto;
+		position: relative;
 	}
 
 	.sift-box {
@@ -302,7 +340,43 @@
 		margin: 0 auto 12rpx auto;
 	}
 
-	.w-96 {
-		// width: 96rpx;
+	.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>

pages-buy/ticket.vue

@@ -211,38 +211,6 @@
 				z-index: -1;
 			}
 
-			.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;
-				}
-			}
-
 			.nav-list {
 				overflow-x: scroll;
 				margin: 0 0 36rpx 0;