|
|
|
@ -6,6 +6,10 @@ import feedback from "../assets/img/Feedback/feedback.png"; |
|
|
|
import feedbackImg from "../assets/img/Feedback/feedbackImg.png"; |
|
|
|
import feedbackSuccess from "../assets/img/Feedback/feedbackSuccess.png"; |
|
|
|
import noFeedback from "../assets/img/Feedback/noFeedback.png"; |
|
|
|
import border from "../assets/img/Feedback/border.png"; |
|
|
|
import success from "../assets/img/Feedback/success.png"; |
|
|
|
import failure from "../assets/img/Feedback/failure.png"; |
|
|
|
import save from "../assets/img/Feedback/save.png"; |
|
|
|
|
|
|
|
const dataStore = useDataStore() |
|
|
|
|
|
|
|
@ -14,8 +18,54 @@ const uploadUrl = import.meta.env.VITE_APP_IMG_API_BASE_URL; |
|
|
|
const feedbackFileList = ref([]); |
|
|
|
const isHistoryFeedback = ref(false); |
|
|
|
|
|
|
|
const submitSuccessDialogVisible = ref(false) |
|
|
|
const submitFailureDialogVisible = ref(false) |
|
|
|
const submitFailureContent = ref('') |
|
|
|
const feedbackSubmit = async () => { |
|
|
|
console.log(feedbackContent.value) |
|
|
|
console.log(feedbackFileList.value) |
|
|
|
if (feedbackContent.value == '' && feedbackFileList.value.length == 0) { |
|
|
|
submitFailureDialogVisible.value = true; |
|
|
|
submitFailureContent.value = '请输入反馈内容或上传图片'; |
|
|
|
} else { |
|
|
|
try { |
|
|
|
|
|
|
|
submitSuccessDialogVisible.value = true; |
|
|
|
} catch (error) { |
|
|
|
submitFailureDialogVisible.value = true; |
|
|
|
submitFailureContent.value = '反馈提交异常(错误代码：' + error.response.status + '),建议尝试更换网络环境后重新提交。'; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const submitSuccessConfirm = () => { |
|
|
|
feedbackContent.value = ''; |
|
|
|
feedbackFileList.value = []; |
|
|
|
if (localStorage.getItem('feedbackContent')) { |
|
|
|
localStorage.removeItem('feedbackContent'); |
|
|
|
} |
|
|
|
if (localStorage.getItem('feedbackFileList')) { |
|
|
|
localStorage.removeItem('feedbackFileList'); |
|
|
|
} |
|
|
|
submitSuccessDialogVisible.value = false; |
|
|
|
} |
|
|
|
const submitFailureConfirm = () => { |
|
|
|
submitFailureDialogVisible.value = false; |
|
|
|
} |
|
|
|
// 字数限制提示弹窗 |
|
|
|
const feedbackContentOverLengthDialogVisible = ref(false) |
|
|
|
|
|
|
|
const feedbackContentLengthJudge = () => { |
|
|
|
console.log('字数判断'); |
|
|
|
console.log(feedbackContent.value.length) |
|
|
|
if (feedbackContent.value.length >= 2000) { |
|
|
|
feedbackContentOverLengthDialogVisible.value = true; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const feedbackContentOverLengthConfirm = () => { |
|
|
|
feedbackContentOverLengthDialogVisible.value = false; |
|
|
|
} |
|
|
|
|
|
|
|
const feedbackContentChange = () => { |
|
|
|
@ -59,13 +109,40 @@ const handlePictureCardPreview = (uploadFile) => { |
|
|
|
dialogVisible.value = true |
|
|
|
} |
|
|
|
|
|
|
|
// 返回弹窗 |
|
|
|
const feedbackBackDialogVisible = ref(false) |
|
|
|
|
|
|
|
const feedbackBack = () => { |
|
|
|
feedbackBackDialogVisible.value = true; |
|
|
|
} |
|
|
|
// 确人保存 |
|
|
|
const feedbackBackConfirm = () => { |
|
|
|
feedbackBackDialogVisible.value = false; |
|
|
|
dataStore.isFeedback = false; |
|
|
|
} |
|
|
|
// 取消保存 |
|
|
|
const feedbackBackCancel = () => { |
|
|
|
if (localStorage.getItem('feedbackContent')) { |
|
|
|
localStorage.removeItem('feedbackContent'); |
|
|
|
} |
|
|
|
if (localStorage.getItem('feedbackFileList')) { |
|
|
|
localStorage.removeItem('feedbackFileList'); |
|
|
|
} |
|
|
|
feedbackBackDialogVisible.value = false; |
|
|
|
dataStore.isFeedback = false; |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
feedbackContent.value = localStorage.getItem('feedbackContent'); |
|
|
|
if (localStorage.getItem('feedbackContent')) { |
|
|
|
feedbackContent.value = localStorage.getItem('feedbackContent') |
|
|
|
} else { |
|
|
|
feedbackContent.value = ''; |
|
|
|
} |
|
|
|
if (localStorage.getItem('feedbackFileList')) { |
|
|
|
feedbackFileList.value = JSON.parse(localStorage.getItem('feedbackFileList')); |
|
|
|
} else { |
|
|
|
feedbackFileList.value = []; |
|
|
|
} |
|
|
|
console.log(uploadUrl) |
|
|
|
}) |
|
|
|
|
|
|
|
@ -74,7 +151,11 @@ onMounted(() => { |
|
|
|
<template> |
|
|
|
<el-container> |
|
|
|
<div> |
|
|
|
<div @click="feedbackBack">返回</div> |
|
|
|
<div @click="feedbackBack"> |
|
|
|
<el-icon style="font-size: 50px;"> |
|
|
|
<Back /> |
|
|
|
</el-icon> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-scrollbar> |
|
|
|
<el-header> |
|
|
|
@ -90,8 +171,8 @@ onMounted(() => { |
|
|
|
</div> |
|
|
|
<div class="header-item"> |
|
|
|
<el-input class="feedbackContent" v-model="feedbackContent" :rows="5" type="textarea" |
|
|
|
maxlength="2000" show-word-limit placeholder="请描写您想反馈的内容..." |
|
|
|
@change="feedbackContentChange" /> |
|
|
|
maxlength="2000" show-word-limit placeholder="请描写您想反馈的内容..." @change="feedbackContentChange" |
|
|
|
@input="feedbackContentLengthJudge" /> |
|
|
|
</div> |
|
|
|
<div class="feedbackTitle header-item"> |
|
|
|
照片上传 |
|
|
|
@ -137,6 +218,65 @@ onMounted(() => { |
|
|
|
<img w-full :src="dialogImageUrl" alt="Preview Image" /> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<el-dialog v-model="feedbackBackDialogVisible" class="save-dialog"> |
|
|
|
<div class="imgLine"> |
|
|
|
<img class="dialogImg" :src="save" alt="保存"> |
|
|
|
</div> |
|
|
|
<div class="feedbackBackTitle"> |
|
|
|
系统提示 |
|
|
|
</div> |
|
|
|
<div class="feedbackBackAttention"> |
|
|
|
检测到为保存内容，离开将丢失修改，请选择是否保留此次编辑？ |
|
|
|
</div> |
|
|
|
<div class="feedbackBackBtnGroup"> |
|
|
|
<el-button class="feedbackBackBtn nosave" plain @click="feedbackBackCancel" type="primary">不保留</el-button> |
|
|
|
<el-button class="feedbackBackBtn save" @click="feedbackBackConfirm" type="primary">保留</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<el-dialog v-model="feedbackContentOverLengthDialogVisible" class="save-dialog"> |
|
|
|
<div class="feedbackContentOverLengthTitle"> |
|
|
|
温馨提示 |
|
|
|
</div> |
|
|
|
<div class="feedbackContentOverLengthContent"> |
|
|
|
当前输入字数已达上限！ |
|
|
|
</div> |
|
|
|
<div class="feedbackBackBtnGroup"> |
|
|
|
<el-button class="feedbackContentOverLengthBtn confirm" type="primary" |
|
|
|
@click="feedbackContentOverLengthConfirm">确认</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<el-dialog v-model="submitSuccessDialogVisible" class="save-dialog"> |
|
|
|
<div class="imgLine"> |
|
|
|
<img class="dialogImg" :src="success" alt="成功"> |
|
|
|
</div> |
|
|
|
<div class="feedbackSuccessTitle"> |
|
|
|
提交成功 |
|
|
|
</div> |
|
|
|
<div class="feedbackBackAttention"> |
|
|
|
——感谢您的反馈—— |
|
|
|
</div> |
|
|
|
<div class="feedbackBackBtnGroup"> |
|
|
|
<el-button class="feedbackBackBtn confirm" @click="submitSuccessConfirm" type="primary">确定</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<el-dialog v-model="submitFailureDialogVisible" class="save-dialog"> |
|
|
|
<div class="imgLine"> |
|
|
|
<img class="dialogImg" :src="failure" alt="失败"> |
|
|
|
</div> |
|
|
|
<div class="feedbackFailureTitle"> |
|
|
|
提交失败 |
|
|
|
</div> |
|
|
|
<div class="feedbackBackAttention"> |
|
|
|
{{ submitFailureContent }} |
|
|
|
</div> |
|
|
|
<div class="feedbackBackBtnGroup"> |
|
|
|
<el-button class="feedbackBackBtn confirm" @click="submitFailureConfirm" type="primary">确定</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
@ -235,6 +375,98 @@ onMounted(() => { |
|
|
|
width: 200px; |
|
|
|
height: 200px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feedbackBackTitle { |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
font-size: 25px; |
|
|
|
font-weight: bold; |
|
|
|
color: #2961FF |
|
|
|
} |
|
|
|
|
|
|
|
.feedbackBackAttention { |
|
|
|
font-size: 15px; |
|
|
|
font-weight: bold; |
|
|
|
margin: 10px 5px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.feedbackBackBtnGroup { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
margin: 20px auto; |
|
|
|
width: 75%; |
|
|
|
} |
|
|
|
|
|
|
|
.feedbackBackBtn { |
|
|
|
margin: 0 auto; |
|
|
|
font-weight: bold; |
|
|
|
border-radius: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.save { |
|
|
|
background: #816CF6; |
|
|
|
border: none; |
|
|
|
} |
|
|
|
|
|
|
|
.nosave{ |
|
|
|
color: #816CF6; |
|
|
|
background: white; |
|
|
|
border: none; |
|
|
|
} |
|
|
|
|
|
|
|
.confirm { |
|
|
|
background: #816CF6; |
|
|
|
border: none; |
|
|
|
} |
|
|
|
|
|
|
|
.feedbackContentOverLengthTitle { |
|
|
|
font-size: 25px; |
|
|
|
font-weight: bold; |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
margin: 20px 0; |
|
|
|
color: #2961FF; |
|
|
|
} |
|
|
|
|
|
|
|
.feedbackContentOverLengthContent { |
|
|
|
font-size: 15px; |
|
|
|
font-weight: bold; |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
margin: 20px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.imgLine { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.dialogImg { |
|
|
|
max-width: 300px; |
|
|
|
width: 50%; |
|
|
|
height: 50%; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
|
|
|
|
.feedbackSuccessTitle { |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
font-size: 25px; |
|
|
|
font-weight: bold; |
|
|
|
color: #2961FF |
|
|
|
} |
|
|
|
|
|
|
|
.feedbackFailureTitle { |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
font-size: 25px; |
|
|
|
font-weight: bold; |
|
|
|
color: #ff4646 |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style> |
|
|
|
.uploadImg .el-upload { |
|
|
|
@ -248,4 +480,20 @@ onMounted(() => { |
|
|
|
height: 100px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.feedbackContentOverLengthBtn { |
|
|
|
margin: 0 auto; |
|
|
|
color: white; |
|
|
|
|
|
|
|
&:hover, |
|
|
|
&:active, |
|
|
|
&:focus { |
|
|
|
color: white !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.save-dialog { |
|
|
|
background: linear-gradient(90deg, #cac4fe, #b9d0fc, #a7dbfc); |
|
|
|
border-radius: 20px; |
|
|
|
} |
|
|
|
</style> |
no99
3 months ago
