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

<template>
  <view class="container">
    <!-- 任务模板信息 -->
    <view class="package-info">
      <view class="info-header">
        <text class="name">{{ pkg.name }}</text>
        <text class="status" :class="pkg.status">{{ getStatusText(pkg.status) }}</text>
      </view>
      <view class="info-row">
        <text>周期: {{ pkg.cycleDays }}天</text>
        <text>价格: {{ formatPriceWithSymbol(pkg.price) }}</text>
      </view>
      <view class="info-desc">{{ pkg.description }}</view>
      <view class="share-code" v-if="pkg.shareCode">
        <text>分享码: {{ pkg.shareCode }}</text>
        <text class="copy" @click="copyCode">复制</text>
      </view>
    </view>

    <!-- 任务项列表 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">任务项</text>
        <button class="btn-add" @click="showAddItem">添加</button>
      </view>
      
      <view class="item-list">
        <view 
          class="item-card" 
          v-for="item in items" 
          :key="item.id"
        >
          <view class="item-header">
            <text class="item-name">{{ item.taskName }}</text>
            <text class="item-required" v-if="item.isRequired">必选</text>
          </view>
          <view class="item-info">
            <text>积分: {{ item.points }}</text>
            <text>频率: {{ item.frequency }}</text>
            <text>时长: {{ item.duration }}分钟</text>
          </view>
          <view class="item-actions">
            <text class="action-edit" @click="editItem(item)">编辑</text>
            <text class="action-delete" @click="deleteItem(item.id)">删除</text>
          </view>
        </view>
      </view>

      <view class="empty-items" v-if="items.length === 0">
        <text>暂无任务项，请添加</text>
      </view>
    </view>

    <!-- 添加/编辑任务项弹窗 -->
    <uni-popup ref="itemPopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text>{{ editingItem ? '编辑任务项' : '添加任务项' }}</text>
          <text class="close" @click="closePopup">×</text>
        </view>
        <view class="popup-form">
          <view class="form-item">
            <text class="label">任务名称</text>
            <input class="input" v-model="itemForm.taskName" placeholder="任务名称" />
          </view>
          <view class="form-item">
            <text class="label">描述</text>
            <textarea class="textarea" v-model="itemForm.description" placeholder="任务描述" />
          </view>
          <view class="form-item">
            <text class="label">积分</text>
            <input class="input" type="number" v-model="itemForm.points" placeholder="积分" />
          </view>
          <view class="form-item">
            <text class="label">频率</text>
            <picker :range="frequencies" @change="onFreqChange">
              <view class="picker">{{ itemForm.frequency || '请选择' }}</view>
            </picker>
          </view>
          <view class="form-item">
            <text class="label">预计时长(分钟)</text>
            <input class="input" type="number" v-model="itemForm.duration" />
          </view>
          <view class="form-item">
            <text class="label">必选</text>
            <switch v-model="itemForm.isRequired" />
          </view>
          <button class="btn-save" @click="saveItem">保存</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { 
  getPackage, 
  getPackageItems, 
  addPackageItem, 
  updatePackageItem, 
  deletePackageItem 
} from '@/utils/api.js'

