From 3012597c761144266a79a946bc868769c9df8891 Mon Sep 17 00:00:00 2001
From: no99 <17663930442@163.com>
Date: Tue, 8 Jul 2025 16:03:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=8D=E9=A6=88=E7=99=BB=E5=BD=95=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E6=A3=80=E6=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Feedback.vue | 934 ++++++++++++++++++++++++++-----------------------
 1 file changed, 491 insertions(+), 443 deletions(-)

diff --git a/src/views/Feedback.vue b/src/views/Feedback.vue
index 7a10c33..32ed8a9 100644
--- a/src/views/Feedback.vue
+++ b/src/views/Feedback.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, onMounted, watch, nextTick, onUnmounted } from "vue";
-import { useDataStore } from '@/store/dataList.js'
-import { addFeedbackAPI, getFeedbackAPI } from "../api/AIxiaocaishen"
+import { useDataStore } from "@/store/dataList.js";
+import { addFeedbackAPI, getFeedbackAPI } from "../api/AIxiaocaishen";
 import feedback from "../assets/img/Feedback/feedback.png";
 import feedbackImg from "../assets/img/Feedback/feedbackImg.png";
 import feedbackSuccess from "../assets/img/Feedback/feedbackSuccess.png";
@@ -12,620 +12,668 @@ import failure from "../assets/img/Feedback/failure.png";
 import save from "../assets/img/Feedback/save.png";
 import back from "../assets/img/Feedback/back.png";
 import purpleDot from "../assets/img/Feedback/purpleDot.png";
-import moment from 'moment';
+import moment from "moment";
 
-const dataStore = useDataStore()
+const dataStore = useDataStore();
 
 const feedbackContent = ref("");
 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 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 {
-            let img1 = ''
-            let img2 = ''
-            let img3 = '';
-            if (feedbackFileList.value[0]) {
-                img1 = feedbackFileList.value[0].url;
-            }
-            if (feedbackFileList.value[1]) {
-                img2 = feedbackFileList.value[1].url;
-            }
-            if (feedbackFileList.value[2]) {
-                img3 = feedbackFileList.value[2].url;
-            }
-            console.log(img1, img2, img3);
-            const result = await addFeedbackAPI({
-                token: localStorage.getItem('localToken'),
-                content: feedbackContent.value,
-                image1: img1,
-                image2: img2,
-                image3: img3,
-
-            })
-
-            console.log(result)
-
-            feedbackHistory();
-
-            submitSuccessDialogVisible.value = true;
-        } catch (error) {
-            submitFailureDialogVisible.value = true;
-            submitFailureContent.value = '反馈提交异常(错误代码：' + error.response.status + '),建议尝试更换网络环境后重新提交。';
-        }
+  console.log(feedbackContent.value);
+  console.log(feedbackFileList.value);
+  const token = localStorage.getItem("localToken");
+  if (feedbackContent.value == "" && feedbackFileList.value.length == 0) {
+    submitFailureDialogVisible.value = true;
+    submitFailureContent.value = "请输入反馈内容或上传图片";
+  } else if (!token) {
+    submitFailureDialogVisible.value = true;
+    submitFailureContent.value = "token已失效，请重新登录！";
+  } else {
+    try {
+      let img1 = "";
+      let img2 = "";
+      let img3 = "";
+      if (feedbackFileList.value[0]) {
+        img1 = feedbackFileList.value[0].url;
+      }
+      if (feedbackFileList.value[1]) {
+        img2 = feedbackFileList.value[1].url;
+      }
+      if (feedbackFileList.value[2]) {
+        img3 = feedbackFileList.value[2].url;
+      }
+      console.log(img1, img2, img3);
+      const result = await addFeedbackAPI({
+        token: token,
+        content: feedbackContent.value,
+        image1: img1,
+        image2: img2,
+        image3: img3,
+      });
+
+      console.log(result);
+
+      feedbackHistory();
+
+      submitSuccessDialogVisible.value = true;
+    } catch (error) {
+      submitFailureDialogVisible.value = true;
+      submitFailureContent.value =
+        "反馈提交异常(错误代码：" +
+        error.response.status +
+        "),建议尝试更换网络环境后重新提交。";
     }
-}
+  }
+};
 
