feat:添加 专家农场管理页面和农事任务子页面

src/App.vue

@@ -21,7 +21,7 @@
     </router-view>
 
     <Tabbar class="tabbar" route fixed v-show="showTab" active-color="#2199F8" inactive-color="#898989">
-        <tabbar-item replace to="/home">
+        <tabbar-item replace to="/home" v-if="curRole == 0">
             <span>农场监测</span>
             <template #icon="props">
                 <img
@@ -33,6 +33,19 @@
                 />
             </template>
         </tabbar-item>
+        <!-- 专家 -->
+        <tabbar-item replace to="/farm_manage" v-if="curRole == 1">
+            <span>农场管理</span>
+            <template #icon="props">
+                <img
+                    :src="
+                        props.active
+                            ? require('@/assets/img/tab_bar/home-active.png')
+                            : require('@/assets/img/tab_bar/home.png')
+                    "
+                />
+            </template>
+        </tabbar-item>
         <tabbar-item replace to="/plan">
             <span>农事方案</span>
             <template #icon="props">
@@ -88,6 +101,8 @@ const router = useRouter();
 
 // 首页loading加载完才显示底部导航栏
 const showTab = ref(false);
+// 0: 农户, 1: 专家, 2:农资农服
+const curRole = ref(1);
 
 let tabBarHeight = 0;
 onMounted(() => {

src/router/globalRoutes.js

@@ -80,4 +80,17 @@ export default [
         name: "Recognize",
         component: () => import("@/views/old_mini/home/subPages/recognize.vue"),
     },
+    // 农场管理
+    {
+        path: "/farm_manage",
+        name: "FarmManage",
+        meta: { showTabbar: true, keepAlive: true },
+        component: () => import("@/views/old_mini/farm_manage/index.vue"),
+    },
+    // 农场管理详情
+    {
+        path: "/farm_manage_detail",
+        name: "FarmManageDetail",
+        component: () => import("@/views/old_mini/home/index.vue"),
+    },
 ];

src/views/old_mini/farm_manage/components/demandHall.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="demand-hall">
+        11111
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+.demand-hall {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/old_mini/farm_manage/components/farmManage.vue

@@ -0,0 +1,198 @@
+<template>
+    <div class="farm-manage-content">
+        <el-input class="search" v-model="searchValue" placeholder="搜索位置" @search="search" :prefix-icon="Search" />
+        <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>
+            <el-select class="select-item" v-model="areaValue1" placeholder="Select">
+                <el-option v-for="item in areaOptions1" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </div>
+        <div class="farm-list">
+            <div :class="['farm-item', { 'is-default': item === 3 }]" v-for="item in 3" :key="item" @click="handleItemClick(item)">
+                <div class="item-top"><span class="num">2</span> 条农事待确认</div>
+                <div class="item-title">未命名农场</div>
+                <div class="item-desc">
+                    <div class="desc-info">
+                        <div class="desc-info-item">
+                            <span>农场品种：</span>
+                            <span class="value">荔枝-桂味</span>
+                        </div>
+                        <div class="desc-info-item">
+                            <span>农场面积：</span>
+                            <span class="value">500亩</span>
+                        </div>
+                    </div>
+                    <div class="desc-info copy-info">
+                        <div class="address van-ellipsis">
+                            <span>农场位置：</span>
+                            <span class="value">广东省广州市从化区市从化区从广东省广州市从化区市从化区从</span>
+                        </div>
+                        <span class="copy-text">点击复制</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const searchValue = ref("");
+const search = () => {
+    console.log(searchValue.value);
+};
+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" },
+];
+const areaValue1 = ref("1");
+const areaOptions1 = [
+    { value: "1", label: "区域筛选" },
+    { value: "2", label: "2" },
+    { value: "3", label: "3" },
+];
+
+const handleItemClick = (item) => {
+    console.log(item);
+    router.push(`/farm_manage_detail?type=EXPERT`);
+};
+</script>
+
+<style lang="scss" scoped>
+.farm-manage-content {
+    width: 100%;
+    height: calc(100vh - 52px - 50px);
+    background: #f5f7fb;
+    padding: 8px 12px;
+    box-sizing: border-box;
+    .search {
+        ::v-deep {
+            .el-input__wrapper {
+                box-shadow: none;
+                border-radius: 20px;
+            }
+        }
+    }
+    .select-group {
+        display: flex;
+        gap: 12px;
+        margin: 5px 0;
+        .select-item {
+            width: 100%;
+            ::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);
+                }
+            }
+        }
+    }
+    .farm-list {
+        .farm-item {
+            background: #fff;
+            border-radius: 10px;
+            padding: 10px 12px;
+            border: 1px solid rgba(255, 149, 61, 0.5);
+            .item-top {
+                background-image: linear-gradient(90deg, rgba(255, 149, 61, 0.3) 0%, transparent 88%);
+                color: #bf5600;
+                padding: 5px 10px;
+                border-radius: 5px;
+                position: relative;
+                &::before {
+                    content: "";
+                    width: 6px;
+                    height: 6px;
+                    background: #ff953d;
+                    border-radius: 50%;
+                    top: 5px;
+                    left: 110px;
+                    position: absolute;
+                }
+                .num {
+                    font-size: 18px;
+                }
+            }
+            .item-title {
+                font-size: 16px;
+                font-weight: 500;
+                margin: 10px 0 5px 0;
+            }
+            .item-desc {
+                font-size: 13px;
+                color: #bbbbbb;
+                line-height: 18px;
+                .desc-info {
+                    display: flex;
+                    .desc-info-item {
+                        flex: 1;
+                        .value {
+                            color: #666666;
+                        }
+                    }
+                }
+                .copy-info {
+                    margin-top: 4px;
+                    .address {
+                        max-width: 80%;
+                        .value {
+                            color: #666666;
+                        }
+                    }
+                    .copy-text {
+                        margin-left: 8px;
+                        color: #2199f8;
+                    }
+                }
+            }
+
+            &.is-default {
+                border-color: transparent;
+                .item-top {
+                    color: #505050;
+                    background-image: linear-gradient(90deg, rgba(171, 171, 171, 0.2) 0%, transparent 88%);
+                    &::before {
+                        background: #909090;
+                    }
+                }
+            }
+        }
+        .farm-item + .farm-item {
+            margin-top: 10px;
+        }
+    }
+}
+</style>

