反馈登录状态检查

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,29 +12,33 @@ 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) {
+  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 = '请输入反馈内容或上传图片';
+    submitFailureContent.value = "token已失效，请重新登录！";
   } else {
     try {
-            let img1 = ''
-            let img2 = ''
-            let img3 = '';
+      let img1 = "";
+      let img2 = "";
+      let img3 = "";
       if (feedbackFileList.value[0]) {
         img1 = feedbackFileList.value[0].url;
       }
@@ -46,204 +50,221 @@ const feedbackSubmit = async () => {
       }
       console.log(img1, img2, img3);
       const result = await addFeedbackAPI({
-                token: localStorage.getItem('localToken'),
+        token: token,
         content: feedbackContent.value,
         image1: img1,
         image2: img2,
         image3: img3,
+      });
 
-            })
-
-            console.log(result)
+      console.log(result);
 
       feedbackHistory();
 
       submitSuccessDialogVisible.value = true;
     } catch (error) {
       submitFailureDialogVisible.value = true;
-            submitFailureContent.value = '反馈提交异常(错误代码：' + error.response.status + '),建议尝试更换网络环境后重新提交。';
+      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)
+      token: localStorage.getItem("localToken"),
+    });
+    console.log(result);
 
     if (result.data.length > 0) {
       isHistoryFeedback.value = true;
 
       feedbackHistoryList.value = result.data;
-
     } else {
       isHistoryFeedback.value = false;
     }
-
   } catch (error) {
-        console.log(error)
+    console.log(error);
   }
-}
+};
 
 const submitSuccessConfirm = () => {
-    feedbackContent.value = '';
+  feedbackContent.value = "";
   feedbackFileList.value = [];
-    if (localStorage.getItem('feedbackContent')) {
-        localStorage.removeItem('feedbackContent');
+  if (localStorage.getItem("feedbackContent")) {
+    localStorage.removeItem("feedbackContent");
   }
-    if (localStorage.getItem('feedbackFileList')) {
-        localStorage.removeItem('feedbackFileList');
+  if (localStorage.getItem("feedbackFileList")) {
+    localStorage.removeItem("feedbackFileList");
   }
   submitSuccessDialogVisible.value = false;
-}
+};
 const submitFailureConfirm = () => {
   submitFailureDialogVisible.value = false;
-}
+};
 // 字数限制提示弹窗
-const feedbackContentOverLengthDialogVisible = ref(false)
+const feedbackContentOverLengthDialogVisible = ref(false);
 
 const feedbackContentLengthJudge = () => {
-    console.log('字数判断');
-    console.log(feedbackContent.value.length)
+  console.log("字数判断");
+  console.log(feedbackContent.value.length);
   if (feedbackContent.value.length >= 2000) {
     feedbackContentOverLengthDialogVisible.value = true;
   }
-}
+};
 
 const feedbackContentOverLengthConfirm = () => {
   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("调用check方法");
   console.log(fileList);
   console.log(fileList.length);
-}
+};
 
 const successChange = function (file, fileList) {
-    console.log('调用successChange方法');
+  console.log("调用successChange方法");
   console.log(fileList);
   console.log(fileList.response);
   if (fileList.response.code == 200) {
-        feedbackFileList.value.push(fileList.response.data)
+    feedbackFileList.value.push(fileList.response.data);
   }
   console.log(feedbackFileList.value);
-    localStorage.setItem('feedbackFileList', JSON.stringify(feedbackFileList.value));
-}
+  localStorage.setItem(
+    "feedbackFileList",
+    JSON.stringify(feedbackFileList.value)
+  );
+};
 