-const feedbackHistoryList = ref([])
+const feedbackHistoryList = ref([]);
 
 const feedbackHistory = async () => {
-    try {
-        const result = await getFeedbackAPI({
-            token: localStorage.getItem('localToken'),
-        })
-        console.log(result)
-
-        if (result.data.length > 0) {
-            isHistoryFeedback.value = true;
+  try {
+    const result = await getFeedbackAPI({
+      token: localStorage.getItem("localToken"),
+    });
+    console.log(result);
 
-            feedbackHistoryList.value = result.data;
+    if (result.data.length > 0) {
+      isHistoryFeedback.value = true;
 
-        } else {
-            isHistoryFeedback.value = false;
-        }
-
-    } catch (error) {
-        console.log(error)
+      feedbackHistoryList.value = result.data;
+    } else {
+      isHistoryFeedback.value = false;
     }
-}
+  } catch (error) {
+    console.log(error);
+  }
+};
 
 const submitSuccessConfirm = () => {
-    feedbackContent.value = '';
-    feedbackFileList.value = [];
-    if (localStorage.getItem('feedbackContent')) {
-        localStorage.removeItem('feedbackContent');
-    }
-    if (localStorage.getItem('feedbackFileList')) {
-        localStorage.removeItem('feedbackFileList');
-    }
-    submitSuccessDialogVisible.value = false;
-}
+  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;
-}
+  submitFailureDialogVisible.value = false;
+};
 // 字数限制提示弹窗
-const feedbackContentOverLengthDialogVisible = ref(false)
+const feedbackContentOverLengthDialogVisible = ref(false);
 
 const feedbackContentLengthJudge = () => {
-    console.log('字数判断');
-    console.log(feedbackContent.value.length)
-    if (feedbackContent.value.length >= 2000) {
-        feedbackContentOverLengthDialogVisible.value = true;
-    }
-}
+  console.log("字数判断");
+  console.log(feedbackContent.value.length);
+  if (feedbackContent.value.length >= 2000) {
+    feedbackContentOverLengthDialogVisible.value = true;
+  }
+};
 
 const feedbackContentOverLengthConfirm = () => {
-    feedbackContentOverLengthDialogVisible.value = false;
-}
+  feedbackContentOverLengthDialogVisible.value = false;
+};
 
 const feedbackContentChange = () => {
-    console.log('内容改变');
-    console.log(feedbackContent.value)
+  console.log("内容改变");
+  console.log(feedbackContent.value);
 
-    localStorage.setItem('feedbackContent', feedbackContent.value);
-}
+  localStorage.setItem("feedbackContent", feedbackContent.value);
+};
 
 const check = function (file, fileList) {
-    console.log('调用check方法');
-    console.log(fileList);
-    console.log(fileList.length);
-}
+  console.log("调用check方法");
+  console.log(fileList);
+  console.log(fileList.length);
+};
 
 const successChange = function (file, fileList) {
-    console.log('调用successChange方法');
-    console.log(fileList);
-    console.log(fileList.response);
-    if (fileList.response.code == 200) {
-        feedbackFileList.value.push(fileList.response.data)
-    }
-    console.log(feedbackFileList.value);
-    localStorage.setItem('feedbackFileList', JSON.stringify(feedbackFileList.value));
-}
-
-const dialogImageUrl = ref('')
-const dialogVisible = ref(false)
+  console.log("调用successChange方法");
+  console.log(fileList);
+  console.log(fileList.response);
+  if (fileList.response.code == 200) {
+    feedbackFileList.value.push(fileList.response.data);
+  }
+  console.log(feedbackFileList.value);
+  localStorage.setItem(
+    "feedbackFileList",
+    JSON.stringify(feedbackFileList.value)
+  );
+};
+
+const dialogImageUrl = ref("");
+const dialogVisible = ref(false);
 
 const handleRemove = (uploadFile, uploadFiles) => {
-    console.log(uploadFile, uploadFiles)
-    feedbackFileList.value = uploadFiles;
-    console.log('调用handleRemove方法');
-    console.log(feedbackFileList.value);
-    console.log(feedbackFileList.value.length);
-    localStorage.setItem('feedbackFileList', JSON.stringify(feedbackFileList.value));
-}
+  console.log(uploadFile, uploadFiles);
+  feedbackFileList.value = uploadFiles;
+  console.log("调用handleRemove方法");
+  console.log(feedbackFileList.value);
+  console.log(feedbackFileList.value.length);
+  localStorage.setItem(
+    "feedbackFileList",
+    JSON.stringify(feedbackFileList.value)
+  );
+};
 
 const handlePictureCardPreview = (uploadFile) => {
-    dialogImageUrl.value = uploadFile.url
-    dialogVisible.value = true
-}
+  dialogImageUrl.value = uploadFile.url;
+  dialogVisible.value = true;
+};
 
 // 返回弹窗
