feat:添加农场详情页面

src/components/pageComponents/CommonBox.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="common-box">
+        <div class="common-title">
+            <div class="common-title-left">
+                <img src="@/assets/img/home/label-icon.png" alt="" />
+                <span>{{ title }}</span>
+            </div>
+            <div class="common-title-right">
+                <slot name="right"></slot>
+            </div>
+        </div>
+        <div class="common-content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    title: {
+        type: String,
+        default: "",
+    },
+});
+</script>
+
+<style scoped lang="scss">
+.common-box {
+    padding: 16px 12px;
+    background: #fff;
+    border-radius: 8px;
+
+    .common-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 16px;
+        color: #000;
+        padding-bottom: 12px;
+        border-bottom: 1px solid #f5f5f5;
+        .common-title-left {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-weight: 500;
+            img {
+                width: 14px;
+                height: 8px;
+            }
+        }
+        .common-title-right {
+            font-size: 13px;
+            color: rgba(0, 0, 0, 0.6);
+        }
+    }
+
+    .common-content {
+        margin-top: 12px;
+    }
+}
+.common-box + .common-box {
+    margin-top: 12px;
+}
+</style>

src/components/pageComponents/FarmInfoCard.vue

@@ -29,6 +29,20 @@
                 </template>
             </slot>
         </div>
+        <!-- 底部提示框：需求信息和预计收益 -->
+        <template v-if="showBottomTip">
+            <slot name="bottomTip">
+                <div class="item-footer" v-if="data.day">
+                    距离农事执行已
+                    <span class="service-count">{{ data.day }}</span>
+                    天，提醒用户拍照，增加信誉度！
+                </div>
+                <div class="item-footer item-bottom-tip" v-if="data.estimatedIncome">
+                    <div>当前农场有 <span>{{ data.farmInfo }}</span> 的农情需求</div>
+                    <div class="income-text">预计收益 <span>{{ data.estimatedIncome }}元</span></div>
+                </div>
+            </slot>
+        </template>
     </div>
 </template>
 
@@ -61,6 +75,10 @@ const hasRightSlot = computed(() => {
     return !!slots.right;
 });
 
+const showBottomTip = computed(() => {
+    return props.data.day !== undefined || props.data.estimatedIncome !== undefined || !!slots.bottomTip;
+});
+
 const handleClick = () => {
     emit("click", props.data);
 };
