cfc/cfc-frontend/components/feedback-popup.vue

<template>
  <view class="fb-overlay" v-if="visible" @tap="close">
    <view class="fb-body" @tap.stop>
      <view class="fb-header">
        <text class="fb-title">报告反馈</text>
        <text class="fb-close" @tap="close">×</text>
      </view>

      <!-- 结果态：已提交，展示解答 -->
      <block v-if="submitted">
        <view class="fb-quote">
          <text class="fb-quote-label">{{ typeLabel }}</text>
          <text class="fb-quote-text">{{ submittedContent }}</text>
        </view>
        <view class="fb-answer">
          <text class="fb-answer-label">解答</text>
          <view class="fb-answer-loading" v-if="aiStatus === 'pending'">
            <text class="fb-answer-loading-text">正在生成解答...</text>
          </view>
          <text class="fb-answer-text" v-else-if="aiStatus === 'answered'">{{ aiAnswer }}</text>
          <text class="fb-answer-text fb-answer-failed" v-else>解答暂不可用，可稍后在「我的反馈」中查看</text>
        </view>
        <view class="fb-note">解答由智能助手生成，仅供参考，不构成医疗建议</view>
        <view class="fb-actions">
          <view class="fb-btn fb-btn-cancel" @tap="goMyFeedback">我的反馈</view>
          <view class="fb-btn fb-btn-submit" @tap="close">完成</view>
        </view>
      </block>

      <!-- 填写态 -->
      <block v-else>
        <textarea class="fb-textarea" v-model="content" placeholder="请描述您对该报告的疑问或建议..." maxlength="500" />
        <picker :value="typeIndex" :range="typeLabels" @change="onTypeChange">
          <view class="fb-picker">
            <text>{{ typeLabels[typeIndex] }}</text>
            <text class="fb-arrow">▼</text>
          </view>
        </picker>
        <view class="fb-hint" v-if="quotaHint">{{ quotaHint }}</view>
        <view class="fb-actions">
          <view class="fb-btn fb-btn-cancel" @tap="close">取消</view>
          <view class="fb-btn fb-btn-submit" :class="{ 'fb-btn-disabled': submitting }" @tap="submit">{{ submitText }}</view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import { submitFeedback } from '../utils/api.js'

export default {
  props: {
    visible: Boolean,
    reportId: Number,
    draftId: Number
  },
  data: function() {
    return {
      content: '',
      types: [
        { label: '疑问', value: 'question' },
        { label: '建议', value: 'suggestion' }
      ],
      typeIndex: 0,
      submitting: false,
      // 提交后结果态
      submitted: false,
      submittedContent: '',
      submittedType: '',
      aiStatus: '',
      aiAnswer: '',
      quotaHint: ''
    }
  },
  computed: {
    typeLabels: function() {
      var arr = []
      for (var i = 0; i < this.types.length; i++) {
        arr.push(this.types[i].label)
      }
      return arr
    },
    typeLabel: function() {
      for (var i = 0; i < this.types.length; i++) {
        if (this.types[i].value === this.submittedType) return this.types[i].label
      }
      return '反馈'
    },
    submitText: function() {
      return this.submitting ? '提交中...' : '提交'
    }
  },
  watch: {
    visible: function(val) {
      if (val) {
        // 每次打开重置为填写态
        this.submitted = false
        this.submittedContent = ''
        this.submittedType = ''
        this.aiStatus = ''
        this.aiAnswer = ''
        this.quotaHint = ''
        this.submitting = false
      }
    }
  },
  methods: {
    onTypeChange: function(e) {
      this.typeIndex = e.detail.value
    },
    close: function() {
      this.$emit('close')
    },
    goMyFeedback: function() {
      this.close()
      uni.navigateTo({ url: '/pages/health/my-feedback' })
    },
    submit: function() {
      if (!this.content.trim()) {
        uni.showToast({ title: '请填写内容', icon: 'none' })
        return
      }
      if (this.submitting) return
      var self = this
      var typeValue = this.types[this.typeIndex].value
      var text = this.content.trim()
      this.submitting = true
      var payload = {
        type: typeValue,
        content: text
      }
      if (this.reportId) payload.reportId = this.reportId
      if (this.draftId) payload.draftId = this.draftId
      submitFeedback(payload).then(function(res) {
        if (res.code === 200 && res.data) {
          self.submitted = true
          self.submittedContent = res.data.content || text
          self.submittedType = res.data.feedbackType || typeValue
          self.aiStatus = res.data.aiStatus || 'answered'
          self.aiAnswer = res.data.aiAnswer || ''
          self.content = ''
          self.typeIndex = 0
        } else {
          var msg = res.message || '提交失败'
          if (msg.indexOf('每日仅限') !== -1) {
            self.quotaHint = msg
          } else {
            uni.showToast({ title: msg, icon: 'none' })
          }
        }
      }).catch(function() {
        uni.showToast({ title: '提交失败', icon: 'none' })
      }).then(function() {
        self.submitting = false
      })
    }
  }
}
</script>

<style scoped>
.fb-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  display: flex;
  align-items: flex-end;
}
.fb-body {
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;
  width: 100%;
  box-sizing: border-box;
}
.fb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.fb-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
.fb-close {
  font-size: 40rpx;
  color: #999;
  padding: 0 10rpx;
}
.fb-textarea {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 26rpx;
  box-sizing: border-box;
  margin-bottom: 16rpx;
}
.fb-picker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  font-size: 26rpx;
  color: #333;
}
.fb-arrow {
  color: #999;
  font-size: 22rpx;
}
.fb-hint {
  font-size: 24rpx;
  color: #E6A23C;
  margin-bottom: 16rpx;
  line-height: 1.5;
}
.fb-actions {
  display: flex;
}
.fb-btn {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
}
.fb-btn-cancel {
  border: 1rpx solid #ddd;
  color: #666;
  margin-right: 20rpx;
}
.fb-btn-submit {
  background: #4A9BD7;
  color: #fff;
}
.fb-btn-disabled {
  opacity: 0.6;
}
/* ===== 结果态 ===== */
.fb-quote {
  background: #F5FAFE;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.fb-quote-label {
  display: block;
  font-size: 24rpx;
  color: #4A9BD7;
  margin-bottom: 8rpx;
}
.fb-quote-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
  word-break: break-all;
}
.fb-answer {
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
}
.fb-answer-label {
  display: block;
  font-size: 24rpx;
  color: #10B981;
  margin-bottom: 10rpx;
}
.fb-answer-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.7;
  word-break: break-all;
}
.fb-answer-failed {
  color: #999;
}
.fb-answer-loading {
  padding: 8rpx 0;
}
.fb-answer-loading-text {
  font-size: 26rpx;
  color: #999;
}
.fb-note {
  font-size: 22rpx;
  color: #bbb;
  line-height: 1.5;
  margin-bottom: 20rpx;
}
</style>