SxsnWechat/pagesHome/allActivity.vue

<template>
	<view class="common_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title="全部活动" bgColor="transparent"></cus-header>
		<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/54b75bc8-d926-449b-95a5-1126f700b481.png" class="top_bg_img" mode="widthFix"></image>
		<div class="top-search">
			<cus-search @handleSearch="search"></cus-search>
		</div>
		<div class="type adfacjb">
			<div class="type-list">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft">
					<view class="scroll-view-item_H" :id="'svih_'+index" v-for="(item,index) in typeList" :key="index" @tap="changeType(item,index)">
						<view class="cl_item" :class="{'active':typeIndex===index}">
							<text>{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</div>
			<div class="type-all" :class="{'active':typeIndex===''}" @tap="handleAll">全部</div>
		</div>
		<div class="filter adfac" id="filter">
			<div class="filter-pre adfac" @tap="showTime">
				<text>{{time}}</text>
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/1813f2d7-42e9-4c5d-9d05-924e30568f9e.png"></image>
			</div>
			<div class="filter-pre adfac" @tap="placeShow=true">
				<text>{{place}}</text>
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/1813f2d7-42e9-4c5d-9d05-924e30568f9e.png"></image>
			</div>
			<div class="filter-pre adfac">
				<text>{{status}}</text>
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/1813f2d7-42e9-4c5d-9d05-924e30568f9e.png"></image>
			</div>
		</div>
		<div class="list" id="list">
			<up-list @scrolltolower="scrolltolower" style="height: 100%;">
				<up-list-item v-for="(item, index) in list" :key="index">
					<NonprofitActivety></NonprofitActivety>
				</up-list-item>
			</up-list>
		</div>
		<div class="window" :style="{'top':top+'px','height':'calc(100vh - '+top+'px)'}" v-if="timeShow">
			<div class="window-time">
				<div class="top adfac">
					<div class="top-pre" :class="{'active':wtIndex===0}" @tap="changeWindowTime(0,'全部时间')">全部时间</div>
					<div class="top-pre" :class="{'active':wtIndex===1}" @tap="changeWindowTime(1,'一周内')">一周内</div>
					<div class="top-pre" :class="{'active':wtIndex===2}" @tap="changeWindowTime(2,'一月内')">一月内</div>
					<div class="top-pre" :class="{'active':wtIndex===3}" @tap="changeWindowTime(3,'本周末')">本周末</div>
				</div>
				<div class="middle">
					<ActivityCalendar ref="acRef"></ActivityCalendar>
				</div>
				<div class="bottom adfacjb">
					<div class="reset" @tap="changeWindowTime(0,'全部时间')">重置</div>
					<div class="confirm" @tap="timeConfirm">确定</div>
				</div>
			</div>
		</div>
		<div class="window" :style="{'top':top+'px','height':'calc(100vh - '+top+'px)'}" v-if="placeShow">
			<div class="window-place"></div>
		</div>
		<div class="window" :style="{'top':topAll+'px','height':'calc(100vh - '+topAll+'px)'}" v-if="allShow">
			<div class="window-all"></div>
		</div>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import CusSearch from '@/components/CusSearch/index.vue'
	import NonprofitActivety from '@/components/pages/nonprofitActivety/index.vue'
	import ActivityCalendar from '@/components/pages/activityCalendar/index.vue'
	import { ref, onMounted, nextTick } from 'vue'
	
	const typeIndex = ref('')
	const typeList = ref([
		{id:1,name:'儿童关爱'},
		{id:2,name:'老人关爱'},
		{id:3,name:'社区发展'},
		{id:4,name:'社会服务'},
		{id:5,name:'健康行动'},
		{id:6,name:'减肥运动'}
	])
	const scrollLeft = ref(0)
	const time = ref('全部时间')
	const timeText = ref('')
	const place = ref('全部地区')
	const status = ref('活动状态')
	const queryParams = ref({})
	const list = ref([1,1,1,1])
	const top = ref(0)
	const topAll = ref(0)
	const timeShow = ref(false)
	const placeShow = ref(false)
	const allShow = ref(false)
	const wtIndex = ref(0)
	const acRef = ref(null)
	
	const search = (keyword) => {
		console.log(keyword);
	}
	
	const changeType = (item,index) => {
		typeIndex.value = index;
		if(typeList.value.length>4){
			if(index<3) scrollLeft.value = 0
			else{
				scrollLeft.value = (index-2)*154/2;
			}
		}
	}
	
	const handleAll = () => {
		typeIndex.value = '';
		scrollLeft.value = 0;
		allShow.value = true;
	}
	
	const changeWindowTime = (wtindex,text) => {
		wtIndex.value = wtindex;
		timeText.value = text;
		acRef.value.setStartEndDay(wtindex);
	}
	
	const showTime = () => {
		timeShow.value = true;
		setTimeout(()=>{
			acRef.value.setStartEndDay(wtIndex.value);
		},100)
	}
	const timeConfirm = () => {
		time.value = timeText.value;
		timeShow.value = false;
	}
	
	const scrolltolower = () => {
		console.log(1);
	}
	
	const getTop = () => {
		let query = uni.createSelectorQuery();
		query.select('#list').boundingClientRect(rect=>{
			if(rect){
				top.value = (rect?.top+20)||0;//20是上间距
			}
		}).exec()
		query.select('#filter').boundingClientRect(rect=>{
			if(rect){
				topAll.value = (rect?.top-13)||0;
			}
		}).exec()
	}
	onMounted(()=>{
		nextTick(()=>{
			getTop();
		})
	})
</script>

<style scoped lang="scss">
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	
	.scroll-view-item_H {
		display: inline-block;
		height: 50rpx;
		margin-left: 42rpx;
		&:first-child{
			margin-left: 0;
		}
	}
	
	.common_page{
		.top-search{
			position: relative;
			margin-top: 20rpx;
		}
		
		.type{
			margin-top: 40rpx;
			width: 100%;
			height: 50rpx;
			position: relative;
			&-list{
				width: calc(100% - 72rpx);
				padding-right: 40rpx;
				box-sizing: border-box;
				.cl_item{
					width: 112rpx;
					line-height: 50rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #676775;
					&.active{
						font-weight: bold;
						font-size: 36rpx;
						color: #252525;
						line-height: 50rpx;
					}
				}
			}
			&-all{
				width: 72rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #676775;
				line-height: 40rpx;
				position: relative;
				&.active{
					font-weight: bold;
					font-size: 36rpx;
					color: #252525;
					line-height: 50rpx;
					&::after{
						content: '';
						width: 40rpx;
						height: 8rpx;
						background: linear-gradient( 270deg, #B7F358 0%, #00AE57 100%);
						border-radius: 4rpx;
						position: absolute;
						left: 50%;
						margin-left: -20rpx;
						bottom: -10rpx;
					}
				}
			}
		}
	
		.filter{
			margin-top: 33rpx;
			position: relative;
			&-pre{
				width: 186rpx;
				text{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #252525;
					line-height: 33rpx;
				}
				image{
					width: 24rpx;
					height: 24rpx;
					margin-left: 6rpx;
				}
			}
		}
	
		.list{
			flex: 1;
			padding: 20rpx 0;
			box-sizing: border-box;
			overflow-y: auto;
		}
	}
	
	.window{
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, .4);
		
		&-time{
			background: #FFFFFF;
			border-radius: 0 0 24rpx 24rpx;
			.top{
				padding: 32rpx 30rpx;
				&-pre{
					padding: 10rpx 24rpx;
					background: #F5F6F8;
					border-radius: 27rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #252525;
					line-height: 33rpx;
					margin-left: 20rpx;
					&:first-child{
						margin-left: 0;
					}
					&.active{
						background: #B7F358;
						font-weight: bold;
					}
				}
			}
			.middle{
				height: 594rpx;
				background: #F7F7F7;
			}
			.bottom{
				padding: 24rpx 24rpx 36rpx;
				.reset{
					width: 222rpx;
					height: 80rpx;
					border-radius: 45rpx;
					border: 1rpx solid #252525;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #252525;
					line-height: 80rpx;
					text-align: center;
					letter-spacing: 2rpx;
				}
				.confirm{
					width: calc(100% - 252rpx);
					height: 80rpx;
					background: #B7F358;
					border-radius: 45rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #252525;
					line-height: 80rpx;
					text-align: center;
				}
			}
		}
	}
</style>