cfc/cfc-frontend/pages/parent/wishes/index.vue

<template>
  <view class="container">
    <view v-if="hasFamily">
    <!-- 标签页切换 -->
    <view class="tabs">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'pending' }"
        @click="activeTab = 'pending'"
      >
        待处理
        <text class="badge" v-if="pendingCount > 0">{{ pendingCount }}</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'all' }"
        @click="activeTab = 'all'"
      >
        全部心愿
      </view>
    </view>

    <!-- 待处理列表 -->
    <view class="wish-list" v-if="activeTab === 'pending'">
      <!-- 待定价 -->
      <view class="section" v-if="draftWishes.length > 0">
        <view class="section-title">📝 待定价</view>
        <view 
          v-for="wish in draftWishes" 
          :key="wish.id" 
          class="wish-card"
        >
          <view class="wish-info">
            <text class="wish-child">{{ wish.childName }}</text>
            <text class="wish-title">{{ wish.title }}</text>
            <text class="wish-category" v-if="wish.category">{{ wish.category }}</text>
          </view>
          <view class="wish-actions">
            <button class="btn-price" @click="showPriceDialog(wish)">定价</button>
            <button class="btn-reject" @click="rejectWish(wish)">拒绝</button>
          </view>
        </view>
      </view>

      <!-- 待审批兑换 -->
      <view class="section" v-if="pendingExchangeWishes.length > 0">
        <view class="section-title">⏳ 待审批兑换</view>
        <view 
          v-for="wish in pendingExchangeWishes" 
          :key="wish.id" 
          class="wish-card"
        >
          <view class="wish-info">
            <text class="wish-child">{{ wish.childName }}</text>
            <text class="wish-title">{{ wish.title }}</text>
            <text class="wish-points">{{ wish.pointsRequired }}积分</text>
          </view>
          <view class="wish-actions">
            <button class="btn-approve" @click="approveExchange(wish, true)">批准</button>
            <button class="btn-reject" @click="approveExchange(wish, false)">拒绝</button>
          </view>
        </view>
      </view>

      <!-- 待兑现 -->
      <view class="section" v-if="approvedWishes.length > 0">
        <view class="section-title">📦 待兑现</view>
        <view 
          v-for="wish in approvedWishes" 
          :key="wish.id" 
          class="wish-card"
        >
          <view class="wish-info">
            <text class="wish-child">{{ wish.childName }}</text>
            <text class="wish-title">{{ wish.title }}</text>
            <text class="wish-points">已扣{{ wish.pointsRequired }}积分</text>
          </view>
          <view class="wish-actions">
            <button class="btn-fulfill" @click="markFulfilled(wish)">已购买</button>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty" v-if="pendingWishes.length === 0">
        <text class="empty-icon">✅</text>
        <text class="empty-text">暂无待处理心愿</text>
      </view>
    </view>

    <!-- 全部心愿列表 -->
    <view class="wish-list" v-if="activeTab === 'all'">
      <view 
        v-for="wish in allWishes" 
        :key="wish.id" 
        class="wish-card"
        :class="wish.status"
      >
        <view class="wish-header">
          <view class="wish-info-left">
            <text class="wish-child">{{ wish.childName }}</text>
            <text class="wish-title">{{ wish.title }}</text>
          </view>
          <text class="wish-status" :class="wish.status">{{ wish.statusText }}</text>
        </view>
        <view class="wish-meta">
          <text class="wish-points" v-if="wish.pointsRequired">{{ wish.pointsRequired }}积分</text>
          <text class="wish-time">{{ wish.createdAt }}</text>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty" v-if="allWishes.length === 0">
        <text class="empty-icon">🎁</text>
        <text class="empty-text">暂无心愿</text>
      </view>
    </view>

    <!-- 定价弹窗 -->
    <view class="modal-mask" v-if="priceDialogVisible" @click="priceDialogVisible = false">
      <view class="modal" @click.stop>
        <view class="modal-title">设置积分</view>
        <view class="modal-content">
          <text class="modal-wish-title">{{ currentWish && currentWish.title }}</text>
          <view class="input-row">
            <text class="inputLabel">所需积分：</text>
            <input 
              type="number" 
              v-model="priceValue" 
              placeholder="请输入积分"
              class="price-input"
            />
          </view>
        </view>
        <view class="modal-btns">
          <button class="btn-cancel" @click="priceDialogVisible = false">取消</button>
          <button class="btn-confirm" @click="submitPrice">确定</button>
        </view>
      </view>
    </view>
    </view>

    <view v-else>
      <FamilyEmptyState type="card" />
    </view>
  </view>
</template>

<script>
import { 
  getPendingWishes, 
  getWishes, 
  setWishPrice, 
  rejectWish,
  approveWishExchange,
  markWishFulfilled
} from '../../../utils/api.js'