@@ -80,8 +98,8 @@ const handleClick = () => {
     &:not(.has-footer) {
         padding: 16px 12px;
         display: flex;
-        align-items: center;
-        justify-content: space-between;
+        flex-direction: column;
+        align-items: stretch;
     }
 
     .item-content {
@@ -166,6 +184,20 @@ const handleClick = () => {
         border-radius: 20px;
         border: 1px solid #888b8d;
     }
+
+    .item-bottom-tip {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: linear-gradient(90deg, rgba(254, 164, 94, 0.2) 0%, transparent 100%);
+        span{
+            color: #EB7B20;
+            font-weight: 500;
+        }
+        .income-text{
+            color: #EFB789;
+        }
+    }
 }
 
 .farm-info-card + .farm-info-card {

src/components/pageComponents/PlanList.vue

@@ -0,0 +1,204 @@
+<template>
+    <div class="expert-prescription">
+        <div class="plan-menu">
+            <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
+                <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
+                    <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="String(menu.id)">
+                        <template #title>
+                            <img class="menu-icon" :src="require(`@/assets/img/gallery/icon-${index}.png`)" />
+                            <span class="menu-text">{{ menu.name }}</span>
+                        </template>
+                        <el-menu-item
+                            v-for="item in menu.farmWorkArrangeList"
+                            :key="item.id"
+                            :index="`${menu.id}-${item.id}`"
+                        >
+                            <el-anchor-link
+                                :href="'#' + menu.name + item.farmWorkDetail?.name"
+                                :title="item.farmWorkDetail?.name || '摇花落花'"
+                            />
+                        </el-menu-item>
+                    </el-sub-menu>
+                </el-menu>
+            </el-anchor>
+        </div>
+        <div class="expert-content" ref="containerRef">
+            <slot>
+                <div v-for="(section, index) in menuData" :key="index" class="content-section">
+                    <div
+                        class="section-item"
+                        v-for="(sub, subI) in section.farmWorkArrangeList"
+                        :key="index + '-' + subI"
+                    >
+                        <div class="section-id" :id="section.name + sub.farmWorkDetail?.name"></div>
+                        <record-item :record-item-data="sub">
+                            <template #title>
+                                <div class="box-title">
+                                    <div class="title-l">
+                                        {{ sub.farmWorkDetail?.name }}
+                                        1111
+                                        <span class="parent-text">{{ section.name }}</span>
+                                    </div>
+                                </div>
+                            </template>
+                        </record-item>
+                    </div>
+                </div>
+            </slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import recordItem from "@/components/recordItem.vue";
+
+const props = defineProps({
+    menuData: {
+        type: Array,
+        default: () => [],
+    },
+    defaultActive: {
+        type: String,
+        default: "1-1",
+    },
+});
+
+const containerRef = ref(null);
+
+const handleClick = (e) => {
+    e.preventDefault();
+};
+</script>
+
+<style scoped lang="scss">
+.expert-prescription {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    .plan-menu {
+        width: 100px;
+        height: 100%;
+        overflow: auto;
+        box-sizing: border-box;
+        background: #fff;
+        .menu-icon {
+            width: 13px;
+        }
+        .menu-text {
+            padding: 0 4px;
+        }
+        ::v-deep {
+            .el-anchor {
+                height: 100%;
+                background: none;
+            }
+            .el-anchor__marker {
+                display: none;
+            }
+            .el-menu {
+                background: none;
+                border: none;
+                .el-sub-menu__title {
+                    background: none;
+                    padding: 0 2px;
+                    justify-content: center;
+                }
+                .el-sub-menu__title {
+                    height: 32px;
+                }
+                .el-sub-menu .el-sub-menu__icon-arrow {
+                    position: static;
+                    padding-top: 6px;
+                }
+                .el-sub-menu {
+                    margin-bottom: 16px;
+                    &.is-opened {
+                        .el-sub-menu__icon-arrow {
+                            padding-bottom: 6px;
+                            padding-top: 0;
+                        }
+                    }
+                    .el-menu-item {
+                        height: 32px;
+                        line-height: 32px;
+                        margin: 4px 8px;
+                        padding: 0 2px;
+                        justify-content: center;
+                        background: none;
+                    }
+                    .el-menu-item.is-active {
+                        background: none;
+                        color: #fff;
+                    }
+                    .el-anchor__item {
+                        width: 100%;
+                        text-align: center;
+                    }
+                    .el-anchor__link {
+                        color: #666666;
+                    }
+                    .el-anchor__link.is-active {
+                        background: rgba(33, 153, 248, 0.1);
+                        border-radius: 20px;
+                        color: #2199f8;
+                        border: 1px solid #2199f8;
+                    }
+                }
+            }
+            .el-anchor__list {
+                padding-left: 0;
+            }
+        }
+    }
+    .expert-content {
+        width: calc(100% - 100px);
+        height: 100%;
+        overflow: auto;
+        box-sizing: border-box;
+        .content-section {
+            position: relative;
+            .section-item {
+                position: relative;
+                border-radius: 14px;
+                border: 1px solid rgba(228, 228, 228, 0.5);
+                .record-item{
+                    padding: 12px 0;
+                }
+            }
+            .section-item + .section-item{
+                margin-top: 10px;
+            }
+            .section-id {
+                position: absolute;
+                top: 0;
+                width: 100%;
+                height: 1px;
+            }
+        }
+        .content-section + .content-section{
+            margin-top: 10px;
+        }
+        .box-title {
+            display: flex;
+            align-items: center;
+            padding-bottom: 8px;
+            border-bottom: 1px solid #f5f5f5;
+            margin-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);
+                }
+            }
+        }
+    }
+}
+</style>

src/components/pageComponents/StatsBox.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="stats">
+        <div v-for="(item, index) in statsData" :key="index" class="col">
+            <div class="num">
+                {{ item.value }}
+                <span class="unit"> {{ item.unit }}</span>
+            </div>
+            <div class="desc">{{ item.desc }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    statsData: {
+        type: Array,
+        required: true,
+        default: () => [],
+    },
+});
+</script>
+
+<style scoped lang="scss">
+.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;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .unit {
+                margin-left: 4px;
+                font-size: 13px;
+                font-weight: 400;
+                color: rgba(0, 0, 0, 0.5);
+            }
+        }
+
+        .desc {
+            color: #000;
+            margin-top: 4px;
+        }
+    }
+
+    .col + .col {
+        border-left: 1px solid rgba(33, 153, 248, 0.4);
+    }
+}
+</style>

