jufubao-base 1.0.385 → 1.0.388-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.385",
+  "version": "1.0.388-beta3",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",
@@ -90,7 +90,6 @@
     "mini-css-extract-plugin": "^1.1.1",
     "mini-types": "*",
     "miniprogram-api-typings": "*",
-    "node-sass": "^4.0.0",
     "postcss-comment": "^2.0.0",
     "require-context": "^1.1.0",
     "sass": "^1.29.0",

package/src/components/JfbBaseDeliveryDetail/Api.js

@@ -0,0 +1,34 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Delivery
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: 'getSameCityTrack',
+    title: '订单 - 同城物流轨迹查询',
+    path: '/order/v1/logistics/same-city-track',
+    isRule: false,
+    params: {
+      sub_order_id: ['拆单号', 'Number', '必选'],
+      channel_code: ['渠道编码', 'String', '可选'],
+      channel_order_no: ['渠道订单号', 'Number', '可选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: "getBaiduNavigationPath",
+    path: "/order/v1/logistics/baidu-navigation-path",
+    title: "订单 - 百度导航路径查询",
+    params: {
+      origin_latitude: ["起点纬度", "Number", "必选"],
+      origin_longitude: ["起点经度", "Number", "必选"],
+      destination_latitude: ["终点纬度", "Number", "必选"],
+      destination_longitude: ["终点经度", "Number", "必选"]
+    },
+    isConsole: true,
+    disabled: true
+  }
+];

package/src/components/JfbBaseDeliveryDetail/Attr.js

@@ -0,0 +1,14 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      
+    ].filter(i=>i)
+  },
+  advanced: [],
+};

package/src/components/JfbBaseDeliveryDetail/CusDeliveryMap.vue

