|
|
|
|
@ -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>
|
