feat：添加报告详情页面

src/components/reportPopup.vue

@@ -0,0 +1,32 @@
+<template>
+    <Popup v-model:show="show" class="report-popup">
+        <div class="popup-content-box">
+            <div class="popup-title">报告</div>
+        </div>
+    </Popup>
+</template>
+
+<script setup>
+import { Popup } from "vant";
+import { ref } from "vue";
+
+const show = ref(true);
+
+const handleShow = () => {
+    show.value = true;
+};
+
+defineExpose({handleShow});
+
+const handleClose = () => {
+    show.value = false;
+};
+
+defineExpose({handleClose,handleShow});
+</script>
+
+<style lang="scss" scoped>
+.report-popup {
+    width: 100%;
+}
+</style>

src/router/globalRoutes.js

@@ -158,4 +158,10 @@ export default [
         meta: { showTabbar: true, keepAlive: true },
         component: () => import("@/views/old_mini/plan/components/myPrescription.vue"),
     },
+    // 报告详情
+    {
+        path: "/report_detail",
+        name: "ReportDetail",
+        component: () => import("@/views/old_mini/report_detail/index.vue"),
+    },
 ];

src/styles/common.scss

@@ -254,6 +254,15 @@ div{
     font-family: 'SIMLI', sans-serif; /* 使用自定义字体 */  
 }
 
