fix: 农场页面接口对接

src/api/model/farmbase.ts

+// 上传请求
+import { otherHttp } from '/@/utils/http/axios'
+
+enum Api {
+    list = '/farmbase/list',
+    queryById = '/farmbase/queryById',
+    deviceList = '/device/list',
+    getDeviceTypeCount = '/device/getTypeCount',
+}
+
+export function list(params) {
+    return otherHttp.get({
+        url: Api.list,
+        params,
+    })
+}
+
+export function getFarmbaseInfoById(params: any = {}) {
+    return otherHttp.get({
+        url: Api.queryById,
+        params,
+    })
+}
+
+export function getDeviceList(params) {
+    return otherHttp.get({
+        url: Api.deviceList,
+        params,
+    })
+}
+
+export function getDeviceTypeCount(params) {
+    return otherHttp.get({
+        url: Api.getDeviceTypeCount,
+        params,
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        },
+    })
+}

src/pages.json

@@ -351,7 +351,32 @@
                     "titleNView": {
                         "buttons": [
                             {
-                                "text": "\ue674 地图模式",
+                                "text": "\uE674 地图模式",
+                                "fontSrc": "/static/fonts/tihuan.ttf",
+                                "color": "#fff",
+                                "fontSize": "26rpx",
+                                "width": "auto",
+                                "icon": "map"
+                            }
+                        ]
+                    }
+                }
+            }
+        },
+        {
+            "path": "pages/linghuoyonggong/components/yonggongmap",
+            "style": {
+                "navigationBarTitleText": "灵活用工",
+                "enablePullDownRefresh": false,
+                "navigationBarBackgroundColor": "#5DB66F",
+                "navigationBarTextStyle": "white",
+                "backgroundColorBottom": "#F2F2F2",
+                "onReachBottomDistance": 50,
+                "app-plus": {
+                    "titleNView": {
+                        "buttons": [
+                            {
+                                "text": "\uE674 列表模式",
                                 "fontSrc": "/static/fonts/tihuan.ttf",
                                 "color": "#fff",
                                 "fontSize": "26rpx",

src/pages/chanxiao/chanxiao.vue

@@ -280,7 +280,7 @@
                                     <image
                                         class="channel-imgCenter"
                                         :style="
-                                            channel.icon.indexOf('caixianyi') > 0 ? 'width: 100rpx; height: 40rpx' : ''
+                                            channel.icon.indexOf('caixianyi') > 0 ? 'width: 120rpx; height: 50rpx' : ''
                                         "
                                         :src="channel.icon"
                                     />
@@ -945,8 +945,8 @@
             padding: 15rpx 0;
 
             .channel-imgCenter {
-                width: 200rpx;
-                height: 60rpx;
+                width: 240rpx;
+                height: 70rpx;
             }
 
             .channel-text {

src/pages/jidiguanli/add.vue

@@ -137,7 +137,9 @@
         const files = event.file
 
         // 如果没有文件，直接返回
-        if (!files || files.length === 0) return
+        if (!files || files.length === 0) {
+            return
+        }
 
         // 记录成功上传的数量
         let successCount = 0
@@ -259,6 +261,8 @@
         if (farmInfo) {
             formData.farmId = farmInfo.id
         }
+        formData.farmId = pageOptions.farmId
+        console.log('pageOptions', pageOptions)
         // 修复：修改页面上定义的 options 对象中的 farmType
         options.farmType = dictStore.getDictList.farm_type.map((item) => {
             return {

src/pages/linghuoyonggong/components/config.ts

+import type { BasicMapPage } from '@/components/Map/types'
+
+export interface Page extends BasicMapPage {
+    /**
+     * 接口查询参数
+     */
+    query?: {
+        /**
+         * 注入的变量，请求时不会传递，仅用于注入。
+         * 在 setGeoJSONSourceForRequest 的 handler 中可以实现替换字符串模板的功能。
+         */
+        inject?: Recordable
+    }
+    /**
+     * 过滤条件
+     */
+    filter?: Recordable
+}

src/pages/linghuoyonggong/components/yonggongmap.vue

+<!-- 农场详情 -->
+<script setup lang="ts">
+    import * as turf from '@turf/turf'
+    import type { Page } from './config'
+    import Navigate from '@/utils/page/navigate'
+    import {
+        addDefaultGeoJSONSource,
+        addDefaultSplotLayer,
+        addDefaultSymbolLayer,
+        useMapbox,
+    } from '@/components/Map/Mapbox/hook'
+    import { getText } from '@/utils/dict/area'
+    import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong'
+
+    // 页面参数
+    const page = reactive<Page>({
+        id: 'example-mapbox',
+        init: false,
+        requests: 0,
+        latest: null,
+        query: {},
+    })
+
+    const model = reactive({
+        id: '',
+        name: '',
+        lonlat: `${uni.getStorageSync('location').lon},${uni.getStorageSync('location').lat}`,
+        address: '',
+        description: '',
+        // 地块、位置信息 GeoJSON
+        plots: [],
+        // 设备信息
+        devices: [],
+        // 分类标签
+        categoryTabs: [
+            { id: null, name: '全部' },
+            { id: 1, name: '种植' },
+            { id: 2, name: '养殖' },
+            { id: 3, name: '采摘' },
+            { id: 4, name: '其他' },
+        ],
+        search: {
+            pageNo: 1,
+            pageSize: 10,
+            publishstatu: 1,
+            type: null,
+            createBy: '',
+        },
+        employmentList: [],
+        loading: false,
+        total: 0,
+        requestDebounce: null,
+    })
+
+    onLoad((options) => {
+        model.id = options.id
+        model.name = decodeURIComponent(options.name)
+        model.search.pageNo = 1
+        model.search.publishstatu = 1
+        model.search.createBy = ''
+        model.employmentList = []
+        getEmploymentList()
+    })
+
+    // 地图组件
+    const center: [number, number] = [uni.getStorageSync('location').lon, uni.getStorageSync('location').lat]
+    const [registerMap, map] = useMapbox({
+        style: { center, zoom: 15 },
+        onLoaded: (data) => {
+            const employments = []
+            // 渲染设备数据
+            model.employmentList.forEach((item) => {
+                employments.push(
+                    turf.point([item.longitude, item.latitude], {
+                        name: item.name,
+                        description: item.content,
+                        icon: 'GD',
+                        popup: `{{name}}`,
+                    }),
+                )
+            })
+            addDefaultGeoJSONSource(map, `${page.id}-text`, employments)
+            addDefaultSymbolLayer(map, `${page.id}-text`, {
+                layout: {
+                    'text-field': '',
+                    'icon-image': ['get', 'icon'],
+                    'icon-size': 1,
+                },
+            })
+        },
+        onSourceRequestHandle: () => {
+            page.requests--
+            if (page.requests === 0) {
+                Message.hideLoading()
+            }
+        },
+        onSourceRequestErrorHandle: () => {
+            Message.hideLoading()
+        },
+    })
+
+    // 分类标签点击事件
+    function onCategoryTabClick(tab: any) {
+        model.search.type = tab.id
+        model.search.pageNo = 1
+        model.employmentList = []
+        getEmploymentList()
+        // 在这里添加具体的分类标签点击逻辑
+    }
+
+    function getEmploymentList() {
+        // 如果正在加载或没有更多数据，直接返回
+        if (model.loading || (model.total > 0 && model.employmentList.length >= model.total)) {
+            return
+        }
+        model.loading = true
+        try {
+            LinghuoyonggongAPI.employmentList(model.search).then(async (res) => {
+                const { records, total } = res
+                // 批量处理数据，避免多次DOM操作
+                const processedRecords = records.map((item) => {
+                    // 缓存区域处理结果
+                    item.area = getText(item.area, ' / ')
+
+                    // 计算天数并缓存结果
+                    if (item.starttime && item.estimatedendtime) {
+                        item.daysDiff = getDaysDiff(item.starttime, item.estimatedendtime)
+                    }
+
+                    return item
+                })
+
+                // 一次性更新数据，避免多次响应式更新
+                if (model.search.pageNo === 1) {
+                    model.employmentList = processedRecords
+                } else {
+                    // 避免重复数据加载
+                    const existingIds = new Set(model.employmentList.map((item) => item.id))
+                    const newRecords = processedRecords.filter((item) => !existingIds.has(item.id))
+                    model.employmentList = [...model.employmentList, ...newRecords]
+                }
+
+                model.total = total
+            })
+        } catch (error) {
+            console.error('获取用工列表失败:', error)
+            // 这里可以添加用户友好的错误提示
+            // uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' })
+        } finally {
+            model.loading = false
+            model.requestDebounce = null
+        }
+    }
+
+    // 获取时间差
+    function getDaysDiff(date1: Date | number | string, date2: Date | number | string): number {
+        // 将输入转换为Date对象
+        const d1 = new Date(date1)
+        const d2 = new Date(date2)
+
+        // 检查日期是否有效
+        if (Number.isNaN(d1.getTime()) || Number.isNaN(d2.getTime())) {
+            throw new TypeError('无效的日期格式')
+        }
+
+        // 设置时间部分为00:00:00，只比较日期部分
+        d1.setHours(0, 0, 0, 0)
+        d2.setHours(0, 0, 0, 0)
+
+        // 计算两个日期之间的毫秒差
+        const diffTime = Math.abs(d2.getTime() - d1.getTime())
+
+        // 转换为天数
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+
+        return diffDays
+    }
+
+    onNavigationBarButtonTap((e) => {
+        if (e.index === 0) {
+            Navigate.to('/pages/linghuoyonggong/linghuoyonggong')
+        }
+    })
+</script>
+
+<template>
+    <view class="page h-95_dl_5vh bg-#E6F5E8 flex flex-col justify-between">
+        <view class="h-200rpx p-3">
+            <view class="w-full h-60rpx border-rd-3xl!">
+                <fui-input
+                    :bottomLeft="0"
+                    class="w-full h-full border-rd-3xl!"
+                    borderTop
+                    placeholder="请输入搜索内容"
+                    placeholderStyle="color: #CCCCCC; font-weight: 400; font-family: PingFangSC-Regular;"
+                    v-model="text"
+                >
+                    <template #left>
+                        <view class="fui-left__icon">
+                            <fui-icon name="search" color="#CCCCCC" :size="36" />
+                        </view>
+                    </template>
+                </fui-input>
+            </view>
+            <view class="codefun-mt-14 codefun-flex-row group_2 gap-2">
+                <view
+                    v-for="tab in model.categoryTabs"
+                    :key="tab.id"
+                    class="codefun-flex-col codefun-justify-start codefun-items-center"
+                    :class="[tab.id === model.search.type ? 'text-wrapper' : 'text-wrapper_2']"
+                    @click="onCategoryTabClick(tab)"
+                >
+                    <text class="font_2 text_2">
+                        {{ tab.name }}
+                    </text>
+                </view>
+            </view>
+        </view>
+        <!-- 地图组件 -->
+        <!-- <view class="h-730 overflow-hidden map-box"> -->
+        <view class="overflow-hidden map-box" style="height: calc(100% - 200rpx)">
+            <!-- 地图组件 -->
+            <Mapbox @register="registerMap" />
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+    //
+    .page {
+        .map-box {
+            // #ifdef APP-PLUS
+            position: relative;
+            top: 0;
+            // #endif
+            // #ifdef H5
+            position: relative;
+            top: 0;
+            // #endif
+        }
+
+        .group_2 {
+            .text-wrapper {
+                flex: 1 1 120rpx;
+                background-color: #5db66f;
+                border-radius: 19998rpx;
+                line-height: 60rpx;
+                height: 60rpx;
+                .text_2 {
+                    color: #ffffff;
+                }
+            }
+            .text-wrapper_2 {
+                flex: 1 1 120rpx;
+                line-height: 60rpx;
+                background-color: #ffffff;
+                border-radius: 19998rpx;
+                height: 60rpx;
+                .text_3 {
+                    line-height: 25.88rpx;
+                }
+                .text_4 {
+                    line-height: 26.16rpx;
+                }
+                .text_5 {
+                    line-height: 25.96rpx;
+                }
+                .text_6 {
+                    line-height: 25.68rpx;
+                }
+            }
+        }
+    }
+</style>

src/pages/linghuoyonggong/linghuoyonggong.vue

@@ -220,10 +220,16 @@
     }
     onReachBottom(() => {
         console.log('触底了')
-        if (pageData.total <= pageData.employmentList.length) return
+        if (pageData.total <= pageData.employmentList.length) {
+            return
+        }
         pageData.search.pageNo++
         getEmploymentList()
     })
+
+    onNavigationBarButtonTap(() => {
+        Navigate.to('/pages/linghuoyonggong/components/yonggongmap')
+    })
 </script>
 
 <template>