src/components/pageComponents/TabList.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="tabs-container" :class="[`tabs-type-${type}`, { 'tabs-small': tabs.length <= 2 }]">
+        <div 
+            v-for="(tab, index) in tabs" 
+            :key="index"
+            class="tab-item"
+            :class="{ active: modelValue === index }"
+            @click="handleTabClick(index)"
+        >
+            {{ tab }}
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    tabs: {
+        type: Array,
+        required: true,
+        default: () => []
+    },
+    modelValue: {
+        type: Number,
+        default: 0
+    },
+    type: {
+        type: String,
+        default: 'default', // 'default' | 'light'
+        validator: (value) => ['default', 'light'].includes(value)
+    }
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const handleTabClick = (index) => {
+    emit('update:modelValue', index);
+    emit('change', index, props.tabs[index]);
+};
+</script>
+
+<style scoped lang="scss">
+.tabs-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    .tab-item {
+        flex: 1;
+        padding: 6px 0;
+        border-radius: 20px;
+        text-align: center;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+    
+    // 标签数量 <= 2 时的样式
+    &.tabs-small {
+        gap: 8px;
+        
+        .tab-item {
+            flex: none;
+            padding: 5px 12px;
+        }
+    }
+    
+    // 默认样式
+    &.tabs-type-default {
+        .tab-item {
+            background: #F7F8FA;
+            color: #8B8B8B;
+            
+            &.active {
+                background: #2199F8;
+                color: #ffffff;
+            }
+        }
+    }
+    
+    // 浅色样式（激活：浅蓝色背景+深蓝色文字，未激活：浅灰色背景+中灰色文字）
+    &.tabs-type-light {
+        .tab-item {
+            background: #F7F8FA;
+            color: #8B8B8B;
+            
+            &.active {
+                background: rgba(33, 153, 248, 0.1);
+                color: #2199F8;
+            }
+        }
+    }
+}
+</style>
+

src/components/recordItem.vue

@@ -1,9 +1,52 @@
 <template>
     <div class="record-item">
         <div class="record-title">
-            <slot name="title"></slot>
+            <!-- 内置标题模板 -->
+            <div v-if="titleMode === 'default'" class="box-title">
+                <div class="title-l">
+                    {{ recordItemData.title || recordItemData.farmWorkDetail?.name || '' }}
+                    <span v-if="getParentTitle()" class="parent-text">
+                        {{ getParentTitle() }}
+                    </span>
+                </div>
+                <!-- 按钮样式 -->
+                <div v-if="titleRightText && titleRightType !== 'dot'" class="title-r title-r-button">{{ titleRightText }}</div>
+                <!-- 点样式 -->
+                <div v-if="titleRightDotText && titleRightType === 'dot'" class="title-r title-r-dot">
+                    <span class="r-dot"></span>
+                    {{ titleRightDotText }}
+                </div>
+            </div>
+            <!-- 自定义标题插槽 -->
+            <slot v-else name="title"></slot>
         </div>
-        <slot name="content" v-if="showContent"></slot>
+        <!-- 服务详情模式的内容 -->
+        <div v-if="contentMode === 'serviceDetail'" class="record-content service-detail-content">
+            <div class="content-info">
+                <div class="info-line">
+                    药物处方：<span class="info-val">{{ getPrescriptionInfo(recordItemData) }}</span>
+                </div>
+                <div class="review-title info-line">
+                    复核成效
+                    <div class="info-val">
+                        {{ recordItemData.reCheckText || '通过精准农业技术的应用,作物产量实现了两位数的增长,病虫害的发生率大幅下降,土壤肥力的提升' }}
+                    </div>
+                </div>
+                <div class="review-image" v-if="recordItemData.beforeImage || recordItemData.afterImage">
+                    <div class="image-wrapper" v-if="recordItemData.beforeImage">
+                        <span class="image-label">农事前</span>
+                        <img :src="recordItemData.beforeImage" alt="" />
+                    </div>
+                    <div class="image-wrapper" v-if="recordItemData.afterImage">
+                        <span class="image-label">农事后</span>
+                        <img :src="recordItemData.afterImage" alt="" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 自定义内容插槽 -->
+        <slot name="content" v-else-if="showContent"></slot>
+        <!-- 默认内容 -->
         <div class="record-content" v-else>
             <div class="info-item">
                 推荐时间：
