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://oss.familydaf.cn/sxsnfile/20251218/c41452a8b9ae40629c6505b0c4fdcf64.png" class="top_bg_img" mode="widthFix"></image>
		<view class="top-search">
			<cus-search ref="searchRef" @handleSearch="doSearch"></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://oss.familydaf.cn/sxsnfile/20251218/5023dfb59c414a09808d86d5771e6c2c.png"></image>
			</view>
			<view class="filter-pre adfac" @click="showPlace">
				<text>{{place}}</text>
				<image src="https://oss.familydaf.cn/sxsnfile/20251218/5023dfb59c414a09808d86d5771e6c2c.png"></image>
			</view>
			<view class="filter-pre adfac" @click="showStatus">
				<text>{{status}}</text>
				<image src="https://oss.familydaf.cn/sxsnfile/20251218/5023dfb59c414a09808d86d5771e6c2c.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" :index="index"></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" @reset="areaReset"></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="wabox">
					<view class="pre" v-for="(t,i) in typeList2" :key="i" @click="changeType2(t,t.name,i)">{{t.name}}</view>
				</view>
			</view>
		</view>
		<view class="window nbg" :style="{'top':topAll+'px','height':'calc(100vh - '+topAll+'px)'}" v-if="statusShow">
			<view class="window-bg" @click="statusShow=false"></view>
			<view class="window-status">
				<view
					class="status-option"
					:class="{'active': statusValue === item.value}"
					v-for="item in statusOptions"
					:key="item.value || 'all'"
					@click="changeStatus(item)"
				>{{item.name}}</view>
			</view>
		</view>
		<login-register></login-register>
	</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, watch } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const { proxy } = getCurrentInstance()

	const loadedByKeyword = ref(false)

	onLoad(options => {
		if (options?.keyword) {
			loadedByKeyword.value = true
			const kw = decodeURIComponent(options.keyword)
			queryParams.value.activityName = kw
			nextTick(() => { if(proxy.$refs.searchRef) proxy.$refs.searchRef.keyword = kw })
			getActivityList()
		}
	})
	import { useUserStore } from '@/common/stores/user';
	const userStore = useUserStore();
	
	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 statusValue = ref('')
	const statusOptions = [
		{ name: '全部', value: '' },
		{ name: '报名中', value: 1 },
		{ name: '报名已截止', value: 2 },
		{ name: '已结束', value: 3 }
	]
	const queryParams = ref({
		page:1,
		limit:10,
		userId:'',
		activityName:'',
		beginTime:'',
		endTime:'',
		categoryId:'',
		districtId:'',
		activeState:''
	})
	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 statusShow = ref(false)
	const wtIndex = ref(0)
	const acRef = ref(null)
	
	watch(()=>userStore.token,(newVal,oldVal)=>{
		if(oldVal!=newVal&&newVal){
			setTimeout(()=>{
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
			},200)
			nextTick(()=>{
				queryParams.value.userId = JSON.parse(uni.getStorageSync('userInfo'))?.id;
				getTypeList()
				initList();
				getActivityList()
				nextTick(()=>{
					getTop();
				})
			})
		}
	})
	
	const doSearch = (keyword) => {
		if (!keyword) return
		initList()
		queryParams.value.activityName = keyword
		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;
		statusShow.value = false;
		allShow.value = !allShow.value;
	}

	const showPlace = () => {
		timeShow.value = false
		allShow.value = false
		statusShow.value = false
		placeShow.value = !placeShow.value
	}

	const showStatus = () => {
		timeShow.value = false
		placeShow.value = false
		allShow.value = false
		statusShow.value = !statusShow.value
	}

	const changeStatus = (item) => {
		status.value = item.name
		statusValue.value = item.value
		queryParams.value.activeState = item.value
		statusShow.value = false
		initList()
		getActivityList()
	}
	
	const changeWindowTime = (wtindex,text) => {
		wtIndex.value = wtindex;
		timeText.value = text;
		acRef.value.setStartEndDay(wtindex);
	}
	
	const showTime = () => {
		placeShow.value = false;
		allShow.value = false;
		statusShow.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 areaReset = () => {
		initList()
		place.value = '全部地区'
		queryParams.value.districtId = ''
		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];
			list.value.forEach(a=>{
				a.signupEndTime = a.signupEndTime?new Date(a.signupEndTime).Format('yyyy.MM.dd hh:mm'):''
			})
			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()
		if (!loadedByKeyword.value) 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;
			border-radius: 0 0 24rpx 24rpx;
			.wabox{
				margin-left: -18rpx;
				overflow: hidden;
			}
			.pre{
				width: calc(100% / 3 - 18rpx);
				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;
				margin-left: 18rpx;
				float: left;
			}
			}
		&-status{
			padding: 26rpx 30rpx 40rpx;
			background: #FFFFFF;
			border-radius: 0 0 24rpx 24rpx;
			.status-option{
				display: inline-block;
				padding: 10rpx 24rpx;
				margin: 0 18rpx 18rpx 0;
				background: #F7F7F7;
				border-radius: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-size: 24rpx;
				color: #252525;
				line-height: 33rpx;
				&.active{
					background: #B7F358;
					font-weight: bold;
				}
			}
		}
		&.nbg{
			background: none;
		}
		&-bg{
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .4);
			position: absolute;
			z-index: -1;
		}
	}
</style>