SxsnWechat/pages/home.vue

<template>
	<view class="tab_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<up-navbar title=" " bgColor="transparent">
            <template #left>
				<view class="u-nav-slot" slot="left" style="display: flex;background-color: transparent;">
					<image src="https://oss.familydaf.cn/sxsnfile/20260105/087c26c68a18424c83763a768a2fd81d.png" style="width: 370rpx;height: 40rpx;"></image>
				</view>
			</template>
		</up-navbar>
		<image src="https://oss.familydaf.cn/sxsnfile/20251218/ee40161fef4647f0b736d118e554dc2f.png" class="top_bg_img" mode="widthFix"></image>
		<scroll-view class="c-box adffc" scroll-y="true" @scroll="handleScroll" @scrolltolower="scrolltolower">
				<view class="c-box-search">
				<cus-search @handleSearch="toSearch"></cus-search>
			</view>
			<view class="c-box-lunbo">
				<up-swiper
					:list="bannarList"
					@change="e => current = e.current"
					@click="bannerClick"
					:autoplay="true"
					:interval="2000"
					:duration="200"
					:circular="true"
					imgMode="scaleToFill"
					height="326rpx"
				>
					<template #indicator>
						<view class="indicator adf">
							<view class="indicator__dot" v-for="(item, index) in bannarList" :key="index"
								:class="[index === current && 'indicator__dot--active']">
							</view>
						</view>
					</template>
				</up-swiper>
			</view>
			<view class="c-box-title adfacjb">
				<view class="c-box-title-left">公益活动</view>
				<view class="c-box-title-right adfac" @click="toTurnPage('/pagesHome/allActivity',false)">更多 <up-icon name="arrow-right" size="30rpx" style="margin-left: 10rpx;"></up-icon></view>
			</view>
			<view class="c-box-typegrid-anchor" v-if="typeGrid.length" :style="isTypeGridSticky ? { height: typeGridHeight + 'px' } : null">
			<view class="c-box-typegrid" :class="{ 'is-typegrid-sticky': isTypeGridSticky }" :style="isTypeGridSticky ? { top: mt + 'px', left: typeGridLeft + 'px', width: typeGridWidth + 'px' } : null">
				<swiper class="typegrid-swiper" :current="gridIndex" @change="e => gridIndex = e.detail.current" :duration="200" :circular="false" :disable-touch="false">
					<swiper-item v-for="(page, pi) in typeGridPages" :key="pi">
						<view class="typegrid-page">
							<view class="typegrid-item adffc" v-for="(item, idx) in page" :key="item.id" @click="changeType(item)">
								<view class="typegrid-circle">
									<image v-if="item.iconUrl" :src="item.iconUrl" mode="aspectFit"></image>
								</view>
								<view class="typegrid-name">{{item.name}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="typegrid-dots adf" v-if="typeGridPages.length > 1">
					<view class="typegrid-dot" v-for="(_, i) in typeGridPages" :key="i" :class="{'active': i === gridIndex}"></view>
				</view>
			</view>
			</view>
			<view class="c-box-list" v-if="activityList.length">
				<view class="activity-list-item" v-for="(item, index) in activityList" :key="item.id">
						<NonprofitActivety :item="item" :index="index"></NonprofitActivety>
				</view>
			</view>
			<view class="dataEmpty" v-else>
				<page-empty></page-empty>
			</view>
		</scroll-view>
		<login-register></login-register>
		<CusTabbar :tabbarIndex="0"></CusTabbar>
	</view>
</template>

<script setup name="">
	import CusTabbar from '@/components/CusTabbar/index.vue'
	import CusSearch from '@/components/CusSearch/index.vue'
	import NonprofitActivety from '@/components/pages/nonprofitActivety/index.vue'
	import PageEmpty from '@/components/pageEmpty/index.vue'
	import { ref, computed, getCurrentInstance, onMounted, nextTick, watch } from 'vue'
	const { proxy } = getCurrentInstance()
	import { useUserStore } from '@/common/stores/user';
	const userStore = useUserStore();
	import { onLoad } from '@dcloudio/uni-app'

	const parseUrlParams = (url) => {
		const result = {}
		const queryStr = url.indexOf('?') !== -1 ? url.split('?')[1] : (url.indexOf('#') !== -1 ? url.split('#')[1] : '')
		if (!queryStr) return result
		queryStr.split('&').forEach(pair => {
			const [key, val] = pair.split('=')
			if (key) result[decodeURIComponent(key)] = decodeURIComponent(val || '')
		})
		return result
	}

	onLoad((options) => {
		console.log('[onLoad] options:', JSON.stringify(options))
		console.log('[onLoad] options.q:', options.q, '| typeof:', typeof options.q)
		console.log('[onLoad] 条件判断 options && options.q:', !!(options && options.q))
		if (options && options.q) {
			console.log('[onLoad] 进入 if 分支')
			const url = decodeURIComponent(options.q)
			console.log('[onLoad] 解码后 url:', url)
			const params = parseUrlParams(url)
			console.log('[onLoad] 解析参数:', JSON.stringify(params))
			const channelId = params.channel
			console.log('[onLoad] channelId:', channelId)
			if (!channelId) {
				console.log('[onLoad] channelId 为空，退出')
				return
			}
			const token = uni.getStorageSync('token')
			console.log('[onLoad] token:', token ? '有值' : '无值（未登录）')
			if (!token) return
			proxy.$api.post(`/channel/bind?channelId=${channelId}`, {}).then(({ data: res }) => {
				console.log('[onLoad] bind 结果:', JSON.stringify(res))
				if (res.code === 0) {
					uni.showToast({ title: '渠道加入成功', icon: 'success', duration: 2000 })
				} else {
					console.error('渠道绑定失败:', res.msg)
				}
			})
		}
	})
	
	const bannarList = ref([])
	const bannarOrigin = ref([])
	const current = ref(0)
	const typeGrid = ref([])
	const gridIndex = ref(0)
	const isOver = ref(false)
	const activityList = ref([])
	const listRequestVersion = ref(0)
	const isTypeGridSticky = ref(false)
	const typeGridOffsetTop = ref(0)
	const typeGridHeight = ref(0)
	const typeGridLeft = ref(0)
	const typeGridWidth = ref(0)
	// 进入页面默认查全部（categoryId 为空），点图标网格才切到具体分类
	const queryParams = ref({
		page:1,
		limit:10,
		categoryId:'',
		userId:''
	})

	// 图标网格分页：每页 8 个（4 列 × 2 行），超过则分多页
	const TYPEGRID_PAGE_SIZE = 8
	const typeGridPages = computed(() => {
		const pages = []
		const list = typeGrid.value || []
		for (let i = 0; i < list.length; i += TYPEGRID_PAGE_SIZE) {
			pages.push(list.slice(i, i + TYPEGRID_PAGE_SIZE))
		}
		return pages
	})
	
	const toSearch = (keyword) => {
		if (!keyword) return
		uni.navigateTo({ url: '/pagesHome/allActivity?keyword=' + encodeURIComponent(keyword) })
	}

	const bannerClick = e => {
		let banner = bannarOrigin.value[e];
		if(banner&&banner?.redirect){
			if(banner?.redirectType==1){//微信公众号
				uni.navigateTo({
					url:'/pages/webView?src='+banner?.redirect
				})
			}else if(banner?.redirectType==2){//微信小程序
				uni.navigateToMiniProgram({
					appId:banner?.redirect
				})
			}
		}
	}
	
	const changeType = (item,index) => {
		queryParams.value.categoryId = item.id;
		initList();
		getActivityList();
	}
	
	const initList = () => {
		listRequestVersion.value++;
		queryParams.value.page = 1;
		isOver.value = false;
		activityList.value = [];
	}
	
	const toTurnPage = (url,needLogin) => {
		if(!needLogin){
			uni.navigateTo({ url })
		}
	}
	
	const getSwiperList = () => {
		proxy.$api.get('/core/advertisement/manage/page',{page:1,limit:-1}).then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			const list = res.data.list.filter(l=>l.enable==1);
			bannarOrigin.value = list;
			bannarList.value = list.map(l=>l.fileUrl);
		})
	}
	
	const getTypeList = () => {
		proxy.$api.get('/core/activity/category/list').then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			// icon 网格：取所有配过 icon 的分类；超过 8 个会自动分页
			typeGrid.value = res.data.filter(d=>d.iconUrl).map(d=>({id:d.id,name:d.categoryName,iconUrl:d.iconUrl}));
			gridIndex.value = 0
			measureTypeGrid()
		})
	}

	const measureTypeGrid = () => {
		nextTick(() => {
			const query = uni.createSelectorQuery().in(proxy)
			query.select('.c-box').boundingClientRect()
			query.select('.c-box-typegrid-anchor').boundingClientRect()
			query.exec((rects) => {
				const boxRect = rects?.[0]
				const gridRect = rects?.[1]
				if (!boxRect || !gridRect) return
				typeGridOffsetTop.value = gridRect.top - boxRect.top
				typeGridHeight.value = gridRect.height
				typeGridLeft.value = gridRect.left
				typeGridWidth.value = gridRect.width
			})
		})
	}

	const handleScroll = (event) => {
		if (!typeGridOffsetTop.value) return
		const scrollTop = event?.detail?.scrollTop || 0
		isTypeGridSticky.value = scrollTop >= typeGridOffsetTop.value
	}
	
	const scrolltolower = () => {
		if(isOver.value) return
		getActivityList()
	}
	
	const getActivityList = () => {
		const requestVersion = listRequestVersion.value
		const requestParams = { ...queryParams.value }
		proxy.$api.get('/core/activity/page',requestParams).then(({data:res})=>{
			if(requestVersion!==listRequestVersion.value) return
			if(res.code!==0) return proxy.$showToast(res.msg)
			// 只对本次新增项做格式化，避免 loadMore 时旧项（已格式化成 "yyyy.MM.dd hh:mm"）
			// 被再次 new Date() 解析为 Invalid Date 导致显示 NaN
			const newItems = res.data.list.map(a=>{
				let cc = calculateCountdown(a?.signupEndTime);
				a.endTimeText = cc===-1?a?.signupEndTime:(`还有${cc.days}天${cc.hours}小时${cc.minutes}分钟`)
				a.signupEndTime = a.signupEndTime?new Date(a.signupEndTime).Format('yyyy.MM.dd hh:mm'):''
				return a
			})
			activityList.value = [...activityList.value, ...newItems];
			queryParams.value.page++;
			if(res.data.list.length===0) isOver.value = true;
		})
	}
	
	const calculateCountdown = (datetime) => {
		  if(!datetime) return -1;
		  
		  const targetDate = new Date(datetime);
		  const now = new Date();
		  const difference = targetDate.getTime() - now.getTime();
		  if (difference <= 0) return -1;
		  
		  const days = Math.floor(difference / (1000 * 60 * 60 * 24));
		  const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		  const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
		  return {
		    days,
		    hours,
		    minutes
		  };
	}
	
	watch(()=>userStore.token,(newVal,oldVal)=>{
		if(oldVal!=newVal&&newVal){
			setTimeout(()=>{
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
			},200)
			nextTick(()=>{
				getActivityList()
			})
		}
	})

	onMounted(()=>{
		if(uni.getStorageSync('userInfo')){
			queryParams.value.userId = JSON.parse(uni.getStorageSync('userInfo'))?.id;
		}
		getSwiperList()
		getTypeList()
		getActivityList()
	})

	import { onShareAppMessage, onShareTimeline, onPullDownRefresh } from '@dcloudio/uni-app'
	onShareAppMessage(() => {
		return {
			title: '善行少年 - 公益活动平台',
			path: '/pages/home'
		}
	})
	onShareTimeline(() => {
		return {
			title: '善行少年 - 公益活动平台',
			path: '/pages/home'
		}
	})

	// 下拉刷新:若当前处于某个分类,回到全部列表;否则重新加载当前页
	onPullDownRefresh(() => {
		queryParams.value.categoryId = ''
		initList()
		getActivityList()
		uni.stopPullDownRefresh()
	})