@@ -97,7 +140,49 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    contentMode: {
+        type: String,
+        default: '',
+        validator: (value) => ['', 'serviceDetail'].includes(value),
+    },
+    titleMode: {
+        type: String,
+        default: '',
+        validator: (value) => ['', 'default'].includes(value),
+    },
+    titleRightText: {
+        type: String,
+        default: '',
+    },
+    titleRightType: {
+        type: String,
+        default: 'button',
+        validator: (value) => ['button', 'dot'].includes(value),
+    },
+    titleRightDotText: {
+        type: String,
+        default: '',
+    },
 });
+
+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 getParentTitle = () => {
+    return props.recordItemData?.parentTitle || 
+           props.recordItemData?.farmWorkDetail?.parentTitle || 
+           '';
+};
 </script>
 
 <style lang="scss" scoped>
@@ -109,6 +194,57 @@ const props = defineProps({
     .record-title {
         font-size: 16px;
         color: #333333;
+        .box-title {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-bottom: 8px;
+            .title-l {
+                font-size: 16px;
+                font-weight: 600;
+                color: #000;
+                display: flex;
+                align-items: center;
+                .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 {
+                font-size: 12px;
+                &.title-r-button {
+                    padding: 5px 10px;
+                    border-radius: 20px;
+                    border: 1px solid #ff953d;
+                    color: #ff953d;
+                }
+                &.title-r-dot {
+                    display: flex;
+                    align-items: center;
+                    color: #393939;
+                    .r-dot {
+                        width: 6px;
+                        height: 6px;
+                        border-radius: 50%;
+                        background: #393939;
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
     }
     .record-content {
         font-size: 12px;
@@ -175,5 +311,52 @@ const props = defineProps({
             }
         }
     }
+    // 服务详情模式样式
+    .service-detail-content {
+        .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);
+                    }
+                }
+            }
+        }
+    }
 }
 </style>

src/router/globalRoutes.js

@@ -302,4 +302,10 @@ export default [
         name: "ServiceDetail",
         component: () => import("@/views/old_mini/mine/pages/serviceDetail.vue"),
     },
+    // 农场详情
+    {
+        path: "/farm_details",
+        name: "FarmDetails",
+        component: () => import("@/views/old_mini/user/farmDetails.vue"),
+    },
 ];

src/styles/common.scss

@@ -15,19 +15,21 @@ body {
     width: 100%;
     height: 100%;
     line-height: 24px;
-    font: 14px Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
+    font: 14px Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
     overflow: hidden;
     margin: 0;
     padding: 0;
     border: 0;
 }
-#app {
-    // background: #000;
-}
 img {
     vertical-align: middle;
 }
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-weight: 400;
 }
 