-const feedbackBackDialogVisible = ref(false)
+const feedbackBackDialogVisible = ref(false);
 
 const feedbackBack = () => {
-    if(feedbackContent.value == '' && feedbackFileList.value.length == 0) {
-       dataStore.isFeedback = false;
-       return; 
-    }
-    feedbackBackDialogVisible.value = true;
-}
+  if (feedbackContent.value == "" && feedbackFileList.value.length == 0) {
+    dataStore.isFeedback = false;
+    return;
+  }
+  feedbackBackDialogVisible.value = true;
+};
 // 确人保存
 const feedbackBackConfirm = () => {
-    feedbackBackDialogVisible.value = false;
-    dataStore.isFeedback = false;
-}
+  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;
-}
-
+  if (localStorage.getItem("feedbackContent")) {
+    localStorage.removeItem("feedbackContent");
+  }
+  if (localStorage.getItem("feedbackFileList")) {
+    localStorage.removeItem("feedbackFileList");
+  }
+  feedbackBackDialogVisible.value = false;
+  dataStore.isFeedback = false;
+};
 
 onMounted(() => {
-    feedbackHistory()
-
-    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)
-})
-
+  feedbackHistory();
+
+  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);
+});
 </script>
 
 <template>
-    <el-container>
-        <div>
-            <div @click="feedbackBack">
-                <img :src="back" alt="返回按钮" class="backImg">
-            </div>
+  <el-container>
+    <div>
+      <div @click="feedbackBack">
+        <img :src="back" alt="返回按钮" class="backImg" />
+      </div>
+    </div>
+    <el-scrollbar>
+      <el-header>
+        <div class="feedbackImgClass">
+          <img :src="feedback" alt="用户反馈" class="img" />
+          <img :src="feedbackImg" alt="用户反馈" class="img" />
+        </div>
+      </el-header>
+      <el-main>
+        <div class="card">
+          <div class="feedbackTitle header-item">填写反馈内容</div>
+          <div class="header-item">
+            <el-input
+              class="feedbackContent"
+              v-model="feedbackContent"
+              :rows="5"
+              type="textarea"
+              maxlength="2000"
+              show-word-limit
+              placeholder="请描写您想反馈的内容..."
+              @change="feedbackContentChange"
+              @input="feedbackContentLengthJudge"
+            />
+          </div>
+          <div class="feedbackTitle header-item">照片上传</div>
+          <div class="header-item">
+            <el-upload
+              class="uploadImg"
+              :action="uploadUrl"
+              list-type="picture-card"
+              :auto-upload="true"
+              :on-success="successChange"
+              accept=".png, .jpg, .jpeg, .ico,"
+              :on-change="check"
+              :file-list="feedbackFileList"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="handleRemove"
+              :limit="3"
+            >
+              <el-icon>
+                <Plus />
+              </el-icon>
+              <template #tip>
+                <div class="el-upload__tip">最多上传三张</div>
+              </template>
+            </el-upload>
+          </div>
+          <div>
+            <div class="feedbackSubmitBtn" @click="feedbackSubmit">提 交</div>
+          </div>
         </div>