export default {
  data() {
    return {
      pkgId: null,
      pkg: {},
      items: [],
      editingItem: null,
      itemForm: {
        taskName: '',
        description: '',
        points: 10,
        frequency: 'daily',
        duration: 30,
        isRequired: false
      },
      frequencies: ['daily', 'weekly', 'custom']
    }
  },
  onLoad(options) {
    this.pkgId = options.id
    this.loadPackage()
    this.loadItems()
  },
  methods: {
    async loadPackage() {
      try {
        const res = await getPackage(this.pkgId)
        this.pkg = res.data || {}
      } catch (e) {
        console.error(e)
      }
    },
    async loadItems() {
      try {
        const res = await getPackageItems(this.pkgId)
        this.items = res.data || []
      } catch (e) {
        console.error(e)
      }
    },
    getStatusText(status) {
      const map = { 'draft': '草稿', 'pending': '待审核', 'approved': '已发布', 'rejected': '已拒绝' }
      return map[status] || status
    },
    copyCode() {
      uni.setClipboardData({ data: this.pkg.shareCode })
      uni.showToast({ title: '已复制' })
    },
    showAddItem() {
      this.editingItem = null
      this.itemForm = { taskName: '', description: '', points: 10, frequency: 'daily', duration: 30, isRequired: false }
      this.$refs.itemPopup.open()
    },
    editItem(item) {
      this.editingItem = item
      this.itemForm = { ...item, isRequired: !!item.isRequired }
      this.$refs.itemPopup.open()
    },
    onFreqChange(e) {
      this.itemForm.frequency = this.frequencies[e.detail.value]
    },
    closePopup() {
      this.$refs.itemPopup.close()
    },
    async saveItem() {
      if (!this.itemForm.taskName) {
        uni.showToast({ title: '请输入任务名称', icon: 'none' })
        return
      }
      try {
        const data = { ...this.itemForm, packageId: this.pkgId, isRequired: this.itemForm.isRequired ? 1 : 0 }
        if (this.editingItem) {
          await updatePackageItem(this.editingItem.id, data)
        } else {
          await addPackageItem(this.pkgId, data)
        }
        uni.showToast({ title: '保存成功' })
        this.closePopup()
        this.loadItems()
      } catch (e) {
        uni.showToast({ title: '保存失败', icon: 'none' })
      }
    },
    async deleteItem(id) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个任务项吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await deletePackageItem(id)
              uni.showToast({ title: '已删除' })
              this.loadItems()
            } catch (e) {
              uni.showToast({ title: '删除失败', icon: 'none' })
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.container { min-height: 100vh; background: #f5f5f5; }
.package-info { background: #fff; padding: 30rpx; margin-bottom: 20rpx; }
.info-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; }
.name { font-size: 34rpx; font-weight: bold; color: #333; }
.status { font-size: 24rpx; padding: 8rpx 16rpx; border-radius: 20rpx; background: #f0f0f0; color: #666; }
.info-row { display: flex; gap: 30rpx; font-size: 26rpx; color: #666; margin-bottom: 16rpx; }
.info-desc { font-size: 26rpx; color: #999; margin-bottom: 16rpx; }
.share-code { display: flex; justify-content: space-between; font-size: 26rpx; color: #4CAF50; }
.copy { color: #4CAF50; }

.section { background: #fff; padding: 30rpx; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }
.section-title { font-size: 30rpx; font-weight: bold; }
.btn-add { background: #4CAF50; color: #fff; font-size: 24rpx; padding: 12rpx 24rpx; border-radius: 24rpx; }

.item-list { display: flex; flex-direction: column; gap: 16rpx; }
.item-card { background: #f9f9f9; padding: 20rpx; border-radius: 12rpx; }
.item-header { display: flex; justify-content: space-between; margin-bottom: 12rpx; }
.item-name { font-size: 28rpx; font-weight: bold; }
.item-required { font-size: 22rpx; color: #ff9800; }
.item-info { display: flex; gap: 20rpx; font-size: 24rpx; color: #666; margin-bottom: 12rpx; }
.item-actions { display: flex; gap: 20rpx; justify-content: flex-end; }
.action-edit { color: #4CAF50; font-size: 26rpx; }
.action-delete { color: #f44336; font-size: 26rpx; }
.empty-items { text-align: center; padding: 40rpx; color: #999; }

.popup-content { background: #fff; border-radius: 24rpx 24rpx 0 0; padding: 30rpx; max-height: 80vh; overflow-y: auto; }
.popup-header { display: flex; justify-content: space-between; font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; }
.close { font-size: 48rpx; color: #999; }
.popup-form .form-item { margin-bottom: 24rpx; }
.popup-form .label { display: block; font-size: 26rpx; color: #333; margin-bottom: 12rpx; }
.popup-form .input, .popup-form .textarea { width: 100%; padding: 16rpx; background: #f5f5f5; border-radius: 8rpx; }
.popup-form .textarea { height: 100rpx; }
.popup-form .picker { padding: 16rpx; background: #f5f5f5; border-radius: 8rpx; }
.btn-save { background: #4CAF50; color: #fff; border-radius: 40rpx; margin-top: 20rpx; }
</style>