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

<template>
  <view class="assignment-page">
    <view class="page-header">
      <text class="page-title">三本账认领</text>
      <text class="page-desc">认领一本账，成为做账专家或通用支援</text>
    </view>
    <view class="book-list">
      <view class="book-card" v-for="(book, idx) in books" :key="idx">
        <view class="book-header">
          <text class="book-icon">{{ book.icon }}</text>
          <view class="book-info">
            <text class="book-name">{{ book.label }}</text>
            <text class="book-desc">{{ book.desc }}</text>
          </view>
        </view>
        <view v-if="isClaimed(book.type)" class="claimed-badge">已认领</view>
        <view v-else class="claim-actions">
          <view class="role-select">
            <text class="role-label">角色：</text>
            <radio-group @change="onRoleChange($event, book.type)">
              <label class="role-option"><radio value="expert" :checked="selectedRole[book.type] === 'expert'" color="#F97316" />做账专家</label>
              <label class="role-option"><radio value="support" :checked="selectedRole[book.type] === 'support'" color="#F97316" />通用支援</label>
            </radio-group>
          </view>
          <button class="claim-btn" @click="handleClaim(book.type)" :loading="claiming[book.type]">认领</button>
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      books: [
        { type: 'wealth', label: '财富账', icon: '💰', desc: '记录家庭财务数据与分析' },
        { type: 'health', label: '健康账', icon: '❤️', desc: '记录家庭健康数据与管理' },
        { type: 'growth', label: '成长账', icon: '🌱', desc: '记录家庭成长数据与规划' }
      ],
      myAssignments: [],
      selectedRole: { wealth: 'expert', health: 'expert', growth: 'expert' },
      claiming: { wealth: false, health: false, growth: false }
    }
  },
onShow() {
    if (!guardPage()) return
    this.loadAssignments()
  },
  methods: {
    loadAssignments() {
      var self = this
      getMyAssignments().then(function(resp) {
        self.myAssignments = resp.data || []
      }).catch(function() {})
    },
    isClaimed(type) {
      return this.myAssignments.some(function(a) { return a.bookType === type })
    },
    onRoleChange(e, type) {
      this.$set(this.selectedRole, type, e.detail.value)
    },
    handleClaim(type) {
      if (this.claiming[type]) return
      this.$set(this.claiming, type, true)
      var self = this
      claimAssignment({
        bookType: type,
        role: this.selectedRole[type],
        useSample: 0
      }).then(function() {
        uni.showToast({ title: '认领成功', icon: 'success' })
        self.loadAssignments()
      }).catch(function(err) {
        uni.showToast({ title: (err && err.message) || '认领失败', icon: 'none' })
      }).finally(function() {
        self.$set(self.claiming, type, false)
      })
    }
  }
}
</script>

<style scoped>
.assignment-page { min-height: 100vh; background: #F5F5F5; padding: 32rpx; }
.page-header { margin-bottom: 32rpx; }
.page-title { display: block; font-size: 40rpx; font-weight: 700; color: #1E293B; margin-bottom: 8rpx; }
.page-desc { display: block; font-size: 26rpx; color: #64748B; }
.book-card { background: #FFF; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; }
.book-header { display: flex; align-items: center; margin-bottom: 20rpx; }
.book-icon { font-size: 48rpx; margin-right: 20rpx; }
.book-name { display: block; font-size: 30rpx; font-weight: 600; color: #1E293B; }
.book-desc { display: block; font-size: 24rpx; color: #64748B; margin-top: 4rpx; }
.claimed-badge { background: #F0FDF4; color: #22C55E; font-size: 26rpx; font-weight: 500; padding: 12rpx 24rpx; border-radius: 8rpx; text-align: center; }
.claim-actions { border-top: 1rpx solid #F1F5F9; padding-top: 20rpx; }
.role-select { margin-bottom: 16rpx; }
.role-label { font-size: 26rpx; color: #64748B; }
.role-option { font-size: 26rpx; color: #1E293B; margin-right: 24rpx; }
.claim-btn { width: 100%; height: 76rpx; line-height: 76rpx; background: #F97316; color: #FFF; font-size: 28rpx; font-weight: 500; border-radius: 38rpx; border: none; }
.claim-btn:active { opacity: 0.85; }
</style>