feat：添加服务记录和服务详情页面

src/router/globalRoutes.js

@@ -290,4 +290,16 @@ export default [
         name: "AlbumRecognize",
         component: () => import("@/views/old_mini/album_recognize/index.vue"),
     },
+    // 服务记录
+    {
+        path: "/service_records",
+        name: "ServiceRecords",
+        component: () => import("@/views/old_mini/mine/pages/serviceRecords.vue"),
+    },
+    // 服务详情
+    {
+        path: "/service_detail",
+        name: "ServiceDetail",
+        component: () => import("@/views/old_mini/mine/pages/serviceDetail.vue"),
+    },
 ];

src/views/old_mini/mine/index.vue

@@ -45,14 +45,13 @@
     </div>
 </template>
 <script setup>
-import { onActivated, ref, computed, inject } from "vue";
+import { onActivated, ref, computed } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
 
 // 0: 农户, 1: 专家, 2:农资农服
-// 从 App.vue 获取 curRole，如果没有提供则使用默认值 0
-const curRole = inject('curRole', ref(0));
+const curRole = ref(2)
 
 // 网格项数据
 const gridItems = ref([]);
@@ -113,13 +112,11 @@ onActivated(() => {
             },
         ];
     }
-    // curRole.value = localStorage.getItem('SET_USER_CUR_ROLE');
 });
 
 // 单元格项数据 - 根据角色动态显示
 const cellItems = computed(() => {
     if (curRole.value === 0) {
-        // 农户角色：显示我的农场、认证农资、退出登录
         return [
             {
                 title: "我的农场",
@@ -135,8 +132,15 @@ const cellItems = computed(() => {
             },
         ];
     } else {
-        // 专家(1)或农资农服(2)角色：显示报价维护、服务维护、退出登录
         return [
+        {
+                title: "农事方案",
+                path: "/service_records",
+            },
+            {
+                title: "服务记录",
+                path: "/service_records",
+            },
             {
                 title: "报价维护",
                 path: "/offer_price?identity=NZ&role=2",

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

@@ -0,0 +1,424 @@
+<template>
+    <div class="service-detail-page">
+        <custom-header name="服务详情"></custom-header>
+        <div class="service-detail-content">
+            <div class="record-box">
+                <div class="item-left">
+                    <img class="map-img" src="/map.png" alt="地图" />
+                    <div class="item-cont">
+                        <div class="item-header">
+                            <div class="farm-name">从化荔博园</div>
+                            <div class="tags">
+                                <span class="tag tag-area">200亩</span>
+                                <span class="tag tag-variety">桂味</span>
+                            </div>
+                        </div>
+                        <div class="farm-address">广东省广州市从化区从化区</div>
+                    </div>
+                </div>
+                <div class="item-right">在线沟通</div>
+            </div>
+            <div class="farm-service-box">
+                <div class="service-title">
+                    <img src="@/assets/img/home/label-icon.png" alt="" />
+                    <span>农事服务</span>
+                </div>
+                <div class="stats">
+                    <div class="col">
+                        <div class="num">1258<span class="unit"> 元</span></div>
+                        <div class="desc">总收益</div>
+                    </div>
+                    <div class="col">
+                        <div class="num">1258<span class="unit"> 元</span></div>
+                        <div class="desc">投入成本</div>
+                    </div>
+                    <div class="col">
+                        <div class="num">118<span class="unit"> 次</span></div>
+                        <div class="desc">服务次数</div>
+                    </div>
+                </div>
+                <div v-for="(section, index) in contentData" :key="index" class="content-section">
+                    <record-item
+                        :record-item-data="section"
+                        :onlyRecipeName="true"
+                        :showContent="true"
+                        class="recipe-item"
+                    >
+                        <template #title>
+                            <div class="box-title">
+                                <div class="title-l">
+                                    {{ section.title }}
+                                    <span class="parent-text">{{ section.parentTitle || "秋梢期" }}</span>
+                                </div>
+                                <div class="title-r">分享成果</div>
+                            </div>
+                        </template>
+                        <template #content>
+                            <div class="content-info">
+                                <div class="info-line">
+                                    药物处方：<span class="info-val">{{ getPrescriptionInfo(section) }}</span>
+                                </div>
+                                <div class="review-title info-line">
+                                    复核成效
+                                    <div class="info-val">
+                                        通过精准农业技术的应用,作物产量实现了两位数的增长,病虫害的发生率大幅下降,土壤肥力的提升
+                                    </div>
+                                </div>
+                                <div class="review-image">
+                                    <div class="image-wrapper">
+                                        <span class="image-label">农事前</span>
+                                        <img
+                                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+                                            alt=""
+                                        />
+                                    </div>
+                                    <div class="image-wrapper">
+                                        <span class="image-label">农事后</span>
+                                        <img
+                                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+                                            alt=""
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </record-item>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import customHeader from "@/components/customHeader.vue";
+import { ref } from "vue";
+import recordItem from "@/components/recordItem.vue";
+
+const getPrescriptionInfo = (section) => {
+    // 从section的prescriptionList中获取药物信息
+    if (section.prescriptionList && section.prescriptionList.length > 0) {
+        const firstPrescription = section.prescriptionList[0];
+        if (firstPrescription.pesticideFertilizerList && firstPrescription.pesticideFertilizerList.length > 0) {
+            const firstDrug = firstPrescription.pesticideFertilizerList[0];
+            const ratio = firstDrug.ratio || firstDrug.defaultRatio || 1000;
+            return `${ratio}倍${firstDrug.brand}${firstDrug.pesticideFertilizerName}`;
+        }
+    }
+    return "1000倍国光乙烯利"; // 默认值
+};
+
+const contentData = ref([
+    {
+        targetId: "part1",
+        title: "巡园农事",
+        parentTitle: "秋梢期",
+        isExpanded: false, // 添加展开状态
+        hasApplied: false, // 是否已发起需求
+        reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，虫害风险控制优异，未发现虫害风险",
+        expert: 91356,
+        orderStatus: 3,
+        activeStatus: 0,
+        regionId: 2,
+        speciesId: "1",
+        speciesName: "荔枝",
+        farmWorkId: "699343457474318336",
+        farmWorkLibId: "699343457474318336",
+        farmWorkLibName: "梢期防虫",
+        farmWorkName: "梢期防虫",
+        expertIcon:
+            "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
+        expertName: "韦帮稳",
+        icon: 4,
+        beforeExecuteDate: "2025-08-01",
+        executeDate: "2025-08-15",
+        code: "BZ-BC-04-SQFC-20",
+        expertPrescription: "",
+        condition: "单树嫩叶率大于20.0%",
+        defaultFarmWork: 0,
+        farmWorkType: 3,
+        farmWorkTypeName: "病虫",
+        usageMode: "叶面施",
+        serviceMain: "广州泽秾丰农资有限公司",
+        updateDate6: null,
+        confirmPicture: [],
+        executeMain: "广州泽秾丰农资有限公司",
+        storeShortName: "泽秾丰",
+        serviceRegion: "广州市从化区荔枝博览园",
+        prescriptionList: [
+            {
+                name: "营养",
+                pesticideFertilizerList: [
+                    {
+                        defaultDroneRatio: null,
+                        defaultName: "尿素",
+                        defaultRatio: 0,
+                        id: null,
+                        muPrice: null,
+                        muUsage: 15000.0,
+                        muUsage2: 15000.0,
+                        ratio: 0,
+                        ratio2: 0,
+                        remark: "",
+                        usageMode: "",
+                        usageModeList: ["叶面施、根部施"],
+                        orderId: null,
+                        pesticideFertilizerCode: "1001",
+                        pesticideFertilizerId: "1",
+                        pesticideFertilizerName: "尿素",
+                        brand: "山东联盟",
+                        typeName: "营养",
+                        price: 132,
+                        unit: "g",
+                        executeStyle: null,
+                    },
+                    {
+                        defaultDroneRatio: null,
+                        defaultName: "15-15-15复合肥",
+                        defaultRatio: 0,
+                        id: null,
+                        muPrice: null,
+                        muUsage: 45000.0,
+                        muUsage2: 45000.0,
+                        ratio: 0,
+                        ratio2: 0,
+                        remark: "",
+                        usageMode: "",
+                        usageModeList: ["根部施"],
+                        orderId: null,
+                        pesticideFertilizerCode: "1002",
+                        pesticideFertilizerId: "2",
+                        pesticideFertilizerName: "15-15-15复合肥",
+                        brand: "金正大",
+                        typeName: "营养",
+                        price: 220,
+                        unit: "g",
+                        executeStyle: null,
+                    },
+                ],
+            },
+        ],
+    },
+]);
+</script>
+
+<style lang="scss" scoped>
+.service-detail-page {
+    width: 100%;
+    height: 100vh;
+    background: #f7f7f7;
+    .service-detail-content {
+        padding: 10px 12px;
+        .record-box {
+            background: #fff;
+            padding: 16px 12px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .item-left {
+                display: flex;
+                gap: 8px;
+                .map-img {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 6px;
+                    object-fit: cover;
+                }
+                .item-cont {
+                    .item-header {
+                        display: flex;
+                        justify-content: space-between;
+                        gap: 10px;
+                        font-size: 14px;
+                        margin-bottom: 4px;
+                        .farm-name {
+                            font-weight: 600;
+                            color: #000;
+                        }
+                        .tags {
+                            display: flex;
+                            gap: 6px;
+                            .tag {
+                                padding: 1px 8px;
+                                border-radius: 2px;
+                                font-size: 12px;
+                                &.tag-area {
+                                    background: #f4f4f4;
+                                    color: #1d2129;
+                                }
+
+                                &.tag-variety {
+                                    background: rgba(232, 243, 255, 1);
+                                    color: #2199f8;
+                                }
+                            }
+                        }
+                    }
+                    .farm-address {
+                        font-size: 12px;
+                        color: #86909c;
+                    }
+                }
+            }
+            .item-right {
+                text-align: center;
+                color: #888b8d;
+                font-size: 12px;
+                padding: 5px 12px;
+                border-radius: 20px;
+                border: 1px solid #888b8d;
+            }
+        }
+        .farm-service-box {
+            padding: 16px 12px;
+            background: #fff;
+            border-radius: 8px;
+            margin-top: 12px;
+            .service-title {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                font-size: 16px;
+                color: #000;
+                font-weight: 500;
+                padding-bottom: 12px;
+                border-bottom: 1px solid #f5f5f5;
+                img {
+                    width: 14px;
+                    height: 8px;
+                }
+            }
+            .stats {
+                display: flex;
+                align-items: stretch;
+                justify-content: space-between;
+                background: rgba(33, 153, 248, 0.1);
+                border: 1px solid rgba(33, 153, 248, 0.2);
+                border-radius: 10px;
+                padding: 10px 8px;
+                font-size: 14px;
+                margin-top: 12px;
+                .col {
+                    flex: 1;
+                    text-align: center;
+                    .num {
+                        color: #2199f8;
+                        font-weight: 600;
+                        font-size: 16px;
+                        .unit {
+                            font-size: 14px;
+                            font-weight: 400;
+                            color: #000;
+                        }
+                    }
+                    .desc {
+                        color: #000;
+                        margin-top: 4px;
+                    }
+                }
+                .col + .col {
+                    border-left: 1px solid rgba(33, 153, 248, 0.4);
+                }
+            }
+            .content-section {
+                .recipe-item {
+                    border: 1px solid rgba(0, 0, 0, 0.1);
+                    margin: 12px 0 0 0;
+                    .box-title {
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        padding-bottom: 8px;
+                        .title-l {
+                            font-size: 16px;
+                            font-weight: 600;
+                            color: #000;
+                            .parent-text {
+                                margin-left: 5px;
+                                font-size: 12px;
+                                font-weight: normal;
+                                padding: 4px 6px;
+                                border-radius: 14px;
+                                background: rgba(119, 119, 119, 0.1);
+                            }
+                        }
+                        .title-btn {
+                            width: 24px;
+                            height: 24px;
+                            border-radius: 50%;
+                            background: #2199f8;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                        }
+                        .title-r {
+                            padding: 5px 10px;
+                            border-radius: 20px;
+                            border: 1px solid #FF953D;
+                            color: #FF953D;
+                            font-size: 12px;
+                        }
+                    }
+                    .content-info {
+                        padding-top: 8px;
+                        .info-line {
+                            font-size: 12px;
+                            color: #bbbbbb;
+                            margin-bottom: 8px;
+                            line-height: 1.4;
+                            .info-val {
+                                color: #666666;
+                            }
+                        }
+                        .review-title {
+                            .info-val {
+                                margin-top: 5px;
+                            }
+                        }
+                        .review-image {
+                            display: flex;
+                            align-items: center;
+                            gap: 8px;
+                            .image-wrapper {
+                                position: relative;
+                                flex: 1;
+                                img {
+                                    width: 100%;
+                                    height: 105px;
+                                    object-fit: cover;
+                                    border-radius: 8px;
+                                }
+                                .image-label {
+                                    position: absolute;
+                                    top: 4px;
+                                    left: 4px;
+                                    padding: 4px 10px;
+                                    background: rgba(54, 52, 52, 0.6);
+                                    color: #fff;
+                                    font-size: 12px;
+                                    border-radius: 8px 0 8px 0;
+                                    z-index: 1;
+                                    backdrop-filter: blur(4px);
+                                }
+                            }
+                        }
+                        .reminder-box {
+                            background: linear-gradient(90deg, #d9ebfc, transparent);
+                            border-radius: 4px;
+                            padding: 6px 8px;
+                            font-size: 12px;
+                            color: #2e2e2e;
+                            line-height: 1.4;
+                            margin-top: 8px;
+                            .highlight-number {
+                                color: #2199f8;
+                                font-weight: 500;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,207 @@
+<template>
+    <div class="service-records-page">
+        <custom-header name="服务记录"></custom-header>
+        <div class="select-group">
+            <el-select class="select-item" v-model="dateValue" placeholder="Select">
+                <el-option v-for="item in dateOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <el-select class="select-item" v-model="areaValue" placeholder="Select">
+                <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </div>
+        <div class="record-list">
+            <div class="record-item" v-for="(item, index) in recordList" :key="index" @click="handleItemClick(item)">
+                <div class="item-content">
+                    <img class="map-img" src="/map.png" alt="地图" />
+                    <div class="item-right">
+                        <div class="item-header">
+                            <div class="farm-name">{{ item.farmName }}</div>
+                            <div class="tags">
+                                <span class="tag tag-area">{{ item.area }}</span>
+                                <span class="tag tag-variety">{{ item.variety }}</span>
+                            </div>
+                        </div>
+                        <div class="farm-address">{{ item.address }}</div>
+                    </div>
+                </div>
+                <div class="item-footer">
+                    农事服务过<span class="service-count">{{ item.serviceCount }}</span
+                    >次
+                    <span class="view-detail">查看详情</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import customHeader from "@/components/customHeader.vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+// 服务记录列表数据
+const recordList = ref([
+    {
+        farmName: "从化荔博园",
+        area: "200亩",
+        variety: "桂味",
+        address: "广东省广州市从化区从化区",
+        serviceCount: 10,
+        mapImage: "/map.png",
+    },
+    {
+        farmName: "从化荔博园",
+        area: "200亩",
+        variety: "桂味",
+        address: "广东省广州市从化区从化区",
+        serviceCount: 10,
+        mapImage: "/map.png",
+    },
+    {
+        farmName: "从化荔博园",
+        area: "200亩",
+        variety: "桂味",
+        address: "广东省广州市从化区从化区",
+        serviceCount: 10,
+        mapImage: "/map.png",
+    },
+    {
+        farmName: "从化荔博园",
+        area: "200亩",
+        variety: "桂味",
+        address: "广东省广州市从化区从化区",
+        serviceCount: 10,
+        mapImage: "/map.png",
+    },
+]);
+
+// 处理列表项点击
+const handleItemClick = (item) => {
+    console.log("点击了服务记录项:", item);
+    // TODO: 跳转到详情页
+    router.push("/service_detail");
+};
+
+const dateValue = ref("1");
+const dateOptions = [
+    { value: "1", label: "农事类型" },
+    { value: "2", label: "2" },
+    { value: "3", label: "3" },
+];
+const areaValue = ref("1");
+const areaOptions = [
+    { value: "1", label: "区域筛选" },
+    { value: "2", label: "2" },
+    { value: "3", label: "3" },
+];
+</script>
+<style lang="scss" scoped>
+.service-records-page {
+    width: 100%;
+    min-height: 100vh;
+    background: #f7f7f7;
+    .select-group {
+        display: flex;
+        padding-top: 6px;
+        .select-item {
+            ::v-deep {
+                .el-select__wrapper {
+                    text-align: center;
+                    gap: 2px;
+                    box-shadow: none;
+                    justify-content: center;
+                    background: none;
+                }
+                .el-select__selection {
+                    flex: none;
+                    width: fit-content;
+                }
+                .el-select__placeholder {
+                    position: static;
+                    transform: none;
+                    width: fit-content;
+                    color: rgba(0, 0, 0, 0.2);
+                }
+                .el-select__caret {
+                    color: rgba(0, 0, 0, 0.2);
+                }
+            }
+        }
+    }
+    .record-list {
+        padding: 6px 12px;
+        .record-item {
+            background: #fff;
+            padding: 12px 10px;
+            border-radius: 5px;
+            .item-content {
+                display: flex;
+                gap: 8px;
+                .map-img {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 6px;
+                    object-fit: cover;
+                }
+                .item-right {
+                    .item-header {
+                        display: flex;
+                        justify-content: space-between;
+                        gap: 10px;
+                        font-size: 14px;
+                        margin-bottom: 4px;
+                        .farm-name {
+                            font-weight: 600;
+                            color: #000;
+                        }
+                        .tags {
+                            display: flex;
+                            gap: 6px;
+                            .tag {
+                                padding: 1px 8px;
+                                border-radius: 2px;
+                                font-size: 12px;
+                                &.tag-area {
+                                    background: #f4f4f4;
+                                    color: #1d2129;
+                                }
+
+                                &.tag-variety {
+                                    background: rgba(232, 243, 255, 1);
+                                    color: #2199f8;
+                                }
+                            }
+                        }
+                    }
+                    .farm-address {
+                        font-size: 12px;
+                        color: #86909c;
+                    }
+                }
+            }
+            .item-footer {
+                background: linear-gradient(90deg, rgba(33, 153, 248, 0.2) 0%, transparent 100%);
+                padding: 6px 8px;
+                display: flex;
+                align-items: center;
+                border-radius: 4px;
+                margin-top: 10px;
+                color: #2e2e2e;
+                font-size: 12px;
+                span {
+                    color: #2199f8;
+                    font-weight: 500;
+                }
+                .service-count {
+                    margin: 0 2px;
+                }
+                .view-detail {
+                    margin-left: 10px;
+                }
+            }
+        }
+        .record-item + .record-item {
+            margin-top: 12px;
+        }
+    }
+}
+</style>