cfc/cfc-frontend/pages/activity/index.vue

<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="'status-' + (act._cls || 'upcoming')">
                  {{ act._txt || '待开始' }}
                </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
          }
          for (var di = 0; di < records.length; di++) {
            self.decorateActivity(records[di])
          }
          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)
    },
    // Pre-compute display properties for WXML compatibility (no method calls in :class)
    decorateActivity: function(act) {
      if (act.status) {
        act._cls = act.status
        var map = { pending: '待审核', approved: '报名成功', rejected: '已拒绝', cancelled: '已取消', checked_in: '已签到' }
        act._txt = map[act.status] || act.status
      } else {
        if (act.endTime) {
          var endTime = new Date(act.endTime.replace(/-/g, '/'))
          if (endTime < new Date()) {
            act._cls = 'ended'
            act._txt = '已结束'
            return act
          }
        }
        act._cls = 'upcoming'
        act._txt = '待开始'
      }
      return act
    },
    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>