caremate/train-frontend/pages/plan/index.vue

<template>
  <view class="plan-page">
    <view class="section-card">
      <text class="section-title">7天行动计划</text>
      <text class="card-desc">规划您未来7天的学习与实践目标</text>
      <view v-if="existingPlan" class="existing-plan">
        <text class="plan-status">✅ 已提交</text>
        <view class="plan-items">
          <view class="plan-item" v-for="(item, idx) in parsedItems" :key="idx">
            <text class="day-label">Day {{ idx + 1 }}</text>
            <text class="day-content">{{ item }}</text>
          </view>
        </view>
        <text class="plan-time" v-if="existingPlan.submittedAt">提交时间：{{ existingPlan.submittedAt }}</text>
      </view>
      <view v-else class="plan-form">
        <view class="day-input" v-for="day in 7" :key="day">
          <text class="day-label">Day {{ day }}</text>
          <input class="form-input" v-model="items[day - 1]" :placeholder="'第' + day + '天计划'" />
        </view>
        <button class="submit-btn" @click="handleSubmit" :loading="loading" :disabled="loading">提交计划</button>
      </view>
    </view>
  </view>
</template>

<script>
import { submitPlan, getMyPlan } from '@/utils/api.js'
import { guardPage } from '@/utils/guard.js'

export default {
  data() {
    return {
      items: ['', '', '', '', '', '', ''],
      existingPlan: null,
      loading: false
    }
  },
  computed: {
    parsedItems() {
      if (!this.existingPlan || !this.existingPlan.items) return []
      try {
        return JSON.parse(this.existingPlan.items)
      } catch (e) {
        return [this.existingPlan.items]
      }
    }
  },
  onShow() {
    if (!guardPage()) return
    this.loadPlan()
  },
  methods: {
    loadPlan() {
      var self = this
      getMyPlan().then(function(resp) {
        if (resp.data) {
          self.existingPlan = resp.data
        }
      }).catch(function() {})
    },
    handleSubmit() {
      var filled = this.items.filter(function(i) { return i.trim() })
      if (filled.length === 0) {
        uni.showToast({ title: '请至少填写一天计划', icon: 'none' })
        return
      }
      if (this.loading) return
      this.loading = true
      var self = this
      submitPlan({ items: JSON.stringify(this.items) }).then(function() {
        uni.showToast({ title: '提交成功', icon: 'success' })
        self.loadPlan()
      }).catch(function(err) {
        uni.showToast({ title: (err && err.message) || '提交失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    }
  }
}
</script>

<style scoped>
.plan-page { min-height: 100vh; background: #F5F5F5; padding: 32rpx; }
.section-card { background: #FFF; border-radius: 16rpx; padding: 32rpx; }
.section-title { display: block; font-size: 32rpx; font-weight: 700; color: #2A2326; margin-bottom: 8rpx; border-left: 8rpx solid #FC7A57; padding-left: 16rpx; }
.card-desc { display: block; font-size: 26rpx; color: #5A4F4B; margin-bottom: 32rpx; }
.existing-plan { margin-top: 16rpx; }
.plan-status { display: block; font-size: 28rpx; color: #22C55E; font-weight: 500; margin-bottom: 20rpx; }
.plan-items { margin-bottom: 16rpx; }
.plan-item { display: flex; padding: 16rpx 0; border-bottom: 1rpx solid #F1F5F9; }
.day-label { width: 100rpx; font-size: 26rpx; color: #FC7A57; font-weight: 600; flex-shrink: 0; }
.day-content { flex: 1; font-size: 28rpx; color: #2A2326; }
.plan-time { font-size: 24rpx; color: #94877F; }
.day-input { display: flex; align-items: center; margin-bottom: 20rpx; }
.day-input .day-label { width: 100rpx; font-size: 26rpx; color: #FC7A57; font-weight: 600; flex-shrink: 0; }
.form-input { flex: 1; height: 72rpx; border: 2rpx solid #E2E8F0; border-radius: 8rpx; padding: 0 16rpx; font-size: 28rpx; color: #2A2326; background: #F8FAFC; }
.submit-btn { width: 100%; height: 88rpx; line-height: 88rpx; background: #FC7A57; color: #FFF; font-size: 30rpx; font-weight: 600; border-radius: 44rpx; border: none; margin-top: 24rpx; }
.submit-btn:active { opacity: 0.85; }
</style>