cfc/cfc-frontend/pages/guide/activities/index.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">活动管理</text>
      <view class="btn-create" @click="goToCreate">
        <text class="btn-create-text">+ 新建活动</text>
      </view>
    </view>

    <view class="filter-bar">
      <view class="filter-chips">
        <view
          v-for="f in filterOptions"
          :key="f.value"
          :class="['filter-chip', currentFilter === f.value ? 'active' : '']"
          @click="onFilterChange(f.value)"
        >
          <text>{{ f.label }}</text>
        </view>
      </view>
    </view>

    <view class="activity-list" v-if="activities.length > 0">
      <view class="activity-card" v-for="act in activities" :key="act.id"
        @click="goToDetail(act.id)">
        <view class="act-cover" v-if="act.coverImage">
          <image class="cover-img" :src="act.coverImage" mode="aspectFill" />
        </view>
        <view class="act-cover placeholder" v-else>
          <text class="cover-placeholder-text">{{ categoryIcon(act.category) }}</text>
        </view>
        <view class="act-body">
          <view class="act-header">
            <text class="act-title">{{ act.title || '未命名活动' }}</text>
            <text class="act-status" :class="'status-' + act.status">{{ statusText(act.status) }}</text>
          </view>
          <view class="act-meta">
            <text class="meta-item" v-if="act.activityDate">
              &#x1F4C5; {{ formatDate(act.activityDate) }}
            </text>
            <text class="meta-item" v-if="act.location">
              &#x1F4CD; {{ act.location }}
            </text>
          </view>
          <view class="act-desc" v-if="act.description">{{ act.description }}</view>
          <view class="act-stats">
            <text class="stat-item">&#x1F465; {{ act.currentParticipants || 0 }}/{{ act.maxParticipants || 20 }}人</text>
            <text class="stat-item" v-if="act.price > 0">&#x1F4B0; {{ act.price / 100 }}元</text>
            <text class="stat-item free" v-else>免费</text>
          </view>
          <view class="act-actions" @click.stop>
            <view class="act-btn outline" @click="goToDetail(act.id)">
              <text>{{ act.status === 'draft' ? '编辑' : '查看' }}</text>
            </view>
            <view class="act-btn primary" v-if="act.status === 'draft'" @click="handlePublish(act.id)">
              <text>发布</text>
            </view>
            <view class="act-btn warning" v-if="act.status === 'published'" @click="handleCancel(act.id)">
              <text>取消</text>
            </view>
            <view class="act-btn danger" v-if="act.status === 'draft'" @click="handleDelete(act.id)">
              <text>删除</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="empty" v-else>
      <text class="empty-icon">&#x1F3E0;</text>
      <text class="empty-title">暂无活动</text>
      <text class="empty-desc">创建户外/自然/文化/体育等主题活动，吸引家庭参与</text>
      <view class="empty-btn" @click="goToCreate">
        <text>立即创建</text>
      </view>
    </view>

    <view class="loading" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
import { getActivityList, publishActivity, cancelActivity, deleteActivity } from '../../../utils/api.js'