export default {
  data() {
    return {
      activeTab: 'pending',
      memberId: '',
      childName: '',
      pendingWishes: [],
      allWishes: [],
      priceDialogVisible: false,
      currentWish: null,
      priceValue: ''
    }
  },
  computed: {
    hasFamily: function() {
      return this.$store.getters.hasFamily
    },
    pendingCount() {
      return this.pendingWishes.length
    },
    draftWishes() {
      return this.pendingWishes.filter(w => w.status === 'draft')
    },
    pendingExchangeWishes() {
      return this.pendingWishes.filter(w => w.status === 'pending_exchange')
    },
    approvedWishes() {
      return this.pendingWishes.filter(w => w.status === 'approved')
    }
  },
  onShow() {
    this.loadData()
  },
  onLoad(options) {
    if (options.memberId) {
      this.memberId = options.memberId
      this.childName = options.childName || '该孩子'
    }
  },
  methods: {
    async loadData() {
      try {
        // 获取待处理列表
        const pendingRes = await getPendingWishes()
        let wishes = pendingRes.data || []

        // 如果指定了 memberId，按孩子过滤
        if (this.memberId) {
          wishes = wishes.filter(w => String(w.memberId) === String(this.memberId))
        }
        this.pendingWishes = wishes
        
        // 获取全部心愿
        const allRes = await getWishes({})
        let allWishes = allRes.data || []
        if (this.memberId) {
          allWishes = allWishes.filter(w => String(w.memberId) === String(this.memberId))
        }
        this.allWishes = allWishes
      } catch (e) {
        console.error('加载数据失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      }
    },
    
    showPriceDialog(wish) {
      this.currentWish = wish
      this.priceValue = ''
      this.priceDialogVisible = true
    },
    
    async submitPrice() {
      const points = parseInt(this.priceValue)
      if (!points || points <= 0) {
        uni.showToast({ title: '请输入有效积分', icon: 'none' })
        return
      }
      
      try {
        await setWishPrice(this.currentWish.id, points)
        uni.showToast({ title: '定价成功', icon: 'success' })
        this.priceDialogVisible = false
        this.loadData()
      } catch (e) {
        uni.showToast({ title: e.message || '定价失败', icon: 'none' })
      }
    },
    
    async rejectWish(wish) {
      uni.showModal({
        title: '拒绝心愿',
        content: `确定要拒绝"${wish.title}"吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              await rejectWish(wish.id, '不合适')
              uni.showToast({ title: '已拒绝', icon: 'success' })
              this.loadData()
            } catch (e) {
              uni.showToast({ title: '操作失败', icon: 'none' })
            }
          }
        }
      })
    },
    
    async approveExchange(wish, approved) {
      const action = approved ? '批准' : '拒绝'
      uni.showModal({
        title: `${action}兑换`,
        content: `确定要${action}"${wish.title}"的兑换申请吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              await approveWishExchange(wish.id, approved)
              uni.showToast({ title: `已${action}`, icon: 'success' })
              this.loadData()
            } catch (e) {
              uni.showToast({ title: e.message || '操作失败', icon: 'none' })
            }
          }
        }
      })
    },
    
    async markFulfilled(wish) {
      uni.showModal({
        title: '标记已购买',
        content: `确定已购买"${wish.title}"吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              await markWishFulfilled(wish.id)
              uni.showToast({ title: '已标记', icon: 'success' })
              this.loadData()
            } catch (e) {
              uni.showToast({ title: '操作失败', icon: 'none' })
            }
          }
        }
      })
    }
  }
}
</script>

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

/* 标签页 */
.tabs {
  display: flex;
  background: #fff;
  border-radius: 50rpx;
  padding: 8rpx;
  margin-bottom: 30rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 16rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
}

.badge {
  position: absolute;
  top: 4rpx;
  right: 20rpx;
  background: #F97316;
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 20rpx;
  min-width: 30rpx;
  text-align: center;
}

.tab-item.active .badge {
  background: #fff;
  color: #F97316;
}

/* 分组 */
.section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  padding-left: 10rpx;
}

/* 心愿卡片 */
.wish-card {
  background: #fff;
  border-radius: 15rpx;
  padding: 25rpx;
  margin-bottom: 15rpx;
}

.wish-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.wish-info {
  flex: 1;
}

.wish-info-left {
  flex: 1;
}

.wish-child {
  font-size: 24rpx;
  color: #F97316;
  background: #FFF5F5;
  padding: 4rpx 12rpx;
  border-radius: 10rpx;
  margin-right: 10rpx;
}

.wish-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-left: 10rpx;
}

.wish-category {
  font-size: 24rpx;
  color: #666;
  background: #f5f5f5;
  padding: 4rpx 12rpx;
  border-radius: 10rpx;
  margin-left: 10rpx;
}

.wish-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 15rpx;
}

.wish-points {
  font-size: 26rpx;
  color: #F97316;
  font-weight: bold;
}

.wish-time {
  font-size: 24rpx;
  color: #999;
}

.wish-status {
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  background: #f0f0f0;
  color: #666;
}

.wish-status.active { background: #D1FAE5; color: #059669; }
.wish-status.pending_exchange { background: #FEF3C7; color: #D97706; }
.wish-status.approved { background: #DBEAFE; color: #2563EB; }
.wish-status.exchanging { background: #DBEAFE; color: #2563EB; }
.wish-status.fulfilled { background: #EDE9FE; color: #7C3AED; }

.wish-actions {
  display: flex;
  gap: 15rpx;
  margin-top: 20rpx;
}

.btn-price, .btn-approve, .btn-fulfill {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 26rpx;
  padding: 12rpx 24rpx;
  border-radius: 30rpx;
  margin: 0;
}

.btn-reject {
  background: #fff;
  color: #999;
  border: 1rpx solid #ddd;
  font-size: 26rpx;
  padding: 12rpx 24rpx;
  border-radius: 30rpx;
  margin: 0;
}

/* 空状态 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx;
}

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

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 弹窗 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 80%;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}

.modal-content {
  margin-bottom: 30rpx;
}

.modal-wish-title {
  font-size: 28rpx;
  color: #333;
  display: block;
  text-align: center;
  margin-bottom: 30rpx;
}

.input-row {
  display: flex;
  align-items: center;
}

.inputLabel {
  font-size: 28rpx;
  color: #333;
}

.price-input {
  flex: 1;
  background: #f5f5f5;
  border-radius: 15rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

.modal-btns {
  display: flex;
  gap: 20rpx;
}

.btn-cancel, .btn-confirm {
  flex: 1;
  padding: 20rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.btn-cancel {
  background: #f5f5f5;
  color: #666;
}

.btn-confirm {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
}
</style>