-const dialogImageUrl = ref('')
-const dialogVisible = ref(false)
+const dialogImageUrl = ref("");
+const dialogVisible = ref(false);
 
 const handleRemove = (uploadFile, uploadFiles) => {
-    console.log(uploadFile, uploadFiles)
+  console.log(uploadFile, uploadFiles);
   feedbackFileList.value = uploadFiles;
-    console.log('调用handleRemove方法');
+  console.log("调用handleRemove方法");
   console.log(feedbackFileList.value);
   console.log(feedbackFileList.value.length);
-    localStorage.setItem('feedbackFileList', JSON.stringify(feedbackFileList.value));
-}
+  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) {
+  if (feedbackContent.value == "" && feedbackFileList.value.length == 0) {
     dataStore.isFeedback = false;
     return;
   }
   feedbackBackDialogVisible.value = true;
-}
+};
 // 确人保存
 const feedbackBackConfirm = () => {
   feedbackBackDialogVisible.value = false;
   dataStore.isFeedback = false;
-}
+};
 // 取消保存
 const feedbackBackCancel = () => {
-    if (localStorage.getItem('feedbackContent')) {
-        localStorage.removeItem('feedbackContent');
+  if (localStorage.getItem("feedbackContent")) {
+    localStorage.removeItem("feedbackContent");
   }
-    if (localStorage.getItem('feedbackFileList')) {
-        localStorage.removeItem('feedbackFileList');
+  if (localStorage.getItem("feedbackFileList")) {
+    localStorage.removeItem("feedbackFileList");
   }
   feedbackBackDialogVisible.value = false;
   dataStore.isFeedback = false;
-}
-
+};
 
 onMounted(() => {
-    feedbackHistory()
+  feedbackHistory();
 
-    if (localStorage.getItem('feedbackContent')) {
-        feedbackContent.value = localStorage.getItem('feedbackContent')
+  if (localStorage.getItem("feedbackContent")) {
+    feedbackContent.value = localStorage.getItem("feedbackContent");
   } else {
-        feedbackContent.value = '';
+    feedbackContent.value = "";
   }
-    if (localStorage.getItem('feedbackFileList')) {
-        feedbackFileList.value = JSON.parse(localStorage.getItem('feedbackFileList'));
+  if (localStorage.getItem("feedbackFileList")) {
+    feedbackFileList.value = JSON.parse(
+      localStorage.getItem("feedbackFileList")
+    );
   } else {
     feedbackFileList.value = [];
   }
-    console.log(uploadUrl)
-})
-
+  console.log(uploadUrl);
+});
 </script>
 
 <template>
   <el-container>
     <div>
       <div @click="feedbackBack">
-                <img :src="back" alt="返回按钮" class="backImg">
+        <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">
+          <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="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>
+            <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-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>
+                <div class="el-upload__tip">最多上传三张</div>
               </template>
             </el-upload>
           </div>
@@ -252,40 +273,58 @@ onMounted(() => {
           </div>
         </div>
         <div class="card">
-                    <div class="feedbackTitle">
-                        历史反馈内容
-                    </div>
+          <div class="feedbackTitle">历史反馈内容</div>
           <div v-if="isHistoryFeedback">
-
-                        <div v-for="(item, index) in feedbackHistoryList" :key="index" class="feedbackHistory">
+            <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') }}
+                  <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 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]" />
+                  <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="暂无历史提交">
+              <img class="noFeedbackImg" :src="noFeedback" alt="暂无历史提交" />
               暂无记录
             </div>
           </div>
@@ -300,68 +339,82 @@ onMounted(() => {
 
   <el-dialog v-model="feedbackBackDialogVisible" class="save-dialog">
     <div class="imgLine">
-            <img class="dialogImg" :src="save" alt="保存">
-        </div>
-        <div class="feedbackBackTitle">
-            系统提示
+      <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>
+      <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>
+  <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>
+      <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">
-            ——感谢您的反馈——
+      <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>
+      <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">
-            提交失败
+      <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>
+      <el-button
+        class="feedbackBackBtn confirm"
+        @click="submitFailureConfirm"
+        type="primary"
+        >确定</el-button
+      >
     </div>
   </el-dialog>
-
 </template>
 
 <style scoped>
-
-.backImg{
+.backImg {
   width: 40px;
   height: 40px;
   margin-left: 10px;
@@ -422,18 +475,16 @@ onMounted(() => {
   background: linear-gradient(90deg, #cac4fe, #b9d0fc, #a7dbfc);
   border-radius: 60px;
 
-    color: #4423FF;
+  color: #4423ff;
   font-weight: bold;
   font-size: 25px;
 
   cursor: pointer;
-
 }
 
 .feedbackTitle {
   font-size: 25px;
   font-weight: bold;
-
 }
 
 .feedbackContent {
@@ -463,14 +514,12 @@ onMounted(() => {
   height: 200px;
 }
 
-
-
 .feedbackBackTitle {
   width: 100%;
   text-align: center;
   font-size: 25px;
   font-weight: bold;
-    color: #2961FF
+  color: #2961ff;
 }
 
 .feedbackBackAttention {
@@ -495,18 +544,18 @@ onMounted(() => {
 }
 
 .save {
-    background: #816CF6;
+  background: #816cf6;
   border: none;
 }
 
 .nosave {
-    color: #816CF6;
+  color: #816cf6;
   background: white;
   border: none;
 }
 
 .confirm {
-    background: #816CF6;
+  background: #816cf6;
   border: none;
 }
 
@@ -516,7 +565,7 @@ onMounted(() => {
   width: 100%;
   text-align: center;
   margin: 20px 0;
-    color: #2961FF;
+  color: #2961ff;
 }
 
 .feedbackContentOverLengthContent {
@@ -544,7 +593,7 @@ onMounted(() => {
   text-align: center;
   font-size: 25px;
   font-weight: bold;
-    color: #2961FF
+  color: #2961ff;
 }
 
 .feedbackFailureTitle {
@@ -552,7 +601,7 @@ onMounted(() => {
   text-align: center;
   font-size: 25px;
   font-weight: bold;
-    color: #ff4646
+  color: #ff4646;
 }
 
 .purpleDot {
@@ -568,12 +617,11 @@ onMounted(() => {
 .feedbackSuccess {
   margin-left: auto;
   display: flex;
-
 }
 
 .feedbackSuccessWord {
   padding: 3px 0 0 0;
-    color: #4221FF;
+  color: #4221ff;
   font-weight: bold;
 }