src/views/old_mini/farm_manage/index.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="farm-manage">
+        <tabs v-model:active="active" class="tabs">
+            <tab title="农场管理">
+                <farm-manage />
+            </tab>
+            <tab title="需求大厅">
+                <demand-hall />
+            </tab>
+        </tabs>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Tab, Tabs } from "vant";
+import farmManage from "./components/farmManage.vue";
+import demandHall from "./components/demandHall.vue";
+
+const active = ref(0);
+</script>
+
+<style lang="scss" scoped>
+.farm-manage {
+    width: 100%;
+    height: 100%;
+    .tabs{
+        ::v-deep{
+            .van-tabs__wrap{
+                margin-bottom: 8px;
+            }
+            .van-tabs__line{
+                width: 24px;
+                height: 4px;
+            }
+        }
+    }
+}
+</style>

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

@@ -143,12 +143,19 @@ import { useStore } from "vuex";
 import { computed, ref } from "vue";
 import RecordTask from "./recordTask.vue";
 
+const props = defineProps({
+    isExpert: {
+        type: Boolean,
+        default: false,
+    },
+});
+
 const store = useStore();
 // const tabBarHeight = computed(() => store.state.home.tabBarHeight);
 const tabBarHeight = ref(localStorage.getItem("tabBarHeight") * 1 || 50);
 
 const defalutHeight = ref(0);
