加了缓存

.env.development

@@ -7,6 +7,7 @@ VITE_PUBLIC_PATH = /
 #新数据接口
 VITE_APP_API_BASE_URL = "http://39.101.133.168:8828/link"
 
+VITE_APP_IMG_API_BASE_URL = "http://39.101.133.168:8828/hljw/api/aws/upload"
 #MJ API
 VITE_APP_MJ_API_BASE_URL = "http://192.168.9.19:8080/api"
 

.env.production

@@ -11,6 +11,7 @@ VITE_USE_MOCK = true
 # VITE_APP_API_BASE_URL = https://api.homilychart.com/link
 VITE_APP_API_BASE_URL = "http://39.101.133.168:8828/link"
 
+VITE_APP_IMG_API_BASE_URL = "https://api.homilychart.com/hljw/api/aws/upload"
 #MJ API
 VITE_APP_MJ_API_BASE_URL = "http://192.168.9.19:8080/api"
 # Whether to enable gzip or brotli compression

src/views/Feedback.vue

@@ -1,22 +1,251 @@
 <script setup>
-    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 { ref, computed, onMounted, watch, nextTick, onUnmounted } from "vue";
+import { useDataStore } from '@/store/dataList.js'
 
+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";
+
+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 feedbackSubmit = async () => {
+    console.log(feedbackContent.value)
+}
+
+const feedbackContentChange = () => {
+    console.log('内容改变');
+    console.log(feedbackContent.value)
+
+    localStorage.setItem('feedbackContent', feedbackContent.value);
+}
+
+const check = function (file, fileList) {
+    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)
+
+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));
+}
+
+const handlePictureCardPreview = (uploadFile) => {
+    dialogImageUrl.value = uploadFile.url
+    dialogVisible.value = true
+}
+
+const feedbackBack = () => {
+    dataStore.isFeedback = false;
+}
+
+onMounted(() => {
+    feedbackContent.value = localStorage.getItem('feedbackContent');
+    feedbackFileList.value = JSON.parse(localStorage.getItem('feedbackFileList'));
+    console.log(uploadUrl)
+})
 
 </script>
 
 <template>
     <el-container>
-        <el-header>
-            头
-        </el-header>
-        <el-main>
-            身
-        </el-main>
+        <div>
+            <div @click="feedbackBack">返回</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" />
+                    </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>
+                <div class="card">
+                    <div class="feedbackTitle">
+                        历史反馈内容
+                    </div>
+                    <div v-if="isHistoryFeedback">
+                        有内容
+                    </div>
+                    <div v-else>
+                        <div class="noFeedback">
+                            <img class="noFeedbackImg" :src="noFeedback" alt="暂无历史提交">
+                            暂无记录
+                        </div>
+                    </div>
+                </div>
+            </el-main>
+        </el-scrollbar>
     </el-container>
+
+    <el-dialog v-model="dialogVisible">
+        <img w-full :src="dialogImageUrl" alt="Preview Image" />
+    </el-dialog>
+
 </template>
 
 <style scoped>
+.el-container {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.el-header {
+    height: auto;
+    padding: 0;
+}
+
+.el-main {
+    height: auto;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    overflow: hidden;
+}
+
+.card {
+    background-color: white;
+    padding: 20px;
+    height: auto;
+    border-radius: 15px;
+}
+
+.header-item {
+    margin: 10px 0;
+}
+
+.feedbackImgClass {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 20px;
+}
+
+.img {
+    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;
+
+    cursor: pointer;
+
+}
+
+.feedbackTitle {
+    font-size: 25px;
+    font-weight: bold;
+
+}
+
+.feedbackContent {
+    font-size: 20px;
+}
+
+@media (max-width: 768px) {
+    .feedbackTitle {
+        font-size: 20px;
+    }
+
+    .feedbackContent {
+        font-size: 15px;
+    }
+}
+
+.noFeedback {
+    margin: 20px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.noFeedbackImg {
+    width: 200px;
+    height: 200px;
+}
+</style>
+<style>
+.uploadImg .el-upload {
+    width: 150px;
+    height: 150px;
+}
 
+@media (max-width: 768px) {
+    .uploadImg .el-upload {
+        width: 100px;
+        height: 100px;
+    }
+}
 </style>

src/views/homePage.vue

@@ -27,9 +27,9 @@ import msgBtn from "../assets/img/homePage/tail/msg.png";
 import feedbackBtn from "../assets/img/Feedback/feedbackBtn.png";
 
 
-import VConsole from 'vconsole';
+// import VConsole from 'vconsole';
 
-const vConsole = new VConsole();
+// const vConsole = new VConsole();
 
 // import { useUserStore } from "../store/userPessionCode.js";
 const { getQueryVariable, setActiveTabIndex } = useDataStore()