对接活动列表接口

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;
 	}
 

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

@@ -36,51 +36,51 @@
         <view class="info-section">
           <view class="info-item">
             <view class="info-label">报名截止时间</view>
-            <view class="info-value">2023-08-08 23:00</view>
+            <view class="info-value">{{activityConent.applyDeadline}}</view>
           </view>
           
           <view class="info-item">
             <view class="info-label">活动时间</view>
             <view class="info-value">
-              <text>2023-08-09 10:00 至 2023-08-20 16:00</text>
+              <text>{{activityConent.startTime}} 至 {{activityConent.endTime}}</text>
             </view>
           </view>
           
           <view class="info-item">
             <view class="info-label">签到时间</view>
             <view class="info-value">
-              <text>2023-08-09 10:00 至 2023-08-10 16:00</text>
+              <text>{{activityConent.signinStartTime}} 至 {{activityConent.signinEndTime}}</text>
             </view>
           </view>
           
           <view class="info-item">
             <view class="info-label">活动地点</view>
-            <view class="info-value">山东省日照市高新区高新管委会大厦前高新公园</view>
+            <view class="info-value">{{activityConent.address}}</view>
           </view>
           
           <view class="info-item">
             <view class="info-label">活动名额</view>
-            <view class="info-value">10人</view>
+            <view class="info-value">{{activityConent.quota}}人</view>
           </view>
           
           <view class="info-item">
             <view class="info-label">主办方</view>
-            <view class="info-value">山海天社区</view>
+            <view class="info-value">{{activityConent.organizer}}</view>
           </view>
           
           <view class="info-item">
             <view class="info-label">联系人</view>
-            <view class="info-value">赵璐</view>
+            <view class="info-value">{{activityConent.contactName}}</view>
           </view>
           
           <view class="info-item">
             <view class="info-label">联系电话</view>
-            <view class="info-value">15799999999</view>
+            <view class="info-value">{{activityConent.contactPhone}}</view>
           </view>
           
           <view class="info-item">
             <view class="info-label">积分奖励</view>
-            <view class="info-value">100</view>
+            <view class="info-value">{{activityConent.pointsReward}}</view>
           </view>
         </view>
 
@@ -88,7 +88,7 @@
         <view class="section">
           <view class="section-title">招募要求</view>
           <view class="section-content">
-            要求就是要求就是要求就是
+            {{activityConent.requirements}}
           </view>
         </view>
 
@@ -96,8 +96,8 @@
         <view class="section" style="margin-bottom: 40rpx;">
           <view class="section-title">活动详情</view>
           <view class="section-content">
-            <view>1、这就是活动详情zhejiushihuodongxiangqing这就是活动详情zhejiushihuodongxiangqing</view>
-            <view>2、活动详情zhejiushuodongxiangqing</view>
+            <view>{{activityConent.content}}</view>
+            <view></view>
           </view>
         </view>
       </view>
@@ -182,7 +182,7 @@
       <view class="modal-content">
         <view class="modal-header">报名确认</view>
         <view class="modal-body">
-          <view>确定要报名参加"社区'小槐花课堂'开课了"吗？</view>
+          <view>{{navTitle}}</view>
           <view class="modal-tip">报名后请按时参加活动</view>
         </view>
         <view class="modal-footer">
@@ -197,7 +197,7 @@
       <view class="modal-content">
         <view class="modal-header">取消报名</view>
         <view class="modal-body">
-          <view>确定要取消报名"社区'小槐花课堂'开课了"吗？</view>
+          <view>{{navTitle}}</view>
           <view class="modal-tip">取消后如需参加需重新报名</view>
         </view>
         <view class="modal-footer">
@@ -218,6 +218,7 @@
 import { ref, onMounted } from 'vue'
 import {onLoad} from '@dcloudio/uni-app'
 import moment from 'moment'
+import {getActivityDetails} from '../api/api.js'
 
 // 响应式数据
 const activeTab = ref('detail') // 'detail' 或 'status'
@@ -230,6 +231,8 @@ const toastMessage = ref('')
 const newStatusContent = ref('')
 // const newStatusImages = ref([])
 const navTitle = ref('')
+const curActivityId = ref('') // 当前活动的id
+const activityConent = ref({}) // 获取详情数据
 
 // 实况记录数据
 const liveRecords = ref([
@@ -251,9 +254,33 @@ const liveRecords = ref([
 //  接受参数
 onLoad((option) =>{
 	// console.log('dsdsds',option)
-	navTitle.value = option.title
+	navTitle.value = option?.title
+	curActivityId.value = option?.id
+	// console.log('navTitle',navTitle.value,curActivityId.value)
+	getActivityDetailsData(curActivityId.value)
 	
 })
+// 获取列表详情
+const getActivityDetailsData = async (id) =>{
+	try{
+		
+		const res = await getActivityDetails(id)
+		if(res.code === 200){
+			activityConent.value = res.data || {}
+		}else{
+			activityConent.value = {}
+			uni.showToast({
+				title: res.msg ||"详情获取失败",
+				icon:"error"
+			})
+		}
+	}catch{
+		uni.showToast({
+			title: res.msg ||"网络异常",
+			icon:"none"
+		})
+	}
+}
 // 切换选项卡
 const switchTab = (tab) => {
   activeTab.value = tab
@@ -337,7 +364,7 @@ onMounted(() => {
 })
 </script>
 
-<style>
+<style scoped>
 /* 页面容器 */
 .container {
   min-height: 100vh;
@@ -386,7 +413,14 @@ onMounted(() => {
 /* 内容区域 */
 .content {
   flex: 1;
+  box-sizing: border-box;
   margin-bottom: 120rpx;
+  position: absolute; /* 关键：让scroll-view独立滚动 */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding-top: 136px; 
 }
  .status_bar {
 	 height: 46px;
@@ -440,7 +474,7 @@ onMounted(() => {
 .info-section {
   /* background-color: #fff; */
   border-radius: 16rpx;
-  padding: 30rpx;
+  padding: 30rpx 40rpx;
   /* margin-bottom: 30rpx; */
   /* box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); */
 }
@@ -471,13 +505,14 @@ onMounted(() => {
   color: #222;
   font-weight: 500;
   line-height: 1.4;
+  text-align: right;
 }
 
 /* 区块样式 */
 .section {
   /* background-color: #fff; */
   border-radius: 16rpx;
-  padding: 30rpx;
+  padding: 30rpx 40rpx;
   /* margin-bottom: 30rpx; */
   box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
 }