</script>

<style scoped lang="scss">
	::v-deep .indicator__dot{
		width: 48rpx;
		height: 4rpx;
		background: #E2E5E9;
		border-radius: 2rpx;
		margin: 0 8rpx;
	}
	::v-deep .indicator__dot--active{
		width: 48rpx;
		height: 4rpx;
		background: #00AE57;
		border-radius: 2rpx;
	}
	::v-deep .u-swiper__wrapper__item__wrapper__image{
		border-radius: 24rpx !important;
	}

	.tab_page{
		.c-box{
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
			&-search{
				width: 100%;
				padding: 20rpx 30rpx 0;
				box-sizing: border-box;
			}
			&-lunbo{
				width: 100%;
				height: 326rpx;
				margin-top: 20rpx;
			}
			&-title{
				margin-top: 58rpx;
				&-left{
					width: 170rpx;
					height: 44rpx;
					padding-left: 2rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 800;
					font-size: 36rpx;
					color: #151B29;
					line-height: 36rpx;
					background-image: url('https://oss.familydaf.cn/sxsnfile/20251218/6198fa26a7ff4fc1bce530fbdfaa20db.png');
					background-size: 170rpx 31rpx;
					background-position: 0 20rpx;
					background-repeat: no-repeat;
				}
				&-right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #676775;
					line-height: 33rpx;
				}
			}
			&-typegrid{
				width: 100%;
				padding: 8rpx 0;
				box-sizing: border-box;
				z-index: 10;
				background: #FFFFFF;
				&.is-typegrid-sticky{
					position: fixed;
				}
				.typegrid-swiper{
					width: 100%;
					height: 360rpx;
				}
				.typegrid-page{
					width: 100%;
					height: 100%;
					display: flex;
					flex-wrap: wrap;
				}
				.typegrid-item{
					width: 25%;
					margin-bottom: 28rpx;
					align-items: center;
					.typegrid-circle{
						width: 112rpx;
						height: 112rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 96rpx;
							height: 96rpx;
						}
					}
					.typegrid-name{
						margin-top: 12rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #151B29;
						line-height: 30rpx;
						text-align: center;
					}
				}
				.typegrid-dots{
					width: 100%;
					justify-content: center;
					margin-top: 4rpx;
					.typegrid-dot{
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						background: #E2E5E9;
						margin: 0 6rpx;
						&.active{
							background: #00AE57;
						}
					}
				}
			}
			&-list{
				width: 100%;
				margin-top: 20rpx;
			}
			&-typegrid-anchor{
				width: 100%;
				margin-top: 36rpx;
			}
			.activity-list-item{
				width: 100%;
			}
		}
	}
</style>