From 46dbe3cd1d8c072fe54f3277b32ce582d34aeb0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?2023302111026=E9=BB=84=E7=BD=97=E9=9C=96?=
 <1243969857@qq.com>
Date: Fri, 16 May 2025 16:02:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=8D=E9=A6=88=E7=AB=99=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=EF=BC=8C=E6=94=B9=E4=B8=BA=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E6=89=8D=E8=83=BD=E8=BF=9B=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../luojia-island/vue-frontend/package.json   |   1 +
 .../vue-frontend/src/components/Header.vue    |   2 +-
 .../vue-frontend/src/router/index.js          |   6 +
 .../vue-frontend/src/views/FeedBack.vue       | 213 ++++++++++++++++++
 4 files changed, 221 insertions(+), 1 deletion(-)
 create mode 100644 珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/FeedBack.vue

diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/package.json b/珞珈岛-项目相关文件/luojia-island/vue-frontend/package.json
index 6518689..bf69343 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/package.json
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/package.json
@@ -15,6 +15,7 @@
     "vue": "^3.2.13",
     "vue-router": "^4.5.0"
   },
+  
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
index ccac695..cc6274d 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
@@ -31,7 +31,6 @@
           </li>
         </ul>
       </div>
-      <router-link to="/feedback" class="nav-btn">反馈站</router-link>
       
     </div>
 
@@ -40,6 +39,7 @@
       <button v-if="!isLoggedIn" @click="showModal" class="login-btn">登录/注册</button>
       <div v-else class="user-menu">
         <router-link to="/notificationlist" class="nav-btn">通知</router-link>
+        <router-link to="/feedback" class="nav-btn">反馈站</router-link>
         <div class="user-avatar" @mouseenter="showDropdown" @mouseleave="hideDropdown">
           <img :src="userInfo.avatar || defaultAvatar" alt="用户头像" class="avatar-img" />
           <!-- 悬浮板块 -->
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js
index 999050e..b47b68d 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js
@@ -5,6 +5,7 @@ import PostDetail from '@/views/PostDetail.vue';
 import MainPage from '@/views/MainPage.vue';
 import UserPage from '@/views/UserPage.vue';
 import NotificationList from '@/views/NotificationList.vue';
+import FeedBack from '@/views/FeedBack.vue';
 
 const routes = [
   {
@@ -36,6 +37,11 @@ const routes = [
     path: '/notificationlist',
     name: 'NotificationList',
     component: NotificationList
+  },
+    {//反馈站页面
+    path: '/feedback',
+    name: 'FeedBack',
+    component: FeedBack
   },
   {//详细通知页面
     path: '/notification/:id', 
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/FeedBack.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/FeedBack.vue
new file mode 100644
index 0000000..b853263
--- /dev/null
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/FeedBack.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="feedback-container">
+    <h1 class="page-title">意见反馈与举报</h1>
+    
+    <!-- 反馈表单 -->
+    <div class="feedback-form">
+      <el-form 
+        ref="feedbackFormRef"
+        :model="form"
+        :rules="rules"
+        label-width="120px"
+        @submit.prevent="submitForm"
+      >
+        <!-- 反馈类型 -->
+        <el-form-item label="反馈类型" prop="type">
+          <el-select 
+            v-model="form.type"
+            placeholder="请选择反馈类型"
+            class="type-selector"
+          >
+            <el-option
+              v-for="item in feedbackTypes"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <!-- 关联帖子 -->
+        <el-form-item 
+          v-if="form.type === 'report'"
+          label="关联帖子ID"
+          prop="postId"
+        >
+          <el-input
+            v-model="form.postId"
+            placeholder="请输入需要举报的帖子ID"
+          />
+        </el-form-item>
+
+        <!-- 反馈内容 -->
+        <el-form-item label="详细内容" prop="content">
+          <el-input
+            v-model="form.content"
+            type="textarea"
+            :rows="6"
+            placeholder="请详细描述您的问题或建议"
+            maxlength="500"
+            show-word-limit
+          />
+        </el-form-item>
+
+        <!-- 联系方式 -->
+        <el-form-item label="联系方式" prop="contact">
+          <el-input
+            v-model="form.contact"
+            placeholder="请输入邮箱/手机号（选填）"
+          />
+        </el-form-item>
+
+        <!-- 提交按钮 -->
+        <el-form-item class="submit-btn">
+          <el-button
+            type="primary"
+            native-type="submit"
+            :loading="submitting"
+          >
+            提交反馈
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 成功提示 -->
+    <el-alert
+      v-if="submitSuccess"
+      title="提交成功"
+      type="success"
+      :closable="false"
+      class="result-alert"
+    >
+      感谢您的反馈，我们将在3个工作日内处理
+    </el-alert>
+
+    <!-- 错误提示 -->
+    <el-alert
+      v-if="submitError"
+      title="提交失败"
+      type="error"
+      description="请检查网络连接或稍后重试"
+      class="result-alert"
+      @close="submitError = false"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+
+// 表单引用
+const feedbackFormRef = ref(null)
+
+// 响应式数据
+const submitting = ref(false)
+const submitSuccess = ref(false)
+const submitError = ref(false)
+
+const feedbackTypes = reactive([
+  { value: 'suggestion', label: '意见反馈' },
+  { value: 'complaint', label: '用户投诉' },
+  { value: 'report', label: '内容举报' }
+])
+
+const form = reactive({
+  type: 'suggestion',
+  content: '',
+  contact: '',
+  postId: ''
+})
+
+const rules = reactive({
+  type: [{ required: true, message: '请选择反馈类型', trigger: 'change' }],
+  content: [
+    { required: true, message: '请输入反馈内容', trigger: 'blur' },
+    { min: 20, message: '内容长度至少20个字符', trigger: 'blur' }
+  ],
+  postId: [
+    { required: true, message: '举报必须提供帖子ID', trigger: 'blur' }
+  ],
+  contact: [
+    { pattern: /^1[3-9]\d{9}$|^\w+@\w+\.\w+$/, message: '格式不正确' }
+  ]
+})
+
+// 提交表单
+const submitForm = async () => {
+  try {
+    submitting.value = true
+    
+    // 验证表单
+    await feedbackFormRef.value.validate()
+    
+    // 模拟API调用
+    // await axios.post('/api/feedback', form)
+    
+    submitSuccess.value = true
+    submitError.value = false
+    feedbackFormRef.value.resetFields()
+    
+    setTimeout(() => {
+      submitSuccess.value = false
+    }, 3000)
+  } catch (error) {
+    if (error instanceof Error) {
+      ElMessage.error(error.message)
+    }
+    submitError.value = true
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+/* 保持原有样式不变 */
+.feedback-container {
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 30px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+}
+
+.page-title {
+  color: #2c3e50;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.feedback-form {
+  background: white;
+  padding: 25px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.type-selector {
+  width: 100%;
+}
+
+.submit-btn {
+  text-align: center;
+  margin-top: 30px;
+}
+
+.result-alert {
+  margin-top: 20px;
+  border-radius: 6px;
+}
+
+.el-form-item__label {
+  color: #666;
+  font-size: 14px;
+}
+
+.el-textarea__inner,
+.el-input__inner {
+  border-radius: 4px;
+  border: 1px solid #e4e4e4;
+}
+</style>
\ No newline at end of file