export default {
  data() {
    return {
      activities: [],
      currentFilter: '',
      loading: false,
      filterOptions: [
        { value: '', label: '全部' },
        { value: 'draft', label: '草稿' },
        { value: 'published', label: '已发布' },
        { value: 'cancelled', label: '已取消' },
        { value: 'completed', label: '已完成' }
      ]
    }
  },
  onShow() {
    this.loadActivities()
  },
  methods: {
    loadActivities() {
      var self = this
      self.loading = true
      getActivityList(self.currentFilter).then(function(res) {
        self.loading = false
        if (res.code === 200) {
          self.activities = res.data || []
        }
      }).catch(function() {
        self.loading = false
      })
    },
    onFilterChange(value) {
      this.currentFilter = value
      this.loadActivities()
    },
    goToCreate() {
      uni.navigateTo({ url: '/pages/guide/activities/detail?activityId=0' })
    },
    goToDetail(activityId) {
      uni.navigateTo({ url: '/pages/guide/activities/detail?activityId=' + activityId })
    },
    handlePublish(activityId) {
      var self = this
      uni.showModal({
        title: '确认发布',
        content: '发布后活动将对外展示，是否继续？',
        success: function(res) {
          if (res.confirm) {
            uni.showLoading({ title: '发布中...' })
            publishActivity(activityId).then(function(res) {
              uni.hideLoading()
              if (res.code === 200) {
                uni.showToast({ title: '发布成功', icon: 'success' })
                self.loadActivities()
              } else {
                uni.showToast({ title: res.message || '发布失败', icon: 'none' })
              }
            }).catch(function() {
              uni.hideLoading()
              uni.showToast({ title: '网络异常', icon: 'none' })
            })
          }
        }
      })
    },
    handleCancel(activityId) {
      var self = this
      uni.showModal({
        title: '确认取消',
        content: '取消后活动将不再对外展示，是否继续？',
        success: function(res) {
          if (res.confirm) {
            cancelActivity(activityId).then(function(r) {
              if (r.code === 200) {
                uni.showToast({ title: '已取消', icon: 'success' })
                self.loadActivities()
              } else {
                uni.showToast({ title: r.message || '操作失败', icon: 'none' })
              }
            }).catch(function() {})
          }
        }
      })
    },
    handleDelete(activityId) {
      var self = this
      uni.showModal({
        title: '确认删除',
        content: '删除后无法恢复，是否确定删除？',
        success: function(res) {
          if (res.confirm) {
            deleteActivity(activityId).then(function(r) {
              if (r.code === 200) {
                uni.showToast({ title: '已删除', icon: 'success' })
                self.loadActivities()
              } else {
                uni.showToast({ title: r.message || '删除失败', icon: 'none' })
              }
            }).catch(function() {})
          }
        }
      })
    },
    statusText(status) {
      var map = { draft: '草稿', published: '已发布', cancelled: '已取消', completed: '已完成' }
      return map[status] || status || '草稿'
    },
    categoryIcon(category) {
      var map = { outdoor: '&#x26F5;', nature: '&#x1F33F;', culture: '&#x1F3A8;', sports: '&#x26BD;', other: '&#x1F3E0;' }
      return map[category] || '&#x1F3E0;'
    },
    formatDate(dateStr) {
      if (!dateStr) return ''
      var d = new Date(dateStr)
      var y = d.getFullYear()
      var m = ('0' + (d.getMonth() + 1)).slice(-2)
      var day = ('0' + d.getDate()).slice(-2)
      var h = ('0' + d.getHours()).slice(-2)
      var mi = ('0' + d.getMinutes()).slice(-2)
      return y + '-' + m + '-' + day + ' ' + h + ':' + mi
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 40rpx;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: #fff;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.btn-create {
  background: linear-gradient(135deg, #10B981, #059669);
  padding: 14rpx 32rpx;
  border-radius: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.3);
}

.btn-create:active { opacity: 0.8; }

.btn-create-text {
  color: #fff;
  font-size: 28rpx;
  font-weight: 500;
}

.filter-bar {
  background: #fff;
  padding: 0 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.filter-chips {
  display: flex;
  flex-direction: row;
  gap: 12rpx;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.filter-chip {
  flex-shrink: 0;
  padding: 10rpx 24rpx;
  border-radius: 20rpx;
  background: #f3f4f6;
  border: 1rpx solid #e5e7eb;
}

.filter-chip.active {
  background: #d1fae5;
  border-color: #10B981;
}

.filter-chip text {
  font-size: 26rpx;
  color: #666;
}

.filter-chip.active text {
  color: #059669;
  font-weight: 500;
}

.activity-list {
  padding: 20rpx 30rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.activity-card {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
  display: flex;
  flex-direction: row;
}

.act-cover {
  width: 200rpx;
  height: 200rpx;
  flex-shrink: 0;
}

.cover-img {
  width: 100%;
  height: 100%;
}

.act-cover.placeholder {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover-placeholder-text {
  font-size: 60rpx;
  color: #fff;
}

.act-body {
  flex: 1;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
}

.act-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8rpx;
}

.act-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 12rpx;
}

.act-status {
  font-size: 22rpx;
  padding: 4rpx 14rpx;
  border-radius: 14rpx;
  flex-shrink: 0;
}

.status-draft { background: #f3f4f6; color: #666; }
.status-published { background: #d1fae5; color: #059669; }
.status-cancelled { background: #fee2e2; color: #dc2626; }
.status-completed { background: #dbeafe; color: #2563eb; }

.act-meta {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  margin-bottom: 6rpx;
}

.meta-item {
  font-size: 24rpx;
  color: #888;
}

.act-desc {
  font-size: 24rpx;
  color: #888;
  line-height: 1.4;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.act-stats {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  margin-bottom: 12rpx;
}

.stat-item {
  font-size: 24rpx;
  color: #666;
}

.stat-item.free {
  color: #10B981;
  font-weight: 500;
}

.act-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-top: auto;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 12rpx;
}

.act-btn {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.act-btn:active { opacity: 0.7; }

.act-btn.outline {
  background: #f9fafb;
  color: #374151;
  border: 1rpx solid #e5e7eb;
}

.act-btn.primary {
  background: #10B981;
  color: #fff;
}

.act-btn.warning {
  background: #fee2e2;
  color: #dc2626;
}

.act-btn.danger {
  background: #fee2e2;
  color: #dc2626;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 40rpx 80rpx;
}

.empty-icon {
  font-size: 100rpx;
  margin-bottom: 20rpx;
}

.empty-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 12rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 40rpx;
}

.empty-btn {
  background: linear-gradient(135deg, #10B981, #059669);
  padding: 16rpx 48rpx;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.3);
}

.empty-btn:active { opacity: 0.8; }

.empty-btn text {
  color: #fff;
  font-size: 28rpx;
  font-weight: 500;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}
</style>