<template>
|
<div class="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 relative">
|
<!-- 成功提示模态框 -->
|
<div v-if="showSuccess" class="fixed inset-0 flex items-center justify-center z-50">
|
<div class="absolute inset-0 bg-white bg-opacity-30 backdrop-blur-sm"></div>
|
<div class="relative bg-white rounded-lg shadow-xl p-8 max-w-md w-full mx-4 transform transition-all duration-300 scale-100">
|
<div class="flex flex-col items-center text-center">
|
<!-- 成功图标 -->
|
<div class="w-24 h-24 mb-6">
|
<svg class="w-full h-full text-blue-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
</svg>
|
</div>
|
<!-- 提示文字 -->
|
<h2 class="text-2xl font-bold text-gray-900 mb-2">提交成功</h2>
|
<p class="text-gray-600 mb-6">尊敬的用户！非常感谢您参与我们的调查问卷！</p>
|
<!-- 确认按钮 -->
|
<el-button type="primary" size="large" @click="handleSuccessClose" class="min-w-[120px]">确定</el-button>
|
</div>
|
</div>
|
</div>
|
|
<div class="max-w-3xl mx-auto bg-white rounded-lg shadow-md p-8" v-if="!showSuccess">
|
<h1 class="text-2xl font-bold text-center text-gray-900 mb-8">工效汇聚平台-用户反馈</h1>
|
|
<div class="space-y-6">
|
<!-- 欢迎语 -->
|
<div class="text-gray-600">
|
<p class="mb-2">尊敬的用户：</p>
|
<p>您好！为了给您提供更好的产品和服务，我们希望收集您使用<span class="text-red-500">工效汇聚平台</span>时的看法或建议。对您的配合和支持表示衷心感谢！</p>
|
</div>
|
|
<!-- 反馈文本框 -->
|
<div class="space-y-2">
|
<p class="text-gray-700">
|
<span class="text-red-500">*</span>
|
1. 如果您在使用工效汇聚平台时，有什么好或不好的地方，请在此留言！我们会关注您的反馈，不断优化产品，为您提供更好的服务！
|
</p>
|
<el-input
|
v-model="feedback"
|
type="textarea"
|
:rows="4"
|
placeholder="请输入您的反馈..."
|
class="w-full"
|
/>
|
</div>
|
|
<!-- 图片上传 -->
|
<!-- <div class="space-y-2">
|
<p class="text-gray-700">2. 为了便于我们核查问题，可上传相关问题的截图。</p>
|
<el-upload
|
class="upload-demo"
|
action="#"
|
:auto-upload="false"
|
:limit="1"
|
:on-change="handleFileChange"
|
>
|
<template #trigger>
|
<el-button type="primary" class="flex items-center">
|
<el-icon class="mr-1"><Upload /></el-icon>
|
上传图片
|
</el-button>
|
</template>
|
<template #tip>
|
<div class="text-gray-400 text-sm mt-1">限制大小20M</div>
|
</template>
|
</el-upload>
|
</div> -->
|
|
<!-- 手机号码 -->
|
<div class="space-y-2">
|
<p class="text-gray-700">2. 为了方便我们与您联系，可填写您的手机号。（选填，信息仅作为内部资料绝不外泄）</p>
|
<el-input
|
v-model="phone"
|
placeholder="请输入手机号码"
|
class="w-full"
|
/>
|
</div>
|
|
<!-- 提交按钮 -->
|
<div class="flex justify-center mt-8">
|
<el-button type="primary" size="large" @click="handleSubmit">提交</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import { Upload } from '@element-plus/icons-vue'
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
const feedback = ref('')
|
const phone = ref('')
|
const fileList = ref([])
|
const showSuccess = ref(false)
|
|
const handleFileChange = (file) => {
|
fileList.value = [file]
|
}
|
|
const handleSubmit = () => {
|
if (!feedback.value) {
|
ElMessage.warning('请填写反馈内容')
|
return
|
}
|
|
// 显示成功模态框
|
showSuccess.value = true
|
}
|
|
const handleSuccessClose = () => {
|
// showSuccess.value = false
|
// 可以选择跳转到首页或其他页面
|
router.replace('/home')
|
}
|
|
// 添加返回顶部功能
|
const scrollToTop = () => {
|
window.scrollTo({
|
top: 0,
|
behavior: 'smooth'
|
})
|
}
|
</script>
|
|
<style scoped>
|
.upload-demo {
|
@apply w-full;
|
}
|
|
/* 添加淡入淡出动画 */
|
.fade-enter-active,
|
.fade-leave-active {
|
@apply transition-opacity duration-300;
|
}
|
|
.fade-enter-from,
|
.fade-leave-to {
|
@apply opacity-0;
|
}
|
</style>
|
