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

<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header">
      <text class="title">我的任务模板</text>
      <button class="btn-create" @click="goToCreate">创建任务模板</button>
    </view>

    <!-- 任务模板列表 -->
    <view class="package-list" v-if="packages.length > 0">
      <view 
        class="package-card" 
        v-for="pkg in packages" 
        :key="pkg.id"
        @click="goToDetail(pkg.id)"
      >
        <view class="package-header">
          <text class="package-name">{{ pkg.name }}</text>
          <text class="package-status" :class="pkg.status">{{ getStatusText(pkg.status) }}</text>
        </view>
        <view class="package-info">
          <text class="info-item">周期: {{ pkg.cycleDays }}天</text>
          <text class="info-item">价格: {{ formatPriceWithSymbol(pkg.price) }}</text>
        </view>
        <view class="package-desc">{{ pkg.description || '暂无描述' }}</view>
        <view class="package-actions">
          <button 
            v-if="pkg.status === 'draft'" 
            class="btn-action" 
            @click.stop="submitReview(pkg.id)"
          >提交审核</button>
          <button 
            v-if="pkg.status === 'approved'" 
            class="btn-action" 
            @click.stop="togglePublish(pkg)"
          >{{ pkg.status === 'offline' ? '发布' : '下架' }}</button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty" v-else>
      <text class="empty-text">暂无任务模板，快去创建一个吧</text>
    </view>
  </view>
</template>

<script>
import { getMyPackages, submitPackageForReview, publishPackage } from '@/utils/api.js'

export default {
  data() {
    return {
      packages: []
    }
  },
  onShow() {
    this.loadPackages()
  },
  methods: {
    async loadPackages() {
      try {
        const res = await getMyPackages()
        this.packages = res.data || []
      } catch (e) {
        console.error(e)
      }
    },
    getStatusText(status) {
      const map = {
        'draft': '草稿',
        'pending': '待审核',
        'approved': '已发布',
        'rejected': '已拒绝',
        'offline': '已下架'
      }
      return map[status] || status
    },
    goToCreate() {
      uni.navigateTo({
        url: '/pages/guide/packages/create'
      })
    },
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/guide/packages/detail?id=${id}`
      })
    },
    async submitReview(id) {
      uni.showLoading({ title: '提交中...' })
      try {
        await submitPackageForReview(id)
        uni.showToast({ title: '提交成功' })
        this.loadPackages()
      } catch (e) {
        uni.showToast({ title: '提交失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },
    async togglePublish(pkg) {
      const publish = pkg.status === 'offline'
      uni.showLoading({ title: publish ? '发布中...' : '下架中...' })
      try {
        await publishPackage(pkg.id, publish)
        uni.showToast({ title: publish ? '发布成功' : '已下架' })
        this.loadPackages()
      } catch (e) {
        uni.showToast({ title: '操作失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 30rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

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

.btn-create {
  background: #4CAF50;
  color: #fff;
  font-size: 28rpx;
  padding: 16rpx 30rpx;
  border-radius: 30rpx;
}

.package-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.package-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.package-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.package-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.package-status {
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.package-status.draft { background: #f0f0f0; color: #666; }
.package-status.pending { background: #fff3e0; color: #ff9800; }
.package-status.approved { background: #e8f5e9; color: #4CAF50; }
.package-status.rejected { background: #ffebee; color: #f44336; }
.package-status.offline { background: #f5f5f5; color: #999; }

.package-info {
  display: flex;
  gap: 30rpx;
  margin-bottom: 16rpx;
}

.info-item {
  font-size: 26rpx;
  color: #666;
}

.package-desc {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 16rpx;
}

.package-actions {
  display: flex;
  gap: 20rpx;
}

.btn-action {
  font-size: 26rpx;
  padding: 12rpx 24rpx;
  border-radius: 24rpx;
  background: #f0f0f0;
  color: #333;
}

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
}

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