对接活动列表接口

property-uniapp-project/pageSubPack/activity-list/activityList.vue

@@ -54,10 +54,10 @@
 				<view v-for="activity in displayedActivities" :key="activity.id" class="activity-card"
 					@tap="viewActivityDetail(activity)">
 					<view class="status-badge">
-						进行中
+						{{activity.statusText}}
 					</view>
 
-					<view v-if="activity.hasSigned && activeTab === 'list'" class="signed-badge">
+					<view v-if="activity.applied && activeTab === 'list'" class="signed-badge">
 						<uni-icons type="checkbox-filled" size="14" color="#fff"></uni-icons>
 						<text>已报名</text>
 					</view>
@@ -67,7 +67,7 @@
 							<up-row justify="space-between" customStyle="margin-bottom: 10px">
 								<up-col span="4">
 									<view class="info-image-left">
-										<image src="http://47.104.199.163:9090/images/home/activity-img.png"
+										<image :src="activity.coverImage"
 											style="width: 100%;height: 100%;"></image>
 									</view>
 								</up-col>
@@ -82,11 +82,11 @@
 										</view>
 
 										<view class="activity-detail">
-											<text class="detail-text">地点：{{ activity.location }}</text>
+											<text class="detail-text">地点：{{ activity.address }}</text>
 										</view>
 
 										<view class="activity-detail">
-											<text class="detail-text-num">活动名额{{ activity.totalQuota }}人，已报名{{ activity.signedCount }}人</text>
+											<text class="detail-text-num">活动名额{{ activity.quota }}人，已报名{{ activity.appliedCount }}人</text>
 										</view>
 									</view>
 								</up-col>
@@ -126,6 +126,7 @@
 		watch
 	} from 'vue'
 	import moment from 'moment';
+	import{getActivityList} from '../api/api.js'
 
 	// 响应式数据
 	const activeTab = ref('list') // 'list' 或 'my'
@@ -134,6 +135,9 @@
 	const hasMoreData = ref(true)
 	const currentPage = ref(1)
 	const pageSize = 5
