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

<template>
  <view class="activity-container">
    <!-- Nav bar with title "活动中心" and admin "+" button -->

    <!-- Tab bar (4 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="getImageUrl(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">{{ 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="getImageUrl(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.displayStatus || 'open')">
                  {{ act.displayLabel || '报名中' }}
                </text>
                <text class="card-price" v-if="hasFee(act)">¥{{ minFee(act) }}</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="getImageUrl(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>

      <!-- 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="getImageUrl(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>
              <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)">{{ isAdmin ? '发布' : '提交审核' }}</text>
                  <text class="manage-action-small" v-if="act.status === 'rejected'" @click.stop="doPublish(act.id)">重新提交</text>
                  <text class="manage-action-small" v-if="act.status === 'published'" @click.stop="doEnd(act.id)">结束</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, submitActivityForReview } from '@/utils/api.js'
import config from '@/config.js'
import { parseDate } from '../../utils/format.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))
    }
  },
  data() {
    return {
      tabs: [
        { key: 'mine', label: '我的活动' },
        { key: 'discover', label: '发现活动' },
        { key: 'history', label: '历史记录' },
        { key: 'manage', 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,
      // Manage tab data
      manageLoading: false,
      manageStats: { total: 0, published: 0, draft: 0, ended: 0 },
      manageActivities: []
    }
  },
  onLoad: function(options) {
    if (options && options.tab) {
      this.currentTab = options.tab
      this.loadData()
    }
  },
  onShow: function() {
    if (this.currentTab === 'mine') {
      this.loadMyActivities(true)
    } else if (this.currentTab === 'manage') {
      this.loadManageData()
    }
  },
  methods: {
    getImageUrl: function(path) {
      if (!path) return ''
      if (path.indexOf('http://') === 0 || path.indexOf('https://') === 0) return path
      return config.API_BASE_URL + path
    },
    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 = []
      } 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 }).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: '草稿',
        pending: '待审核',
        rejected: '已驳回',
        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: '发布中...' })
            if (self.isAdmin) {
              adminPublishActivity(id).then(function(r) {
                uni.hideLoading()
                if (r && r.code === 200) {
                  uni.showToast({ title: '发布成功', icon: 'success' })
                  self.loadManageData()
                } else {
                  uni.showToast({ title: (r && r.message) || '发布失败', icon: 'none' })
                }
              }).catch(function() {
                uni.hideLoading()
                uni.showToast({ title: '发布失败', icon: 'none' })
              })
            } else {
              submitActivityForReview(id).then(function(r) {
                uni.hideLoading()
                if (r && r.code === 200) {
                  uni.showToast({ title: '已提交审核', icon: 'success' })
                  self.loadManageData()
                } else {
                  uni.showToast({ title: (r && r.message) || '提交审核失败', icon: 'none' })
                }
              }).catch(function() {
                uni.hideLoading()
                uni.showToast({ title: '提交审核失败', icon: 'none' })
              })
            }
          }
        }
      })
    },
    doEnd: function(id) {
      var self = this
      uni.showModal({
        title: '提示',
        content: '确认结束此活动吗？结束后不再接受新参与者。',
        success: function(res) {
          if (res.confirm) {
            uni.showLoading({ title: '操作中...' })
            setTimeout(function() {
              uni.hideLoading()
              uni.showToast({ title: '操作成功', icon: 'success' })
              self.loadManageData()
            }, 500)
          }
        }
      })
    },
    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 memberId = uni.getStorageSync('currentChildId')
      if (!memberId) {
        this.mineLoading = false
        return
      }
      var params = {
        memberId: memberId,
        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 = parseDate(act.startTime)
                if (!startTime) continue
                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 memberId = uni.getStorageSync('currentChildId')
      if (!memberId) {
        this.historyLoading = false
        return
      }
      var params = {
        memberId: memberId,
        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 = parseDate(act.endTime)
              if ((endTime && 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
      })
    },
    goDetail: function(act) {
      uni.navigateTo({ url: '/pages/activity/activity-detail/activity-detail?id=' + act.id })
    },
    switchToDiscover: function() {
      this.currentTab = 'discover'
      this.loadData()
    },
    formatPrice: function(price) {
      return (price / 100).toFixed(2)
    },
    hasFee: function(act) {
      return (act.childFee > 0) || (act.childMemberFee > 0) || (act.parentFee > 0) || (act.parentMemberFee > 0)
    },
    minFee: function(act) {
      var fees = [act.childFee, act.childMemberFee, act.parentFee, act.parentMemberFee]
      var min = 0
      for (var i = 0; i < fees.length; i++) {
        if (fees[i] > 0 && (min === 0 || fees[i] < min)) min = fees[i]
      }
      return this.formatPrice(min)
    },
    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 = parseDate(act.endTime)
          if (endTime && endTime < new Date()) {
            act._cls = 'ended'
            act._txt = '已结束'
            return act
          }
        }
        act._cls = 'upcoming'
        act._txt = '待开始'
      }
      return act
    },
    onCheckin: function(act) {
      var self = this
      var memberId = uni.getStorageSync('currentChildId')
      if (!memberId) {
        uni.showToast({ title: '请先选择孩子身份', icon: 'none' })
        return
      }
      activityCheckin({ id: act.activityId || act.id, memberId: memberId }).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 memberId = uni.getStorageSync('currentChildId')
            if (!memberId) {
              uni.showToast({ title: '请先选择孩子身份', icon: 'none' })
              return
            }
            cancelActivityRegistration({ id: act.activityId || act.id, memberId: memberId }).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;
}

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

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