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

<template>
  <view class="container">
    <!-- 退出切换按钮 -->
    <view class="exit-switch" v-if="isSwitchedChild" @click="exitSwitch">
      <text>🔄 退出切换</text>
    </view>
    
    <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="reward.pointsRequired > 0 ? (currentPoints / reward.pointsRequired) * 100 : 0" stroke-width="6" activeColor="#F97316" backgroundColor="#eee" />
            <text class="progress-text">{{ currentPoints }}/{{ reward.pointsRequired }}积分</text>
          </view>
        </view>
      </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">添加心愿</view>
        <view class="form-item">
          <view class="form-label">心愿名称 <text class="required">*</text></view>
          <input v-model="newReward.title" placeholder="请输入心愿名称" />
        </view>
        <view class="form-tip">
          <text>孩子创建心愿后，需要家长填写所需积分才能生效</text>
        </view>
        <view class="modal-btns">
          <button @click="showAddModal = false">取消</button>
          <button class="btn-primary" @click="createChildReward">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getWishlist, createReward as createRewardApi, getPointsBalance, getChildren, switchBackToParent, verifyPassword } from '../../utils/api.js'

export default {
  data() {
    return {
      rewards: [],
      currentPoints: 0,
      currentChildId: '',
      showAddModal: false,
      newReward: { title: '' },
      isSwitchedChild: false // 家长切换到孩子状态的标记
    }
  },
  onShow() {
    this.isSwitchedChild = uni.getStorageSync('isSwitchedChild') || false
    this.loadRewards()
  },
  methods: {
    async loadRewards() {
      try {
        const childrenRes = await getChildren()
        const children = childrenRes.data || []
        const storedChildId = uni.getStorageSync('currentChildId')
        const currentChild = children.find(c => c.id == storedChildId) || children[0]
        if (!currentChild) {
          this.rewards = []
          this.currentPoints = 0
          return
        }
        this.currentChildId = currentChild.id
        const balanceRes = await getPointsBalance(currentChild.id)
        this.currentPoints = balanceRes.data.balance
        const res = await getWishlist(currentChild.id)
        this.rewards = res.data || []
      } catch (e) {
        console.error('加载心愿单失败', e)
      }
    },
    async createChildReward() {
      if (!this.newReward.title) {
        uni.showToast({ title: '请填写心愿名称', icon: 'none' })
        return
      }
      try {
        await createRewardApi({ title: this.newReward.title, memberId: this.currentChildId })
        uni.showToast({ title: '已提交，等待家长填写积分', icon: 'success' })
        this.showAddModal = false
        this.newReward.title = ''
        this.loadRewards()
      } catch (e) {
        console.error('添加心愿失败', e)
      }
    },
    exitSwitch() {
      if (!this.isSwitchedChild) return
      
      uni.showModal({
        title: '退出切换',
        content: '请输入家长密码以确认退出',
        editable: true,
        success: async (res) => {
          if (res.confirm && res.content) {
            try {
              const verifyResult = await verifyPassword(res.content)
              if (verifyResult.code === 200) {
                await this.switchBackToParentMode()
              } else {
                uni.showToast({ title: '密码错误', icon: 'none' })
              }
            } catch (e) {
              uni.showToast({ title: '密码验证失败', icon: 'none' })
            }
          }
        }
      })
    },
    async switchBackToParentMode() {
      try {
        const result = await switchBackToParent()
        if (result.data) {
          this.$store.commit('switchBackToParent')
          uni.showToast({ title: '已切换回家长模式', icon: 'success' })
          uni.reLaunch({ url: '/pages/home-pages/parent-index' })
        }
      } catch (e) { 
        uni.showToast({ title: '切换失败', icon: 'none' }) 
      }
    }
  }
}
</script>

<style scoped>
.container { padding: 30rpx; padding-bottom: 120rpx; }
.exit-switch { background: #f5f5f5; padding: 20rpx; border-radius: 10rpx; margin-bottom: 20rpx; text-align: center; color: #666; font-size: 28rpx; }
.reward-item { background: #fff; border-radius: 16rpx; padding: 30rpx; margin-bottom: 20rpx; }
.reward-title { font-size: 30rpx; color: #333; margin-bottom: 15rpx; }
.reward-progress { width: 100%; }
.progress-text { font-size: 22rpx; color: #999; display: block; margin-top: 8rpx; }
.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-label { font-size: 28rpx; color: #333; margin-bottom: 10rpx; }
.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>