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

<template>
  <view class="activity-container">
    <!-- Nav bar with title "活动中心" and admin "+" button -->
    <view class="nav-bar">
      <text class="nav-title">活动中心</text>
      <view class="nav-add-btn" v-if="isAdmin" @click="goCreate">
        <text class="nav-add-icon">+</text>
      </view>
    </view>

    <!-- Tab bar (role-aware tabs) -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: currentTab === tab.key }"
        v-for="tab in visibleTabs"
        :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" v-if="act.registrantName">报名人：{{ act.registrantName }}</text>
              <text class="card-meta">开始时间：{{ formatDateTime(act.startTime) }}</text>
              <text class="card-meta" v-if="act.registrationDeadline">报名截止：{{ formatDateTime(act.registrationDeadline) }}</text>
              <text class="card-desc" v-if="act.description">{{ briefDesc(act.description) }}</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">
              <view class="card-title-row">
                <text class="card-title">{{ act.title }}</text>
                <text class="card-reg-badge" v-if="act.registered">已报名</text>
              </view>
              <text class="card-meta">开始时间：{{ formatDateTime(act.startTime) }}</text>
              <text class="card-meta" v-if="act.registrationDeadline">报名截止：{{ formatDateTime(act.registrationDeadline) }}</text>
              <text class="card-desc" v-if="act.description">{{ briefDesc(act.description) }}</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 (admin only — ended activities management) -->
      <view v-if="currentTab === 'history'">
        <!-- 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">开始时间：{{ formatDateTime(act.startTime) }}</text>
              <text class="card-meta" v-if="act.registrationDeadline">报名截止：{{ formatDateTime(act.registrationDeadline) }}</text>
              <text class="card-desc" v-if="act.description">{{ briefDesc(act.description) }}</text>
              <view class="card-bottom">
                <text class="card-status status-ended">已结束</text>
                <text class="manage-action-small" @click.stop="goRegistrations(act)">报名管理</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>

      <!-- Tab 4: manage (admin only) -->
      <view v-if="currentTab === 'manage' && isAdmin">
        <!-- Manage overview stats -->
        <view class="manage-overview">
          <view class="manage-stat-card">
            <text class="manage-stat-num">{{ manageStats.total }}</text>
            <text class="manage-stat-label">全部活动</text>
          </view>
          <view class="manage-stat-card">
            <text class="manage-stat-num manage-published">{{ manageStats.published }}</text>
            <text class="manage-stat-label">已发布</text>
          </view>
          <view class="manage-stat-card">
            <text class="manage-stat-num manage-draft">{{ manageStats.draft }}</text>
            <text class="manage-stat-label">草稿</text>
          </view>
          <view class="manage-stat-card">
            <text class="manage-stat-num manage-ended">{{ manageStats.ended }}</text>
            <text class="manage-stat-label">已结束</text>
          </view>
        </view>

        <!-- Quick actions -->
        <view class="manage-actions">
          <view class="manage-action-btn" @click="goCreate">
            <text class="manage-action-icon">＋</text>
            <text class="manage-action-text">创建活动</text>
          </view>
        </view>

        <!-- My managed activities list -->
        <view class="manage-section-title">
          <text>我的活动管理</text>
        </view>
        <view class="card-list" v-if="manageActivities.length > 0">
          <view
            class="activity-card"
            v-for="act in manageActivities"
            :key="act.id"
            @click="goEdit(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">开始时间：{{ formatDateTime(act.startTime) }}</text>
              <view class="card-bottom">
                <text class="card-status" :class="'status-' + (act.status || 'draft')">
                  {{ statusLabel(act.status) }}
                </text>
                <view class="manage-action-group">
                  <text class="manage-action-small" v-if="act.status === 'draft'" @click.stop="doPublish(act.id)">发布</text>
                  <text class="manage-action-small" v-if="act.status === 'published'" @click.stop="doEnd(act.id)">结束</text>
                  <text class="manage-action-small" v-if="act.status === 'published'" @click.stop="goRegistrations(act)">报名管理</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="empty-state" v-else-if="!manageLoading">
          <text class="empty-icon">📊</text>
          <text class="empty-title">暂无管理的活动</text>
          <text class="empty-desc">点击上方「创建活动」开始</text>
        </view>
        <view class="loading-state" v-if="manageLoading">
          <view class="loading-spinner"></view>
          <text class="loading-text">加载中...</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getActivityList, getMyActivityRegistrations, activityCheckin, cancelActivityRegistration, adminListMyActivities, adminPublishActivity, adminEndActivity } from '@/utils/api.js'

