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 (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="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>

      <!-- 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">{{ 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>
                </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 } 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))
    }
  },
  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: {
    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: '�稿',
        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: '�布�..' })
            setTimeout(function() {
              uni.hideLoading()
              uni.showToast({ title: '�布�功', icon: 'success' })
              self.loadManageData()
            }, 500)
          }
        }
      })
    },
    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 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
      })
    },
    goDetail: function(act) {
      uni.navigateTo({ url: '/pages/discover-detail/activity-detail/activity-detail?id=' + act.id })
    },
    switchToDiscover: function() {
      this.currentTab = 'discover'
      this.loadData()
    },
    formatPrice: function(price) {
      return (price / 100).toFixed(2)
    },
    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;
}

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