@@ -77,7 +79,7 @@ h1, h2, h3, h4, h5, h6 {
     height: calc(100vh - #{$nav-height} - 80px);
 }
 
-.no-events{
+.no-events {
     -webkit-pointer-events: none;
     -moz-pointer-events: none;
     -ms-pointer-events: none;
@@ -85,7 +87,7 @@ h1, h2, h3, h4, h5, h6 {
     pointer-events: none;
 }
 
-.yse-events{
+.yse-events {
     -webkit-pointer-events: auto;
     -moz-pointer-events: auto;
     -ms-pointer-events: auto;
@@ -93,7 +95,7 @@ h1, h2, h3, h4, h5, h6 {
     pointer-events: auto;
     text-decoration: none;
 }
-.yse-events input{
+.yse-events input {
     -webkit-pointer-events: auto;
     -moz-pointer-events: auto;
     -ms-pointer-events: auto;
@@ -102,7 +104,7 @@ h1, h2, h3, h4, h5, h6 {
     text-decoration: none;
 }
 
-.pure-events{
+.pure-events {
     -webkit-pointer-events: auto;
     -moz-pointer-events: auto;
     -ms-pointer-events: auto;
@@ -110,37 +112,37 @@ h1, h2, h3, h4, h5, h6 {
     pointer-events: auto;
 }
 
-.inline{
+.inline {
     display: inline;
 }
 
-.general-font1{
-    font-family:"microsoft yahei",Georgia,Serif;
+.general-font1 {
+    font-family: "microsoft yahei", Georgia, Serif;
     color: whitesmoke;
 }
 
-.general-font2{
-    font-family:"KaiTi",Georgia,Serif;
+.general-font2 {
+    font-family: "KaiTi", Georgia, Serif;
     color: whitesmoke;
 }
 
-.label-bg{
+.label-bg {
     background-color: #ffffff50;
     border-radius: 5px;
 }
 
-.cursor-default{
-    cursor:default;
+.cursor-default {
+    cursor: default;
 }
-.cursor-pointer{
-    cursor:pointer;
+.cursor-pointer {
+    cursor: pointer;
 }
-div{
+div {
     // font-family: PingFangSC-Medium, PingFang SC;
-    font-family: Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
+    font-family: Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
 }
 
-.ol-zoom{
+.ol-zoom {
     /*隐藏地图左上角的+-号*/
     display: none;
 }
@@ -148,13 +150,13 @@ div{
 // 图片预览去除下载和翻转
 .PhotoSlider__BannerWrap {
     .PhotoSlider__BannerRight {
-      svg {
-        &:nth-child(1),
-        &:nth-child(4),
-        &:nth-child(5) {
-          display: none;
+        svg {
+            &:nth-child(1),
+            &:nth-child(4),
+            &:nth-child(5) {
+                display: none;
+            }
         }
-      }
     }
 }
 
@@ -162,40 +164,44 @@ div{
     display: flex;
     align-items: center;
     justify-content: space-between;
-    .v-select{
-        .el-select__wrapper{
+    .v-select {
+        .el-select__wrapper {
             box-shadow: none;
-            background: #C8F1F7;
-            border: 1px solid #00D5F6;
+            background: #c8f1f7;
+            border: 1px solid #00d5f6;
             border-radius: 20px;
-            color: #00BEDB;
+            color: #00bedb;
         }
-        .el-select__placeholder,.el-select__caret,.el-select__placeholder.is-transparent{
-            color: #00BEDB;
+        .el-select__placeholder,
+        .el-select__caret,
+        .el-select__placeholder.is-transparent {
+            color: #00bedb;
             text-align: center;
         }
     }
-    .v-select + .v-select{
+    .v-select + .v-select {
         margin-left: 16px;
     }
 }
 
-.v-select-defalut-group{
+.v-select-defalut-group {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    .v-select{
-        .el-select__wrapper{
+    .v-select {
+        .el-select__wrapper {
             box-shadow: none;
-            border: 1px solid #DDDDDD;
+            border: 1px solid #dddddd;
             border-radius: 20px;
         }
-        .el-select__placeholder,.el-select__caret,.el-select__placeholder.is-transparent{
+        .el-select__placeholder,
+        .el-select__caret,
+        .el-select__placeholder.is-transparent {
             color: #000;
             text-align: center;
         }
     }
-    .v-select + .v-select{
+    .v-select + .v-select {
         margin-left: 8px;
     }
 }
@@ -206,7 +212,7 @@ div{
 }
 
 .SOURCEHANSANSCN_0 {
-    font-family: 'SOURCEHANSANSCN_0', sans-serif; /* 使用自定义字体 */  
+    font-family: "SOURCEHANSANSCN_0", sans-serif; /* 使用自定义字体 */
 }
 
 @font-face {
@@ -215,7 +221,7 @@ div{
 }
 
 .SIMKAI {
-    font-family: 'SIMKAI', sans-serif; /* 使用自定义字体 */  
+    font-family: "SIMKAI", sans-serif; /* 使用自定义字体 */
 }
 
 @font-face {
@@ -224,7 +230,7 @@ div{
 }
 
 .PangMenZhengDao-FONT {
-    font-family: 'PangMenZhengDao', sans-serif; /* 使用自定义字体 */  
+    font-family: "PangMenZhengDao", sans-serif; /* 使用自定义字体 */
 }
 
 @font-face {
@@ -233,7 +239,7 @@ div{
 }
 
 .YOUSHE-FONT {
-    font-family: 'YOUSHE', sans-serif; /* 使用自定义字体 */  
+    font-family: "YOUSHE", sans-serif; /* 使用自定义字体 */
 }
 
 @font-face {
@@ -242,7 +248,7 @@ div{
 }
 
 .SOURCEHANSANSCN-FONT {
-    font-family: 'SOURCEHANSANSCN', sans-serif; /* 使用自定义字体 */  
+    font-family: "SOURCEHANSANSCN", sans-serif; /* 使用自定义字体 */
 }
 
 @font-face {
@@ -251,7 +257,7 @@ div{
 }
 
 .SIMLI-FONT {
-    font-family: 'SIMLI', sans-serif; /* 使用自定义字体 */  
+    font-family: "SIMLI", sans-serif; /* 使用自定义字体 */
 }
 
 @font-face {
@@ -260,24 +266,52 @@ div{
 }
 
 .SMILEYSANS-FONT {
-    font-family: 'SmileySans', sans-serif; /* 使用自定义字体 */  
+    font-family: "SmileySans", sans-serif; /* 使用自定义字体 */
 }
 
 .ellipsis-l2 {
-	white-space: pre-line;
-	overflow: hidden;
-	text-overflow: ellipsis;
+    white-space: pre-line;
+    overflow: hidden;
+    text-overflow: ellipsis;
     word-break: break-all;
-	display: -webkit-box !important;
+    display: -webkit-box !important;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical !important;
 }
 .ellipsis-l1 {
-	white-space: pre-line;
-	overflow: hidden;
-	text-overflow: ellipsis;
+    white-space: pre-line;
+    overflow: hidden;
+    text-overflow: ellipsis;
     word-break: break-all;
-	display: -webkit-box !important;
+    display: -webkit-box !important;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical !important;
 }
+
+.custom-bottom-fixed-btns {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    background: #ffffff;
+    box-shadow: 2px 2px 4.5px rgba(0, 0, 0, 0.4);
+    z-index: 100;
+    .bottom-btn {
+        padding: 10px 20px;
+        border-radius: 25px;
+        text-align: center;
+        &.secondary-btn {
+            color: #666666;
+            border: 1px solid rgba(153, 153, 153, 0.5);
+        }
+        &.primary-btn {
+            background: linear-gradient(140deg, #9FD5FF, #2199F8);
+            color: #ffffff;
+            border: none;
+        }
+    }
+}

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

@@ -9,7 +9,7 @@
                     area: '200亩',
                     variety: '桂味',
                     address: '广东省广州市从化区从化区',
-                    mapImage: '/map.png'
+                    mapImage: '/map.png',
                 }"
             >
                 <template #right>
@@ -21,66 +21,16 @@
                     <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>
+                <stats-box :stats-data="statsData" />
                 <div v-for="(section, index) in contentData" :key="index" class="content-section">
                     <record-item
                         :record-item-data="section"
                         :onlyRecipeName="true"
-                        :showContent="true"
+                        content-mode="serviceDetail"
+                        title-mode="default"
+                        title-right-text="分享成果"
                         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>
@@ -90,21 +40,15 @@
 <script setup>
 import customHeader from "@/components/customHeader.vue";
 import FarmInfoCard from "@/components/pageComponents/FarmInfoCard.vue";
+import StatsBox from "@/components/pageComponents/StatsBox.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 statsData = ref([
+    { value: "1258", unit: "元", desc: "总收益" },
+    { value: "1258", unit: "元", desc: "投入成本" },
+    { value: "118", unit: "次", desc: "服务次数" },
+]);
 
 const contentData = ref([
     {
@@ -113,7 +57,9 @@ const contentData = ref([
         parentTitle: "秋梢期",
         isExpanded: false, // 添加展开状态
         hasApplied: false, // 是否已发起需求
-        reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，虫害风险控制优异，未发现虫害风险",
+        reCheckText: "通过精准农业技术的应用,作物产量实现了两位数的增长,病虫害的发生率大幅下降,土壤肥力的提升",
+        beforeImage: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+        afterImage: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
         expert: 91356,
         orderStatus: 3,
         activeStatus: 0,
@@ -198,6 +144,7 @@ const contentData = ref([
         ],
     },
 ]);
+
 </script>
 
 <style lang="scss" scoped>
@@ -229,134 +176,10 @@ const contentData = ref([
                     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;
-                            }
-                        }
-                    }
                 }
             }
         }

src/views/old_mini/user/farmDetails.vue

@@ -0,0 +1,354 @@
+<template>
+    <div class="farm-details-page">
+        <custom-header name="农场详情"></custom-header>
+        <div class="farm-details-content">
+            <farm-info-card
+                :data="{
+                    farmName: '从化荔博园',
+                    area: '200亩',
+                    variety: '桂味',
+                    address: '广东省广州市从化区从化区',
+                    mapImage: '/map.png',
+                }"
+            >
+                <template #right>
+                    <div>基本信息</div>
+                </template>
+            </farm-info-card>
+            <tabs v-model:active="activeTab" class="custom-tabs" scrollspy sticky offset-top="40" background="#f5f7fb">
+                <tab title="农情互动" class="tab-item">
+                    <common-box title="农情互动">
+                        <template #right>
+                            <span>查看详情</span>
+                        </template>
+                        <div class="question-header">
+                            <img class="question-icon" src="@/assets/img/home/ask-icon.png" alt="" />
+                            <div class="question-title">在白点期，您当前农场是否出现白点？</div>
+                        </div>
+                        <template v-if="isImg">
+                            <div class="answer-content">答：2025.05.18 已经出现白点</div>
+                            <div class="answer-img">
+                                <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="" />
+                                <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="" />
+                                <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="" />
+                            </div>
+                        </template>
+                        <div v-else class="answer-btn">
+                            <div class="answer-btn-item">转发给客户</div>
+                            <div class="answer-btn-item-group">
+                                <div class="answer-btn-item">否</div>
+                                <div class="answer-btn-item primary">是</div>
+                            </div>
+                        </div>
+                    </common-box>
+                </tab>
+                <tab title="农事服务" class="tab-item">
+                    <common-box title="农事服务">
+                        <template #right>
+                            <span>查看详情</span>
+                        </template>
+                        <tab-list
+                            type="light"
+                            v-model="farmServiceActiveTab"
+                            :tabs="farmServiceTabs"
+                            @change="handleFarmServiceTabChange"
+                        />
+                        <stats-box :stats-data="serviceStatsData" />
+                        <div v-for="(section, index) in contentData" :key="index" class="content-section">
+                            <record-item
+                                :record-item-data="section"
+                                onlyRecipeName
+                                :content-mode="farmServiceActiveTab === 0 ? 'serviceDetail' : ''"
+                                title-mode="default"
+                                title-right-type="dot"
+                                title-right-dot-text="2区"
+                                class="recipe-item"
+                            />
+                        </div>
+                    </common-box>
+                </tab>
+                <tab title="农场报告" class="tab-item">
+                    <common-box title="农场报告">
+                        <template #right>
+                            <span>查看详情</span>
+                        </template>
+                        <span class="report-content"
+                            >果园面积共XX亩，共有XX棵生产树。果园面积共XX亩，共有XX棵生产树。果园面积共XX亩，共有XX棵生产树。果园面积共XX亩，共有XX棵生产树。果园面积共XX亩，共有XX棵生产树。果园面积共XX亩，共有XX棵生产树。</span
+                        >
+                    </common-box>
+                </tab>
+                <tab title="农事方案" class="tab-item">
+                    <common-box title="农事方案">
+                        <template #right>
+                            <span>查看更多</span>
+                        </template>
+                        <plan-list :menu-data="planMenuData" class="plan-list-wrapper" />
+                    </common-box>
+                </tab>
+            </tabs>
+        </div>
+        <div class="custom-bottom-fixed-btns">
+            <div class="bottom-btn secondary-btn">转发给客户</div>
+            <div class="bottom-btn primary-btn">在线沟通</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { Tab, Tabs } from "vant";
+import customHeader from "@/components/customHeader.vue";
+import FarmInfoCard from "@/components/pageComponents/FarmInfoCard.vue";
+import tabList from "@/components/pageComponents/TabList.vue";
+import commonBox from "@/components/pageComponents/CommonBox.vue";
+import StatsBox from "@/components/pageComponents/StatsBox.vue";
+import recordItem from "@/components/recordItem.vue";
+import PlanList from "@/components/pageComponents/PlanList.vue";
+
+const route = useRoute();
+const activeTab = ref(0);
+
+const planMenuData = ref([]);
+
+function getPlanWorkList() {
+    VE_API.home
+        .getPhenologyFarmWorkList({ farmId: 93301, containerId: route.query.containerId || 2 })
+        .then(({ data }) => {
+            planMenuData.value = data;
+        });
+}
+
+onMounted(() => {
+    getPlanWorkList();
+});
+
+const farmServiceTabs = ["过往服务", "未来服务"];
+const farmServiceActiveTab = ref(0);
+
+const handleFarmServiceTabChange = (index) => {
+    console.log("切换到标签页:", index, farmServiceTabs[index]);
+    if(index === 0){
+        serviceStatsData.value = [
+            { value: "1258", unit: "元", desc: "总收益" },
+            { value: "1258", unit: "元", desc: "投入成本" },
+            { value: "118", unit: "次", desc: "服务次数" },
+        ];
+    }else{
+        serviceStatsData.value = [
+            { value: "1258", unit: "元", desc: "预计收益" },
+            { value: "1258", unit: "元", desc: "预计成本" },
+        ];
+    }
+};
+
+const serviceStatsData = ref([
+    { value: "1258", unit: "元", desc: "总收益" },
+    { value: "1258", unit: "元", desc: "投入成本" },
+    { value: "118", unit: "次", desc: "服务次数" },
+]);
+
+const contentData = ref([
+    {
+        targetId: "part1",
+        title: "巡园农事",
+        parentTitle: "秋梢期",
+        isExpanded: false, // 添加展开状态
+        hasApplied: false, // 是否已发起需求
+        reCheckText: "通过精准农业技术的应用,作物产量实现了两位数的增长,病虫害的发生率大幅下降,土壤肥力的提升",
+        beforeImage: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+        afterImage: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+        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,
+                    },
+                ],
+            },
+        ],
+    },
+]);
+
+const isImg = ref(false);
+</script>
+
+<style scoped lang="scss">
+.farm-details-page {
+    width: 100%;
+    height: 100vh;
+    background: #f2f3f5;
+    .farm-details-content {
+        box-sizing: border-box;
+        padding: 10px 12px 70px 12px;
+        overflow: auto;
+        height: calc(100% - 40px);
+        box-sizing: border-box;
+        .custom-tabs {
+            ::v-deep {
+                .van-tabs__wrap {
+                    height: auto;
+                }
+                .van-tabs__nav {
+                    .van-tab {
+                        color: #8b8b8b;
+                        background: #f7f8fa;
+                        height: 34px;
+                        font-weight: 400;
+                        border-radius: 25px;
+                    }
+                    .van-tab--active {
+                        color: #fff;
+                        background: #2199f8;
+                        font-weight: 400;
+                    }
+                }
+
+                .van-tabs__line {
+                    display: none;
+                }
+                .van-tabs__nav--line {
+                    padding: 12px 0;
+                }
+            }
+            .tab-item + .tab-item {
+                margin-top: 12px;
+            }
+        }
+        .question-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 6px;
+            gap: 8px;
+            font-weight: 500;
+            .question-icon {
+                width: 22px;
+                height: 20px;
+            }
+        }
+        .answer-content {
+            color: #333333;
+            margin: 6px 0 10px 0;
+        }
+        .answer-img {
+            display: flex;
+            gap: 5px;
+            img {
+                flex: 1;
+                height: 105px;
+                border-radius: 5px;
+            }
+        }
+        .content-section {
+            .recipe-item {
+                border: 1px solid rgba(0, 0, 0, 0.1);
+                margin: 12px 0 0 0;
+            }
+        }
+        .plan-list-wrapper {
+            height: 500px;
+            margin-top: 12px;
+        }
+        .report-content {
+            font-size: 13px;
+        }
+        .answer-btn {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 10px;
+            > div {
+                display: flex;
+                gap: 10px;
+            }
+        }
+        .answer-btn-item {
+            padding: 7px 12px;
+            border-radius: 25px;
+            font-size: 12px;
+            text-align: center;
+            background: rgba(33, 153, 248, 0.1);
+            color: #2199f8;
+            min-width: 52px;
+            box-sizing: border-box;
+            &.primary {
+                background: #2199f8;
+                color: #ffffff;
+            }
+        }
+    }
+}
+</style>

src/views/old_mini/user/index.vue

@@ -31,7 +31,10 @@
                             area: ele.area || '190亩',
                             variety: ele.variety || `荔枝-${ele.name}`,
                             address: ele.address || '湖北省武汉市富里唱鑫园5023',
-                            mapImage: ele.mapImage || '/map.png'
+                            mapImage: ele.mapImage || '/map.png',
+                            // day: 15,
+                            farmInfo: '梢期杀虫',
+                            estimatedIncome: ele.estimatedIncome || 2585
                         }"
                         @click="handleItemClick"
                     >
@@ -77,8 +80,7 @@ const hadnleManage = (value) => {
 
 // 处理列表项点击
 const handleItemClick = (data) => {
-    console.log("点击了列表项:", data);
-    // TODO: 处理点击逻辑
+    router.push(`/farm_details?farmId=${data.farmId}`);
 };
 
 const list = ref([