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

<template>
  <view class="checkin-page">
    <view class="section-card">
      <text class="section-title">装机打卡</text>
      <view v-if="checkinDone" class="status-badge done">✓ 已完成 (+10分)</view>
      <view v-else>
        <button class="upload-btn" @click="chooseCheckinImage">选择装机截图</button>
        <image v-if="checkinImage" :src="checkinImage" class="preview-img" mode="aspectFit" />
        <button class="submit-btn" @click="handleCheckin" :loading="checkinLoading" :disabled="!checkinImage || checkinLoading">提交打卡</button>
      </view>
    </view>

    <view class="section-card">
      <text class="section-title">数据准备自检</text>
      <view v-if="prepDone" class="status-badge done">✓ 已完成 (+5分)</view>
      <view v-else>
        <view class="check-group">
          <label class="check-item">
            <checkbox :checked="prepForm.wealthData" @tap="prepForm.wealthData = !prepForm.wealthData" color="#FC7A57" />
            <text>我有财富相关数据</text>
          </label>
          <label class="check-item">
            <checkbox :checked="prepForm.healthData" @tap="prepForm.healthData = !prepForm.healthData" color="#FC7A57" />
            <text>我有健康相关数据</text>
          </label>
          <label class="check-item">
            <checkbox :checked="prepForm.growthData" @tap="prepForm.growthData = !prepForm.growthData" color="#FC7A57" />
            <text>我有成长相关数据</text>
          </label>
          <label class="check-item">
            <checkbox :checked="prepForm.hasNone" @tap="prepForm.hasNone = !prepForm.hasNone" color="#FC7A57" />
            <text>以上都没有（使用脱敏样本数据）</text>
          </label>
        </view>
        <button class="submit-btn" @click="handlePrepCheck" :loading="prepLoading">提交自检</button>
      </view>
    </view>

    <view class="section-card">
      <text class="section-title">快捷入口</text>
      <view class="shortcut-grid">
        <view class="shortcut-item" @click="goTo('/pages/assignment/index')">
          <text class="shortcut-icon">📘</text>
          <text class="shortcut-text">三本账</text>
        </view>
        <view class="shortcut-item" @click="goTo('/pages/upload/index')">
          <text class="shortcut-icon">📤</text>
          <text class="shortcut-text">成果上传</text>
        </view>
        <view class="shortcut-item" @click="goTo('/pages/teaching/index')">
          <text class="shortcut-icon">📋</text>
          <text class="shortcut-text">教学卡</text>
        </view>
        <view class="shortcut-item" @click="goTo('/pages/plan/index')">
          <text class="shortcut-icon">📝</text>
          <text class="shortcut-text">行动计划</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { checkin, getCheckinStatus, prepCheck, getPrepCheckStatus, uploadFile } from '@/utils/api.js'
import { guardPage } from '@/utils/guard.js'

export default {
  data() {
    return {
      checkinDone: false,
      checkinImage: '',
      checkinLoading: false,
      prepDone: false,
      prepForm: {
        wealthData: false,
        healthData: false,
        growthData: false,
        hasNone: false,
        useSample: 0
      },
      prepLoading: false
    }
  },
onShow() {
    if (!guardPage()) return
    this.loadStatus()
  },
  methods: {
    loadStatus() {
      var self = this
      getCheckinStatus().then(function(resp) {
        self.checkinDone = resp.data === true
      }).catch(function() {})
      getPrepCheckStatus().then(function(resp) {
        self.prepDone = resp.data !== null && resp.data !== undefined
      }).catch(function() {})
    },
    chooseCheckinImage() {
      var self = this
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function(res) {
          self.checkinImage = res.tempFilePaths[0]
        }
      })
    },
    handleCheckin() {
      if (!this.checkinImage || this.checkinLoading) return
      this.checkinLoading = true
      var self = this
      uploadFile(this.checkinImage).then(function(resp) {
        var url = resp.data.url
        return checkin(url)
      }).then(function() {
        uni.showToast({ title: '打卡成功 +10分', icon: 'success' })
        self.checkinDone = true
      }).catch(function(err) {
        uni.showToast({ title: (err && err.message) || '打卡失败', icon: 'none' })
      }).finally(function() {
        self.checkinLoading = false
      })
    },
    handlePrepCheck() {
      if (this.prepLoading) return
      this.prepLoading = true
      var self = this
      var data = {
        wealthData: this.prepForm.wealthData ? 1 : 0,
        healthData: this.prepForm.healthData ? 1 : 0,
        growthData: this.prepForm.growthData ? 1 : 0,
        hasNone: this.prepForm.hasNone ? 1 : 0,
        useSample: this.prepForm.hasNone ? 1 : 0
      }
      prepCheck(data).then(function() {
        uni.showToast({ title: '自检完成 +5分', icon: 'success' })
        self.prepDone = true
      }).catch(function(err) {
        uni.showToast({ title: (err && err.message) || '提交失败', icon: 'none' })
      }).finally(function() {
        self.prepLoading = false
      })
    },
    goTo(url) {
      uni.navigateTo({ url: url })
    }
  }
}
</script>

<style scoped>
.checkin-page { min-height: 100vh; background: #F5F5F5; padding: 24rpx 32rpx; }
.section-card { background: #FFF; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; }
.section-title { display: block; font-size: 32rpx; font-weight: 700; color: #2A2326; margin-bottom: 24rpx; border-left: 8rpx solid #FC7A57; padding-left: 16rpx; }
.status-badge { padding: 16rpx 24rpx; border-radius: 8rpx; font-size: 26rpx; font-weight: 500; }
.status-badge.done { background: #F0FDF4; color: #22C55E; }
.upload-btn { width: 100%; height: 80rpx; line-height: 80rpx; background: #FFF0E8; color: #FC7A57; font-size: 28rpx; border: 2rpx dashed #FC7A57; border-radius: 12rpx; margin-bottom: 16rpx; }
.preview-img { width: 100%; height: 300rpx; border-radius: 12rpx; margin-bottom: 16rpx; }
.submit-btn { width: 100%; height: 80rpx; line-height: 80rpx; background: #FC7A57; color: #FFF; font-size: 28rpx; font-weight: 500; border-radius: 40rpx; border: none; margin-top: 16rpx; }
.submit-btn:active { opacity: 0.85; }
.check-group { margin-bottom: 16rpx; }
.check-item { display: flex; align-items: center; padding: 16rpx 0; font-size: 28rpx; color: #2A2326; }
.check-item text { margin-left: 12rpx; }
.shortcut-grid { display: flex; flex-wrap: wrap; gap: 20rpx; }
.shortcut-item { width: calc(25% - 15rpx); display: flex; flex-direction: column; align-items: center; padding: 20rpx 0; }
.shortcut-icon { font-size: 48rpx; margin-bottom: 8rpx; }
.shortcut-text { font-size: 24rpx; color: #2A2326; text-align: center; }
</style>