feat(activity): create activity home page with 3-tab structure

cfc-frontend/pages/activity/index.vue

@@ -0,0 +1,866 @@
+<template>
+  <view class="activity-container">
+    <!-- Nav bar with title "活动中心" -->
+    <view class="nav-bar">
+      <text class="nav-title">活动中心</text>
+    </view>
+
+    <!-- Tab bar (3 tabs) -->
+    <view class="tab-bar">
+      <view
+        class="tab-item"
+        :class="{ active: currentTab === tab.key }"
+        v-for="tab in tabs"
+        :key="tab.key"
+        @click="onTabChange(tab.key)"
+      >
+        <text class="tab-label">{{ tab.label }}</text>
+      </view>
+    </view>
+
+    <!-- ScrollView content area -->
+    <scroll-view
+      class="content-scroll"
+      scroll-y
+      :refresher-enabled="true"
+      :refresher-triggered="isRefreshing"
+      @refresherrefresh="onRefresh"
+      @scrolltolower="onLoadMore"
+    >
+      <!-- Tab 1: mine -->
+      <view v-if="currentTab === 'mine'">
+        <!-- Filter chips -->
+        <scroll-view class="filter-scroll" scroll-x enable-flex>
+          <view class="filter-chips">
+            <view
+              class="filter-chip"
+              :class="{ active: currentMineFilter === filter.value }"
+              v-for="filter in mineFilters"
+              :key="filter.value"
+              @click="onMineFilterChange(filter.value)"
+            >
+              <text class="filter-label">{{ filter.label }}</text>
+            </view>
+          </view>
+        </scroll-view>
+
+        <!-- Activity cards -->
+        <view class="card-list" v-if="myActivities.length > 0">
+          <view
+            class="activity-card"
+            v-for="act in myActivities"
+            :key="act.id"
+            @click="goDetail(act)"
+          >
+            <image
+              class="card-cover"
+              :src="act.coverImage || '/static/default-activity.png'"
+              mode="aspectFill"
+            />
+            <view class="card-info">
+              <text class="card-title">{{ act.title }}</text>
+              <text class="card-meta">{{ act.startTime }}</text>
+              <text class="card-meta" v-if="act.location">📍 {{ act.location }}</text>
+              <view class="card-bottom">
+                <text class="card-status" :class="getStatusClass(act)">
+                  {{ getStatusText(act) }}
+                </text>
+                <text class="card-price" v-if="act.price > 0">¥{{ formatPrice(act.price) }}</text>
+                <text class="card-price free" v-else>免费</text>
+              </view>
+              <!-- Action buttons for approved status -->
+              <view
+                v-if="act.status === 'approved'"
+                class="card-actions"
+              >
+                <button class="btn-cancel" @click.stop="onCancel(act)">取消报名</button>
+                <button class="btn-checkin" @click.stop="onCheckin(act)">签到</button>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- Empty state for mine -->
+        <view class="empty-state" v-else-if="!mineLoading">
+          <text class="empty-icon">📋</text>
+          <text class="empty-title">暂无报名的活动</text>
+          <text class="empty-desc">去发现页探索精彩活动吧</text>
+          <button class="empty-btn" @click="switchToDiscover">去发现活动</button>
+        </view>
+
+        <!-- Loading state -->
+        <view class="loading-state" v-if="mineLoading">
+          <view class="loading-spinner"></view>
+          <text class="loading-text">加载中...</text>
+        </view>
+
+        <!-- Load more tip -->
+        <view class="load-more-tip" v-if="myActivities.length > 0 && !hasMore && currentTab === 'mine'">
+          <text class="load-more-text">没有更多了</text>
+        </view>
+      </view>
+
+      <!-- Tab 2: discover -->
+      <view v-if="currentTab === 'discover'">
+        <!-- Filter chips (dimension) -->
+        <scroll-view class="filter-scroll" scroll-x enable-flex>
+          <view class="filter-chips">
+            <view
+              class="filter-chip"
+              :class="{ active: currentDimension === filter.value }"
+              v-for="filter in dimensionFilters"
+              :key="filter.value"
+              @click="onDimensionChange(filter.value)"
+            >
+              <text class="filter-label">{{ filter.label }}</text>
+            </view>
+          </view>
+        </scroll-view>
+
+        <!-- Activity cards -->
+        <view class="card-list" v-if="discoverActivities.length > 0">
+          <view
+            class="activity-card"
+            v-for="act in discoverActivities"
+            :key="act.id"
+            @click="goDetail(act)"
+          >
+            <image
+              class="card-cover"
+              :src="act.coverImage || '/static/default-activity.png'"
+              mode="aspectFill"
+            />
+            <view class="card-info">
+              <text class="card-title">{{ act.title }}</text>
+              <text class="card-meta">{{ act.startTime }}</text>
+              <text class="card-meta" v-if="act.location">📍 {{ act.location }}</text>
+              <view class="card-bottom">
+                <text class="card-status status-published">进行中</text>
+                <text class="card-price" v-if="act.price > 0">¥{{ formatPrice(act.price) }}</text>
+                <text class="card-price free" v-else>免费</text>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- Empty state for discover -->
+        <view class="empty-state" v-else-if="!discoverLoading">
+          <text class="empty-icon">🔍</text>
+          <text class="empty-title">暂无活动</text>
+          <text class="empty-desc">稍后再来看看吧</text>
+        </view>
+
+        <!-- Loading state -->
+        <view class="loading-state" v-if="discoverLoading">
+          <view class="loading-spinner"></view>
+          <text class="loading-text">加载中...</text>
+        </view>
+
+        <!-- Load more tip -->
+        <view class="load-more-tip" v-if="discoverActivities.length > 0 && !hasMore && currentTab === 'discover'">
+          <text class="load-more-text">没有更多了</text>
+        </view>
+      </view>
+
+      <!-- Tab 3: history -->
+      <view v-if="currentTab === 'history'">
+        <!-- Filter chips (same as mine) -->
+        <scroll-view class="filter-scroll" scroll-x enable-flex>
+          <view class="filter-chips">
+            <view
+              class="filter-chip"
+              :class="{ active: currentMineFilter === filter.value }"
+              v-for="filter in mineFilters"
+              :key="filter.value"
+              @click="onMineFilterChange(filter.value)"
+            >
+              <text class="filter-label">{{ filter.label }}</text>
+            </view>
+          </view>
+        </scroll-view>
+
+        <!-- Activity cards -->
+        <view class="card-list" v-if="historyActivities.length > 0">
+          <view
+            class="activity-card"
+            v-for="act in historyActivities"
+            :key="act.id"
+            @click="goDetail(act)"
+          >
+            <image
+              class="card-cover"
+              :src="act.coverImage || '/static/default-activity.png'"
+              mode="aspectFill"
+            />
+            <view class="card-info">
+              <text class="card-title">{{ act.title }}</text>
+              <text class="card-meta">{{ act.startTime }}</text>
+              <text class="card-meta" v-if="act.location">📍 {{ act.location }}</text>
+              <view class="card-bottom">
+                <text class="card-status status-ended">已结束</text>
+                <text class="card-price" v-if="act.price > 0">¥{{ formatPrice(act.price) }}</text>
+                <text class="card-price free" v-else>免费</text>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- Empty state for history -->
+        <view class="empty-state" v-else-if="!historyLoading">
+          <text class="empty-icon">📜</text>
+          <text class="empty-title">暂无历史活动</text>
+          <text class="empty-desc">参加过的活动会显示在这里</text>
+        </view>
+
+        <!-- Loading state -->
+        <view class="loading-state" v-if="historyLoading">
+          <view class="loading-spinner"></view>
+          <text class="loading-text">加载中...</text>
+        </view>
+
+        <!-- Load more tip -->
+        <view class="load-more-tip" v-if="historyActivities.length > 0 && !hasMore && currentTab === 'history'">
+          <text class="load-more-text">没有更多了</text>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import { getActivityList, getMyActivityRegistrations, activityCheckin, cancelActivityRegistration } from '@/utils/api.js'
+
+export default {
+  data() {
+    return {
+      tabs: [
+        { key: 'mine', label: '我的活动' },
+        { key: 'discover', label: '发现活动' },
+        { key: 'history', label: '历史记录' }
+      ],
+      currentTab: 'mine',
+      mineFilters: [
+        { label: '全部', value: '' },
+        { label: '待开始', value: 'upcoming' },
+        { label: '待审核', value: 'pending' },
+        { label: '已签到', value: 'checked_in' }
+      ],
+      dimensionFilters: [
+        { label: '全部', value: '' },
+        { label: '身', value: 'body' },
+        { label: '心', value: 'mind' },
+        { label: '智', value: 'wisdom' },
+        { label: '行', value: 'action' },
+        { label: '富', value: 'wealth' }
+      ],
+      currentMineFilter: '',
+      currentDimension: '',
+      myActivities: [],
+      discoverActivities: [],
+      historyActivities: [],
+      mineLoading: false,
+      discoverLoading: false,
+      historyLoading: false,
+      minePage: 1,
+      discoverPage: 1,
+      historyPage: 1,
+      pageSize: 10,
+      hasMore: true,
+      isRefreshing: false
+    }
+  },
+  onLoad: function(options) {
+    if (options && options.tab) {
+      this.currentTab = options.tab
+      this.loadData()
+    }
+  },
+  onShow: function() {
+    if (this.currentTab === 'mine') {
+      this.loadMyActivities(true)
+    }
+  },
+  methods: {
+    onTabChange: function(key) {
+      this.currentTab = key
+      this.hasMore = true
+      if (key === 'mine') {
+        this.minePage = 1
+        this.myActivities = []
+      } else if (key === 'discover') {
+        this.discoverPage = 1
+        this.discoverActivities = []
+      } else if (key === 'history') {
+        this.historyPage = 1
+        this.historyActivities = []
+      }
+      this.loadData()
+    },
+    loadData: function() {
+      if (this.currentTab === 'mine') {
+        this.loadMyActivities()
+      } else if (this.currentTab === 'discover') {
+        this.loadDiscoverActivities()
+      } else if (this.currentTab === 'history') {
+        this.loadHistoryActivities()
+      }
+    },
+    loadMyActivities: function(refresh) {
+      var self = this
+      if (refresh) {
+        this.minePage = 1
+        this.myActivities = []
+      }
+      this.mineLoading = true
+      var childId = uni.getStorageSync('currentChildId')
+      if (!childId) {
+        this.mineLoading = false
+        return
+      }
+      var params = {
+        childId: childId,
+        page: this.minePage,
+        size: this.pageSize
+      }
+      if (this.currentMineFilter && this.currentMineFilter !== 'upcoming') {
+        params.status = this.currentMineFilter
+      }
+      getMyActivityRegistrations(params).then(function(res) {
+        self.mineLoading = false
+        if (res && res.code === 200 && res.data) {
+          var records = res.data.records || []
+          if (self.currentMineFilter === 'upcoming') {
+            var now = new Date()
+            var filtered = []
+            for (var i = 0; i < records.length; i++) {
+              var act = records[i]
+              if (act.startTime) {
+                var startTime = new Date(act.startTime.replace(/-/g, '/'))
+                if (startTime > now && act.status === 'approved') {
+                  filtered.push(act)
+                }
+              }
+            }
+            records = filtered
+          }
+          if (refresh) {
+            self.myActivities = records
+          } else {
+            self.myActivities = self.myActivities.concat(records)
+          }
+          self.hasMore = records.length >= self.pageSize
+        }
+      }).catch(function() {
+        self.mineLoading = false
+      })
+    },
+    loadDiscoverActivities: function(refresh) {
+      var self = this
+      if (refresh) {
+        this.discoverPage = 1
+        this.discoverActivities = []
+      }
+      this.discoverLoading = true
+      var params = {
+        page: this.discoverPage,
+        size: this.pageSize
+      }
+      if (this.currentDimension) {
+        params.dimensionCode = this.currentDimension
+      }
+      getActivityList(params).then(function(res) {
+        self.discoverLoading = false
+        if (res && res.code === 200 && res.data) {
+          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
+          if (refresh) {
+            self.discoverActivities = list
+          } else {
+            self.discoverActivities = self.discoverActivities.concat(list)
+          }
+          self.hasMore = list.length >= self.pageSize
+        }
+      }).catch(function() {
+        self.discoverLoading = false
+      })
+    },
+    loadHistoryActivities: function(refresh) {
+      var self = this
+      if (refresh) {
+        this.historyPage = 1
+        this.historyActivities = []
+      }
+      this.historyLoading = true
+      var childId = uni.getStorageSync('currentChildId')
+      if (!childId) {
+        this.historyLoading = false
+        return
+      }
+      var params = {
+        childId: childId,
+        page: this.historyPage,
+        size: this.pageSize
+      }
+      getMyActivityRegistrations(params).then(function(res) {
+        self.historyLoading = false
+        if (res && res.code === 200 && res.data) {
+          var records = res.data.records || []
+          var now = new Date()
+          var ended = []
+          for (var i = 0; i < records.length; i++) {
+            var act = records[i]
+            if (act.endTime) {
+              var endTime = new Date(act.endTime.replace(/-/g, '/'))
+              if (endTime < now || act.status === 'cancelled' || act.status === 'rejected') {
+                ended.push(act)
+              }
+            } else {
+              ended.push(act)
+            }
+          }
+          if (refresh) {
+            self.historyActivities = ended
+          } else {
+            self.historyActivities = self.historyActivities.concat(ended)
+          }
+          self.hasMore = records.length >= self.pageSize
+        }
+      }).catch(function() {
+        self.historyLoading = false
+      })
+    },
+    onMineFilterChange: function(value) {
+      this.currentMineFilter = value
+      this.minePage = 1
+      this.myActivities = []
+      this.hasMore = true
+      if (this.currentTab === 'mine') {
+        this.loadMyActivities()
+      } else if (this.currentTab === 'history') {
+        this.loadHistoryActivities()
+      }
+    },
+    onDimensionChange: function(value) {
+      this.currentDimension = value
+      this.discoverPage = 1
+      this.discoverActivities = []
+      this.hasMore = true
+      this.loadDiscoverActivities()
+    },
+    onLoadMore: function() {
+      if (!this.hasMore) return
+      if (this.currentTab === 'mine' && !this.mineLoading) {
+        this.minePage++
+        this.loadMyActivities()
+      } else if (this.currentTab === 'discover' && !this.discoverLoading) {
+        this.discoverPage++
+        this.loadDiscoverActivities()
+      } else if (this.currentTab === 'history' && !this.historyLoading) {
+        this.historyPage++
+        this.loadHistoryActivities()
+      }
+    },
+    onRefresh: function() {
+      var self = this
+      this.isRefreshing = true
+      if (this.currentTab === 'mine') {
+        this.loadMyActivities(true).finally(function() {
+          self.isRefreshing = false
+        })
+      } else if (this.currentTab === 'discover') {
+        this.loadDiscoverActivities(true).finally(function() {
+          self.isRefreshing = false
+        })
+      } else if (this.currentTab === 'history') {
+        this.loadHistoryActivities(true).finally(function() {
+          self.isRefreshing = false
+        })
+      } else {
+        this.isRefreshing = false
+      }
+    },
+    goDetail: function(act) {
+      uni.navigateTo({ url: '/pages/discover-detail/activity-detail/activity-detail?id=' + act.id })
+    },
+    switchToDiscover: function() {
+      this.currentTab = 'discover'
+      this.loadData()
+    },
+    getStatusClass: function(act) {
+      if (!act.status) {
+        if (act.endTime) {
+          var endTime = new Date(act.endTime.replace(/-/g, '/'))
+          if (endTime < new Date()) {
+            return 'status-ended'
+          }
+        }
+        return 'status-upcoming'
+      }
+      return 'status-' + act.status
+    },
+    getStatusText: function(act) {
+      var statusMap = {
+        pending: '待审核',
+        approved: '报名成功',
+        rejected: '已拒绝',
+        cancelled: '已取消',
+        checked_in: '已签到'
+      }
+      if (!act.status) {
+        if (act.endTime) {
+          var endTime = new Date(act.endTime.replace(/-/g, '/'))
+          if (endTime < new Date()) {
+            return '已结束'
+          }
+        }
+        return '待开始'
+      }
+      return statusMap[act.status] || act.status
+    },
+    formatPrice: function(price) {
+      return (price / 100).toFixed(2)
+    },
+    onCheckin: function(act) {
+      var self = this
+      var childId = uni.getStorageSync('currentChildId')
+      if (!childId) {
+        uni.showToast({ title: '请先选择孩子身份', icon: 'none' })
+        return
+      }
+      activityCheckin({ id: act.activityId || act.id, childId: childId }).then(function(res) {
+        if (res && res.code === 200) {
+          uni.showToast({ title: '签到成功', icon: 'success' })
+          self.loadMyActivities(true)
+        } else {
+          uni.showToast({ title: (res && res.message) || '签到失败', icon: 'none' })
+        }
+      }).catch(function() {
+        uni.showToast({ title: '网络异常', icon: 'none' })
+      })
+    },
+    onCancel: function(act) {
+      var self = this
+      uni.showModal({
+        title: '提示',
+        content: '确定要取消报名吗？',
+        success: function(res) {
+          if (res.confirm) {
+            var childId = uni.getStorageSync('currentChildId')
+            if (!childId) {
+              uni.showToast({ title: '请先选择孩子身份', icon: 'none' })
+              return
+            }
+            cancelActivityRegistration({ id: act.activityId || act.id, childId: childId }).then(function(res) {
+              if (res && res.code === 200) {
+                uni.showToast({ title: '已取消报名', icon: 'success' })
+                self.loadMyActivities(true)
+              } else {
+                uni.showToast({ title: (res && res.message) || '取消失败', icon: 'none' })
+              }
+            }).catch(function() {
+              uni.showToast({ title: '网络异常', icon: 'none' })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.activity-container {
+  min-height: 100vh;
+  background: #F5F5F5;
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-bar {
+  background: #1A0F00;
+  padding: 20rpx 0;
+  text-align: center;
+}
+
+.nav-title {
+  color: #fff;
+  font-size: 32rpx;
+  font-weight: 600;
+}
+
+.tab-bar {
+  background: #fff;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1rpx solid #eee;
+}
+
+.tab-item {
+  flex: 1;
+  padding: 24rpx 0;
+  text-align: center;
+  border-bottom: 4rpx solid transparent;
+}
+
+.tab-item.active {
+  border-bottom-color: #F97316;
+}
+
+.tab-label {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.tab-item.active .tab-label {
+  color: #F97316;
+  font-weight: 600;
+}
+
+.content-scroll {
+  flex: 1;
+  height: calc(100vh - 200rpx);
+}
+
+.filter-scroll {
+  padding: 20rpx 24rpx;
+  background: #fff;
+}
+
+.filter-chips {
+  display: flex;
+  flex-direction: row;
+  gap: 16rpx;
+}
+
+.filter-chip {
+  padding: 12rpx 24rpx;
+  border-radius: 16px;
+  background: #fff;
+  border: 1rpx solid #ddd;
+  flex-shrink: 0;
+}
+
+.filter-chip.active {
+  background: #FFF7ED;
+  border-color: #F97316;
+}
+
+.filter-label {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.filter-chip.active .filter-label {
+  color: #F97316;
+  font-weight: 500;
+}
+
+.card-list {
+  padding: 0 24rpx 24rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.activity-card {
+  background: #fff;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  display: flex;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+}
+
+.card-cover {
+  width: 144rpx;
+  height: 144rpx;
+  border-radius: 8rpx;
+  flex-shrink: 0;
+  background: #f0f0f0;
+}
+
+.card-info {
+  flex: 1;
+  margin-left: 20rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-meta {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 8rpx;
+}
+
+.card-bottom {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+  padding-top: 12rpx;
+}
+
+.card-status {
+  font-size: 22rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 6rpx;
+}
+
+.status-pending {
+  background: #FFF7ED;
+  color: #F97316;
+}
+
+.status-approved {
+  background: #F0FDF4;
+  color: #22C55E;
+}
+
+.status-rejected {
+  background: #FEF2F2;
+  color: #EF4444;
+}
+
+.status-cancelled {
+  background: #F5F5F5;
+  color: #999;
+}
+
+.status-checked_in {
+  background: #DBEAFE;
+  color: #3B82F6;
+}
+
+.status-upcoming {
+  background: #FFF7ED;
+  color: #F97316;
+}
+
+.status-ended {
+  background: #F5F5F5;
+  color: #999;
+}
+
+.status-published {
+  background: #F0FDF4;
+  color: #22C55E;
+}
+
+.card-price {
+  font-size: 28rpx;
+  color: #F97316;
+  font-weight: 600;
+}
+
+.card-price.free {
+  color: #22C55E;
+}
+
+.card-actions {
+  display: flex;
+  flex-direction: row;
+  gap: 12rpx;
+  margin-top: 12rpx;
+}
+
+.btn-cancel {
+  padding: 8rpx 20rpx;
+  font-size: 22rpx;
+  color: #999;
+  background: #fff;
+  border: 1rpx solid #ddd;
+  border-radius: 20rpx;
+  line-height: 1.5;
+}
+
+.btn-checkin {
+  padding: 8rpx 20rpx;
+  font-size: 22rpx;
+  color: #fff;
+  background: linear-gradient(135deg, #F97316, #FB923C);
+  border: none;
+  border-radius: 20rpx;
+  line-height: 1.5;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 40rpx;
+}
+
+.empty-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+}
+
+.empty-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12rpx;
+}
+
+.empty-desc {
+  font-size: 26rpx;
+  color: #999;
+  margin-bottom: 40rpx;
+}
+
+.empty-btn {
+  padding: 16rpx 48rpx;
+  font-size: 28rpx;
+  color: #fff;
+  background: linear-gradient(135deg, #F97316, #FB923C);
+  border: none;
+  border-radius: 40rpx;
+}
+
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80rpx 40rpx;
+}
+
+.loading-spinner {
+  width: 60rpx;
+  height: 60rpx;
+  border: 4rpx solid #FDE68A;
+  border-top-color: #F97316;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-bottom: 20rpx;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.loading-text {
+  font-size: 26rpx;
+  color: #999;
+}
+
+.load-more-tip {
+  text-align: center;
+  padding: 30rpx;
+}
+
+.load-more-text {
+  font-size: 24rpx;
+  color: #999;
+}
+</style>