Ver código fonte

fix: 互动问题

lxf 3 semanas atrás
pai
commit
e2e0ece937

+ 1 - 1
src/components/popup/restorePlantingPopup.vue

@@ -428,7 +428,7 @@ const submitInteractResult = async (type = "time", { closeOnSuccess = true } = {
         const res = await VE_API.questionnaire.saveInteractResult(buildSubmitPayload(type));
         if (res?.code === 200) {
             if (closeOnSuccess) {
-                showMessage(res.msg || "提交成功", "success");
+                // showMessage(res.msg || "提交成功", "success");
                 visible.value = false;
                 resetForm();
                 showSuccessPopup.value = true;

+ 80 - 7
src/views/old_mini/agri_file/pages/growthTrack.vue

@@ -70,11 +70,17 @@
                 </photo-provider>
             </div>
         </div>
-        <div class="guide-card__upload" @click="handleUploadClick">
-            <el-icon>
-                <Plus />
-            </el-icon>
-            <span>{{ t("agriFile.uploadPhoto") }}</span>
+        <div class="guide-card__upload-wrap">
+            <div v-if="uploadGuideVisible" class="upload-guide-bubble">
+                <div class="upload-guide-bubble__content">上传照片,构建巡园档案</div>
+                <span class="upload-guide-bubble__arrow"></span>
+            </div>
+            <div class="guide-card__upload" @click="handleUploadClick">
+                <el-icon>
+                    <Plus />
+                </el-icon>
+                <span>{{ t("agriFile.uploadPhoto") }}</span>
+            </div>
         </div>
         <album-upload-popup v-model:show="showUploadPopup" @confirm="handleUploadConfirm" />
         <tip-popup
@@ -95,7 +101,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onActivated, ref } from "vue";
+import { computed, nextTick, onActivated, onBeforeUnmount, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { Icon } from "vant";
 import { ElMessage } from "element-plus";
@@ -113,6 +119,8 @@ const router = useRouter();
 
 // ---------- 常量 ----------
 const DEFAULT_GUIDE_IMAGE = require("@/assets/img/agricultural/patrol-guide.png");
+/** 首次进入上传引导,只展示一次 */
+const UPLOAD_GUIDE_STORAGE_KEY = "GROWTH_TRACK_UPLOAD_GUIDE";
 
 // ---------- 页面状态 ----------
 const interactTasks = ref([]);
@@ -122,6 +130,7 @@ const showUploadPopup = ref(false);
 const showSuccessPopup = ref(false);
 const showLeavePopup = ref(false);
 const needDraw = ref(true); // status≠1 时需先勾画种植范围
+const uploadGuideVisible = ref(false);
 
 // ---------- 计算属性 ----------
 const pageTitle = computed(() => route.query.pageName || t("agriFile.patrolGrowthTitle"));
@@ -271,8 +280,27 @@ const handleSubmit = () => {
     ElMessage.success(t("agriFile.submitSuccess"));
 };
 
+const dismissUploadGuide = () => {
+    if (!uploadGuideVisible.value) return;
+    uploadGuideVisible.value = false;
+    localStorage.setItem(UPLOAD_GUIDE_STORAGE_KEY, "1");
+};
+
+const tryShowUploadGuide = () => {
+    if (localStorage.getItem(UPLOAD_GUIDE_STORAGE_KEY)) return;
+    uploadGuideVisible.value = true;
+};
+
+const handleOutsideUploadGuideClick = (event) => {
+    if (!uploadGuideVisible.value) return;
+    const target = event.target;
+    if (target?.closest?.(".guide-card__upload-wrap")) return;
+    dismissUploadGuide();
+};
+
 /** 需勾画则先画范围;否则直接上传 */
 const handleUploadClick = () => {
+    dismissUploadGuide();
     if (needDraw.value) {
         router.push({
             path: "/add_zone",
@@ -330,7 +358,17 @@ const confirmLeave = () => {
     router.back();
 };
 
+onMounted(() => {
+    tryShowUploadGuide();
+    document.addEventListener("click", handleOutsideUploadGuideClick, true);
+});
+
+onBeforeUnmount(() => {
+    document.removeEventListener("click", handleOutsideUploadGuideClick, true);
+});
+
 onActivated(() => {
+    tryShowUploadGuide();
     fetchZoneRangeStatus();
     fetchInternalInteractTasks();
     if (route.query.showUpload !== "1") return;
@@ -549,11 +587,46 @@ onActivated(() => {
         }
     }
 
-    .guide-card__upload {
+    .guide-card__upload-wrap {
         position: fixed;
         right: 7px;
         bottom: 94px;
         z-index: 10;
+    }
+
+    .upload-guide-bubble {
+        position: absolute;
+        right: 0;
+        bottom: calc(100% + 10px);
+        width: max-content;
+        max-width: 200px;
+        padding: 8px 12px;
+        border-radius: 8px;
+        background: rgba(0, 0, 0, 0.8);
+        backdrop-filter: blur(4px);
+        box-sizing: border-box;
+        pointer-events: none;
+
+        &__content {
+            font-size: 14px;
+            line-height: 20px;
+            color: #fff;
+            white-space: nowrap;
+        }
+
+        &__arrow {
+            position: absolute;
+            right: 22px;
+            bottom: -5px;
+            width: 0;
+            height: 0;
+            border-left: 6px solid transparent;
+            border-right: 6px solid transparent;
+            border-top: 6px solid rgba(0, 0, 0, 0.8);
+        }
+    }
+
+    .guide-card__upload {
         display: flex;
         flex-direction: column;
         align-items: center;