Bladeren bron

fix: 面板,详情

lxf 1 week geleden
bovenliggende
commit
2b80568983

+ 31 - 59
src/views/old_mini/growth_report/components/CropAlertPanel.vue

@@ -51,7 +51,7 @@
                         </el-tooltip>
                     </div>
 
-                    <div class="alert-list">
+                    <div class="alert-list" v-show="!isBackground">
                         <div
                             v-for="item in alertCards"
                             :key="item.id"
@@ -82,20 +82,12 @@
                 </div>
             </div>
         </floating-panel>
-
-        <div class="expand-btn-wrap" v-show="height === defaultHeight">
-            <span>{{ t("growthReport.cropTitle") }}</span>
-            <div class="expand-btn" @click="handleExpandBtnClick">
-                <span>{{ t("growthReport.expand") }}</span>
-                <el-icon><ArrowUpBold /></el-icon>
-            </div>
-        </div>
     </div>
 </template>
 
 <script setup>
 import { FloatingPanel, Icon } from "vant";
-import { ArrowUpBold, Link } from "@element-plus/icons-vue";
+import { Link } from "@element-plus/icons-vue";
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useI18n } from "@/i18n";
 
@@ -141,12 +133,12 @@ const handleSelectCrop = (name) => {
     emit("switchCategory", name);
 };
 
-const PANEL_HEADER_BAR = 30; // 隐藏原生 header 后,内容顶部留白
+const PANEL_HEADER_BAR = 30; // van-floating-panel 原生 header 高度
 const PANEL_BOTTOM_GAP = 16;
+const COLLAPSED_HEIGHT = 130;
 
-const defaultHeight = ref(0);
-const fullHeight = Math.round(window.innerHeight);
-const anchors = ref([defaultHeight.value, 280 + tabBarHeight.value, fullHeight]);
+const defaultHeight = ref(COLLAPSED_HEIGHT);
+const anchors = ref([defaultHeight.value + tabBarHeight.value, 280 + tabBarHeight.value]);
 const height = ref(anchors.value[1]);
 
 const isBackground = ref(false);
@@ -164,14 +156,14 @@ const syncMidAnchor = () => {
         contentH + PANEL_HEADER_BAR + PANEL_BOTTOM_GAP + tabBarHeight.value
     );
     // 留一点顶部空间,避免直接顶满屏
-    const maxMid = fullHeight - 48;
+    const maxMid = Math.round(window.innerHeight) - 48;
     const nextMid = Math.max(240, Math.min(idealMid, maxMid));
 
     if (Math.abs(nextMid - anchors.value[1]) < 2) return;
 
     syncing = true;
     const wasAtMid = Math.abs(height.value - anchors.value[1]) < 2;
-    anchors.value = [defaultHeight.value, nextMid, fullHeight];
+    anchors.value = [defaultHeight.value, nextMid];
     if (wasAtMid) {
         height.value = nextMid;
     }
@@ -206,15 +198,10 @@ const handlePatrolTip = (item) => {
 };
 
 const handleHeightChange = ({ height: nextHeight }) => {
-    isBackground.value = nextHeight > anchors.value[1];
+    isBackground.value = nextHeight < anchors.value[1];
     emit("heightChange", nextHeight);
 };
 
-const handleExpandBtnClick = () => {
-    height.value = anchors.value[1];
-    emit("heightChange", anchors.value[1]);
-};
-
 onMounted(() => {
     nextTick(() => {
         // 等布局完成后再量一次,避免首屏高度偏小
@@ -249,26 +236,26 @@ onBeforeUnmount(() => {
     background: transparent;
 
     ::v-deep {
-        .van-floating-panel__content {
+        .van-floating-panel__header {
             background: transparent;
-            overflow-y: auto;
         }
 
-        // 隐藏拖拽条,并取消其占位
-        .van-floating-panel__header {
-            height: 0 !important;
-            min-height: 0 !important;
-            padding: 0 !important;
-            margin: 0 !important;
-            overflow: hidden;
-            opacity: 0;
-            pointer-events: none;
+        .van-floating-panel__header-bar {
+            width: 36px;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.5);
+            border-radius: 4px;
+        }
+
+        .van-floating-panel__content {
+            background: transparent;
+            overflow-y: auto;
         }
     }
 
     .floating-panel-content {
         width: calc(100% - 20px);
-        margin: 30px auto 0; // 补偿隐藏 header 的 30px,整体下移
+        margin: 0 auto;
         box-sizing: border-box;
     }
 
@@ -413,32 +400,17 @@ onBeforeUnmount(() => {
     }
 
     &.background-panel {
-        background: #f5f7fb;
-    }
-}
 
-.expand-btn-wrap {
-    position: absolute;
-    bottom: 62px;
-    left: 12px;
-    width: calc(100% - 24px);
-    background-image: linear-gradient(180deg, #d7eafc 0%, #ffffff 100%);
-    border-radius: 14px;
-    padding: 15px 12px;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-weight: 500;
-    font-size: 15px;
-
-    .expand-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        font-size: 13px;
-        color: #2199f8;
+        .panel-shell {
+            padding: 6px 10px 10px 10px;
+            background: url("@/assets/img/report/type-bg.png");
+            background-size: calc(100vw - 20px) 40px;
+            background-repeat: no-repeat;
+            background-position: center top;
+            .crop-header {
+                // padding-bottom: 60px;
+            }
+        }
     }
 }
 </style>

+ 44 - 0
src/views/old_mini/work_detail/index.vue

@@ -133,6 +133,14 @@
                 <!-- <div class="action-item primary" @click="handleExecute">{{ $t('溯源认证') }}</div> -->
             </div>
         </div>
+
+        <div class="btn-fixed">
+            <div class="primary-btn">巡园要点</div>
+        </div>
+
+        <div class="footer-btn">
+            <div class="secondary-btn">转发</div>
+        </div>
         <ExecutePopup ref="executePopupRef" @executeSuccess="getDetail" />
         <upload-tips v-model:show="showUploadTipsPopup" />
     </div>
@@ -509,6 +517,42 @@ const areaMap = new AreaMap();
         flex: 1;
         overflow: auto;
     }
+    .footer-btn {
+        height: 70px;
+        background: #fff;
+        box-shadow: 2px 2px 4.5px 0px rgba(0, 0, 0, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .secondary-btn {
+            padding: 0 38px;
+            height: 40px;
+            border-radius: 20px;
+            line-height: 40px;
+            color: #000000;
+            background: #F6F6F6;
+            text-align: center;
+        }
+    }
+
+    .btn-fixed {
+        position: fixed;
+        z-index: 2;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: fit-content;
+        padding: 0 26px;
+        height: 38px;
+        line-height: 38px;
+        border-radius: 20px;
+        background: #2199F8;
+        color: #fff;
+        box-shadow: 2px 2px 4.5px 0px rgba(0, 0, 0, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }
 
 .content-status {

+ 1 - 1
src/views/old_mini/work_execute/index.vue

@@ -129,7 +129,7 @@ const handleForward = () => {
 
 const handleViewDetail = (item) => {
     router.push({
-        path: "/agri_record_detail",
+        path: "/work_detail",
         query: {
             id: item.id,
             statusStr: item.isHighRisk ? "执行异常" : "待接受",