+@font-face {
+    font-family: "SmileySans";
+    src: url("@/assets/font/SmileySans-Oblique-2.ttf");
+}
+
+.SMILEYSANS-FONT {
+    font-family: 'SmileySans', sans-serif; /* 使用自定义字体 */  
+}
+
 .ellipsis-l2 {
 	white-space: pre-line;
 	overflow: hidden;

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

@@ -38,6 +38,7 @@ const farmInfo = ref({
     name: "从化荔博园",
     area: "1000亩",
     plant: "荔枝",
+    species: "桂味",
     address: "广东省广州市从化区",
 });
 
@@ -50,8 +51,9 @@ const handleShow = () => {
 };
 
 const handleEditMap = () => {
-    router.push("/edit_map");
-    // indexMap.clearLayer();
+    router.push(
+        `/edit_map?mapCenter=${store.state.home.miniUserLocationPoint}&pointName=${farmInfo.value.address}&pointAddress=${farmInfo.value.address}`
+    );
 };
 
 const handleEdit = () => {

src/views/old_mini/mine/index.vue

@@ -52,7 +52,7 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 
 // 0: 农户, 1: 专家, 2:农资农服
-const curRole = ref(0);
+const curRole = ref(1);
 
 // 网格项数据
 const gridItems = ref([]);

src/views/old_mini/mine/pages/archives.vue

@@ -15,7 +15,7 @@
                 </div>
             </div>
             <div class="archives-list">
-                <div class="archives-item" v-for="item in 3" :key="item">
+                <div class="archives-item" v-for="item in 3" :key="item" @click="handleItem(item)">
                     <div class="item-content">
                         <div class="img"></div>
                         <div class="archives-info">
@@ -39,6 +39,9 @@
 <script setup>
 import customHeader from "@/components/customHeader.vue";
 import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 
 const value = ref("Option1");
 const options = [
@@ -68,6 +71,10 @@ const toggleSort = () => {
     // 这里可以添加实际的排序逻辑
     console.log('排序方向:', sortDirection.value);
 };
+
+const handleItem = (item) => {
+    router.push("/report_detail");
+}
 </script>
 
 <style lang="scss" scoped>

src/views/old_mini/report_detail/index.vue

@@ -0,0 +1,288 @@
+<template>
+    <div class="report-detail-page">
+        <custom-header name="报告详情"></custom-header>
+        <div class="report-content">
+            <div class="report-header">
+                <div class="header-t">
+                    <div class="report-info">
+                        <img src="" alt="" />
+                        <div class="report-text">
+                            <div class="report-title">未命名农场1</div>
+                            <span class="report-address">广东省广州市从化区从化区</span>
+                        </div>
+                    </div>
+                    <el-select class="header-select" v-model="value">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </div>
+                <div class="header-b">
+                    <div class="b-item" v-for="item in 3" :key="item">
+                        <span class="item-title">荔枝桂味</span>
+                        <div>农场品种</div>
+                    </div>
+                </div>
+            </div>
+            <tabs v-model:active="active" class="tabs" scrollspy>
+                <tab title="果园总览" class="tab-item">
+                    <div class="item-title">果园总览</div>
+                    <div class="item-content">
+                        <div class="item-text">果园面积共XX亩，共有XX棵生产树。</div>
+                        <div class="item-text">
+                            本次飞巡拍摄了XX张照片，包括了XX棵树，目前为施用根部有机肥阶段，根据树体冠幅大小，果园预计施用有机肥XXkg。
+                        </div>
+                        <div class="item-text">
+                            目前XX%的树体暂未萌动新梢，需要进行剪枝农事，提高树体光合效率与通风效率。
+                        </div>
+                    </div>
+                </tab>
+                <tab title="整体园相" class="tab-item">
+                    <div class="item-title">整体园相</div>
+                    <div class="item-content">
+                        <div class="item-text">果园面积共XX亩，共有XX棵生产树。</div>
+                        <div class="item-text">
+                            本次飞巡拍摄了XX张照片，包括了XX棵树，目前为施用根部有机肥阶段，根据树体冠幅大小，果园预计施用有机肥XXkg。
+                        </div>
+                        <div class="item-text">
+                            目前XX%的树体暂未萌动新梢，需要进行剪枝农事，提高树体光合效率与通风效率。
+                        </div>
+                    </div>
+                </tab>
+                <tab title="营养管理" class="tab-item">
+                    <div class="item-title">营养管理</div>
+                    <div class="item-content">
+                        <div class="item-text">果园面积共XX亩，共有XX棵生产树。</div>
+                        <div class="item-text">
+                            本次飞巡拍摄了XX张照片，包括了XX棵树，目前为施用根部有机肥阶段，根据树体冠幅大小，果园预计施用有机肥XXkg。
+                        </div>
+                        <div class="item-text">
+                            目前XX%的树体暂未萌动新梢，需要进行剪枝农事，提高树体光合效率与通风效率。
+                        </div>
+                    </div>
+                </tab>
+                <tab title="病虫管理">内容 3</tab>
+                <tab title="农事记录">内容 3</tab>
+            </tabs>
+        </div>
+        <!-- 底部 -->
+        <div class="fixed-bottom">
+            <div class="bottom-l">
+                <div class="l-btn">
+                    <el-icon color="#666666" class="btn-icon" size="16"><Download /></el-icon>
+                    导出报告
+                </div>
+                <div class="l-btn">
+                    <Icon color="#666666" name="share-o" size="16" class="btn-icon" />
+                    分享报告
+                </div>
+            </div>
+            <div class="bottom-r">推荐农事</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import customHeader from "@/components/customHeader.vue";
+import { Icon, Tab, Tabs } from "vant";
+import { ref } from "vue";
+
+const value = ref("");
+
+const options = [
+    {
+        value: "Option1",
+        label: "Option1",
+    },
+    {
+        value: "Option2",
+        label: "Option2",
+    },
+    {
+        value: "Option3",
+        label: "Option3",
+    },
+    {
+        value: "Option4",
+        label: "Option4",
+    },
+    {
+        value: "Option5",
+        label: "Option5",
+    },
+];
+
+const active = ref(0);
+</script>
+
+<style lang="scss" scoped>
+.report-detail-page {
+    width: 100%;
+    height: 100vh;
+    background-color: #f5f7fb;
+    .report-content {
+        padding: 10px 12px;
+        box-sizing: border-box;
+        .report-header {
+            background-color: #fff;
+            border-radius: 14px;
+            padding: 12px;
+            .header-t {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .report-info {
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    img {
+                        width: 40px;
+                        height: 40px;
+                        border-radius: 8px;
+                        background-color: #2199f8;
+                    }
+                    .report-text {
+                        .report-title {
+                            font-weight: 500;
+                            color: #171717;
+                        }
+                        .report-address {
+                            font-size: 12px;
+                            color: rgba(23, 23, 23, 0.5);
+                        }
+                    }
+                }
+                .header-select {
+                    width: 100px;
+                }
+            }
+            .header-b {
+                display: flex;
+                align-items: center;
+                gap: 5px;
+                margin-top: 10px;
+                .b-item {
+                    flex: 1;
+                    border-radius: 5px;
+                    border: 1px solid rgba(2, 2, 2, 0.3);
+                    font-size: 10px;
+                    padding: 10px 0;
+                    box-sizing: border-box;
+                    text-align: center;
+                    .item-title {
+                        font-size: 16px;
+                        color: #000;
+                        font-family: "SmileySans";
+                    }
+                }
+            }
+        }
+        .tabs {
+            margin-top: 10px;
+            .tab-item {
+                margin-top: 10px;
+                border-radius: 14px;
+                padding: 12px;
+                background: #fff;
+                color: #171717;
+
+                .item-title {
+                    font-size: 16px;
+                    font-weight: 500;
+                    text-align: center;
+                    position: relative;
+                    &::before {
+                        content: "";
+                        position: absolute;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        bottom: -1px;
+                        width: 66px;
+                        height: 8px;
+                        background: rgba(33, 153, 248, 0.3);
+                        border-radius: 4px;
+                    }
+                }
+                .item-content {
+                    margin-top: 12px;
+                    border-radius: 8px;
+                    background: rgba(238, 238, 238, 0.3);
+                    padding: 10px;
+                    line-height: 21px;
+                    .item-name {
+                        font-weight: 500;
+                    }
+                    .item-value {
+                        font-size: 12px;
+                        color: rgba(23, 23, 23, 0.6);
+                    }
+                    .map-wrap {
+                        margin-top: 10px;
+                        .map-img {
+                            width: 100%;
+                            height: 137px;
+                        }
+                        .map-text {
+                            font-size: 12px;
+                            color: rgba(23, 23, 23, 0.6);
+                            text-align: center;
+                            margin-top: 5px;
+                        }
+                    }
+                    .item-text + .item-text {
+                        margin-top: 5px;
+                    }
+                }
+            }
+            .tab-item + .tab-item {
+                margin-top: 10px;
+            }
+        }
+    }
+    .fixed-bottom {
+        position: absolute;
+        bottom: 12px;
+        left: 12px;
+        width: calc(100% - 24px);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 12px;
+        background: linear-gradient(180deg, #f0f8ff 6px, #ffffff 20px);
+        border-radius: 14px;
+        box-sizing: border-box;
+        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
+        .bottom-l {
+            display: flex;
+            align-items: center;
+            .l-btn {
+                border: 1px solid rgba(153, 153, 153, 0.5);
+                border-radius: 30px;
+                padding: 0 8px 0 12px;
+                height: 32px;
+                line-height: 32px;
+                box-sizing: border-box;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #666666;
+                .btn-icon {
+                    padding-right: 3px;
+                }
+                .calculator-icon {
+                    width: 12px;
+                }
+            }
+            .l-btn + .l-btn {
+                margin-left: 10px;
+            }
+        }
+        .bottom-r {
+            height: 32px;
+            line-height: 32px;
+            background: #2199f8;
+            border-radius: 20px;
+            color: #fff;
+            padding: 0 12px;
+        }
+    }
+}
+</style>