fix: 农事详情

src/components/pageComponents/ArchivesFarmTimeLine.vue

@@ -70,7 +70,7 @@
                                             <div class="left-date">{{ formatDate(fw.createTime) }}</div>
                                             <div class="text van-ellipsis">
                                                 <span class="text-name">梢期杀虫</span>
-                                                <span class="text-detail">详情</span>
+                                                <span @click="handleStatusDetail(fw)" class="text-detail">详情</span>
                                             </div>
                                         </div>
                                         <div class="title-text van-ellipsis" v-show="shouldShowBlue(p)">
@@ -149,11 +149,14 @@
 
 <script setup>
 import { ref, nextTick, watch, onMounted, onUnmounted, computed } from "vue";
+import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 import { Empty, Popup } from "vant";
 import { base_img_url2 } from "@/api/config";
 import AlbumCarousel from "@/components/album_compoents/albumCarousel";
 
+const router = useRouter();
+
 const props = defineProps({
     // 农场 ID，用于请求农事规划数据
     farmId: {
@@ -780,6 +783,13 @@ watch(
     { immediate: true }
 );
 
+const handleStatusDetail = (fw) => {
+    router.push({
+        path: "/status_detail",
+        query: { miniJson: JSON.stringify({ id: fw.id }) },
+    });
+};
+
 // 格式化日期为 MM-DD 格式
 const formatDate = (dateStr) => {
     if (!dateStr) return "--";

src/router/globalRoutes.js

@@ -413,4 +413,10 @@ export default [
         meta: { keepAlive: true },
         component: () => import("@/views/old_mini/achievement_report/index.vue"),
     },
+    // 农事记录详情
+    {
+        path: "/status_detail",
+        name: "StatusDetail",
+        component: () => import("@/views/old_mini/agri_record/subPages/statusDetail.vue"),
+    },
 ];

src/views/old_mini/agri_record/subPages/statusDetail.vue

@@ -0,0 +1,327 @@
+<template>
+    <div class="status-detail">
+        <custom-header name="农事详情" isGoBack @goback="handleClose"></custom-header>
+
+        <div class="detail-content">
+            <!-- 橙色状态头部 -->
+            <div class="status-header" :class="'status-' + status">
+                <div class="status-left">
+                    <div class="status-text">
+                        <div class="status-icon">
+                            <el-icon :size="24" color="#fff"><Warning /></el-icon>
+                        </div>
+                        <span>等待执行</span>
+                    </div>
+                    <div class="status-sub-text">距离执行时间还差一天</div>
+                </div>
+            </div>
+    
+            <div class="card-wrap">
+                <!-- 内容卡片 -->
+                <div class="card-box content-card">
+                    <div class="card-header">
+                        <div class="card-title-wrap">
+                            <div class="card-title">秋梢防虫</div>
+                            <div class="type-tag">标准农事</div>
+                        </div>
+                        <div class="forward-link" @click="handleForward">转发处方</div>
+                    </div>
+    
+                    <div class="card-info">
+                        <div class="info-item">
+                            <span class="info-label">下发专家</span>
+                            <span class="info-value">韦帮稳</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="info-label">执行时间</span>
+                            <span class="info-value">2025.02.18</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="info-label">施用方式</span>
+                            <span class="info-value">内膛喷施</span>
+                        </div>
+                    </div>
+    
+                    <div class="card-actions">
+                        <div class="action-btn" @click="handleViewPrescription">查看药物处方</div>
+                        <div class="action-btn" @click="handleViewArea">查看执行区域</div>
+                    </div>
+                </div>
+    
+                <div class="card-box action-video">
+                    <div class="card-header">
+                        <div class="card-title-wrap">
+                            <div class="card-title">执行操作</div>
+                        </div>
+                        <div class="forward-link" @click="handleForward">转发操作指南</div>
+                    </div>
+                    <div class="video-wrap">
+                        <video
+                            src="https://birdseye-img-ali-cdn.sysuimars.com/bbs_post/video/1767872309467.mp4"
+                            controls
+                            style="width: 100%; max-width: 100%; height: auto; border-radius: 8px"
+                            preload="metadata"
+                            playsinline
+                            webkit-playsinline
+                            x5-playsinline
+                        ></video>
+                    </div>
+                </div>
+    
+                <!-- 执行档案 -->
+                <div class="card-box execution-file">
+                    <div class="card-header">
+                        <div class="card-title-wrap">
+                            <div class="card-title">执行档案</div>
+                        </div>
+                        <div class="forward-link" @click="handleForward">邀请拍照</div>
+                    </div>
+                    <div class="exe-upload">
+                        <upload ref="uploadRef" exampleImg class="upload-wrap" @handleUpload="handleUpload">
+                            <img class="example" src="@/assets/img/home/example-4.png" alt="" />
+                            <img class="example" src="@/assets/img/home/plus.png" alt="">
+                        </upload>
+                    </div>
+                    <div class="no-text">暂未检测到拍照</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+import customHeader from "@/components/customHeader.vue";
+import { Warning } from "@element-plus/icons-vue";
+import upload from "@/components/upload";
+
+const router = useRouter();
+
+const status = ref(1);
+
+const handleClose = () => {
+    router.go(-1);
+};
+
+const handleForward = () => {
+    // 转发处方逻辑
+    // TODO: 实现转发处方功能
+};
+
+const handleViewPrescription = () => {
+    // 查看药物处方逻辑
+    // TODO: 实现查看药物处方功能
+};
+
+const handleViewArea = () => {
+    // 查看执行区域逻辑
+    // TODO: 实现查看执行区域功能
+};
+
+const uploadRef = ref(null);
+const images = ref([]);
+
+const handleUpload = ({ imgArr }) => {
+    images.value = imgArr;
+};
+</script>
+
+<style lang="scss" scoped>
+.status-detail {
+    height: 100vh;
+    width: 100%;
+    background: #F2F3F5;
+    .detail-content {
+        height: calc(100% - 44px);
+        overflow: auto;
+        box-sizing: border-box;
+        padding-bottom: 10px;
+    }
+}
+
+.status-header {
+    position: relative;
+    padding: 16px 12px 16px 12px;
+    color: #fff;
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &::after {
+        content: "";
+        z-index: -1;
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 144px;
+        background: #2199f8;
+        width: 100%;
+    }
+
+    &.status-0 {
+        &::after {
+            background: #ff6666;
+        }
+    }
+    &.status-1 {
+        &::after {
+            background: #ff953d;
+        }
+    }
+    &.status-2 {
+        &::after {
+            background: #2199f8;
+        }
+    }
+
+    .status-left {
+        .status-text {
+            font-size: 22px;
+            display: flex;
+            align-items: center;
+            margin-bottom: 4px;
+
+            .status-icon {
+                margin-right: 8px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+
+        .status-sub-text {
+            color: #fff;
+            font-size: 14px;
+        }
+    }
+}
+
+.card-box {
+    background: #fff;
+    border-radius: 8px;
+    padding: 12px 10px 16px 10px;
+
+    .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+
+        .card-title-wrap {
+            display: flex;
+            align-items: center;
+            flex: 1;
+
+            .card-title {
+                font-size: 16px;
+                font-weight: bold;
+                color: #000;
+                margin-right: 5px;
+            }
+
+            .type-tag {
+                font-size: 12px;
+                padding: 0 10px;
+                color: #000000;
+                background: rgba(119, 119, 119, 0.1);
+                border-radius: 20px;
+                font-weight: normal;
+                height: 26px;
+                line-height: 26px;
+            }
+        }
+
+        .forward-link {
+            font-size: 14px;
+            color: #2199f8;
+            cursor: pointer;
+        }
+    }
+}
+
+.card-wrap {
+    padding: 0 12px;
+}
+.content-card {
+    position: relative;
+    z-index: 2;
+
+    .card-info {
+        padding-top: 12px;
+        border-top: 1px solid #f5f5f5;
+
+        .info-item {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            color: #767676;
+            height: 24px;
+
+            .info-label {
+                width: 80px;
+                color: rgba(0, 0, 0, 0.2);
+            }
+
+            .info-value {
+                flex: 1;
+                color: #767676;
+            }
+        }
+    }
+
+    .card-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 6px;
+
+        .action-btn {
+            padding: 0 16px;
+            height: 32px;
+            line-height: 32px;
+            text-align: center;
+            background: #f7f8fa;
+            color: #4e5969;
+            font-size: 14px;
+            cursor: pointer;
+        }
+    }
+}
+
+.action-video {
+    margin-top: 10px;
+    padding: 10px;
+    .video-wrap {
+        padding-top: 4px;
+    }
+}
+
+.execution-file {
+    margin-top: 10px;
+    padding: 10px;
+    
+    .exe-upload {
+        padding-top: 4px;
+        
+        .upload-wrap {
+            .example {
+                width: 80px;
+                height: 80px;
+            }
+            .example + .example {
+                margin-left: 12px;
+            }
+        }
+    }
+
+    .no-text {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.2);
+        line-height: 24px;
+        height: 24px;
+        text-align: center;
+        padding: 10px 0;
+    }
+}
+</style>

src/views/old_mini/home/components/knowledgeCard.vue

@@ -228,12 +228,11 @@ const getKnowledgeList = async () => {
             font-size: 14px;
             color: #666666;
         }
-
-        &.focus-content {
-            padding: 8px 10px;
-        }
         .focus-item {
-            padding-bottom: 16px;
+            margin-bottom: 8px;
+            border: 1px solid rgba(142, 142, 142, 0.2);
+            border-radius: 12px;
+            padding: 5px 10px;
             .thumb {
                 width: 100%;
                 height: 123px;

src/views/old_mini/home/index.vue

@@ -204,7 +204,8 @@ const handleBannerClick = () => {
     height: 100vh;
     overflow: auto;
     position: relative;
-    background: linear-gradient(180deg, #f4f9fd 0%, #f9f9f9 100%);
+    // background: linear-gradient(180deg, #f4f9fd 0%, #f9f9f9 100%);
+    background: linear-gradient(180deg, #F9F9F9 0%, #F0F8FF 31.47%, #F9F9F9 46.81%, #F9F9F9 100%);
     .banner-wrap {
         width: 100%;
         height: 200px;