@@ -0,0 +1,472 @@
+<template>
+  <view class="cus-delivery-map">
+    <!-- #ifdef H5 -->
+    <view id="delivery-map-container" class="map-container"></view>
+    <!-- #endif -->
+
+    <!-- #ifndef H5 -->
+    <map
+      id="deliveryMap"
+      class="map-container"
+      :latitude="mapCenter.lat"
+      :longitude="mapCenter.lng"
+      :scale="10"
+      :markers="mapMarkers"
+      :polyline="mapPolyline"
+      :show-location="false"
+      :enable-3D="false"
+      :show-compass="false"
+      :enable-zoom="true"
+      :enable-scroll="true"
+      :enable-rotate="false"
+    ></map>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+// 透明1x1像素图片，用于小程序标记点（实际显示使用 callout）
+const TRANSPARENT_ICON = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='
+
+export default {
+  name: 'CusDeliveryMap',
+  props: {
+    // 收货地址坐标 { lng, lat }
+    receivePoint: {
+      type: Object,
+      default: () => ({ lng: 120.581, lat: 31.299 })
+    },
+    // 发货地址坐标 { lng, lat }
+    sendPoint: {
+      type: Object,
+      default: () => ({ lng: 121.125, lat: 31.465 })
+    },
+    // 骑手当前位置 { lng, lat }
+    riderPoint: {
+      type: Object,
+      default: () => ({ lng: 120.928, lat: 31.360 })
+    },
+    // 已完成的轨迹点数组
+    trackItems: {
+      type: Array,
+      default: () => []
+    },
+    // 骑手到收货地址的导航路径 [{ latitude, longitude }, ...]
+    navigationPath: {
+      type: Array,
+      default: () => []
+    },
+    // 百度地图 AK (仅H5使用)
+    ak: {
+      type: String,
+      default: 'btKt57MWjMx2P1ds2OjZIttLOOjR2Ndf'
+    }
+  },
+  data() {
+    return {
+      map: null,
+      isMapLoaded: false,
+      overlays: [],
+      mapContext: null // 小程序地图上下文
+    }
+  },
+  computed: {
+    // 小程序：地图中心点
+    mapCenter() {
+      // 计算所有点的中心
+      const lats = [this.sendPoint.lat, this.riderPoint.lat, this.receivePoint.lat]
+      const lngs = [this.sendPoint.lng, this.riderPoint.lng, this.receivePoint.lng]
+      return {
+        lat: (Math.max(...lats) + Math.min(...lats)) / 2,
+        lng: (Math.max(...lngs) + Math.min(...lngs)) / 2
+      }
+    },
+    // 小程序：地图标记点
+    mapMarkers() {
+      return [
+        // 发货地址标记
+        {
+          id: 1,
+          latitude: this.sendPoint.lat,
+          longitude: this.sendPoint.lng,
+          width: 30,
+          height: 30,
+          iconPath: TRANSPARENT_ICON,
+          callout: {
+            content: '发',
+            color: '#fff',
+            fontSize: 12,
+            borderRadius: 15,
+            borderWidth: 0,
+            bgColor: '#ff8d1a',
+            padding: 5,
+            display: 'ALWAYS'
+          }
+        },
+        // 骑手位置标记
+        {
+          id: 2,
+          latitude: this.riderPoint.lat,
+          longitude: this.riderPoint.lng,
+          width: 30,
+          height: 30,
+          iconPath: TRANSPARENT_ICON,
+          callout: {
+            content: '🚚',
+            fontSize: 16,
+            borderRadius: 15,
+            borderWidth: 1,
+            borderColor: '#ddd',
+            bgColor: '#fff',
+            padding: 5,
+            display: 'ALWAYS'
+          }
+        },
+        // 收货地址标记
+        {
+          id: 3,
+          latitude: this.receivePoint.lat,
+          longitude: this.receivePoint.lng,
+          width: 30,
+          height: 30,
+          iconPath: TRANSPARENT_ICON,
+          callout: {
+            content: '收',
+            color: '#fff',
+            fontSize: 12,
+            borderRadius: 15,
+            borderWidth: 0,
+            bgColor: '#ff4d4f',
+            padding: 5,
+            display: 'ALWAYS'
+          }
+        }
+      ]
+    },
+    // 小程序：路线
+    mapPolyline() {
+      const lines = []
+
+      // 已完成的轨迹线（从发货地址到骑手位置）
+      if (this.trackItems && this.trackItems.length > 0) {
+        const trackPoints = this.trackItems.map(p => ({
+          latitude: parseFloat(p.transporter_latitude),
+          longitude: parseFloat(p.transporter_longitude)
+        }))
+        lines.push({
+          points: trackPoints,
+          color: '#E2412D',
+          width: 6,
+          arrowLine: true
+        })
+      }
+
+      // 从骑手位置到收货地址的导航路径
+      if (this.navigationPath && this.navigationPath.length > 0) {
+        const navPoints = this.navigationPath.map(p => ({
+          latitude: parseFloat(p.latitude),
+          longitude: parseFloat(p.longitude)
+        }))
+        lines.push({
+          points: navPoints,
+          color: '#F1AEA5',
+          width: 6,
+          arrowLine: true
+        })
+      }
+
+      return lines
+    }
+  },
+  watch: {
+    // H5：监听关键数据变化，重新绘制地图
+    trackItems: {
+      handler() {
+        // #ifdef H5
+        if (this.isMapLoaded) {
+          this.updateMapOverlays()
+        }
+        // #endif
+        // #ifndef H5
+        this.fitMapView()
+        // #endif
+      },
+      deep: true
+    },
+    navigationPath: {
+      handler() {
+        // #ifdef H5
+        if (this.isMapLoaded) {
+          this.updateMapOverlays()
+        }
+        // #endif
+        // #ifndef H5
+        this.fitMapView()
+        // #endif
+      },
+      deep: true
+    },
+    riderPoint: {
+      handler() {
+        // #ifdef H5
+        if (this.isMapLoaded) {
+          this.updateMapOverlays()
+        }
+        // #endif
+        // #ifndef H5
+        this.fitMapView()
+        // #endif
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    // #ifdef H5
+    this.loadBMapScript(() => {
+      this.$nextTick(() => {
+        this.initMap()
+      })
+    })
+    // #endif
+
+    // #ifndef H5
+    // 小程序：初始化地图上下文并调整视野
+    this.$nextTick(() => {
+      this.mapContext = uni.createMapContext('deliveryMap', this)
+      // 延迟确保地图渲染完成
+      setTimeout(() => {
+        this.fitMapView()
+      }, 500)
+    })
+    // #endif
+  },
+  methods: {
+    // ==================== 小程序相关方法 ====================
+    // #ifndef H5
+
+    // 小程序：调整地图视野以包含所有点
+    fitMapView() {
+      if (!this.mapContext) return
+
+      const points = [
+        { latitude: this.sendPoint.lat, longitude: this.sendPoint.lng },
+        { latitude: this.riderPoint.lat, longitude: this.riderPoint.lng },
+        { latitude: this.receivePoint.lat, longitude: this.receivePoint.lng }
+      ]
+
+      this.mapContext.includePoints({
+        points: points,
+        padding: [60, 60, 60, 60]
+      })
+    },
+
+    // #endif
+
+    // ==================== H5 百度地图相关方法 ====================
+    // #ifdef H5
+
+    // 加载百度地图脚本
+    loadBMapScript(callback) {
+      if (window.BMapGL) {
+        callback && callback()
+        return
+      }
+
+      window.initBMapGLCallback = () => {
+        console.log('百度地图脚本加载完成')
+        callback && callback()
+        delete window.initBMapGLCallback
+      }
+
+      const script = document.createElement('script')
+      script.src = `//api.map.baidu.com/api?type=webgl&v=1.0&ak=${this.ak}&callback=initBMapGLCallback`
+      script.onerror = () => {
+        console.error('百度地图脚本加载失败')
+      }
+      document.head.appendChild(script)
+    },
+
+    // 创建 BMapGL.Point 对象
+    createPoint(lng, lat) {
+      return new BMapGL.Point(lng, lat)
+    },
+
+    // 初始化地图
+    initMap() {
+      this.map = new BMapGL.Map('delivery-map-container')
+      this.map.enableScrollWheelZoom()
+      this.isMapLoaded = true
+      this.updateMapView()
+
+      setTimeout(() => {
+        this.updateMapOverlays()
+      }, 300)
+    },
+
+    // 更新地图视野
+    updateMapView() {
+      const receivePt = this.createPoint(this.receivePoint.lng, this.receivePoint.lat)
+      const sendPt = this.createPoint(this.sendPoint.lng, this.sendPoint.lat)
+      const riderPt = this.createPoint(this.riderPoint.lng, this.riderPoint.lat)
+
+      const points = [sendPt, riderPt, receivePt]
+      this.map.setViewport(points, {
+        margins: [80, 80, 80, 80]
+      })
+    },
+
+    // 清除所有覆盖物
+    clearOverlays() {
+      this.overlays.forEach(overlay => {
+        this.map.removeOverlay(overlay)
+      })
+      this.overlays = []
+    },
+
+    // 更新地图覆盖物
+    updateMapOverlays() {
+      this.clearOverlays()
+      this.updateMapView()
+
+      const receivePt = this.createPoint(this.receivePoint.lng, this.receivePoint.lat)
+      const sendPt = this.createPoint(this.sendPoint.lng, this.sendPoint.lat)
+      const riderPt = this.createPoint(this.riderPoint.lng, this.riderPoint.lat)
+
+      // 添加收货地址标记
+      const receiveMarker = this.createReceiveMarker(receivePt)
+      this.map.addOverlay(receiveMarker)
+      this.overlays.push(receiveMarker)
+
+      // 添加发货地址标记
+      const sendMarker = this.createSendMarker(sendPt)
+      this.map.addOverlay(sendMarker)
+      this.overlays.push(sendMarker)
+
+      // 添加骑手位置标记
+      const riderMarker = this.createRiderMarker(riderPt)
+      this.map.addOverlay(riderMarker)
+      this.overlays.push(riderMarker)
+
+      // 添加路线
+      this.createRouteLines()
+    },
+
+    // 创建收货地址标记
+    createReceiveMarker(point) {
+      const html = `
+        <div class="custom-marker receive-marker" style="display: flex; align-items: center; width: 82px;">
+          <div style="background: #fff; border: 1px solid #ff4d4f; border-radius: 10px; font-size: 12px; color: #333; padding-right:4px;">
+            <span style="background: #ff4d4f; color: #fff; padding: 1px 6px; border-radius: 10px; margin-right: 4px;">收</span>收货地址
+          </div>
+        </div>
+      `
+      return new BMapGL.CustomOverlay(() => {
+        const div = document.createElement('div')
+        div.innerHTML = html
+        return div.firstElementChild
+      }, {
+        point: point,
+        offsetY: -40,
+        anchors: [0.5, 1]
+      })
+    },
+
+    // 创建发货地址标记
+    createSendMarker(point) {
+      const html = `
+        <div class="custom-marker send-marker" style="width: 30px; height: 30px; background: #ff8d1a; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: bold; box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 10;">
+          发
+        </div>
+      `
+      return new BMapGL.CustomOverlay(() => {
+        const div = document.createElement('div')
+        div.innerHTML = html
+        return div.firstElementChild
+      }, {
+        point: point,
+        offsetY: -15,
+        anchors: [0.5, 1]
+      })
+    },
+
+    // 创建骑手位置标记
+    createRiderMarker(point) {
+      const html = `
+        <div class="custom-marker rider-marker" style="position: relative; z-index: 20;">
+          <div style="width: 30px; height: 30px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.15);">
+            <span style="font-size: 18px;">🚚</span>
+          </div>
+        </div>
+      `
+      return new BMapGL.CustomOverlay(() => {
+        const div = document.createElement('div')
+        div.innerHTML = html
+        return div.firstElementChild
+      }, {
+        point: point,
+        offsetY: -30,
+        anchors: [0.5, 1]
+      })
+    },
+
+    // 创建路线
+    createRouteLines() {
+      // 已完成的轨迹线（从发货地址到骑手位置）
+      if (this.trackItems && this.trackItems.length > 0) {
+        const trackPoints = this.trackItems.map(p => this.createPoint(
+          parseFloat(p.transporter_longitude),
+          parseFloat(p.transporter_latitude)
+        ))
+
+        const routeToRider = new BMapGL.Polyline(trackPoints, {
+          strokeColor: '#E2412D',
+          strokeWeight: 6,
+          strokeOpacity: 0.8,
+          strokeLineCap: 'round',
+          strokeLineJoin: 'round'
+        })
+        this.map.addOverlay(routeToRider)
+        this.overlays.push(routeToRider)
+      }
+
+      // 从骑手位置到收货地址的导航路径
+      if (this.navigationPath && this.navigationPath.length > 0) {
+        const navPoints = this.navigationPath.map(p => this.createPoint(
+          parseFloat(p.longitude),
+          parseFloat(p.latitude)
+        ))
+        const navPolyline = new BMapGL.Polyline(navPoints, {
+          strokeColor: '#F1AEA5',
+          strokeWeight: 6,
+          strokeOpacity: 0.8,
+          strokeLineCap: 'round',
+          strokeLineJoin: 'round'
+        })
+        this.map.addOverlay(navPolyline)
+        this.overlays.push(navPolyline)
+      }
+    },
+
+    // #endif
+
+    // 获取地图实例
+    getMap() {
+      return this.map
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.cus-delivery-map {
+  width: 100%;
+  height: 560rpx;
+  background-color: #f0f0f0;
+  position: relative;
+
+  .map-container {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>