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>
		<view class="top-search" @click="toSearch">
			<cus-search ref="searchRef"></cus-search>
		</view>
		<view class="type adfacjb">
			<view 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" @click="changeType(item,index)">
						<view class="cl_item" :class="{'active':typeIndex===index}">
							<text>{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="type-all" :class="{'active':typeIndex===''}" @click="handleAll">全部</view>
		</view>
		<view class="filter adfac" id="filter">
			<view class="filter-pre adfac" @click="showTime">
				<text>{{time}}</text>
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/1813f2d7-42e9-4c5d-9d05-924e30568f9e.png"></image>
			</view>
			<view class="filter-pre adfac" @click="timeShow=false;allShow=false;placeShow=!placeShow">
				<text>{{place}}</text>
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/1813f2d7-42e9-4c5d-9d05-924e30568f9e.png"></image>
			</view>
			<!-- <view 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>
			</view> -->
		</view>
		<view class="list" id="list" :class="{'adffcacjc':list.length===0}">
			<template v-if="list.length">
				<up-list @scrolltolower="scrolltolower" style="height: 100%;">
					<up-list-item v-for="(item, index) in list" :key="item.id">
						<NonprofitActivety :item="item"></NonprofitActivety>
					</up-list-item>
				</up-list>
			</template>
			<page-empty text="暂无活动" v-else></page-empty>
		</view>
		<view class="window" :style="{'top':top+'px','height':'calc(100vh - '+top+'px)'}" v-if="timeShow">
			<view class="window-time">
				<view class="top adfac">
					<view class="top-pre" :class="{'active':wtIndex===0}" @click="changeWindowTime(0,'全部时间')">全部时间</view>
					<view class="top-pre" :class="{'active':wtIndex===1}" @click="changeWindowTime(1,'一周内')">一周内</view>
					<view class="top-pre" :class="{'active':wtIndex===2}" @click="changeWindowTime(2,'一月内')">一月内</view>
					<view class="top-pre" :class="{'active':wtIndex===3}" @click="changeWindowTime(3,'本周末')">本周末</view>
				</view>
				<view class="middle">
					<ActivityCalendar ref="acRef"></ActivityCalendar>
				</view>
				<view class="bottom adfacjb">
					<view class="reset" @click="changeWindowTime(0,'全部时间')">重置</view>
					<view class="confirm" @click="timeConfirm">确定</view>
				</view>
			</view>
		</view>
		<view class="window" :style="{'top':top+'px','height':'calc(100vh - '+top+'px)'}" v-if="placeShow">
			<view class="window-place">
				<ActivityArea @confirm="areaConfirm"></ActivityArea>
			</view>
		</view>
		<view class="window nbg" :style="{'top':topAll+'px','height':'calc(100vh - '+topAll+'px)'}" v-if="allShow">
			<view class="window-bg" @click="handleAll"></view>
			<view class="window-all">
				<view class="pre" v-for="(t,i) in typeList2" :key="i" @click="changeType2(t,t.name,i)">{{t.name}}</view>
			</view>
		</view>
	</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 ActivityArea from '@/components/pages/activityArea/index.vue'
	import PageEmpty from '@/components/pageEmpty/index.vue'
	import { ref, onMounted, nextTick, getCurrentInstance } from 'vue'
	const { proxy } = getCurrentInstance()
	
	const typeIndex = ref('')
	const typeList = ref([])
	const typeList2 = ref([])
	const scrollLeft = ref(0)
	const time = ref('全部时间')
	const timeText = ref('全部时间')
	const place = ref('全部地区')
	const status = ref('活动状态')
	const queryParams = ref({
		page:1,
		limit:10,
		userId:'',
		activityName:'',
		beginTime:'',
		endTime:'',
		categoryId:'',
		districtId:''
	})
	const isOver = ref(false)
	const list = ref([])
	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 toSearch = () => {
		uni.navigateTo({
			url:'/pagesHome/searchActivity',
			events:{
				confirmSearch: data => {
					initList();
					proxy.$refs.searchRef.keyword = data;
					queryParams.value.activityName = data;
					getActivityList()
				}
			}
		})
	}
	const initList = () => {
		queryParams.value.page = 1;
		list.value = [];
		isOver.value = false;
	}
	const changeType = (item,index) => {
		initList();
		queryParams.value.categoryId = item.id;
		
		typeIndex.value = index;
		if(typeList.value.length>4){
			if(index<3) scrollLeft.value = 0
			else{
				scrollLeft.value = (index-2)*154/2;
			}
		}
		allShow.value = false;
		getActivityList()
	}
	const changeType2 = (item,name,index) => {
		initList();
		queryParams.value.categoryId = item.id;
		
		if(name==='全部'){
			typeIndex.value = '';
			scrollLeft.value = 0;
		}else{
			index--;
			typeIndex.value = index;
			if(typeList.value.length>4){
				if(index<3) scrollLeft.value = 0
				else{
					scrollLeft.value = (index-2)*154/2;
				}
			}
		}
		allShow.value = false;
		getActivityList()
	}
	
	const handleAll = () => {
		// typeIndex.value = '';
		// scrollLeft.value = 0;
		timeShow.value = false;
		placeShow.value = false;
		allShow.value = !allShow.value;
	}
	
	const changeWindowTime = (wtindex,text) => {
		wtIndex.value = wtindex;
		timeText.value = text;
		acRef.value.setStartEndDay(wtindex);
	}
	
	const showTime = () => {
		placeShow.value = false;
		allShow.value = false;
		timeShow.value = !timeShow.value;
		setTimeout(()=>{
			acRef.value.setStartEndDay(wtIndex.value);
		},100)
	}
	const timeConfirm = () => {
		time.value = timeText.value;
		timeShow.value = false;
		queryParams.value.beginTime = proxy.$refs.acRef.startDay;
		queryParams.value.endTime = proxy.$refs.acRef.endDay;
		initList()
		getActivityList()
	}
	
	const areaConfirm = (data) => {
		initList()
		place.value = data.city+'-'+data.area;
		queryParams.value.districtId = data.areaId;
		placeShow.value = false;
		getActivityList()
	}
	
	const scrolltolower = () => {
		if(isOver.value) return
		getActivityList()
	}
	
	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||0;
			}
		}).exec()
	}
	
	const getTypeList = () => {
		proxy.$api.get('/core/activity/category/list').then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			typeList.value = [...res.data.map(d=>({id:d.id,name:d.categoryName}))];
			typeList2.value = [{id:'',name:'全部'},...res.data.map(d=>({id:d.id,name:d.categoryName}))];
		})
	}
	
	const getActivityList = () => {
		proxy.$api.get('/core/activity/page',queryParams.value).then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			list.value = [...list.value,...res.data.list];
			queryParams.value.page++;
			if(res.data.list.length===0) isOver.value = true
		})
	}
	
	const getActivityTickets = () => {
		
	}
	
	onMounted(()=>{
		if(uni.getStorageSync('userInfo')){
			queryParams.value.userId = JSON.parse(uni.getStorageSync('userInfo'))?.id;
		}
		getTypeList()
		getActivityList()
		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;
				}
			}
		}
	
		&-all{
			padding: 26rpx 30rpx 103rpx;
			background: #FFFFFF;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			border-radius: 0 0 24rpx 24rpx;
			.pre{
				width: calc(100% / 3 - 12rpx);
				height: 59rpx;
				background: #F7F7F7;
				border-radius: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #252525;
				line-height: 59rpx;
				text-align: center;
				margin-top: 24rpx;
			}
		}
		
		&.nbg{
			background: none;
		}
		&-bg{
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .4);
			position: absolute;
			z-index: -1;
		}
	}
</style>