export default {
  computed: {
    isAdmin: function() {
      var userInfo = uni.getStorageSync('userInfo')
      return userInfo && (userInfo.role === 'admin' || userInfo.role === 'activity_admin' || (userInfo.roles && userInfo.roles.indexOf('activity_admin') >= 0))
    },
    visibleTabs: function() {
      var base = [
        { key: 'mine', label: '我的活动' },
        { key: 'discover', label: '发现活动' }
      ]
      if (this.isAdmin) {
        base.push({ key: 'history', label: '历史记录' })
        base.push({ key: 'manage', label: '管理' })
      }
      return base
    }
  },
  data() {
    return {
      currentTab: 'mine',
      mineFilters: [
        { label: '全部', value: '' },
        { label: '待开始', value: 'upcoming' },
        { label: '待审核', value: 'pending' },
        { label: '已通过', value: 'approved' },
        { label: '已拒绝', value: 'rejected' }
      ],
      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,
      // Manage tab data
      manageLoading: false,
      manageStats: { total: 0, published: 0, draft: 0, ended: 0 },
      manageActivities: []
    }
  },
  onLoad: function(options) {
    if (options && options.tab) {
      // 非管理员不能停留在 历史记录/管理 tab
      if ((options.tab === 'history' || options.tab === 'manage') && !this.isAdmin) {
        this.currentTab = 'mine'
      } else {
        this.currentTab = options.tab
      }
      this.loadData()
    }
  },
  onShow: function() {
    if (this.currentTab === 'mine') {
      this.loadMyActivities(true)
    } else if (this.currentTab === 'manage') {
      this.loadManageData()
    }
  },
  methods: {
    onTabChange: function(key) {
      // 非管理员不能进入 历史记录/管理 tab
      if ((key === 'history' || key === 'manage') && !this.isAdmin) {
        return
      }
      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 = []
      } else if (key === 'manage') {
        this.loadManageData()
      }
      this.loadData()
    },
    loadData: function() {
      if (this.currentTab === 'mine') {
        this.loadMyActivities()
      } else if (this.currentTab === 'discover') {
        this.loadDiscoverActivities()
      } else if (this.currentTab === 'history') {
        this.loadHistoryActivities()
      }
    },
    loadManageData: function() {
      var self = this
      this.manageLoading = true
      adminListMyActivities({ page: 1, size: 100, mine: true }).then(function(res) {
        self.manageLoading = false
        if (res && res.code === 200 && res.data) {
          var records = res.data.records || []
          self.manageActivities = records.slice(0, 20)
          var total = records.length
          var published = 0
          var draft = 0
          var ended = 0
          for (var i = 0; i < records.length; i++) {
            var s = records[i].status
            if (s === 'published') published++
            else if (s === 'draft') draft++
            else if (s === 'ended' || s === 'cancelled') ended++
          }
          self.manageStats = { total: total, published: published, draft: draft, ended: ended }
        } else {
          self.manageActivities = []
          self.manageStats = { total: 0, published: 0, draft: 0, ended: 0 }
        }
      }).catch(function() {
        self.manageLoading = false
        self.manageActivities = []
        self.manageStats = { total: 0, published: 0, draft: 0, ended: 0 }
      })
    },
    goCreate: function() {
      uni.navigateTo({ url: '/pages/activity/create' })
    },
    goEdit: function(act) {
      uni.navigateTo({ url: '/pages/activity/create?id=' + act.id })
    },
    statusLabel: function(status) {
      var map = {
        draft: '草稿',
        published: '进行中',
        ended: '已结束',
        cancelled: '已取消'
      }
      return map[status] || status
    },
    doPublish: function(id) {
      var self = this
      uni.showModal({
        title: '提示',
        content: '确认发布此活动吗？发布后将对外可见。',
        success: function(res) {
          if (res.confirm) {
            uni.showLoading({ title: '发布中...' })
            adminPublishActivity(id).then(function(r) {
              uni.hideLoading()
              if (r && r.code === 200) {
                uni.showToast({ title: '发布成功', icon: 'success' })
              } else {
                uni.showToast({ title: (r && r.message) || '发布失败', icon: 'none' })
              }
              self.loadManageData()
            }).catch(function() {
              uni.hideLoading()
              uni.showToast({ title: '网络异常', icon: 'none' })
              self.loadManageData()
            })
          }
        }
      })
    },
    doEnd: function(id) {
      var self = this
      uni.showModal({
        title: '提示',
        content: '确认结束此活动吗？结束后不再接受新参与者。',
        success: function(res) {
          if (res.confirm) {
            uni.showLoading({ title: '操作中...' })
            adminEndActivity(id).then(function(r) {
              uni.hideLoading()
              if (r && r.code === 200) {
                uni.showToast({ title: '操作成功', icon: 'success' })
              } else {
                uni.showToast({ title: (r && r.message) || '操作失败', icon: 'none' })
              }
              self.loadManageData()
            }).catch(function() {
              uni.hideLoading()
              uni.showToast({ title: '网络异常', icon: 'none' })
              self.loadManageData()
            })
          }
        }
      })
    },
    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
      }
    },
    loadMyActivities: function(refresh) {
      var self = this
      if (refresh) {
        this.minePage = 1
        this.myActivities = []
      }
      this.mineLoading = true
      var childId = uni.getStorageSync('currentChildId')
      var params = {
        page: this.minePage,
        size: this.pageSize
      }
      if (childId) {
        params.childId = childId
      }
      // 仅将后端可识别的状态传给接口；'upcoming' 为前端客户端过滤
      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.activityStartTime) {
                var startTime = new Date(act.activityStartTime.replace(/-/g, '/'))
                if (startTime > now && act.status === 'approved') {
                  filtered.push(act)
                }
              }
            }
            records = filtered
          }
          for (var di = 0; di < records.length; di++) {
            self.normalizeRegistration(records[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
      // 历史记录 tab：活动管理员查看已结束活动（用于管理）
      var params = {
        status: 'ended',
        page: this.historyPage,
        size: this.pageSize
      }
      getActivityList(params).then(function(res) {
        self.historyLoading = false
        if (res && res.code === 200 && res.data) {
          var records = res.data.records || []
          if (refresh) {
            self.historyActivities = records
          } else {
            self.historyActivities = self.historyActivities.concat(records)
          }
          self.hasMore = records.length >= self.pageSize
        }
      }).catch(function() {
        self.historyLoading = false
      })
    },
    goDetail: function(act) {
      uni.navigateTo({ url: '/pages/activity/activity-detail/activity-detail?id=' + act.id })
    },
    goRegistrations: function(act) {
      uni.navigateTo({ url: '/pages/activity/registrations?activityId=' + act.id + '&title=' + encodeURIComponent(act.title || '') })
    },
    switchToDiscover: function() {
      this.currentTab = 'discover'
      this.loadData()
    },
    formatPrice: function(price) {
      return (price / 100).toFixed(2)
    },
    /** 将报名记录字段规范化为活动卡片字段（后端 my-registrations 返回 activity* 前缀字段） */
    normalizeRegistration: function(rec) {
      rec.id = rec.activityId
      rec.title = rec.activityTitle
      rec.coverImage = rec.activityCoverImage
      rec.description = rec.activityDescription
      rec.location = rec.activityLocation
      rec.price = rec.activityPrice
      rec.memberPrice = rec.activityMemberPrice
      rec.startTime = rec.activityStartTime
      rec.endTime = rec.activityEndTime
      rec.registrationDeadline = rec.activityRegistrationDeadline
      rec.requireRegistration = rec.activityRequireRegistration
      rec.activityStatus = rec.activityStatus
      return rec
    },
    formatDateTime: function(v) {
      if (!v) return ''
      var s = String(v)
      if (s.indexOf('-') < 0 && s.indexOf('/') < 0) return s
      var d = new Date(s.replace(/-/g, '/'))
      if (isNaN(d.getTime())) return s
      var pad = function(n) { return n < 10 ? '0' + n : '' + n }
      return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes())
    },
    briefDesc: function(v) {
      if (!v) return ''
      var s = String(v).replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim()
      return s.length > 36 ? s.substring(0, 36) + '...' : s
    },
    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
      // 优先使用全局当前孩子；为空时回退到报名记录上的 childId（家长自身视角也可签到）
      var childId = uni.getStorageSync('currentChildId') || act.childId
      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) {
            // 优先使用全局当前孩子；为空时回退到报名记录上的 childId
            var childId = uni.getStorageSync('currentChildId') || act.childId
            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-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.card-title-row .card-title {
  flex: 1;
  margin-right: 12rpx;
}

.card-reg-badge {
  flex-shrink: 0;
  font-size: 20rpx;
  color: #F97316;
  background: #FFF7ED;
  border: 1rpx solid #F97316;
  padding: 2rpx 12rpx;
  border-radius: 20rpx;
}

.card-desc {
  font-size: 24rpx;
  color: #888;
  margin-top: 8rpx;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

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

.status-draft {
  background: #FFF7ED;
  color: #F97316;
}

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

/* Nav add button */
.nav-add-btn {
  position: absolute;
  right: 24rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 56rpx;
  height: 56rpx;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-add-icon {
  color: #fff;
  font-size: 36rpx;
  font-weight: 300;
  line-height: 1;
}

/* Manage overview stats */
.manage-overview {
  display: flex;
  flex-direction: row;
  padding: 24rpx;
  gap: 16rpx;
  background: #fff;
  margin: 24rpx 24rpx 0;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.manage-stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 0;
}

.manage-stat-num {
  font-size: 40rpx;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}

.manage-published {
  color: #22C55E;
}

.manage-draft {
  color: #F97316;
}

.manage-ended {
  color: #999;
}

.manage-stat-label {
  font-size: 22rpx;
  color: #999;
  margin-top: 8rpx;
}

/* Quick action button */
.manage-actions {
  padding: 24rpx 24rpx 0;
}

.manage-action-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 24rpx 0;
  background: linear-gradient(135deg, #F97316, #FB923C);
  border-radius: 12rpx;
  margin: 0 24rpx;
}

.manage-action-icon {
  color: #fff;
  font-size: 36rpx;
  font-weight: 300;
}

.manage-action-text {
  color: #fff;
  font-size: 28rpx;
  font-weight: 600;
}

/* Section title */
.manage-section-title {
  padding: 24rpx 24rpx 12rpx;
}

.manage-section-title text {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

/* Manage action group in card */
.manage-action-group {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  align-items: center;
}

.manage-action-small {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  background: #F97316;
  color: #fff;
  font-weight: 500;
}
</style>