cfc/cfc-frontend/pages/family/manual-score-entry.vue

<template>
  <view class="mse-page">
    <view class="mse-loading" v-if="loading">
      <text class="mse-loading-text">加载成员...</text>
    </view>
    <template v-else>
      <view class="mse-hero">
        <text class="mse-hero-title">五维直接填分</text>
        <text class="mse-hero-desc">跳过问卷，直接填写你已有的 0-100 分</text>
      </view>
      <view class="mse-section">
        <text class="mse-section-title">选择成员</text>
        <view class="mse-member-list">
          <view class="mse-member-item" :class="{ active: selectedMemberId === m.id }" v-for="m in members" :key="m.id" @click="selectMember(m)">
            <image class="mse-member-avatar" :src="m.avatar || '/static/avatar-default.png'" mode="aspectFill"></image>
            <view class="mse-member-info">
              <text class="mse-member-name">{{ m.nickname }}</text>
              <text class="mse-member-role" :class="'role-' + m.effectiveRole">{{ m.roleLabel }}</text>
            </view>
            <view class="mse-member-check" v-if="selectedMemberId === m.id">✓</view>
          </view>
        </view>
      </view>
      <view class="mse-section">
        <text class="mse-section-title">五维分值（0-100）</text>
        <view class="mse-slider-list">
          <view class="mse-slider-item" v-for="dim in dimensions" :key="dim.code">
            <view class="mse-slider-head" :style="{ color: dim.color }">
              <view class="mse-slider-dot" :style="{ background: dim.color }"></view>
              <text class="mse-slider-label">{{ dim.label }}</text>
              <text class="mse-slider-value">{{ scores[dim.code] }}</text>
            </view>
            <slider class="mse-slider" :min="0" :max="100" :step="1" :value="scores[dim.code]" @change="onSliderChange(dim.code, $event)" :activeColor="dim.color"></slider>
          </view>
        </view>
      </view>
      <view class="mse-footer">
        <button class="mse-btn mse-btn-primary" :disabled="submitLoading" @click="submit">{{ submitLoading ? '提交中...' : '提交并查看结果' }}</button>
      </view>
    </template>
  </view>
</template>

<script>
import { getFamilyMemberList, submitManualScore } from '@/utils/api'

export default {
  data() {
    return {
      loading: true,
      members: [],
      selectedMemberId: null,
      scores: { body: 50, mind: 50, wisdom: 50, action: 50, wealth: 50 },
      dimensions: [
        { code: 'body', label: '身', color: '#FF8C42' },
        { code: 'mind', label: '心', color: '#FF6B9D' },
        { code: 'wisdom', label: '智', color: '#6366F1' },
        { code: 'action', label: '行', color: '#10B981' },
        { code: 'wealth', label: '富', color: '#F59E0B' }
      ],
      submitLoading: false
    }
  },
  onLoad() {
    this.loadMembers()
  },
  methods: {
    loadMembers() {
      var self = this
      getFamilyMemberList({ visibleOnly: true }).then(function(res) {
        if (res.code === 200 && res.data && res.data.length > 0) {
          self.members = res.data
          var own = null
          for (var i = 0; i < self.members.length; i++) {
            if (self.members[i].isSelf) { own = self.members[i]; break }
          }
          self.selectedMemberId = own ? own.id : (self.members.length > 0 ? self.members[0].id : null)
        }
        self.loading = false
      }).catch(function() { self.loading = false })
    },
    selectMember(m) { this.selectedMemberId = m.id },
    onSliderChange(code, e) { this.scores[code] = e.detail.value },
    submit() {
      if (!this.selectedMemberId) return
      this.submitLoading = true
      var self = this
      submitManualScore({ memberId: this.selectedMemberId, scores: this.scores }).then(function(res) {
        self.submitLoading = false
        if (res.code === 200) {
          uni.navigateTo({ url: '/pages/family/self-check-result?source=manual' })
        } else {
          uni.showToast({ title: res.message || '提交失败', icon: 'none' })
        }
      }).catch(function() {
        self.submitLoading = false
        uni.showToast({ title: '网络异常', icon: 'none' })
      })
    }
  }
}
</script>

<style scoped>
.mse-page { min-height: 100vh; background: #F5FAFE; padding: 24rpx 30rpx 120rpx; box-sizing: border-box }
.mse-loading { display: flex; justify-content: center; align-items: center; height: 50vh }
.mse-loading-text { font-size: 28rpx; color: #999 }
.mse-hero { text-align: center; padding: 40rpx 0 20rpx }
.mse-hero-title { font-size: 36rpx; font-weight: 600; color: #333; display: block; margin-bottom: 8rpx }
.mse-hero-desc { font-size: 24rpx; color: #999; display: block }
.mse-section { background: #fff; border-radius: 24rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05) }
.mse-section-title { font-size: 28rpx; font-weight: 600; color: #333; margin-bottom: 20rpx; display: block }
.mse-member-list { display: flex; overflow-x: auto; gap: 20rpx; padding-bottom: 10rpx }
.mse-member-item { flex: 0 0 140rpx; display: flex; flex-direction: column; align-items: center; border: 4rpx solid transparent; border-radius: 20rpx; padding: 16rpx 10rpx; transition: border-color .2s }
.mse-member-item.active { border-color: #F97316 }
.mse-member-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-bottom: 12rpx }
.mse-member-name { font-size: 26rpx; font-weight: 500; color: #333; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mse-member-role { font-size: 20rpx; padding: 2rpx 10rpx; border-radius: 10rpx; display: inline-block }
.role-parent { background: #FFF7ED; color: #E65100 }
.role-child { background: #E8F5E9; color: #2E7D32 }
.role-teacher { background: #E0E7FF; color: #3730A3 }
.mse-member-check { margin-top: 8rpx; font-size: 24rpx; color: #F97316 }
.mse-slider-item { margin-bottom: 28rpx }
.mse-slider-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8rpx }
.mse-slider-dot { width: 16rpx; height: 16rpx; border-radius: 50%; margin-right: 10rpx }
.mse-slider-label { font-size: 28rpx; font-weight: 500; flex: 1 }
.mse-slider-value { font-size: 28rpx; font-weight: 700; color: #333 }
.mse-slider { width: 100% }
.mse-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 20rpx 30rpx; background: #fff; border-top: 1rpx solid #F0F0F0; box-sizing: border-box }
.mse-btn { width: 100%; height: 88rpx; line-height: 88rpx; font-size: 30rpx; border-radius: 44rpx; border: none; text-align: center }
.mse-btn-primary { background: linear-gradient(135deg, #F97316, #FF8C42); color: #fff; font-weight: 600 }
</style>