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

<template>
  <view class="group-page">
    <view v-if="groupInfo" class="group-card">
      <view class="group-header">
        <text class="group-name">{{ groupInfo.name }}</text>
        <text class="group-slogan" v-if="groupInfo.slogan">{{ groupInfo.slogan }}</text>
      </view>
      <view class="section-title">成员列表</view>
      <view class="member-list">
        <view class="member-item" v-for="(m, idx) in (groupInfo.members || [])" :key="idx">
          <text class="member-name">{{ m.name || '未命名' }}</text>
          <text class="member-role">{{ m.uid === groupInfo.spokespersonUid ? '🏆 发言人' : '成员' }}</text>
        </view>
      </view>
      <view class="section-title">分工认领</view>
      <view v-if="(groupInfo.assignments || []).length === 0" class="empty-text">暂无认领</view>
      <view class="assign-list" v-else>
        <view class="assign-item" v-for="(a, idx) in groupInfo.assignments" :key="idx">
          <text class="assign-type">{{ bookTypeLabel(a.bookType) }}</text>
          <text class="assign-role">{{ a.role === 'expert' ? '专家' : '支援' }}</text>
        </view>
      </view>
    </view>
    <view v-else class="empty-card">
      <text class="empty-title">您尚未入组</text>
      <text class="empty-desc">请联系组管理员获取组ID入组</text>
      <input class="group-id-input" v-model="groupId" placeholder="输入组ID" type="number" />
      <button class="join-btn" @click="handleJoin" :loading="loading" :disabled="loading">入组</button>
    </view>
  </view>
</template>

<script>
import { getMyGroup, joinGroup } from '@/utils/api.js'

export default {
  data() {
    return {
      groupInfo: null,
      groupId: '',
      loading: false
    }
  },
  onShow() {
    this.loadGroup()
  },
  methods: {
    loadGroup() {
      var self = this
      getMyGroup().then(function(resp) {
        self.groupInfo = resp.data
      }).catch(function() {
        self.groupInfo = null
      })
    },
    handleJoin() {
      if (!this.groupId) {
        uni.showToast({ title: '请输入组ID', icon: 'none' })
        return
      }
      if (this.loading) return
      this.loading = true
      var self = this
      joinGroup(parseInt(this.groupId)).then(function() {
        uni.showToast({ title: '入组成功', icon: 'success' })
        self.loadGroup()
      }).catch(function(err) {
        uni.showToast({ title: (err && err.message) || '入组失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    },
    bookTypeLabel(type) {
      var map = { wealth: '财富账', health: '健康账', growth: '成长账', support: '通用支援' }
      return map[type] || type
    }
  }
}
</script>

<style scoped>
.group-page { min-height: 100vh; background: #F5F5F5; padding: 32rpx; }
.group-card, .empty-card { background: #FFF; border-radius: 16rpx; padding: 40rpx 32rpx; }
.group-header { margin-bottom: 32rpx; }
.group-name { display: block; font-size: 36rpx; font-weight: 700; color: #1E293B; margin-bottom: 8rpx; }
.group-slogan { display: block; font-size: 26rpx; color: #F97316; }
.section-title { font-size: 30rpx; font-weight: 600; color: #1E293B; margin: 24rpx 0 16rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }
.member-list { margin-bottom: 24rpx; }
.member-item { display: flex; justify-content: space-between; padding: 16rpx 0; border-bottom: 1rpx solid #F1F5F9; }
.member-name { font-size: 28rpx; color: #1E293B; }
.member-role { font-size: 24rpx; color: #64748B; }
.empty-text { font-size: 26rpx; color: #94A3B8; padding: 16rpx 0; }
.assign-list { margin-bottom: 24rpx; }
.assign-item { display: flex; justify-content: space-between; padding: 16rpx 0; border-bottom: 1rpx solid #F1F5F9; }
.assign-type { font-size: 28rpx; color: #1E293B; font-weight: 500; }
.assign-role { font-size: 24rpx; color: #F97316; }
.empty-title { display: block; font-size: 36rpx; font-weight: 700; color: #1E293B; margin-bottom: 12rpx; text-align: center; }
.empty-desc { display: block; font-size: 26rpx; color: #64748B; margin-bottom: 40rpx; text-align: center; }
.group-id-input { width: 100%; height: 80rpx; border: 2rpx solid #E2E8F0; border-radius: 12rpx; padding: 0 24rpx; font-size: 28rpx; background: #F8FAFC; margin-bottom: 24rpx; }
.join-btn { width: 100%; height: 88rpx; line-height: 88rpx; background: #F97316; color: #FFF; font-size: 30rpx; font-weight: 600; border-radius: 44rpx; border: none; }
.join-btn:active { opacity: 0.85; }
</style>