-        <el-scrollbar>
-            <el-header>
-                <div class="feedbackImgClass">
-                    <img :src="feedback" alt="用户反馈" class="img">
-                    <img :src="feedbackImg" alt="用户反馈" class="img">
+        <div class="card">
+          <div class="feedbackTitle">历史反馈内容</div>
+          <div v-if="isHistoryFeedback">
+            <div
+              v-for="(item, index) in feedbackHistoryList"
+              :key="index"
+              class="feedbackHistory"
+            >
+              <div class="feedbackHistoryItem">
+                <div class="feedbackHistoryTitle">
+                  <img :src="purpleDot" alt="紫点" class="purpleDot" />
+                  {{ moment(item.created_at).format("YYYY-MM-DD HH:mm") }}
+                  <div class="feedbackSuccess">
+                    <div class="feedbackSuccessWord">反馈成功</div>
+                    <img
+                      class="feedbackSuccessImg"
+                      :src="feedbackSuccess"
+                      alt="成功"
+                    />
+                  </div>
                 </div>
-            </el-header>
-            <el-main>
-                <div class="card">
-                    <div class="feedbackTitle header-item">
-                        填写反馈内容
-                    </div>
-                    <div class="header-item">
-                        <el-input class="feedbackContent" v-model="feedbackContent" :rows="5" type="textarea"
-                            maxlength="2000" show-word-limit placeholder="请描写您想反馈的内容..." @change="feedbackContentChange"
-                            @input="feedbackContentLengthJudge" />
-                    </div>
-                    <div class="feedbackTitle header-item">
-                        照片上传
-                    </div>
-                    <div class="header-item">
-                        <el-upload class="uploadImg" :action="uploadUrl" list-type="picture-card" :auto-upload="true"
-                            :on-success="successChange" accept=".png, .jpg, .jpeg, .ico," :on-change="check"
-                            :file-list="feedbackFileList" :on-preview="handlePictureCardPreview"
-                            :on-remove="handleRemove" :limit="3">
-                            <el-icon>
-                                <Plus />
-                            </el-icon>
-                            <template #tip>
-                                <div class="el-upload__tip">
-                                    最多上传三张
-                                </div>
-                            </template>
-                        </el-upload>
-                    </div>
-                    <div>
-                        <div class="feedbackSubmitBtn" @click="feedbackSubmit">提 交</div>
-                    </div>
+                <div class="feedbackHistoryContent">
+                  {{ item.content }}
                 </div>
-                <div class="card">
-                    <div class="feedbackTitle">
-                        历史反馈内容
-                    </div>
-                    <div v-if="isHistoryFeedback">
-
-                        <div v-for="(item, index) in feedbackHistoryList" :key="index" class="feedbackHistory">
-                            <div class="feedbackHistoryItem">
-                                <div class="feedbackHistoryTitle">
-                                    <img :src="purpleDot" alt="紫点" class="purpleDot">
-                                    {{ moment(item.created_at).format('YYYY-MM-DD HH:mm') }}
-                                    <div class="feedbackSuccess">
-                                        <div class="feedbackSuccessWord">
-                                            反馈成功
-                                        </div>
-                                        <img class="feedbackSuccessImg" :src="feedbackSuccess" alt="成功">
-                                    </div>
-                                </div>
-                                <div class="feedbackHistoryContent">
-                                    {{ item.content }}
-                                </div>
-                                <div class="feedbackHistoryImg">
-                                    <el-image v-if="item.image1" :src="item.image1" alt="图片错误"
-                                        class="feedbackHistoryImgItem" :preview-src-list="[item.image1]" />
-                                    <el-image v-if="item.image2" :src="item.image2" alt="图片错误"
-                                        class="feedbackHistoryImgItem" :preview-src-list="[item.image2]" />
-                                    <el-image v-if="item.image3" :src="item.image3" alt="图片错误"
-                                        class="feedbackHistoryImgItem" :preview-src-list="[item.image3]" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div v-else>
-                        <div class="noFeedback">
-                            <img class="noFeedbackImg" :src="noFeedback" alt="暂无历史提交">
-                            暂无记录
-                        </div>
-                    </div>
+                <div class="feedbackHistoryImg">
+                  <el-image
+                    v-if="item.image1"
+                    :src="item.image1"
+                    alt="图片错误"
+                    class="feedbackHistoryImgItem"
+                    :preview-src-list="[item.image1]"
+                  />
+                  <el-image
+                    v-if="item.image2"
+                    :src="item.image2"
+                    alt="图片错误"
+                    class="feedbackHistoryImgItem"
+                    :preview-src-list="[item.image2]"
+                  />
+                  <el-image
+                    v-if="item.image3"
+                    :src="item.image3"
+                    alt="图片错误"
+                    class="feedbackHistoryImgItem"
+                    :preview-src-list="[item.image3]"
+                  />
                 </div>
