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>
      <textarea class="fb-textarea" v-model="content" placeholder="请描述您的问题或建议..." maxlength="500" />
      <picker :value="typeIndex" :range="types" @change="onTypeChange">
        <view class="fb-picker">
          <text>{{ types[typeIndex] }}</text>
          <text class="fb-arrow">▼</text>
        </view>
      </picker>
      <view class="fb-actions">
        <view class="fb-btn fb-btn-cancel" @tap="close">取消</view>
        <view class="fb-btn fb-btn-submit" @tap="submit">提交反馈</view>
      </view>
    </view>
  </view>
</template>

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

export default {
  props: {
    visible: Boolean,
    reportId: Number
  },
  data: function() {
    return {
      content: '',
      types: ['功能建议', '数据疑问', '内容错误', '其他'],
      typeIndex: 0,
      submitting: false
    }
  },
  methods: {
    onTypeChange: function(e) {
      this.typeIndex = e.detail.value
    },
    close: function() {
      this.$emit('close')
    },
    submit: function() {
      if (!this.content.trim()) {
        uni.showToast({ title: '请填写内容', icon: 'none' })
        return
      }
      if (this.submitting) return
      this.submitting = true
      var self = this
      var payload = {
        reportId: this.reportId,
        type: this.types[this.typeIndex],
        content: this.content.trim()
      }
      submitFeedback(payload).then(function(res) {
        if (res.code === 200) {
          uni.showToast({ title: '感谢反馈', icon: 'success' })
          self.content = ''
          self.typeIndex = 0
          self.close()
        } else {
          uni.showToast({ title: res.message || '提交失败', 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-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;
}
</style>