feat: 农事详情

src/App.vue

@@ -126,7 +126,7 @@ const router = useRouter();
 // 首页loading加载完才显示底部导航栏
 const showTab = ref(false);
 // 0: 农户, 1: 专家, 2:农资农服
-const curRole = ref(2);
+const curRole = ref(1);
 
 let tabBarHeight = 0;
 onMounted(() => {

src/router/globalRoutes.js

@@ -100,6 +100,12 @@ export default [
         name: "ModifyWork",
         component: () => import("@/views/old_mini/modify_work/index.vue"),
     },
+    // 待执行completedWork.vue
+    {
+        path: "/completed_work",
+        name: "CompletedWork",
+        component: () => import("@/views/old_mini/modify_work/completedWork.vue"),
+    },
     // 我的档案
     {
         path: "/archives",

src/views/old_mini/modify_work/completedWork.vue

@@ -0,0 +1,233 @@
+<template>
+    <div class="completed-work">
+        <custom-header name="农事详情"></custom-header>
+        <div class="work-content">
+            <div class="content-status">
+                <div class="status-l" v-if="status === 0">
+                    <div class="stauts-text">待执行</div>
+                    <div class="stauts-sub-text">距离预计执行时间还差 <span class="time-text">3</span> 天</div>
+                </div>
+                <div class="status-l" v-if="status === 1">
+                    <div class="stauts-text">
+                        <el-icon class="status-icon"><Select /></el-icon>
+                        该农事已完成
+                    </div>
+                </div>
+                <div class="status-r">{{ status === 0 ? "提醒执行" : "提醒复核" }}</div>
+            </div>
+
+            <div class="work-wrap">
+                <div class="box-wrap farm-info">
+                    <div class="info-title">
+                        <div class="card-title">农场现状</div>
+                        <div class="info-more">
+                            点击查看更多
+                            <el-icon><ArrowRight /></el-icon>
+                        </div>
+                    </div>
+                    <div class="info-content">
+                        当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标
+                    </div>
+                </div>
+                <div class="box-wrap farm-photo">
+                    <div class="photo-list">
+                        <div class="img-item" v-for="(item, index) in 6" :key="index">
+                            <img
+                                class="photo-item"
+                                src="https://birdseye-img-ali-cdn.sysuimars.com/16926861-1e20-4cbd-8bf2-90208db5a2d0/806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_202509010800_001_806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_20250901080536_0045_V_code-ws0fsmge97gh.jpeg"
+                                alt=""
+                            />
+                        </div>
+                    </div>
+                    <div class="list-text">点击查看更多</div>
+                </div>
+
+                <div class="box-wrap farm-data">
+                    <div class="card-title">秋梢防虫<span class="type-tag">标准农事</span></div>
+                    <div class="data-content">
+                        <div class="form-item">
+                            <div class="item-name">农事编号</div>
+                            <div class="item-text">BZ-YY-04-SQYY-20</div>
+                        </div>
+                        <div class="form-item">
+                            <div class="item-name">服务亩数</div>
+                            <div class="item-text">100亩</div>
+                        </div>
+                        <div class="form-item">
+                            <div class="item-name">服务区域</div>
+                            <div class="item-text">广州市从化区荔枝博览园</div>
+                        </div>
+                        <div class="form-item">
+                            <div class="item-name">触发条件</div>
+                            <div class="item-text">单数花带叶40％</div>
+                        </div>
+                        <div class="form-item">
+                            <div class="item-name">执行时间</div>
+                            <div class="item-text">2025.02.18</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import customHeader from "@/components/customHeader.vue";
+import { ref } from "vue";
+
+// 0：执行， 1： 复核
+const status = ref(0);
+</script>
+
+<style lang="scss" scoped>
+.completed-work {
+    height: 100vh;
+    position: relative;
+    overflow: auto;
+    font-size: 14px;
+    background: #f2f3f5;
+    .work-content {
+        height: calc(100% - 40px);
+        overflow: auto;
+        .work-wrap {
+            position: relative;
+            z-index: 3;
+            padding: 0 12px;
+            top: -16px;
+        }
+        .card-title {
+            font-size: 16px;
+            font-weight: bold;
+            color: #000;
+            display: flex;
+            align-items: center;
+
+            .type-tag {
+                margin-left: 5px;
+                font-size: 12px;
+                color: #000000;
+                padding: 0 10px;
+                background: rgba(119, 119, 119, 0.1);
+                border-radius: 20px;
+                font-weight: normal;
+                height: 26px;
+                line-height: 26px;
+            }
+        }
+        .box-wrap {
+            background: #fff;
+            padding: 10px;
+            border-radius: 8px;
+        }
+
+        .content-status {
+            position: relative;
+            padding: 26px 12px 20px 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: 136px;
+                background: #2199f8;
+                width: 100%;
+            }
+            .status-l {
+                .stauts-text {
+                    font-size: 22px;
+                }
+                .stauts-sub-text {
+                    color: rgba(255, 255, 255, 0.51);
+                    font-size: 14px;
+                }
+                .time-text {
+                    color: #ffff;
+                }
+            }
+            .status-r {
+                height: 32px;
+                line-height: 32px;
+                padding: 0 16px;
+                color: #2199f8;
+                font-size: 16px;
+                background: #fff;
+                border-radius: 20px;
+            }
+        }
+
+        .info-content {
+            padding: 10px 0;
+            position: relative;
+        }
+        .farm-info {
+            color: rgba(0, 0, 0, 0.6);
+            font-size: 14px;
+            margin-top: 14px;
+            .info-title {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                color: rgba(41, 41, 41, 0.3);
+                .info-more {
+                    display: flex;
+                    align-items: center;
+                }
+            }
+        }
+        .farm-photo {
+            margin-top: 10px;
+            .photo-list {
+                display: flex;
+                align-items: center;
+                width: 100%;
+                overflow: auto;
+                padding-bottom: 10px;
+                .photo-item {
+                    width: 92px;
+                    height: 92px;
+                    border-radius: 8px;
+                    object-fit: cover;
+                }
+                .img-item + .img-item {
+                    margin-left: 12px;
+                }
+            }
+            .list-text {
+                text-align: center;
+                color: rgba(0, 0, 0, 0.5);
+                padding-top: 2px;
+            }
+        }
+
+        .farm-data {
+            margin-top: 10px;
+            .data-content {
+                margin-top: 8px;
+                border-top: 1px solid #f5f5f5;
+                padding: 8px 0;
+            }
+            .form-item {
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+                color: #767676;
+                height: 24px;
+                .item-name {
+                    width: 80px;
+                    color: rgba(0, 0, 0, 0.2);
+                }
+            }
+            .form-item + .form-item {
+                padding-top: 2px;
+            }
+        }
+    }
+}
+</style>