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

<template>
  <view class="survey-page">
    <view class="section-card">
      <text class="section-title">测评兴趣调研</text>
      <text class="card-desc">选择您最感兴趣的领域，提交后有机会获得测评兑换卡</text>
      <view class="interest-list">
        <label class="interest-item" v-for="(item, idx) in interests" :key="idx">
          <radio :value="item.value" :checked="selected === item.value" @tap="selected = item.value" color="#F97316" />
          <text class="interest-icon">{{ item.icon }}</text>
          <view class="interest-info">
            <text class="interest-name">{{ item.label }}</text>
            <text class="interest-desc">{{ item.desc }}</text>
          </view>
        </label>
      </view>
      <button class="submit-btn" @click="handleSubmit" :loading="loading" :disabled="loading || !selected">提交调研</button>
    </view>

    <view class="section-card">
      <text class="section-title">我的卡券</text>
      <view v-if="coupons.length === 0" class="empty-text">暂无卡券</view>
      <view class="coupon-list">
        <view class="coupon-item" v-for="(c, idx) in coupons" :key="idx">
          <view class="coupon-type">{{ couponTypeLabel(c.type) }}</view>
          <view class="coupon-info">
            <text class="coupon-code">{{ c.code }}</text>
            <text class="coupon-status" :class="c.status">{{ c.status === 'unused' ? '未使用' : '已使用' }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      interests: [
        { value: 'wealth', label: '财富管理', icon: '💰', desc: '家庭财务规划与数据分析' },
        { value: 'health', label: '健康管理', icon: '❤️', desc: '家庭健康数据分析与管理' },
        { value: 'growth', label: '成长规划', icon: '🌱', desc: '家庭成长数据分析与规划' }
      ],
      selected: '',
      loading: false,
      coupons: []
    }
  },
  onShow() {
    if (!guardPage()) return
    this.loadCoupons()
  },
  methods: {
    loadCoupons() {
      var self = this
      getMyCoupons().then(function(resp) {
        self.coupons = resp.data || []
      }).catch(function() {})
    },
    handleSubmit() {
      if (!this.selected || this.loading) return
      this.loading = true
      var self = this
      var classId = this.$store.state.classId
      submitSurvey({ interest: this.selected, classId: classId ? parseInt(classId) : null }).then(function() {
        uni.showToast({ title: '提交成功', icon: 'success' })
        self.loadCoupons()
      }).catch(function(err) {
        uni.showToast({ title: (err && err.message) || '提交失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    },
    couponTypeLabel(type) {
      var map = { etotem: '测评兑换卡' }
      return map[type] || type
    }
  }
}
</script>

<style scoped>
.survey-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: #1E293B; margin-bottom: 8rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }
.card-desc { display: block; font-size: 26rpx; color: #64748B; margin-bottom: 28rpx; }
.interest-list { margin-bottom: 24rpx; }
.interest-item { display: flex; align-items: center; padding: 24rpx; border: 2rpx solid #E2E8F0; border-radius: 12rpx; margin-bottom: 16rpx; }
.interest-icon { font-size: 40rpx; margin: 0 16rpx; }
.interest-name { display: block; font-size: 28rpx; font-weight: 600; color: #1E293B; }
.interest-desc { display: block; font-size: 24rpx; color: #64748B; margin-top: 4rpx; }
.submit-btn { width: 100%; height: 88rpx; line-height: 88rpx; background: #F97316; color: #FFF; font-size: 30rpx; font-weight: 600; border-radius: 44rpx; border: none; }
.submit-btn:active { opacity: 0.85; }
.empty-text { font-size: 26rpx; color: #94A3B8; text-align: center; padding: 24rpx 0; }
.coupon-list { margin-top: 16rpx; }
.coupon-item { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 0; border-bottom: 1rpx solid #F1F5F9; }
.coupon-type { font-size: 28rpx; font-weight: 500; color: #1E293B; }
.coupon-info { display: flex; align-items: center; gap: 16rpx; }
.coupon-code { font-size: 24rpx; color: #64748B; font-family: monospace; }
.coupon-status { font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 6rpx; }
.coupon-status.unused { background: #F0FDF4; color: #22C55E; }
.coupon-status.used { background: #F1F5F9; color: #94A3B8; }
</style>