cfc/cfc-frontend/components/MicroActionCard.vue

<template>
  <view class="micro-action-card">
    <view class="mac-header">
      <text class="mac-title">☕️ 今天的小行动</text>
      <text class="mac-status" v-if="completed">已完成 ✅</text>
      <text class="mac-status" v-else>点击完成 +1能量</text>
    </view>
    <view class="mac-body">
      <template v-if="loading">
        <view class="mac-loading">
          <text class="mac-loading-text">加载中...</text>
        </view>
      </template>
      <template v-else-if="completed">
        <view class="mac-done">
          <view class="mac-done-icon">✓</view>
          <text class="mac-done-text">今日微行动已完成</text>
        </view>
        <text class="mac-energy">+1 身能量</text>
      </template>
      <template v-else-if="!action">
        <view class="mac-empty">
          <text class="mac-empty-text">所有行动已就绪</text>
        </view>
      </template>
      <template v-else>
        <view class="mac-action-display">
          <text class="mac-action-icon">{{ action.icon }}</text>
          <text class="mac-action-name">{{ action.name }}</text>
          <text class="mac-action-desc">{{ action.description }}</text>
        </view>
        <view class="mac-action-btn" @click="doComplete">
          <text class="mac-btn-text">完成</text>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
import api from '@/utils/api.js'
export default {
  props: {
    memberId: { type: Number, default: null }
  },
  data: function() {
    return {
      action: null,
      completed: false,
      loading: false
    }
  },
  created: function() {
    this.loadTodayAction()
  },
  methods: {
    loadTodayAction: function() {
      if (!this.memberId) return
      var self = this
      this.loading = true
      api.microActionToday({ memberId: self.memberId }).then(function(res) {
        self.loading = false
        if (res.data) {
          self.action = res.data.action
          self.completed = res.data.completed
        }
      }).catch(function() {
        self.loading = false
        self.action = null
      })
    },
    doComplete: function() {
      if (!this.memberId) {
        uni.showToast({ title: '请先选择孩子', icon: 'none' })
        return
      }
      if (!this.action) return
      if (this.loading) return
      var self = this
      this.loading = true
      api.microActionComplete({
        memberId: self.memberId,
        actionId: self.action.id
      }).then(function(res) {
        self.loading = false
        if (res.code === 200) {
          self.completed = true
          uni.showToast({ title: '太棒了！+1能量', icon: 'none' })
          self.$emit('completed')
        }
      }).catch(function(err) {
        self.loading = false
        // Error already shown by api.js interceptor
      })
    }
  },
  watch: {
    memberId: function() {
      this.action = null
      this.completed = false
      this.loadTodayAction()
    }
  }
}
</script>

<style scoped>
.micro-action-card {
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  border-radius: 20rpx;
  padding: 24rpx;
  margin: 20rpx 20rpx 0 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  border: 1rpx solid #FED7AA;
}
.mac-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.mac-title { font-size: 28rpx; font-weight: 700; color: #9A3412; }
.mac-status { font-size: 22rpx; color: #EA580C; }
.mac-body { display: flex; flex-direction: column; align-items: center; }
.mac-loading { padding: 20rpx 0; }
.mac-loading-text { font-size: 24rpx; color: #999; }
.mac-done {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 12rpx 0;
}
.mac-done-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  background: linear-gradient(135deg, #10B981, #34D399);
  color: #fff;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mac-done-text { font-size: 28rpx; color: #10B981; font-weight: 600; }
.mac-energy { font-size: 22rpx; color: #999; margin-top: 6rpx; }
.mac-empty { padding: 20rpx 0; }
.mac-empty-text { font-size: 24rpx; color: #999; }
.mac-action-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12rpx 0;
  gap: 8rpx;
}
.mac-action-icon { font-size: 72rpx; }
.mac-action-name { font-size: 36rpx; font-weight: 700; color: #333; }
.mac-action-desc { font-size: 24rpx; color: #888; text-align: center; }
.mac-action-btn {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 28rpx;
  font-weight: 600;
  padding: 16rpx 80rpx;
  border-radius: 40rpx;
  margin-top: 16rpx;
}
.mac-action-btn:active { opacity: 0.8; }
.mac-btn-text { color: #fff; }
</style>