diff --git a/property-uniapp-project/pageSubPack/activity-list/activityList.vue b/property-uniapp-project/pageSubPack/activity-list/activityList.vue index f34aeee..6a22ce6 100644 --- a/property-uniapp-project/pageSubPack/activity-list/activityList.vue +++ b/property-uniapp-project/pageSubPack/activity-list/activityList.vue @@ -54,10 +54,10 @@ - 进行中 + {{activity.statusText}} - + 已报名 @@ -67,7 +67,7 @@ - @@ -82,11 +82,11 @@ - 地点：{{ activity.location }} + 地点：{{ activity.address }} - 活动名额{{ activity.totalQuota }}人，已报名{{ activity.signedCount }}人 + 活动名额{{ activity.quota }}人，已报名{{ activity.appliedCount }}人 @@ -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) }) @@ -461,7 +368,7 @@ flex: 1; width: 100%; overflow-y: auto; - padding: 0 20rpx; + padding: 0 40rpx; box-sizing: border-box; } diff --git a/property-uniapp-project/pageSubPack/activity-list/activityListDetails.vue b/property-uniapp-project/pageSubPack/activity-list/activityListDetails.vue index 34f09b4..028cc7f 100644 --- a/property-uniapp-project/pageSubPack/activity-list/activityListDetails.vue +++ b/property-uniapp-project/pageSubPack/activity-list/activityListDetails.vue @@ -36,51 +36,51 @@ 报名截止时间 - 2023-08-08 23:00 + {{activityConent.applyDeadline}} 活动时间 - 2023-08-09 10:00 至 2023-08-20 16:00 + {{activityConent.startTime}} 至 {{activityConent.endTime}} 签到时间 - 2023-08-09 10:00 至 2023-08-10 16:00 + {{activityConent.signinStartTime}} 至 {{activityConent.signinEndTime}} 活动地点 - 山东省日照市高新区高新管委会大厦前高新公园 + {{activityConent.address}} 活动名额 - 10人 + {{activityConent.quota}}人 主办方 - 山海天社区 + {{activityConent.organizer}} 联系人 - 赵璐 + {{activityConent.contactName}} 联系电话 - 15799999999 + {{activityConent.contactPhone}} 积分奖励 - 100 + {{activityConent.pointsReward}} @@ -88,7 +88,7 @@ 招募要求 - 要求就是要求就是要求就是 + {{activityConent.requirements}} @@ -96,8 +96,8 @@ 活动详情 - 1、这就是活动详情zhejiushihuodongxiangqing这就是活动详情zhejiushihuodongxiangqing - 2、活动详情zhejiushuodongxiangqing + {{activityConent.content}} + @@ -182,7 +182,7 @@ 报名确认 - 确定要报名参加"社区'小槐花课堂'开课了"吗？ + {{navTitle}} 报名后请按时参加活动 @@ -197,7 +197,7 @@ 取消报名 - 确定要取消报名"社区'小槐花课堂'开课了"吗？ + {{navTitle}} 取消后如需参加需重新报名 @@ -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(() => { }) -