文件

wikiboss 22910262dc chore: archive AI-generated docs/scripts from webroot into _ai_archive (docs/scripts/sql/logs), keep production entries

2026-10-30 10:32:06 +08:00

5.8 KiB

原始文件 永久链接 Blame 文件历史

电子围栏功能实现说明

功能概述

在门店管理页面（manager.html）中直接集成了电子围栏功能，支持创建、编辑、删除多个自定义多边形围栏，数据暂存在JavaScript变量中，页面保存时通过现有接口将围栏数据提交到后端进行数据库存储。

实现的功能特性

1. 围栏管理

✅ 添加新围栏：支持创建多个自定义围栏
✅ 编辑围栏：修改围栏名称和形状
✅ 删除围栏：移除不需要的围栏
✅ 启用/禁用围栏：切换围栏状态

2. 地图绘制

✅ 腾讯地图集成：使用腾讯地图API进行地图显示
✅ 多边形绘制：支持在地图上绘制自定义多边形围栏
✅ 围栏编辑：支持对已绘制的围栏进行编辑
✅ 围栏显示：在地图上可视化显示所有围栏

3. 数据处理

✅ 坐标存储：将围栏坐标数据以JSON格式存储
✅ 表单集成：围栏数据与门店信息一起提交
✅ 临时存储：围栏数据在页面中临时存储，保存时统一提交

技术实现细节

前端实现

Vue数据结构

data() {
    return {
        // 电子围栏相关数据
        deliveryFences: [], // 电子围栏列表
        currentEditingFence: null, // 当前编辑的围栏索引
        editingFenceData: { // 当前编辑的围栏数据
            fence_name: '',
            fence_data: '',
            fence_type: 1, // 1=多边形，2=圆形
            is_active: 1,
            tempId: null
        },
        isDrawingMode: false, // 是否处于绘制模式
        fenceMap: null, // 腾讯地图实例
        currentPolygon: null, // 当前绘制的多边形
        drawingManager: null, // 绘制管理器
        tempFenceId: 1, // 临时ID计数器
        mapKey: '', // 腾讯地图API Key
    }
}

核心方法

围栏管理方法
- addNewFence(): 添加新围栏
- editFence(index): 编辑指定围栏
- deleteFence(index): 删除围栏
- toggleFenceStatus(index): 切换围栏状态
- saveCurrentFence(): 保存当前编辑的围栏
- cancelEditFence(): 取消编辑
地图相关方法
- initFenceMap(): 初始化围栏地图
- getTencentMapKey(): 获取腾讯地图API密钥
- loadTencentMapScript(): 动态加载腾讯地图脚本
- initTencentFenceMap(): 初始化腾讯地图实例
绘制相关方法
- toggleDrawingMode(): 切换绘制模式
- startDrawing(): 开始绘制围栏
- stopDrawing(): 停止绘制
- clearCurrentDrawing(): 清除当前绘制
- displayFenceOnMap(fenceData): 在地图上显示围栏

UI组件

围栏功能UI直接集成在门店管理表单中，包含：

围栏列表显示区域
围栏编辑表单
腾讯地图绘制区域
绘制工具按钮

数据库表结构

参考 fence_table.sql 文件中的表结构：

CREATE TABLE `ls_store_delivery_fence` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `store_id` int(11) NOT NULL COMMENT '门店ID',
  `merchant_id` int(11) NOT NULL COMMENT '商户ID',
  `fence_name` varchar(100) NOT NULL DEFAULT '' COMMENT '围栏名称',
  `fence_data` longtext NOT NULL COMMENT '围栏坐标数据JSON格式',
  `fence_type` tinyint(1) NOT NULL DEFAULT 1 COMMENT '围栏类型：1=多边形，2=圆形',
  `is_active` tinyint(1) NOT NULL DEFAULT 1 COMMENT '是否启用：0=禁用，1=启用',
  `create_time` int(11) NOT NULL DEFAULT 0 COMMENT '创建时间',
  `update_time` int(11) NOT NULL DEFAULT 0 COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `idx_store_id` (`store_id`),
  KEY `idx_merchant_id` (`merchant_id`),
  KEY `idx_is_active` (`is_active`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='门店配送电子围栏表';

数据提交格式

在表单提交时，围栏数据以以下格式添加到提交数据中：

data.delivery_fences = this.deliveryFences.map(fence => ({
    fence_name: fence.fence_name,
    fence_data: fence.fence_data, // JSON格式的坐标数据
    fence_type: fence.fence_type,
    is_active: fence.is_active
}));

坐标数据格式

围栏坐标数据以JSON格式存储，示例：

[
    {"lat": 39.915, "lng": 116.404},
    {"lat": 39.916, "lng": 116.405},
    {"lat": 39.917, "lng": 116.406},
    {"lat": 39.915, "lng": 116.404}
]

使用说明

1. 添加围栏

点击"添加围栏"按钮
输入围栏名称
在地图上点击"开始绘制"按钮
在地图上点击多个点绘制多边形
绘制完成后点击"保存围栏"

2. 编辑围栏

在围栏列表中点击"编辑"按钮
修改围栏名称或在地图上重新绘制
点击"保存围栏"确认修改

3. 删除围栏

在围栏列表中点击"删除"按钮
确认删除操作

4. 启用/禁用围栏

在围栏列表中点击状态开关
围栏状态会立即更新

5. 保存到数据库

完成所有围栏配置后
点击页面底部的"立即提交"按钮
围栏数据会与门店信息一起保存到数据库

注意事项

地图API密钥：系统会自动从后端获取腾讯地图API密钥
数据暂存：围栏数据在页面中临时存储，只有点击"立即提交"才会保存到数据库
坐标精度：围栏坐标数据保留足够精度以确保准确性
浏览器兼容性：建议使用现代浏览器以获得最佳体验
网络连接：需要稳定的网络连接以加载地图和提交数据

后端接口说明

电子围栏数据通过现有的门店设置接口 storeSet 进行提交，后端需要处理 delivery_fences 字段中的围栏数据，并将其存储到 ls_store_delivery_fence 表中。

提交的数据格式：

delivery_fences: 围栏数据数组
每个围栏包含：fence_name, fence_data, fence_type, is_active 字段

5.8 KiB 原始文件 永久链接 Blame 文件历史 Unescape Escape