jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseMapOverlay/XdBaiduOverlay.vue

@@ -0,0 +1,345 @@
+<template>
+  <view class="xd-baidu">
+    <baidu-map
+      v-if="uiAk"
+      class="xd-baidu__content"
+      :center="uiCenter"
+      :zoom="uiLevel"
+      :ak="uiAk"
+      @ready="handleReady"
+      @tilesloaded="handleTilesloaded"
+    >
+      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" type="NavigationControlType"></bm-navigation>
+      <bm-geolocation
+        v-if="isGeolocation"
+        @locationSuccess="handleLocationSuccess"
+        class="xd-baidu__content-geolocation"
+        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
+        :showAddressBar="true"
+        :autoLocation="true"
+
+      ></bm-geolocation>
+      <bm-marker
+        v-if="isGeolocation && uiGeolocation !== null"
+        :position="uiGeolocation"
+        :dragging="false"
+        animation="BMAP_ANIMATION_BOUNCE"
+      ></bm-marker>
+      <bm-marker
+        v-if="isMaker"
+        :position="uiCenter"
+        :dragging="false"
+        animation="BMAP_ANIMATION_BOUNCE"
+      ></bm-marker>
+      <template v-if="defaultOverlays !== null" v-for="(item,index) in defaultOverlays">
+        <bm-circle
+          v-if="item.type === 'Circle'"
+          :center="getArrayToObject(item.value[0])"
+          :radius="strToNumber(item.r)"
+          :stroke-color="stroke.strokeColor"
+          :stroke-opacity="stroke.fillOpacity"
+          :stroke-weight="stroke.strokeWeight"
+          :fill-color="stroke.fillColor"
+          :fill-opacity="stroke.fillOpacity"
+          :editing="false"
+        ></bm-circle>
+        <bm-polygon
+          v-if="item.type === 'Polygon'"
+          :path="getArraysToObjects(item.value)"
+          :stroke-color="stroke.strokeColor"
+          :stroke-opacity="stroke.fillOpacity"
+          :stroke-weight="stroke.strokeWeight"
+          :fill-color="stroke.fillColor"
+          :fill-opacity="stroke.fillOpacity"
+          :editing="false"
+        ></bm-polygon>
+        <bm-marker
+          v-if="item.type === 'Marker'"
+          :position="getArrayToObject(item.value[0])"
+          :dragging="false"
+          animation="BMAP_ANIMATION_BOUNCE"
+        ></bm-marker>
+        <bm-boundary
+          v-if="item.type === 'city'"
+          :name="item.value"
+          :stroke-color="stroke.strokeColor"
+          :stroke-opacity="stroke.fillOpacity"
+          :stroke-weight="stroke.strokeWeight"
+          :fill-color="stroke.fillColor"
+          :fill-opacity="stroke.fillOpacity"
+        ></bm-boundary>
+      </template>
+    </baidu-map>
+  </view>
+</template>
+
+<script>
+
+  /**
+   * @description 仅仅支持H5端
+   * https://dafrok.github.io/vue-baidu-map/#/zh/start/usage
+   * https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a0b0
+   * 文档：https://www.npmjs.com/package/gxd-helper
+   *
+   * @property {Array} center 设置中心点坐标，当有覆盖物时候，使用第一个覆盖物为中心点，无覆盖物并且为设置中心点使用用户自动定位点作为中心点 （选填） 默认：null
+   * @property {Boolean} isMaker 完成中心点设置之后是否标记中心点位置 （选填） 默认：false
+   * @property {Boolean} isGeolocation 是否启用定位控件 （选填） 默认：true
+   * @property {String} ak 百度Ak （选填） 默认：''
+   * @property {Number} level 缩放级别 （选填） 默认：15
+   * @property {Array} defaultOverlays 覆盖物对象 （选填） 默认：[]
+   *
+   * @event {Function} onDone 编辑或者创建覆盖物完成事件 参数：overlays(覆盖物对象)， overlaysSource(覆盖物数据)
+   */
+
+  import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
+  import BmMarker from 'vue-baidu-map/components/overlays/Marker';
+  import BmCircle from 'vue-baidu-map/components/overlays/Circle';
+  import BmPolygon from 'vue-baidu-map/components/overlays/Polygon';
+  import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation';
+  import BmBoundary from 'vue-baidu-map/components/others/Boundary';
+  import BmNavigation from 'vue-baidu-map/components/controls/Navigation';
+
+  export default {
+    name: "XdBaiduOverlay",
+    components:{
+      BaiduMap,
+      BmMarker,
+      BmGeolocation,
+      BmCircle,
+      BmPolygon,
+      BmBoundary,
+      BmNavigation
+    },
+    props:{
+      center: {
+        type: Array | null,
+        default(){
+          return null
+        }
+      },
+
+      isGeolocation:{
+        type:Boolean,
+        default: true
+      },
+
+      isMaker: {
+        type:Boolean,
+        default: false
+      },
+
+      level: {
+        type:Number,
+        default: 15
+      },
+
+      defaultOverlays: {
+        type: Array | null,
+        default(){
+          return [
+            // {
+            //   type: 'Polyline',
+            //   value: [[116.399, 39.910],[116.405, 39.920],[116.423493, 39.907445]]
+            // },
+            // {
+            //   type: 'Polygon',
+            //   value: [[116.399, 39.910],[116.405, 39.920],[116.423493, 39.907445]]
+            // },
+            {
+              type: 'Polygon',
+              value: [
+                [116.387112, 39.920977],
+                [116.385243, 39.913063],
+                [116.394226, 39.917988],
+                [116.401772, 39.921364],
+                [116.41248, 39.927893]
+              ]
+            },
+            {
+              type: 'Circle',
+              r: 1000, //1米
+              value: [
+                [116.423493, 39.907445],
+              ]
+            },
+            {
+              type: 'Marker',
+              value: [[116.4782359673445, 39.909576462078476]]
+            },
+            {
+              type: 'city',
+              value: '贵阳'
+            },
+            {
+              type: 'city',
+              value: '山东'
+            },
+
+            {
+              type: 'Boundary',
+              value:[
+                [[116.399, 39.910], [116.405, 39.920], [116.423493, 39.907445]],
+                [
+                  [116.38711199999995, 39.92097707656194],
+                  [116.38524299999993, 39.91306307719058],
+                  [116.4289369609569, 39.900997411802976],
+                  [116.42548746779859, 39.91876314730457],
+                  [116.41247999999993, 39.9278930760079],
+                  [116.38711199999995, 39.92097707656194]
+                ]
+              ]
+            }
+          ]
+        }
+      },
+
+      ak: {
+        type: String,
+        default: ''
+      },
+    },
+
+    watch:{
+      BMap(){
+        if(this.BMap !== null && this.loaded) {
+          this.handleInitDone({BMap: this.BMap});
+        }
+      },
+      loaded(){
+        if(this.BMap !== null && this.loaded) {
+          this.handleInitDone({BMap: this.BMap});
+        }
+      }
+    },
+
+    data(){
+      return {
+        uiLevel: 15,
+        uiCenter: null,
+        uiGeolocation: null,
+        uiAk: null,
+
+        stroke: {
+          strokeColor: '#f00',
+          strokeWeight: 2,
+          fillColor: 'blue',
+          fillOpacity: 0.4,
+          strokeOpacity: .8
+        },
+
+        //判断地图是否加载完成
+        BMap: null,
+        loaded: false,
+      }
+    },
+
+
+    created() {
+      this.uiAk = this.$settings.baiduAk || this.ak;
+      if(!this.uiAk) throw new Error('请传入百度AK值');
+      else{
+        let uiCenter = '北京';
+        if(this.center !== null) {
+          if(this.$xdUniHelper.checkVarType(this.center) === 'array'
+            && this.center.length === 2
+          ) {
+            uiCenter = this.getArrayToObject(this.center);
+          }
+          if(this.$xdUniHelper.checkVarType(this.center) === 'string'){
+            uiCenter = this.center;
+          }
+        }
+
+        //自动定位到第一个覆盖物
+        if(this.defaultOverlays && this.defaultOverlays.length > 0) {
+          if(this.$xdUniHelper.checkVarType(this.defaultOverlays[0].value) === 'array') {
+            uiCenter = this.getArrayToObject(this.defaultOverlays[0].value[0]);
+          }
+          if(this.$xdUniHelper.checkVarType(this.defaultOverlays[0].value) === 'string'){
+            uiCenter = this.defaultOverlays[0].value;
+          }
+        }
+        this.uiCenter = uiCenter;
+
+        if(this.level) this.uiLevel = this.level;
+      }
+    },
+
+    methods: {
+      getArraysToObjects(arr){
+        return  arr.map(item=>{
+          return {
+            lng: Number(item[0]),
+            lat: Number(item[1])
+          }
+        })
+      },
+      getArrayToObject(arr){
+        return {
+          lng: Number(arr[0]),
+          lat: Number(arr[1])
+        }
+      },
+
+      handleLocationSuccess(location){
+        let point = this.$xdUniHelper.cloneDeep(location.point);
+        delete point['of']
+        this.uiGeolocation = point;
+        this.uiLevel = 15;
+        this.uiCenter = point;
+        this.$emit('onLocationSuccess',location);
+      },
+
+      handleInitDone({BMap}){
+        if(this.isGeolocation) {
+          let geolocation = new BMap['Geolocation']();
+          geolocation['enableSDKLocation']();
+          geolocation.getCurrentPosition(
+            (location) => {
+              console.log('handleInitDone',location)
+              if(!this.defaultOverlays || this.defaultOverlays.length === 0) {
+                let point = this.$xdUniHelper.cloneDeep(location.point);
+                delete point['of']
+                this.uiGeolocation = point;
+                this.uiLevel = 15;
+                this.uiCenter = point;
+              }
+              this.$emit('onLocationSuccess',location);
+            },
+            (error) => {
+              console.log('handleInitDone',error)
+            }
+          )
+        }
+      },
+
+      handleReady({BMap}){
+        this.BMap = BMap;
+      },
+
+      handleTilesloaded(){
+        this.loaded = true;
+      },
+
+      strToNumber(str){
+        if(str === '' || str === null || str === undefined) return '';
+        if (this.$xdUniHelper.checkVarType(str) === 'string') str = Number(str);
+        return str;
+      }
+    },
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-baidu {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+
+    &__content {
+      height: 100%;
+    }
+
+  }
+
+</style>

package/src/components/JfbBaseMapOverlay/XdMapOverlay.vue

@@ -0,0 +1,156 @@
+<template>
+	<view class="xd-map-overlay">
+		<map style="width: 100%; height: 100%;" :scale="uiLevel" :latitude="uiCenter.latitude"
+			:longitude="uiCenter.longitude" :markers="markers" :polygons="polygons" :circles="circles"></map>
+	</view>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+	export default {
+		name: "XdMapOverlay",
+		props: {
+			center: {
+				type: Array | null,
+				default () {
+					return null
+				}
+			},
+
+			level: {
+				type: Number,
+				default: 15
+			},
+
+			defaultOverlays: {
+				type: Array | null,
+				default () {
+					return [
+						{
+							type: 'Polygon',
+							value: [
+								[116.387112, 39.920977],
+								[116.385243, 39.913063],
+								[116.394226, 39.917988],
+								[116.401772, 39.921364],
+								[116.41248, 39.927893]
+							]
+						},
+						{
+							type: 'Circle',
+							r: 1000, //1米
+							value: [
+								[116.423493, 39.907445],
+							]
+						},
+						{
+							type: 'Marker',
+							value: [
+								[116.4782359673445, 39.909576462078476]
+							]
+						},
+						{
+							type: 'Boundary',
+							value: [
+								[
+									[116.399, 39.910],
+									[116.405, 39.920],
+									[116.423493, 39.907445]
+								],
+								[
+									[116.38711199999995, 39.92097707656194],
+									[116.38524299999993, 39.91306307719058],
+									[116.4289369609569, 39.900997411802976],
+									[116.42548746779859, 39.91876314730457],
+									[116.41247999999993, 39.9278930760079],
+									[116.38711199999995, 39.92097707656194]
+								]
+							]
+						}
+					]
+				}
+			},
+		},
+    computed: {
+      ...mapState({
+        stateCity: state => state.cityLocation.city,
+        stateLocation: state => state.cityLocation.location || {},
+      })
+    },
+		data() {
+			return {
+				uiLevel: 15,
+				uiCenter: null,
+
+				stroke: {
+					strokeColor: '#f00',
+					strokeWeight: 2,
+					fillColor: '#0000FF66',
+					fillOpacity: 0.4,
+					strokeOpacity: .8
+				},
+
+				polygons: [],
+				markers: [],
+				circles: [],
+
+			};
+		},
+		created() {
+			this.uiLevel = this.level;
+			console.log("this.defaultOverlays", this.defaultOverlays)
+      if(this.defaultOverlays.length){
+        this.defaultOverlays.forEach(item => {
+          if (item.type === 'Polygon') {
+            this.polygons.push({
+              // fillColor: "#00FF00",
+              // strokeColor: "#FF0000",
+              points: item.value.map(point => ({
+                longitude: point[0],
+                latitude: point[1]
+              })),
+              ...this.stroke,
+            });
+            let allX = item.value.map(p => p[0]);
+            let allY = item.value.map(p => p[1]);
+            let centerX = (Math.max(...allX) + Math.min(...allX)) / 2;
+            let centerY = (Math.max(...allY) + Math.min(...allY)) / 2;
+            this.uiCenter = {
+              longitude: centerX,
+              latitude: centerY
+            }
+            console.log("uiCenter", centerX, centerY)
+          } else if (item.type === 'Circle') {
+            this.circles.push({
+              fillColor: "#00FF00",
+              strokeColor: "#FF0000",
+              longitude: item.value[0][0],
+              latitude: item.value[0][1],
+              radius: item.r
+            })
+            if (!this.uiCenter) {
+              this.uiCenter = {
+                longitude: item.value[0][0],
+                latitude: item.value[0][1]
+              }
+            }
+            console.log('uiCenter', item.value[0][0], item.value[0][1])
+          }
+        })
+      }else{
+        if(this.stateLocation.longitude && this.stateLocation.latitude){
+          this.uiCenter = this.stateLocation;
+          this.markers = [this.stateLocation];
+        }
+      }
+			
+		}
+	}
+</script>
+
+<style>
+	.xd-map-overlay{
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/src/components/JfbBaseMapSearch/Api.js

@@ -0,0 +1,15 @@
+'use strict';
+
+/**
+ * @description API模型
+ * 建议：Ffff=>模块  Xxxx=>自定义名字
+ * 获取单记录(getByIdFfffXxxx)
+ * 获取列表记录(getByListFfffXxxx)
+ * 添加列表记录(addFfffXxxxx)
+ * 删除列表记录(removeFfffXxxxx|deleteFfffXxxx)
+ * 更新列表记录(updateFfffXxxxx)
+ * @type {*[]}
+ */
+module.exports = [
+  
+];

package/src/components/JfbBaseMapSearch/Attr.js

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

package/src/components/JfbBaseMapSearch/JfbBaseMapSearch.vue

@@ -0,0 +1,104 @@
+<template>
+  <view
+    class="jfb-base-map-search"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-map-search__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-map-search__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-map-search__body">
+      <!-- #ifdef H5 -->
+      <map-search-h5 v-if="status" :center="centerPoint" :ak="uiAk" @onSelect="handleMapSelect" @onLocationSuccess="handleLocationSuccess"></map-search-h5>
+      <!-- #endif -->
+      <!-- #ifdef MP -->
+      <map-search-mp v-if="status" :ak="uiAk" @onSelect="handleMapSelect"></map-search-mp>
+      <!-- #endif -->
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  // #ifdef H5
+  import MapSearchH5 from "./MapSearchH5.vue"
+  // #endif
+  // #ifdef MP
+  import MapSearchMp from "./MapSearchMp.vue"
+  // #endif
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseMapSearchMixin from "./JfbBaseMapSearchMixin";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins"
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  export default {
+    name: "JfbBaseMapSearch",
+    components: {
+      XdFontIcon,
+      // #ifdef H5
+      MapSearchH5,
+      // #endif
+      // #ifdef MP
+      MapSearchMp
+      // #endif
+    },
+    mixins: [componentsMixins,extsMixins,JfbBaseMapSearchMixin],
+    data() {
+      return {
+        uiAk: "",
+        ak: "",
+        centerPoint:[],
+        status: false
+      }
+    },
+    watch: {
+      container(value,oldValue) {
+        if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      }
+    },
+    created() {
+      this.init(this.container);
+      this.uiAk = this.$settings.baiduAk || this.ak;
+    },
+    methods: {
+      onJfbLoad(options) {
+        if(options.latitude&&options.longitude) {
+          this.centerPoint = [options.longitude,options.latitude]
+        }
+        this.status = true
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+
+      },
+      handleMapSelect(select){
+        this.$bus.$emit('onUserLocation', select);
+        this.$xdUniHelper.navigateBack()
+			},
+      handleLocationSuccess(e){
+        console.log("handleLocationSuccess", e);
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseMapSearchLess.less";
+
+  .jfb-base-map-search {
+    &__body{
+      height: 100%;
+    }
+  }
+</style>

package/src/components/JfbBaseMapSearch/JfbBaseMapSearchLess.less

@@ -0,0 +1,79 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-base-map-search {
+  box-sizing: border-box;
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx,&.editx:hover {
+    position: relative;
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
+
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-base-map-search {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/