jufubao-mall 2.0.35-beta1 → 2.0.35-beta3

package/src/components/JfbMallShopVip/XdBaiduMap.vue

@@ -2,47 +2,67 @@
   <baidu-map
     class="xd-baidu__content"
     v-if="ak"
-    :center="center"
+    :center="centerMap"
     :zoom="level"
-    :key="renderMapKey"
-    auto-resize
     scroll-wheel-zoom
+    :continuous-zoom="true"
     :ak="ak"
+    :draggable="dragging"
+    :pinch-to-zoom="pinchToZoom"
+    @dragstart="handleDragStart"
+    @dragging="handleDragMove"
+    @tilesloaded="handleTouchEnd"
+    @touchstart="handleTouchStart"
+    @touchmove="handleTouchMove"
   >
     <bm-marker
-      v-if="myPosition"
-      :position="myPosition" title="我的坐标"
-      :icon="{
-        url: 'https://sandbox-img.jufubao.cn/uploads/20250722/5694efe27b94cba718ce5c5175a00bfb.png?x-oss-process=style/size3&ver=1753173358',
-        size: {width: 30, height: 30},
-        opts: {imageSize: {width: 30, height: 30}}
-      }"
+      v-if="!moved"
+      title="我的坐标"
+      :position="position"
+      :key="baiduMapKey"
+      :icon="icon"
       animation="BMAP_ANIMATION_BOUNCE"
-      >
-      <!-- <bm-label content="我的坐标" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -15, height: 30}"/> -->
+    >
     </bm-marker>
-
-    <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" type="NavigationControlType"></bm-navigation> -->
-    <bm-marker v-for="(item,index) in markets" :key="item.id"
+    <bm-marker
+      v-for="(item,index) in uiMarkets"
+      :key="item.id"
       :position="item"
       :icon="item.icon"
-      :dragging="true"
       :title="item.title"
       animation="BMAP_ANIMATION_BOUNCE"
       @click="showItemInfo(item)"
     >
-      <bm-info-window :show="item.show" @close="closeItemInfo(item)">{{ item.title }}</bm-info-window>
+      <bm-info-window :show="item.show" @close="closeItemInfo(item)">
+        <view class="showMarker" @click="handleDetail(item)">
+          <view>{{item.title}}</view>
+          <view>{{item.address}}</view>
+        </view>
+
+      </bm-info-window>
     </bm-marker>
+    <bm-control anchor="BMAP_ANCHOR_BOTTOM_RIGHT" v-if="baiduMap !== null">
+      <view @click.stop="(e)=>{handleLocationSuccess(e,null)}" class="location" :style="{backgroundImage: `url(${location})`}"></view>
+    </bm-control>
+    <bm-control anchor="BMAP_ANCHOR_TOP_LEFT" v-if="baiduMap !== null && 0">
+      <view style="font-size: 20rpx; background-color: #fff;">pinchToZoom:{{pinchToZoom}}--dragging:{{dragging}}:{{centerMap}}--{{moved}}</view>
+    </bm-control>
   </baidu-map>
 </template>
 
 <script>
-
-  import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
-  import BmMarker from 'vue-baidu-map/components/overlays/Marker';
-  import BmNavigation from 'vue-baidu-map/components/controls/Navigation.vue'
-  import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow.vue'
-  import BmLabel from 'vue-baidu-map/components/overlays/Label';
+  //https://dafrok.github.io/vue-baidu-map/#/zh/control/map-type
+  //https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a2b5
+  import BaiduMap from 'modules/vue-baidu-map/components/map/Map.vue';
+  import bmScale from 'modules/vue-baidu-map/components/controls/Scale';
+  import BmMarker from 'modules/vue-baidu-map/components/overlays/Marker';
+  import BmNavigation from 'modules/vue-baidu-map/components/controls/Navigation.vue'
+  import BmGeolocation from 'modules/vue-baidu-map/components/controls/Geolocation.vue'
+  import BmControl from 'modules/vue-baidu-map/components/controls/Control.vue'
+  import BmInfoWindow from 'modules/vue-baidu-map/components/overlays/InfoWindow.vue'
+  import BmLabel from 'modules/vue-baidu-map/components/overlays/Label';
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue";
+  import getServiceUrl from "@/common/getServiceUrl";
 
   export default {
     name: "XdBaiduMap",
@@ -51,7 +71,11 @@
       BmMarker,
       BmNavigation,
       BmInfoWindow,
-      BmLabel
+      BmGeolocation,
+      BmLabel,
+      bmScale,
+      BmControl,
+      XdFontIcon
     },
     props:{
       center: {
@@ -74,40 +98,268 @@
           return []
         }
       },
