gxd-uni-library-editx 1.0.0

package/src/components/XdAddressSelect/XdAddressSelect.vue

@@ -0,0 +1,243 @@
+<template>
+  <view>
+    <view class="xd-select" >
+      <view class="xd-select__title">请选择所在区域</view>
+      <view class="xd-select__body">
+        <view class="xd-select__body-warper">
+          <view
+            class="xd-select__body-item"
+            v-for="(item,index) in getTitle"
+            :key="index"
+          >
+            <view
+              class="xd-select__body-item-text"
+              @click="reSelectCity(index)"
+            >{{city_name[index]||item}}</view>
+            <view
+              class="xd-select__body-item-icon"
+              :style="{
+                borderColor : $mainColor,
+                background: (level < index? '#fff': $mainColor)
+              }"
+            ></view>
+          </view>
+        </view>
+        <view class="xd-select__body-line" :style="{background:$mainColor}"></view>
+      </view>
+      <view class="xd-select__list" v-if="cityList.length > 0">
+        <view
+          class="xd-select__list-item"
+          v-for="(item,index) in cityList"
+          :key="index"
+        ><text @click="selectCity(item)">{{item.label}}</text></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdSwitch from "@/components/XdSwitch/XdSwitch";
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+
+  export default {
+    name: "XdAddressSelect",
+    components:{
+      XdSwitch,
+      XdButton,
+      XdFontIcon
+    },
+    props:{
+      maxLevel: {
+        type: Number,
+        default: 4,
+      }
+
+    },
+    data(){
+      return {
+        //选择城市
+        level: -1, //-1 表示未选择任何城市 备注：0=>省份/区域  1=>城市  2=> 区/县   3=>街道
+        maxStatus: false, //是否已到最大级别
+        cityList: [],
+        city_name: [], //城市名称
+        city_code: [], //城市代码
+        city_selected_data: [],  //选择城市详情信息
+        city_title: ['省份/区域','城市','区/县', '街道']
+      }
+    },
+
+    computed:{
+      getTitle(){
+        return this.$xdUniHelper.cloneDeep(this.city_title).splice(0, this.maxLevel);
+      },
+    },
+
+    created(){
+      if(this.level === -1) {
+        this.getCity(0);
+      }
+    },
+
+
+    methods:{
+
+      /**
+       * @description 重新选择城市
+       */
+      reSelectCity(level){
+        //选择隔空城市不操作
+        if(level - this.level > 1) {
+          return;
+        }
+        this.city_code = this.city_code.splice(0, level);
+        this.city_name = this.city_name.splice(0, level);
+        this.city_selected_data = this.city_selected_data.splice(0, level);
+        this.level = level - 1;
+
+        //获取城市信息
+        if(this.level === -1) {
+          this.getCity(0);
+        }else {
+          this.getCity(this.city_code[this.level]);
+        }
+      },
+
+      selectCity(item){
+        if(this.level < (this.maxLevel - 1)){
+          this.level++;
+        }
+
+        //保存信息
+        this.$set(this.city_name, this.level, item.label);
+        this.$set(this.city_code, this.level, item.value);
+        this.$set(this.city_selected_data, this.level, item);
+
+        //是否启动获取城市列表
+        if(this.level < (this.maxLevel - 1)) {
+          this.getCity(item.value);
+        }
+        //选择完成操作
+        else{
+          this.$emit('onSelect', {
+            city_name: this.city_name,
+            city_code: this.city_code,
+            city: this.city_selected_data,
+          })
+        }
+      },
+
+      /**
+       * @description 获取城市数据接口
+       * @param parentId
+       * @example 城市数据格式 [{label: '北京市'，value: 1},{label: '广东省'，value: 2}]
+       */
+      getCity(parentId){
+        this.cityList = [];
+        this.$emit('getCity', {parentId, level: this.level + 1} , (cityList)=>{
+          if(!this.$xdUniHelper.isEmpty(cityList)) {
+            if(!cityList[0]['label'] || !cityList[0]['value']){
+              this.cityList = [];
+              throw new Error(`
+                1、当前数据格式错误，
+                2、正确格式需包含(label,value)字段。
+                例如: [{label: \'北京市\'，value: 1},{label: \'广东省\'，value: 2}]`
+              );
+            }
+            else {
+              this.cityList = this.$xdUniHelper.cloneDeep(cityList);
+            }
+          }
+          else{
+            //选择完成操作
+            //this.isShowAddress = true;
+            //this.setReceiptRegionName();
+            this.cityList = [];
+          }
+        })
+      },
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+
+  .xd-address__body-content {
+    line-height: unit(36, rpx) !important;
+
+    & * {
+      line-height: unit(36, rpx) !important;
+    }
+
+  }
+
+  .xd-select {
+    padding: unit(40, rpx);
+    font-size: @xd-font-size-base + 1;
+
+    &__title {
+      text-align: center;
+      line-height: unit(64, rpx);
+      margin-bottom: unit(30,rpx);
+    }
+
+    &__body {
+      position: relative;
+      height: unit(60,rpx);
+
+      &-warper {
+        height: unit(60,rpx);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      &-item {
+        height: 100%;
+        width: 25%;
+        flex: 1;
+        text-align: center;
+        position: relative;
+
+        &-text {
+          height: 100%;
+          line-height: unit(60,rpx);
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          word-break: break-all;
+        }
+
+        &-icon {
+          position: absolute;
+          bottom: unit(-10,rpx);
+          left: 50%;
+          transform: translateX(-50%);
+          height: unit(16,rpx);
+          width: unit(16,rpx);
+          box-sizing: border-box;
+          border-width: 1px;
+          border-style: solid;
+          border-radius: 50%;
+          background: #fff;
+        }
+      }
+
+      &-line {
+        height: 2px;
+      }
+    }
+
+    &__list {
+      margin: unit(20,rpx) 0;
+      height: 25vh;
+      overflow-y: auto;
+
+      &-item {
+        line-height: unit(60,rpx);
+        height: unit(60,rpx);
+      }
+    }
+  }
+</style>

package/src/components/XdBaiduMap/XdBaiduMap.vue

@@ -0,0 +1,204 @@
+<template>
+  <baidu-map
+    class="xd-baidu__content"
+    v-if="ak && initStatus"
+    :key="refushKey"
+    :style="{top: top, background:bgc}"
+    :center="uiCenter"
+    :zoom="uiLevel"
+    :ak="ak"
+    @ready="handleReady"
+    @tilesloaded="handleTilesloaded"
+  >
+    <bm-label
+      v-if="showLocation && LocationContent && uiGeolocation"
+      :content="LocationContent"
+      :position="uiGeolocation"
+      :labelStyle="{color: 'red', fontSize : '12px', padding: '5px 10px'}"
+      title="我的坐标"/>
+    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" type="NavigationControlType"></bm-navigation>
+    <bm-geolocation
+      @locationSuccess="handleLocationSuccess"
+      class="xd-baidu__content-geolocation"
+      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
+      :showAddressBar="true"
+      :autoLocation="true"
+    ></bm-geolocation>
+    <bm-marker
+      v-if="uiGeolocation !== null"
+      :position="uiGeolocation"
+      :dragging="false"
+      animation="BMAP_ANIMATION_BOUNCE"
+    ></bm-marker>
+  </baidu-map>
+</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 {String} ak 百度Ak （选填） 默认：''
+ * @property {Number} level 缩放级别 （选填） 默认：15
+ * @event {Function} onLocationSuccess 返回成功对象（location）
+ */
+  import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
+  import BmMarker from 'vue-baidu-map/components/overlays/Marker';
+  import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation';
+  import BmNavigation from 'vue-baidu-map/components/controls/Navigation';
+  import BmLabel from 'vue-baidu-map/components/overlays/Label';
+
+  export default {
+    name: "XdBaiduMap",
+    components:{
+      BaiduMap,
+      BmMarker,
+      BmGeolocation,
+      BmNavigation,
+      BmLabel
+    },
+    props:{
+      center: {
+        type: Array,
+        default(){
+          return null
+        }
+      },
+      ak: {
+        type: String,
+        default: ''
+      },
+      level: {
+        type:Number,
+        default: 15
+      },
+    },
+    data(){
+      return {
+        count: 0,
+        location: {},
+        uiLevel: 15, //放大缩小级别
+        uiCenter: null, //设置定位点
+        uiGeolocation: null, //获取定位点
+        top: '-9999px', //开启地图调试模式
+        bgc: 'none', //开启地图显示背景
+        showLocation: null,//是否显示坐标
+        LocationContent: null, //坐标信息
+        refushKey: 'baidu',//刷新
+        initStatus: true, //是否新刷新状态
+
+        //百度定位
+        BMap: null, //百度SDK对象
+        BMapLoaded: false, //地图加载完成状态
+        map: null, //百度SDK对象实例化对象
+      }
+    },
+    watch:{
+      BMap(){
+        if(this.BMap !== null && this.BMapLoaded) {
+          this.handleInitDone({BMap: this.BMap});
+        }
+      },
+      BMapLoaded(){
+        if(this.BMap !== null && this.BMapLoaded) {
+          this.handleInitDone({BMap: this.BMap});
+        }
+      }
+    },
+    created() {
+      if(!this.ak) throw new Error('请传入百度AK值');
+      else{
+        let page = this.$xdUniHelper.parseURL();
+        if(page && page.params && page.params.top) {
+          this.top = '0';
+          this.bgc = '#fff';
+          this.showLocation = true;
+        }
+      }
+
+    },
+    methods:{
+      handleReady({BMap,map}){
+        this.BMap = BMap;
+        this.map = map;
+      },
+
+      handleTilesloaded(){
+        this.BMapLoaded = true;
+      },
+
+      handleLocationSuccess(location){
+        let point = this.$xdUniHelper.cloneDeep(location.point);
+        delete point['of']
+        this.uiGeolocation = point;
+        this.uiLevel = 15;
+        this.uiCenter = point;
+        this.location = location;
+        this.$emit('onLocationSuccess',location);
+      },
+
+      reLoad(){
+        if(this.count > 10) {
+          return;
+        }
+        this.initStatus = false;
+        this.BMapLoaded = false;
+        this.BMap = null;
+        this.map = null;
+        this.refushKey = this.$xdUniHelper.randomChar(20);
+
+        setTimeout(()=>{
+          this.initStatus = true;
+          this.count++;
+        },100)
+      },
+
+      handleInitDone({BMap}){
+        let geolocation = new BMap['Geolocation']();
+        geolocation['enableSDKLocation']();
+        geolocation.getCurrentPosition(
+          (location) => {
+            console.log('handleInitDone',location)
+            let point = this.$xdUniHelper.cloneDeep(location.point);
+            delete point['of']
+            this.uiGeolocation = point;
+            this.uiLevel = 15;
+            this.uiCenter = point;
+            this.location = location;
+            this.LocationContent = `我的坐标:{lat:${location.latitude}, lng:${location.longitude}}`
+            this.$emit('onLocationSuccess',location);
+          },
+          (error) => {
+            this.reLoad();
+            //百度定位失败
+            if (typeof getApp()['saveLogs'] === 'function') {
+              getApp()['saveLogs']({
+                location: this.location,
+                status: 'fail',
+                baiduStatus: geolocation.getStatus(),
+                result: res,
+                locationType: 'baidu.com',
+                pos: 'XdCityLocation'
+              }, 'info');
+            }
+            this.$emit('onLocationSuccess',this.location);
+          }
+        )
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-baidu__content {
+    position: fixed;
+    left: 0;
+    width: 100%;
+    height: 50%;
+    z-index: 3000;
+  }
+</style>