-const anchors = ref([defalutHeight.value, 310 + tabBarHeight.value, Math.round(1 * window.innerHeight)]);
+const anchors = ref([defalutHeight.value, 310 + tabBarHeight.value, Math.round(1 * window.innerHeight) - (props.isExpert ? 40 : 0)]);
 const height = ref(anchors.value[1]);
 
 const containerRef = ref(null);
@@ -200,7 +207,7 @@ const handleHeightChange = ({ height }) => {
         cardContentHeight.value = 180;
         cardContentRef.value.scrollTo({ top: 0, behavior: "smooth" });
     } else if (height === anchors.value[2]) {
-        cardContentHeight.value = Math.round(1 * window.innerHeight) - (tabBarHeight.value - 40) - 180;
+        cardContentHeight.value = Math.round(1 * window.innerHeight) - (tabBarHeight.value - (props.isExpert ? 40 : 0)) - 180;
     }
     emit("heightChange", height);
 };

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

@@ -45,7 +45,7 @@ import detailDialog from "@/components/detailDialog.vue"
 import { useRouter } from "vue-router";
 const router = useRouter();
 
-const show = ref(true);
+const show = ref(false);
 const noShow = ref(false);
 const noClick = () => {
     show.value = false;

src/views/old_mini/home/index.vue

@@ -1,9 +1,10 @@
 <template>
-    <div class="home-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
+    <custom-header v-if="isExpert" name="飞鸟管家"></custom-header>
+    <div class="home-index" :style="{ height: isExpert ? `calc(100vh - 40px)` : `calc(100vh - ${tabBarHeight}px - 50px)` }">
         <!-- 地图 -->
         <div class="map-container" ref="mapContainer"></div>
         <!-- 新建按钮 -->
-        <div class="add-button" v-show="showAddButton" @click="toSubPage">
+        <div class="add-button" v-show="showAddButton && !isExpert" @click="toSubPage">
             <el-icon class="add-button-icon"><CircleCloseFilled /></el-icon>
             <span>创建我的农场</span>
         </div>
@@ -23,13 +24,14 @@
                     <span>农场相册</span>
                 </div>
             </div>
-            <div class="add-farm-button">
+            <div class="add-farm-button" v-show="!isExpert">
                 <el-icon class="icon"><CircleCloseFilled /></el-icon>
                 <span>新增农场</span>
             </div>
         </div>
         <!-- 浮动面板 -->
         <home-floating-panel
+            :isExpert="isExpert"
             class="home-floating-panel"
             :style="{ zIndex: zIndex }"
             @heightChange="heightChange"
@@ -43,20 +45,26 @@
 import IndexMap from "./map/index.js";
 import { onMounted, computed, ref } from "vue";
 import { useStore } from "vuex";
-import { useRouter } from "vue-router";
+import { useRouter,useRoute } from "vue-router";
+import customHeader from "@/components/customHeader.vue";
 import weatherInfo from "@/components/weatherInfo.vue";
 import homeFloatingPanel from "./components/homeFloatingPanel.vue";
 import problemReminder from "./components/problemReminder.vue";
 const router = useRouter();
-
+const route = useRoute();
 const store = useStore();
 const tabBarHeight = computed(() => store.state.home.tabBarHeight);
 
 const indexMap = new IndexMap();
 const mapContainer = ref(null);
+
+const isExpert = ref(false);
 onMounted(() => {
     const point = store.state.home.miniUserLocationPoint
     indexMap.initMap(point, mapContainer.value);
+    if (route.query.type) {
+        isExpert.value = true;
+    }
 });
 
 const isExpanded = ref(false);
@@ -93,7 +101,7 @@ function toFarmPhoto() {
 .home-index {
     position: relative;
     width: 100%;
-    height: calc(100vh - 50px);
+    height: 100%;
     overflow: hidden;
     .map-container {
         width: 100%;