-      myPosition: {
-        type: Object,
-        default(){
-          return null;
-        }
+      showPosition: {
+        type: Boolean,
+        default: false
       }
     },
     watch: {
       markets(val){
         if(val.length > 0){
-          this.uiMarkets = val.map(item => {
-            item.show = false;
-            if(item.id === this.showMarketId){
-              item.show = true;
-            }
-            return item;
-          });
+          this.uiMarkets = null;
+          this.$nextTick(()=>{
+            this.uiMarkets = val.map(item => {
+              item.show = item.id === this.showMarketId;
+              return item;
+            });
+          })
         }
+      },
+      showPosition(val){
+        this.showCenter = val
       }
     },
     data(){
       return {
+        showCenter:true,
+        icon:{
+          url: 'https://img.jufubao.cn/common/local.png?x-oss-process=style/size3',
+          size: {width: 30, height: 30},
+          opts: {imageSize: {width: 30, height: 30}}
+        },
+        baiduIcon: {
+          url: 'https://img.jufubao.cn/common/empty.png?x-oss-process=style/size3',
+          size: {width: 30, height: 30},
+          opts: {imageSize: {width: 30, height: 30}}
+        },
+        location: getServiceUrl('/common/location.png?v1=1'),
+        mapType:'',
         show: false,
-        uiMarkets: [],
-        showMarketId: '',
+        uiMarkets: [], //所有markers
+        showMarketId: '', //当前显示ID
         clickOnce: false,
-        renderMapKey: "renderMapKey"
+        timer: false,
+        moved:null, //是否移动过
+        isFirst: true,
+        cusLocal: false, //当前为点击定位逻辑
+
+        dragging: true, //拖拽状态
+        pinchToZoom: true, //双指缩放
+        isDragge: '', //是否为拖拽操作 //dragge, pinch
+        touchEndTimer:null, //结束定时器
+        centerMap:{},
+        position:{},
+        baiduMap:null, //百度初始化对象
+        cusLocationTimer: null,
+        baiduMapKey: 'baiduMapKey',
+        locationStatus: false,
       }
     },
     created() {
       if(!this.ak) throw new Error('请传入百度AK值');
-      this.uiMarkets = this.markets;
+      this.uiMarkets = this.$xdUniHelper.cloneDeep(this.markets);
+      this.showCenter = this.showPosition;
+      if(this.$configProject['isPreview']
+        || this.center === null
+        || (this.center && this.$xdUniHelper.isEmpty(this.center))
+      ) {
+        this.centerMap = {lng: 116.404, lat: 39.915};
+      }
+      else{
+        this.centerMap = this.$xdUniHelper.cloneDeep(this.center);
+      }
+      this.position = this.$xdUniHelper.cloneDeep(this.centerMap);
     },
     methods:{
+      toTranformLocation(point){
+        let {lng, lat} = point
+        console.log('handleRegionChange.toTranformLocation',point);
+        return {
+          longitude:lng,
+          latitude: lat,
+          lng,lat
+        }
+      },
+      handleDragStart(e){
+        if(this.$configProject['isPreview']) {
+          e.touches = [];
+          this.handleTouchStart(e)
+        }
+      },
+      handleDragMove(e){
+        if(this.$configProject['isPreview']) {
+          e.touches = [];
+          this.handleTouchMove(e)
+        }
+      },
+      handleTouchStart(){
+        this.uiMarkets = this.uiMarkets.map(market => {
+          delete market.show;
+          return market;
+        });
+        if(this.touchEndTimer) clearTimeout(this.touchEndTimer);
+      },
+      handleTouchMove(e){
+        //定位中
+        if(this.locationStatus) return
+        if(!this.isDragge){
+          let touches = e.targetTouches || e.touches
+          this.moved = true;
+          //一个手指为拖拽操作
+          if(touches.length <= 1) {
+            this.isDragge = 'dragge'
+          }
+          //两个手指为放大操作
+          else {
+            this.isDragge = 'pinch'
+          }
+          this.touchUseTime = Date.now();
+          this.$emit('regionchange', {
+            type:"begin",
+            causedBy: this.isDragge === 'dragge'? 'drag':'scale',
+            detail:{
+              type:"begin",
+              causedBy: this.isDragge === 'dragge'? 'drag':'scale',
+              point: this.toTranformLocation(e.point),
+            },
+          });
+        }
+      },
+      handleTouchEnd(e){
+        if(this.baiduMap === null){
+          this.baiduMap = e.target;
+          this.$emit('init');
+        }
+
+        //移动与缩放处理
+        if(['dragge','pinch'].includes(this.isDragge)) {
+          this.touchEndTimer = setTimeout(()=>{
+            this.level = e.target.getZoom();
+            this.$emit('regionchange', {
+              type:"end",
+              causedBy:this.isDragge,
+              detail:{
+                type:"end",
+                causedBy: this.isDragge,
+                point: this.toTranformLocation(e.target.getCenter()),
+                time: Date.now() - this.touchUseTime + ' ms'
+              },
+            });
+            this.isDragge = '';
+          }, 300)
+        }
+
+        //定位成功处理
+        if(['location'].includes(this.isDragge)) {
+          this.$emit('regionchange', {
+            type:"end",
+            causedBy: 'location',
+            detail:{
+              type:"end",
+              causedBy: 'location',
+              point: this.toTranformLocation(this.$xdUniHelper.cloneDeep(e.target.getCenter())),
+              time: Date.now() - this.touchUseTime + ' ms'
+            },
+          });
+          this.position = this.$xdUniHelper.cloneDeep(e.target.getCenter())
+          this.baiduMapKey = Date.now();
+          this.dragging = true;
+          this.pinchToZoom = true;
+          this.isDragge = '';
+        }
+      },
+      handleLocationSuccess(e){
+        let geolocation = new BMap['Geolocation']();
+
+        //定位中处理
+        if(this.locationStatus) return;
+        this.locationStatus = true;
+        this.dragging = false;
+        this.pinchToZoom = false;
+        this.isDragge = 'location';
+        geolocation['enableSDKLocation']();
+        this.$emit('regionchange', {
+          type:"begin",
+          causedBy: 'location',
+          detail:{
+            type:"begin",
+            causedBy: 'location',
+            point: null,
+            time: Date.now() - this.touchUseTime + ' ms'
+          },
+        });
+
+        //当前次是否超时设置
+        let isTimeout = false;
+
+        //3秒超时
+        this.cusLocationTimer = setTimeout(()=>{
+          this.$emit('regionchange', {
+            type:"end",
+            causedBy: 'location',
+            detail:{
+              type:"end",
+              causedBy: 'location',
+              point: null,
+              time: Date.now() - this.touchUseTime + ' ms'
+            },
+          });
+          isTimeout = true;
+          this.moved = false;
+          this.locationStatus = false;
+          this.dragging = true;
+          this.pinchToZoom = true;
+          this.isDragge = '';
+        }, 3000);
+
+        geolocation.getCurrentPosition(
+          (location) => {
+            if(isTimeout) return;
+            this.locationStatus = false;
+            if(location && location.point) {
+              console.log('baiduMap.setCenter')
+              this.baiduMap.setCenter(location.point);
+              this.moved = false;
+            }
+            else {
+              this.$emit('regionchange', {
+                type:"end",
+                causedBy: 'location',
+                detail:{
+                  type:"end",
+                  causedBy: 'location',
+                  point: null,
+                  time: Date.now() - this.touchUseTime + ' ms'
+                },
+              });
+              this.dragging = true;
+              this.pinchToZoom = true;
+              this.isDragge = '';
+            }
+            isTimeout = false;
+            console.log('handleLocationSuccess.location.end',location,this.locationStatus)
+            clearTimeout(this.cusLocationTimer);
+          },
+          (error) => {
+            this.isDragge = '';
+            this.moved = false;
+            this.dragging = true;
+            this.pinchToZoom = true;
+            this.locationStatus = false;
+            this.$emit('regionchange', {
+              type:"end",
+              causedBy: 'location',
+              detail:{
+                type:"end",
+                causedBy: 'location',
+                point: null,
+                time: Date.now() - this.touchUseTime + ' ms'
+              },
+            });
+            clearTimeout(this.cusLocationTimer);
+          }
+        )
+      },
       showItemInfo(item){
         this.clickOnce = true;
         setTimeout(() => {
@@ -115,13 +367,10 @@
         }, 200)
         this.showMarketId = item.id;
         this.uiMarkets = this.uiMarkets.map(market => {
-          market.show = false;
-          if(item.id === market.id){
-            market.show = true;
-          }
+          market.show = item.id === market.id;
           return market;
         })
-        this.$emit('onChose', item)
+        this.$emit('on-show-marker', item)
       },
       closeItemInfo(item){
         if(this.clickOnce) return;
@@ -129,9 +378,18 @@
         this.uiMarkets = this.uiMarkets.map(market => {
           delete market.show;
           return market;
-        })
-        this.renderMapKey = Date.now();
-      }
+        });
+        this.$emit('on-close-marker')
+      },
+      handleDetail(item){
+        this.showMarketId = '';
+        this.uiMarkets = this.uiMarkets.map(market => {
+          delete market.show;
+          return market;
+        });
+        this.$emit('on-detail',{item:item, type: 'shop', isMap: true});
+        this.$emit('on-close-marker')
+      },
     }
   }
 </script>