-            </el-main>
-        </el-scrollbar>
-    </el-container>
-
-    <el-dialog v-model="dialogVisible">
-        <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>
+            </div>
+          </div>
+          <div v-else>
+            <div class="noFeedback">
+              <img class="noFeedbackImg" :src="noFeedback" alt="暂无历史提交" />
+              暂无记录
+            </div>
+          </div>
         </div>
-    </el-dialog>
-
+      </el-main>
+    </el-scrollbar>
+  </el-container>
+
+  <el-dialog v-model="dialogVisible">
+    <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>
-
-.backImg{
-    width: 40px;
-    height: 40px;
-    margin-left: 10px;
+.backImg {
+  width: 40px;
+  height: 40px;
+  margin-left: 10px;
 }
 
 .el-container {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
 }
 
 .el-header {
-    height: auto;
-    padding: 0;
+  height: auto;
+  padding: 0;
 }
 
 .el-main {
-    height: auto;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    overflow: hidden;
+  height: auto;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  overflow: hidden;
 }
 
 .card {
-    background-color: white;
-    padding: 20px;
-    height: auto;
-    border-radius: 15px;
+  background-color: white;
+  padding: 20px;
+  height: auto;
+  border-radius: 15px;
 }
 
 .header-item {
-    margin: 10px 0;
+  margin: 10px 0;
 }
 
 .feedbackImgClass {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 20px;
 }
 
 .img {
-    max-width: 50%;
-    height: auto;
-    object-fit: contain;
+  max-width: 50%;
+  height: auto;
+  object-fit: contain;
 }
 
 .feedbackSubmitBtn {
-    width: 60%;
-    height: 50px;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto;
-    background: linear-gradient(90deg, #cac4fe, #b9d0fc, #a7dbfc);
-    border-radius: 60px;
-
-    color: #4423FF;
-    font-weight: bold;
-    font-size: 25px;
+  width: 60%;
+  height: 50px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  background: linear-gradient(90deg, #cac4fe, #b9d0fc, #a7dbfc);
+  border-radius: 60px;
 
-    cursor: pointer;
+  color: #4423ff;
+  font-weight: bold;
+  font-size: 25px;
 
+  cursor: pointer;
 }
 
 .feedbackTitle {
-    font-size: 25px;
-    font-weight: bold;
-
+  font-size: 25px;
+  font-weight: bold;
 }
 
 .feedbackContent {
-    font-size: 20px;
+  font-size: 20px;
 }
 
 @media (max-width: 768px) {
-    .feedbackTitle {
-        font-size: 20px;
-    }
+  .feedbackTitle {
+    font-size: 20px;
+  }
 
-    .feedbackContent {
-        font-size: 15px;
-    }
+  .feedbackContent {
+    font-size: 15px;
+  }
 }
 
 .noFeedback {
-    margin: 20px 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+  margin: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .noFeedbackImg {
-    width: 200px;
-    height: 200px;
+  width: 200px;
+  height: 200px;
 }
 
-
-
 .feedbackBackTitle {
-    width: 100%;
-    text-align: center;
-    font-size: 25px;
-    font-weight: bold;
-    color: #2961FF
+  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;
+  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%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 20px auto;
+  width: 75%;
 }
 
 .feedbackBackBtn {
-    margin: 0 auto;
-    font-weight: bold;
-    border-radius: 20px;
+  margin: 0 auto;
+  font-weight: bold;
+  border-radius: 20px;
 }
 
 .save {
-    background: #816CF6;
-    border: none;
+  background: #816cf6;
+  border: none;
 }
 
 .nosave {
-    color: #816CF6;
-    background: white;
-    border: none;
+  color: #816cf6;
+  background: white;
+  border: none;
 }
 
 .confirm {
-    background: #816CF6;
-    border: none;
+  background: #816cf6;
+  border: none;
 }
 
 .feedbackContentOverLengthTitle {
-    font-size: 25px;
-    font-weight: bold;
-    width: 100%;
-    text-align: center;
-    margin: 20px 0;
-    color: #2961FF;
+  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;
+  font-size: 15px;
+  font-weight: bold;
+  width: 100%;
+  text-align: center;
+  margin: 20px 0;
 }
 
 .imgLine {
-    width: 100%;
-    display: flex;
+  width: 100%;
+  display: flex;
 }
 
 .dialogImg {
-    max-width: 300px;
-    width: 50%;
-    height: 50%;
-    margin: 0 auto;
+  max-width: 300px;
+  width: 50%;
+  height: 50%;
+  margin: 0 auto;
 }
 
 .feedbackSuccessTitle {
-    width: 100%;
-    text-align: center;
-    font-size: 25px;
-    font-weight: bold;
-    color: #2961FF
+  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
+  width: 100%;
+  text-align: center;
+  font-size: 25px;
+  font-weight: bold;
+  color: #ff4646;
 }
 
 .purpleDot {
-    margin: 0px 5px 0px 0px;
-    width: 20px;
-    height: 20px;
+  margin: 0px 5px 0px 0px;
+  width: 20px;
+  height: 20px;
 }
 
 .feedbackHistoryTitle {
-    display: flex;
+  display: flex;
 }
 
 .feedbackSuccess {
-    margin-left: auto;
-    display: flex;
-
+  margin-left: auto;
+  display: flex;
 }
 
 .feedbackSuccessWord {
-    padding: 3px 0 0 0;
-    color: #4221FF;
-    font-weight: bold;
+  padding: 3px 0 0 0;
+  color: #4221ff;
+  font-weight: bold;
 }
 
 .feedbackSuccessImg {
-    width: 30px;
-    height: auto;
-    margin: 0 5px;
+  width: 30px;
+  height: auto;
+  margin: 0 5px;
 }
 
 .feedbackHistoryContent {
-    min-height: 50px;
-    margin: 0 0 0 25px;
-    font-weight: bold;
+  min-height: 50px;
+  margin: 0 0 0 25px;
+  font-weight: bold;
 }
 
 .feedbackHistoryImg {
-    display: flex;
-    margin: 0px 0px 0px 20px;
+  display: flex;
+  margin: 0px 0px 0px 20px;
 }
 
 .feedbackHistoryImgItem {
-    width: 100px;
-    height: auto;
-    margin: 5px 10px;
+  width: 100px;
+  height: auto;
+  margin: 5px 10px;
 }
 </style>
 <style>
 .uploadImg .el-upload {
-    width: 150px;
-    height: 150px;
+  width: 150px;
+  height: 150px;
 }
 
 @media (max-width: 768px) {
-    .uploadImg .el-upload {
-        width: 100px;
-        height: 100px;
-    }
+  .uploadImg .el-upload {
+    width: 100px;
+    height: 100px;
+  }
 }
 
 .feedbackContentOverLengthBtn {
-    margin: 0 auto;
-    color: white;
+  margin: 0 auto;
+  color: white;
 
-    &:hover,
-    &:active,
-    &:focus {
-        color: white !important;
-    }
+  &:hover,
+  &:active,
+  &:focus {
+    color: white !important;
+  }
 }
 
 .save-dialog {
-    background: linear-gradient(90deg, #cac4fe, #b9d0fc, #a7dbfc);
-    border-radius: 20px;
+  background: linear-gradient(90deg, #cac4fe, #b9d0fc, #a7dbfc);
+  border-radius: 20px;
 }
 </style>
\ No newline at end of file