+	const total = ref(0)
+	// 当前显示的活动列表
+	const displayedActivities = ref([])
 
 	// 筛选条件
 	const filters = ref([{
@@ -155,122 +159,7 @@
 	])
 
 	// 模拟活动数据
-	const allActivities = ref([{
-			id: 1,
-			title: '阳光海岸社区生活节活动',
-			startTime: '2023-06-19 08:00',
-			endTime: '2023-06-30 17:00',
-			location: '山东省日照市东港区莱顿二期花语墅西沿街',
-			totalQuota: 100,
-			signedCount: 68,
-			status: 'ongoing', // ongoing, upcoming, ended
-			hasSigned: true,
-			myStatus: 'passed', // reviewing, passed, rejected
-			coverImage: '/static/activity1.jpg',
-			description: '阳光海岸社区生活节是一个为期两周的社区文化活动，包括文艺表演、手工艺品展示、美食节等多种活动。'
-		},
-		{
-			id: 2,
-			title: '社区环保志愿者招募活动',
-			startTime: '2023-07-01 09:00',
-			endTime: '2023-07-31 18:00',
-			location: '社区公园及周边街道',
-			totalQuota: 50,
-			signedCount: 32,
-			status: 'upcoming',
-			hasSigned: false,
-			myStatus: 'reviewing',
-			coverImage: '/static/activity2.jpg',
-			description: '招募社区环保志愿者，参与垃圾分类宣传、社区清洁等环保活动。'
-		},
-		{
-			id: 3,
-			title: '端午节包粽子亲子活动',
-			startTime: '2023-06-10 14:00',
-			endTime: '2023-06-10 17:00',
-			location: '社区活动中心',
-			totalQuota: 30,
-			signedCount: 30,
-			status: 'ended',
-			hasSigned: true,
-			myStatus: 'passed',
-			coverImage: '/static/activity3.jpg',
-			description: '端午节亲子活动，教孩子们包粽子，了解传统文化。'
-		},
-		{
-			id: 4,
-			title: '老年人智能手机使用培训',
-			startTime: '2023-07-05 14:00',
-			endTime: '2023-07-12 16:00',
-			location: '社区图书馆二楼',
-			totalQuota: 20,
-			signedCount: 15,
-			status: 'upcoming',
-			hasSigned: false,
-			myStatus: null,
-			coverImage: '/static/activity4.jpg',
-			description: '为社区老年人提供智能手机使用培训，包括微信、支付宝等常用APP的使用。'
-		},
-		{
-			id: 5,
-			title: '社区篮球友谊赛',
-			startTime: '2023-06-25 15:00',
-			endTime: '2023-06-25 18:00',
-			location: '社区体育馆',
-			totalQuota: 40,
-			signedCount: 25,
-			status: 'ongoing',
-			hasSigned: false,
-			myStatus: 'rejected',
-			coverImage: '/static/activity5.jpg',
-			description: '社区篮球友谊赛，欢迎篮球爱好者报名参加。'
-		},
-		{
-			id: 6,
-			title: '儿童暑期绘画班',
-			startTime: '2023-07-10 09:00',
-			endTime: '2023-08-20 11:00',
-			location: '社区艺术工作室',
-			totalQuota: 25,
-			signedCount: 18,
-			status: 'upcoming',
-			hasSigned: true,
-			myStatus: 'reviewing',
-			coverImage: '/static/activity6.jpg',
-			description: '暑期儿童绘画班，培养孩子的艺术兴趣和创造力。'
-		},
-		{
-			id: 7,
-			title: '社区消防安全演练',
-			startTime: '2023-05-15 10:00',
-			endTime: '2023-05-15 12:00',
-			location: '社区广场',
-			totalQuota: 100,
-			signedCount: 85,
-			status: 'ended',
-			hasSigned: true,
-			myStatus: 'passed',
-			coverImage: '/static/activity7.jpg',
-			description: '社区消防安全知识讲座和应急演练。'
-		},
-		{
-			id: 8,
-			title: '邻里美食分享会',
-			startTime: '2023-07-08 16:00',
-			endTime: '2023-07-08 19:00',
-			location: '社区花园',
-			totalQuota: 40,
-			signedCount: 22,
-			status: 'upcoming',
-			hasSigned: false,
-			myStatus: null,
-			coverImage: '/static/activity8.jpg',
-			description: '邻里美食分享会，每家带一道拿手菜，共享美食。'
-		}
-	])
-
-	// 当前显示的活动列表
-	const displayedActivities = ref([])
+	const allActivities = ref([])
 
 	// 计算属性：根据当前标签和筛选条件过滤活动
 	const filteredActivities = computed(() => {
@@ -304,45 +193,63 @@
 	// 切换选项卡
 	const switchTab = (tab) => {
 		activeTab.value = tab
-		currentPage.value = 1
-		displayedActivities.value = []
-		loadPageData(1)
+		resetAndLoad()
 	}
 
 	// 切换筛选条件
 	const switchFilter = (filter) => {
 		myFilter.value = filter
-		currentPage.value = 1
-		displayedActivities.value = []
-		loadPageData(1)
+		resetAndLoad()
 	}
-
-	// 加载分页数据
-	const loadPageData = (pageNum) => {
-		isLoading.value = true
-
-		// 模拟网络请求延迟
-		setTimeout(() => {
-			const startIndex = (pageNum - 1) * pageSize
-			const endIndex = startIndex + pageSize
-			const pageData = filteredActivities.value.slice(startIndex, endIndex)
-
-			if (pageNum === 1) {
-				displayedActivities.value = pageData
-			} else {
-				displayedActivities.value = [...displayedActivities.value, ...pageData]
+		// 重置并刷新第一页
+		const resetAndLoad = () => {
+			currentPage.value = 1
+			displayedActivities.value = []
+			hasMoreData.value = true
+			getActivityListData(1)
+		}
+	
+	// 获取小区列表接口
+	const getActivityListData = async (pageNum = 1) => {
+			if (isLoading.value) return
+			isLoading.value = true
+	
+			try {
+				const params = {
+					pageNum: pageNum,
+					pageSize: pageSize
+				}
+				const res = await getActivityList(params)
+	
+				if (res.code === 200) {
+					const list = res.rows || []
+					total.value = res.total || 0
+					// 第一页 → 覆盖；下一页 → 追加
+					if (pageNum === 1) {
+						displayedActivities.value = list
+					} else {
+						displayedActivities.value = [...displayedActivities.value, ...list]
+					}
+	
+					// 是否还有更多数据
+					hasMoreData.value = displayedActivities.value.length < total.value
+					currentPage.value = pageNum
+				} else {
+					uni.showToast({ title: res.msg || "加载失败", icon: 'error' })
+					if (pageNum === 1) displayedActivities.value = []
+				}
+			} catch (err) {
+				uni.showToast({ title: "网络异常", icon: 'error' })
+				if (pageNum === 1) displayedActivities.value = []
+			} finally {
+				isLoading.value = false
 			}
-
-			currentPage.value = pageNum
-			hasMoreData.value = displayedActivities.value.length < filteredActivities.value.length
-			isLoading.value = false
-		}, 500)
-	}
+		}
 
 	// 加载更多数据
 	const loadMoreData = () => {
 		if (isLoading.value || !hasMoreData.value) return
-		loadPageData(currentPage.value + 1)
+		getActivityListData(currentPage.value + 1)
 	}
 
 	// 获取活动状态类名
@@ -383,25 +290,25 @@
 	// 报名活动
 	const signupActivity = (activity) => {
 		uni.navigateTo({
-			url: `/pages/activity-list/activityListDetails?id=${activity.id}&title=${activity.title}`
+			url: `/pageSubPack/activity-list/activityListDetails?id=${activity.id}&title=${activity.title}`
 		})
 	}
 
 	// 查看活动详情
-	const viewActivityDetail = (activity) => {
-		uni.navigateTo({
-			url: `/pages/activityDetail/activityDetail?id=${activity.id}`,
-			fail: () => {
-				// 如果页面不存在，显示活动信息
-				uni.showModal({
-					title: activity.title,
-					content: `${activity.description}\n\n时间：${formatDate(activity.startTime)} 至 ${formatDate(activity.endTime)}\n地点：${activity.location}\n名额：${activity.totalQuota}人，已报名：${activity.signedCount}人`,
-					showCancel: false,
-					confirmText: '知道了'
-				})
-			}
-		})
-	}
+	// const viewActivityDetail = (activity) => {
+	// 	uni.navigateTo({
+	// 		url: `/pages/activityDetail/activityDetail?id=${activity.id}`,
+	// 		fail: () => {
+	// 			// 如果页面不存在，显示活动信息
+	// 			uni.showModal({
+	// 				title: activity.title,
+	// 				content: `${activity.description}\n\n时间：${formatDate(activity.startTime)} 至 ${formatDate(activity.endTime)}\n地点：${activity.location}\n名额：${activity.totalQuota}人，已报名：${activity.signedCount}人`,
+	// 				showCancel: false,
+	// 				confirmText: '知道了'
+	// 			})
+	// 		}
+	// 	})
+	// }
 
 	// 联系管理员
 	const contactAdmin = (activity) => {
@@ -423,13 +330,13 @@
 		if (activeTab.value === 'my') {
 			currentPage.value = 1
 			displayedActivities.value = []
-			loadPageData(1)
+			getActivityListData(1)
 		}
 	})
 
 	// 初始化
 	onMounted(() => {
-		loadPageData(1)
+		getActivityListData(1)
 	})
 </script>
 
@@ -461,7 +368,7 @@
 		flex: 1;
 		width: 100%;
 		overflow-y: auto;
-		padding: 0 20rpx;
+		padding: 0 40rpx;
 		box-sizing: border-box;
 	}