cfc/cfc-frontend/pages/rewards/rewards.vue

<template>
  <view class="container">
    <view class="reward-list" v-if="rewards.length > 0">
      <view v-for="reward in rewards" :key="reward.id" class="reward-item">
        <view class="reward-info">
          <view class="reward-title">{{ reward.title }}</view>
          <view class="reward-progress">
            <progress 
              :percent="(currentPoints / reward.pointsRequired) * 100" 
              stroke-width="6" 
              activeColor="#F97316"
              backgroundColor="#eee"
            />
            <text class="progress-text">{{ currentPoints }}/{{ reward.pointsRequired }}积分</text>
          </view>
        </view>
        <button 
          class="btn-exchange" 
          :disabled="currentPoints < reward.pointsRequired"
          @click="exchangeReward(reward.id)"
        >
          兑换
        </button>
      </view>
    </view>
    
    <view class="empty" v-else>
      <text>暂无心愿单，快去添加吧</text>
    </view>

    <button class="btn-primary add-btn" @click="showAddModal = true">
      + 添加心愿
    </button>

    <!-- 添加心愿弹窗 -->
    <view class="modal-mask" v-if="showAddModal" @click="showAddModal = false">
      <view class="modal" @click.stop>
        <view class="modal-title">{{ currentRole === 'child' ? '添加心愿' : '添加心愿' }}</view>
        
        <view class="form-item">
          <view class="form-label">心愿名称 <text class="required">*</text></view>
          <input v-model="newReward.title" placeholder="请输入心愿名称" />
        </view>
        
        <!-- 家长模式可以填写积分，孩子模式不需要填写积分 -->
        <view class="form-item" v-if="currentRole === 'parent'">
          <view class="form-label">所需积分 <text class="required">*</text></view>
          <input v-model="newReward.pointsRequired" type="number" placeholder="请输入所需积分" />
        </view>
        
        <!-- 孩子模式提示 -->
        <view class="form-tip" v-if="currentRole === 'child'">
          <text>孩子创建心愿后，需要家长填写所需积分才能生效</text>
        </view>
        
        <view class="modal-btns">
          <button @click="showAddModal = false">取消</button>
          <button class="btn-primary" @click="createReward">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config.js'
import { getWishlist, exchangeReward as exchangeRewardApi, createReward as createRewardApi, getPointsBalance, getChildren, getParentWishlist, createParentWishlist, exchangeParentWishlist } from '../../utils/api.js'

export default {
  data() {
    return {
      rewards: [],
      currentPoints: 0,
      currentChildId: '',
      currentRole: 'parent',  // 当前角色: parent/child
      showAddModal: false,
      newReward: {
        title: '',
        pointsRequired: ''
      }
    }
  },
  onShow() {
    // 规划师角色跳转到消息页
    const role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    if (role === 'teacher') {
      uni.redirectTo({ url: '/pages/teacher/messages' })
      return
    }
    this.loadRewards()
  },
  methods: {
    async loadRewards() {
      // 获取当前角色用于判断加载哪个API
      const currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
      try {
        if (currentRole === 'parent') {
          // 家长模式：使用家长心愿单API
          const res = await getParentWishlist()
          this.rewards = res.data || []
          // 家长积分从用户信息获取
          const userInfo = await this.getUserInfo()
          this.currentPoints = userInfo.totalPoints || 0
        } else {
          // 孩子模式：使用孩子心愿单API
          const childrenRes = await getChildren()
          const children = childrenRes.data
          if (children && children.length > 0) {
            this.currentChildId = children[0].id
            
            const balanceRes = await getPointsBalance(this.currentChildId)
            this.currentPoints = balanceRes.data.balance
            
            const res = await getWishlist(this.currentChildId)
            this.rewards = res.data || []
          }
        }
      } catch (e) {
        console.error('加载心愿单失败', e)
      }
    },
    async getUserInfo() {
      return new Promise((resolve, reject) => {
        uni.request({
          url: config.api('/api/user/info'),
          method: 'POST',
          header: {
            'Authorization': 'Bearer ' + uni.getStorageSync('token')
          },
          success: (res) => {
            if (res.data.code === 200) {
              resolve(res.data.data)
            } else {
              reject(res.data)
            }
          },
          fail: reject
        })
      })
    },
    async exchangeReward(rewardId) {
      uni.showModal({
        title: '确认兑换',
        content: '确定要兑换这个奖励吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              if (this.currentRole === 'parent') {
                await exchangeParentWishlist(rewardId)
              } else {
                await exchangeRewardApi(rewardId, this.currentChildId)
              }
              uni.showToast({ title: '兑换成功', icon: 'success' })
              this.loadRewards()
            } catch (e) {
              console.error('兑换失败', e)
            }
          }
        }
      })
    },
    goToBadge() {
      uni.navigateTo({ url: '/pages/rewards/badge' })
    },
    async createReward() {
      if (!this.newReward.title) {
        uni.showToast({ title: '请填写心愿名称', icon: 'none' })
        return
      }
      
      try {
        if (this.currentRole === 'parent') {
          // 家长模式：创建家长心愿，需要填写积分
          if (!this.newReward.pointsRequired) {
            uni.showToast({ title: '请填写所需积分', icon: 'none' })
            return
          }
          await createParentWishlist({
            title: this.newReward.title,
            pointsRequired: parseInt(this.newReward.pointsRequired)
          })
          uni.showToast({ title: '添加成功', icon: 'success' })
        } else {
          // 孩子模式：创建孩子心愿，积分为0，等待家长填写
          await createRewardApi({
            title: this.newReward.title,
            memberId: this.currentChildId
            // pointsRequired不传，默认为0
          })
          uni.showToast({ title: '已提交，等待家长填写积分', icon: 'success' })
        }
        this.showAddModal = false
        this.newReward = { title: '', pointsRequired: '' }
        this.loadRewards()
      } catch (e) {
        console.error('添加心愿失败', e)
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  padding-bottom: 120rpx;
}


.nav-item {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.nav-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}
.nav-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.reward-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reward-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.reward-progress {
  width: 400rpx;
}

.progress-text {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-top: 8rpx;
}

.btn-exchange {
  background: #F97316;
  color: #fff;
  font-size: 26rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
}

.btn-exchange[disabled] {
  background: #ccc;
}

.add-btn {
  position: fixed;
  bottom: 30rpx;
  left: 30rpx;
  right: 30rpx;
}

.empty {
  text-align: center;
  color: #999;
  padding: 100rpx;
}

.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;
  margin-bottom: 30rpx;
  text-align: center;
}

.form-item {
  margin-bottom: 20rpx;
}

.form-item input {
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.form-label .required {
  color: #F97316;
}

.form-tip {
  font-size: 24rpx;
  color: #999;
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

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

.modal-btns button {
  flex: 1;
}
</style>