vue 实现反馈页面

实现反馈页面的基本结构

使用 Vue.js 创建一个反馈页面需要设计表单组件，包含输入框、下拉选择、评分控件等元素。以下是一个基础模板：

<template>
  <div class="feedback-form">
    <h3>用户反馈</h3>
    <form @submit.prevent="submitFeedback">
      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" id="email" v-model="feedback.email" required>
      </div>

      <div class="form-group">
        <label for="type">反馈类型</label>
        <select id="type" v-model="feedback.type">
          <option value="bug">错误报告</option>
          <option value="suggestion">功能建议</option>
          <option value="other">其他</option>
        </select>
      </div>

      <div class="form-group">
        <label for="message">详细内容</label>
        <textarea id="message" v-model="feedback.message" required></textarea>
      </div>

      <button type="submit">提交反馈</button>
    </form>
  </div>
</template>

数据绑定与验证

在 Vue 组件中定义数据模型和验证逻辑：

<script>
export default {
  data() {
    return {
      feedback: {
        email: '',
        type: 'bug',
        message: ''
      }
    }
  },
  methods: {
    submitFeedback() {
      if (!this.validateEmail(this.feedback.email)) {
        alert('请输入有效的邮箱地址');
        return;
      }

      if (this.feedback.message.length < 10) {
        alert('反馈内容至少需要10个字符');
        return;
      }

      // 提交逻辑
      console.log('提交反馈:', this.feedback);
    },
    validateEmail(email) {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return re.test(email);
    }
  }
}
</script>

样式设计

添加基础样式增强用户体验：

<style scoped>
.feedback-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input, select, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

textarea {
  height: 120px;
}

button {
  background-color: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

添加评分组件

集成星级评分功能可以使用第三方库或自定义实现：

<template>
  <div class="rating">
    <span v-for="star in 5" 
          :key="star"
          @click="feedback.rating = star"
          :class="{ 'active': star <= feedback.rating }">
      ★
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      feedback: {
        rating: 0
      }
    }
  }
}
</script>

<style scoped>
.rating {
  font-size: 24px;
  margin: 10px 0;
}
.rating span {
  cursor: pointer;
  color: #ccc;
}
.rating span.active {
  color: #ffcc00;
}
</style>

提交到后端

实现实际提交功能，通常使用 axios：

import axios from 'axios';

methods: {
  async submitFeedback() {
    try {
      const response = await axios.post('/api/feedback', this.feedback);
      alert('感谢您的反馈！');
      this.resetForm();
    } catch (error) {
      alert('提交失败，请稍后再试');
    }
  },
  resetForm() {
    this.feedback = {
      email: '',
      type: 'bug',
      message: '',
      rating: 0
    };
  }
}

添加状态提示

使用 Vue 的响应式特性显示提交状态：

<template>
  <div v-if="submitting" class="loading">提交中...</div>
  <div v-if="submitSuccess" class="success">提交成功！</div>
  <div v-if="submitError" class="error">提交失败</div>
</template>

<script>
export default {
  data() {
    return {
      submitting: false,
      submitSuccess: false,
      submitError: false
    }
  },
  methods: {
    async submitFeedback() {
      this.submitting = true;
      try {
        await axios.post('/api/feedback', this.feedback);
        this.submitSuccess = true;
        setTimeout(() => this.submitSuccess = false, 3000);
      } catch (error) {
        this.submitError = true;
        setTimeout(() => this.submitError = false, 3000);
      } finally {
        this.submitting = false;
      }
    }
  }
}
</script>