@@ -144,4 +402,34 @@
     height: 50%;
     z-index: 3000;
   }
+
+  .showMarker {
+    margin-right: 32rpx;
+    & > view:first-child {
+      font-size: 32rpx;
+      line-height: 44rpx;
+      margin-bottom: 18rpx;
+      color: #333;
+      max-width: 400rpx;
+    }
+
+    & > view:nth-child(2) {
+      font-size: 24rpx;
+      line-height: 36rpx;
+      color: #999;
+      max-width: 400rpx;
+    }
+  }
+
+  .location {
+    width: 60rpx;
+    height: 60rpx;
+    background-color: #fff;
+    border: 1px solid #eee;
+    border-radius: 10rpx;
+    background-size: 90% 90%;
+    background-position: center;
+    background-repeat: repeat;
+    margin: 0 20rpx 20rpx 0;
+  }
 </style>

package/src/components/JfbMallShopVip/cusAttr/advanced.js

@@ -1,16 +1,16 @@
 'use strict';
 
 export default (data, gValue, gColor, oldData={})=>{
-  let codePath =null;
-  if(data['codePath'] !== undefined) {
-    codePath = data['codePath']
-  }
+  let codePath =null,detailPath = null;
+  if(data['codePath'] !== undefined)  codePath = data['codePath'];
+  if(data['detailPath'] !== undefined)  detailPath = data['detailPath'];
+
   return [
     {
       label: '门店地址',
       ele: 'xd-select-pages-path',
       valueKey: 'codePath',
-      placeholder: '请选择门店地址跳转地址',
+      placeholder: '请选择门店跳转页面',
       groupKey:'advanced',
       value: codePath,
       labelInline:true,
@@ -20,81 +20,23 @@ export default (data, gValue, gColor, oldData={})=>{
         router: XdBus.getParentApi('getPagesTree'),
       },
       inline: false,
+      notice: "点击门店跳转到地址"
     },
     {
-      label: '核销地址',
+      label: '门店详情',
       ele: 'xd-select-pages-path',
-      valueKey: 'cashierPath',
-      placeholder: '请选择核销地址跳转地址',
+      valueKey: 'detailPath',
+      placeholder: '请选择门店详情跳转页面',
       groupKey:'advanced',
-      className: 'input100',
-      value: data['cashierPath'] || null,
-      setting: {
-        mode:'new',
-        router: XdBus.getParentApi('getPagesTree'),
-      },
-      inline: false,
+      value: detailPath,
       labelInline:true,
-    },
-    {
-      label: '在线选座',
-      ele: 'xd-select-pages-path',
-      valueKey: 'buyTicketPath',
-      placeholder: '请选择在线选座跳转地址',
-      groupKey:'advanced',
       className: 'input100',
-      value: data['buyTicketPath'] || null,
       setting: {
         mode:'new',
         router: XdBus.getParentApi('getPagesTree'),
       },
       inline: false,
-      labelInline:true,
-    },
-    {
-      label: '电子码地址',
-      ele: 'xd-select-pages-path',
-      valueKey: 'codeAfterPath',
-      placeholder: '请选择电子码跳转地址',
-      groupKey:'advanced',
-      className: 'input100',
-      value: data['codeAfterPath'] || null,
-      setting: {
-        mode:'new',
-        router: XdBus.getParentApi('getPagesTree'),
-      },
-      inline: false,
-      labelInline:true,
-    },
-    {
-      label: '小时达地址',
-      ele: 'xd-select-pages-path',
-      valueKey: 'hdSelfPath',
-      placeholder: '请选择小时达到店自取跳转地址',
-      groupKey:'advanced',
-      className: 'input100',
-      value: data['hdSelfPath'] || null,
-      setting: {
-        mode:'new',
-        router: XdBus.getParentApi('getPagesTree'),
-      },
-      inline: false,
-      labelInline:true,
-    },
-    {
-      label: '旅游门票',
-      ele: 'xd-select-pages-path',
-      valueKey: 'travelfPath',
-      placeholder: '请选择旅游在线订票跳转地址',
-      groupKey:'advanced',
-      className: 'input100',
-      value: data['travelfPath'] || null,
-      setting: {
-        mode:'new',
-        router: XdBus.getParentApi('getPagesTree'),
-      },
-      inline: false,
-      labelInline:true,
+      notice: '点击门店名称后面的详情跳转到地址'
     },
     {
       label: '版本号:',