@cloudbase/weda-ui-mp 0.2.20

package/components/form/location/index.js

@@ -0,0 +1,520 @@
+import { callDataSource } from '../../../utils/tcb';
+import classNames from '../../../utils/classnames';
+import customInfo from '../../../utils/getCustomInfo';
+import { errorHandler } from '../../../utils/error';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+let QQMapWX = require('../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk');
+let qqmapsdk;
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    id: {
+      Type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    label: {
+      type: String,
+      value: '标题',
+    },
+    labelVisible: {
+      type: Boolean,
+      value: true,
+    },
+    source: {
+      type: String,
+      value: '',
+    },
+    showLngLat: {
+      type: Boolean,
+      value: true,
+    },
+    showMap: {
+      type: Boolean,
+      value: true,
+    },
+    defauleShowLocation: {
+      type: Boolean,
+      value: true,
+    },
+    drag: {
+      type: Boolean,
+      value: true,
+    },
+    zoom: {
+      type: Boolean,
+      value: true,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    requiredFlag: {
+      type: Boolean,
+      value: true,
+    },
+    value: {
+      type: Object,
+      value: {
+        latitude: 39.98410411,
+        longitude: 116.307503,
+        poiname: '',
+        detailedAddress: '',
+      },
+    },
+    locationType: {
+      type: Number,
+      value: 1,
+    },
+    locationRange: {
+      type: Number,
+      value: 0,
+    },
+    customRange: {
+      type: Number,
+      value: 0,
+    },
+    dataSource: {
+      type: Object,
+    },
+    layout: {
+      type: String,
+      value: '',
+    },
+    placeholder: {
+      type: String,
+      value: '选择地理位置',
+    },
+  },
+
+  lifetimes: {
+    attached: function () {
+      this.setData({ id: this.id });
+      const { locationType, dataSource } = this.properties;
+      const getReverseGeocoder = async (location) => {
+        const { isApikeyStatus } = this.data;
+        let key = isApikeyStatus.apiKey
+          ? isApikeyStatus.apiKey
+          : await this.getApikey(dataSource.name, 'get');
+        if (key) {
+          qqmapsdk = new QQMapWX({
+            key: key,
+          });
+          qqmapsdk.reverseGeocoder({
+            location,
+            success: ({ status, result }) => {
+              if (status === 0) {
+                let detailLocation = {
+                  ...location,
+                  poiname: result?.formatted_addresses?.recommend,
+                  detailedAddress: result?.address,
+                };
+                let isCustomLocation = this.checkCustomLocation(
+                  this.properties.value
+                );
+                if (isCustomLocation) {
+                  this.setData({
+                    currentLocations: detailLocation,
+                  });
+                } else {
+                  this.setData({
+                    location: detailLocation,
+                    currentLocations: detailLocation,
+                  });
+                  this.setLocation(detailLocation);
+                }
+                if (locationType === 2 && this.data.initRef) {
+                  this.changeValueFormat(detailLocation);
+                  this.data.initRef = false;
+                }
+              }
+            },
+          });
+        }
+      };
+      const drowMapMarks = (value) => {
+        try {
+          let { latitude, longitude } = value;
+          let location = {
+            latitude: Number(latitude.toFixed(6)),
+            longitude: Number(longitude.toFixed(6)),
+            poiname: '',
+            detailedAddress: '',
+          };
+          // 表单为新增时回传点位信息
+          let isCustomLocation = this.checkCustomLocation(
+            this.properties.value
+          );
+          let customLocation = {
+            latitude: isCustomLocation
+              ? this.properties.value?.geopoint?.coordinates[1]
+              : '',
+            longitude: isCustomLocation
+              ? this.properties.value?.geopoint?.coordinates[0]
+              : '',
+            poiname: this.properties.value?.address,
+            detailedAddress: this.properties.value?.detailedAddress,
+          };
+          this.setData({
+            currentLocations: location,
+            currentPosition: {
+              status: true,
+              message: '',
+            },
+          });
+          this.setLocation(
+            isCustomLocation ? customLocation : location,
+            isCustomLocation
+          );
+          if (!isCustomLocation) {
+            locationType !== 1 && this.setData({ isAddrShow: true });
+          } else {
+            this.setData({
+              isAddrShow: true,
+            });
+          }
+          getReverseGeocoder(location);
+        } catch (err) {
+          const { comErrorInfo } = errorHandler({
+            id: this.id,
+            code: 'WdLocation.DrowMapMarksError',
+            error: err,
+          });
+          this.triggerEvent('error', { error: comErrorInfo });
+        }
+      };
+      const getCustomInfoLocation = () => {
+        let customInfoLocation = customInfo.getCurrentLocation();
+        if (
+          !!customInfoLocation &&
+          typeof customInfoLocation.then === 'function'
+        ) {
+          customInfoLocation
+            .then((res) => {
+              drowMapMarks(res);
+            })
+            .catch((error) => {
+              this.triggerEvent('change', {
+                value: {},
+              });
+              this.setData({
+                currentPosition: {
+                  status: false,
+                  message: error,
+                },
+                currentLocations: {},
+              });
+              const { comErrorInfo } = errorHandler({
+                id: this.id,
+                code: 'WdLocation.GetCurrentLocationError',
+                error,
+              });
+              this.triggerEvent('error', { error: comErrorInfo });
+            });
+        } else {
+          drowMapMarks(customInfoLocation);
+        }
+      };
+
+      if (locationType === 1 || locationType === 2) {
+        // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
+        wx.getSetting({
+          success: (res) => {
+            if (!res.authSetting['scope.userLocation']) {
+              // 没有授权
+              wx.authorize({
+                scope: 'scope.userLocation',
+                success: () => {
+                  // 用户已经同意小程序使用定位功能，后续调用 wx.getLocation 接口不会弹窗询问
+                  getCustomInfoLocation();
+                },
+                fail: (err) => {
+                  this.setData({
+                    currentPosition: {
+                      status: false,
+                      message: err.errMsg,
+                    },
+                    currentLocations: {},
+                  });
+                  this.triggerEvent('change', {
+                    value: {},
+                  });
+                  const { comErrorInfo } = errorHandler({
+                    id: this.id,
+                    code: 'WdLocation.AuthorizeFail',
+                    error: err,
+                  });
+                  this.triggerEvent('error', { error: comErrorInfo });
+                },
+              });
+            } else {
+              // 已经授权
+              getCustomInfoLocation();
+            }
+          },
+          fail: (err) => {
+            const { comErrorInfo } = errorHandler({
+              id: this.id,
+              code: 'WdLocation.GetSettingFail',
+              error: err,
+            });
+            this.triggerEvent('error', { error: comErrorInfo });
+          },
+        });
+      }
+      // 获取腾讯地图apikey
+      if (dataSource?.name) {
+        this.getApikey(dataSource.name);
+      } else {
+        this.setData({
+          isApikeyStatus: {
+            status: false,
+            message: '请在编辑器属性区配置地图APIs',
+            apiKey: '',
+          },
+        });
+      }
+    },
+    detached: function () {
+      // 在组件实例被从页面节点树移除时执行
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    location: {
+      latitude: 39.98410411,
+      longitude: 116.307503,
+      poiname: '',
+      detailedAddress: '',
+    },
+    markers: [],
+    isAddrShow: false,
+    currentPosition: {
+      status: false,
+      message: '获取当前定位中',
+    },
+    currentLocations: {},
+    isMapChooseVisible: false,
+    isApikeyStatus: {
+      status: false,
+      message: '地图初始化中',
+      apiKey: '',
+    },
+    circleRadius: 0,
+    cls: '',
+
+    initRef: true,
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    async getApikey(dataSourceName, type) {
+      try {
+        if (!dataSourceName) {
+          this.setData({
+            isApikeyStatus: {
+              status: false,
+              message: '请在编辑器属性区配置地图APIs',
+              apiKey: '',
+            },
+          });
+          return;
+        }
+        const res = await callDataSource({
+          dataSourceName: dataSourceName,
+          methodName: 'getApiKey',
+        });
+        if (res.apiKey) {
+          if (type === 'get') {
+            return res.apiKey;
+          }
+          this.setData({
+            isApikeyStatus: {
+              status: true,
+              message: '',
+              apiKey: res.apiKey,
+            },
+          });
+        }
+      } catch (error) {
+        this.setData({
+          isApikeyStatus: {
+            status: false,
+            message: '获取apikey失败' + error,
+            apiKey: '',
+          },
+        });
+        const { comErrorInfo } = errorHandler({
+          id: this.id,
+          code: 'WdLocation.GetApikeyError',
+          error,
+        });
+        this.triggerEvent('error', { error: comErrorInfo });
+      }
+    },
+    chooseLocation() {
+      const { currentPosition, isApikeyStatus } = this.data;
+      if (this.properties.disabled || !currentPosition.status) {
+        return wx.showToast({
+          icon: 'none',
+          title: currentPosition.status ? '已禁用' : currentPosition.message,
+          duration: 2000,
+        });
+      }
+      if (!isApikeyStatus.status) {
+        return wx.showToast({
+          icon: 'none',
+          title: isApikeyStatus.message,
+          duration: 2000,
+        });
+      }
+      this.setData({
+        isMapChooseVisible: true,
+      });
+    },
+    changeLocation(location) {
+      let isAddrShow = this.data.isAddrShow;
+      if (!isAddrShow) {
+        this.setData({
+          isAddrShow: true,
+        });
+      }
+      let marker = {
+        id: 'weda-loc-markers',
+        latitude: location.latitude,
+        longitude: location.longitude,
+      };
+      this.setData({
+        location,
+        markers: [marker],
+      });
+      this.changeValueFormat(location);
+    },
+    checkCustomLocation(params) {
+      if (
+        !params?.address ||
+        (params?.geopoint?.type && params?.geopoint?.type != 'Point')
+      ) {
+        return false;
+      }
+      return true;
+    },
+    setLocation(value, isCustomLocation) {
+      const { locationType } = this.properties;
+      const { latitude, longitude } = value;
+      let marker = {
+        id: 'weda-loc-markers',
+        latitude,
+        longitude,
+      };
+      this.setData({
+        location: value,
+        markers: locationType === 1 && !isCustomLocation ? [] : [marker],
+      });
+    },
+    changeValueFormat(value) {
+      const { latitude, longitude, poiname, detailedAddress } = value;
+      let location = {
+        address: poiname,
+        detailedAddress,
+        geopoint: {
+          coordinates: [longitude, latitude],
+          type: 'Point',
+        },
+      };
+      this.triggerEvent('change', { value: location });
+    },
+    mapChooseOnClose() {
+      this.setData({
+        isMapChooseVisible: false,
+      });
+    },
+    mapChooseOnConfirm(event) {
+      this.setData({ isMapChooseVisible: false });
+      const value = event.detail;
+      this.changeLocation({
+        ...value,
+        poiname: value.address,
+        detailedAddress: value.detailedAddress,
+      });
+    },
+    handleError: function (e) {
+      this.triggerEvent('error', e.detail);
+    },
+  },
+  observers: {
+    value: function (value) {
+      const currentLocations = this.data.currentLocations;
+      if (value || !currentLocations.latitude) {
+        const {
+          geopoint: { coordinates } = {},
+          address: poiname,
+          detailedAddress,
+        } = value || {};
+
+        if (!coordinates?.[0]) return;
+
+        const location = {
+          longitude: coordinates?.[0],
+          latitude: coordinates?.[1],
+          poiname,
+          detailedAddress,
+        };
+        this.setLocation({
+          longitude: location.longitude,
+          latitude: location.latitude,
+        });
+        this.setData({ location, isAddrShow: true });
+        return;
+      }
+      const locationType = this.properties.locationType;
+      const { latitude, longitude } = currentLocations;
+      let marker = {
+        id: 'weda-loc-markers',
+        latitude,
+        longitude,
+      };
+      this.setData({
+        location: currentLocations,
+        markers: [marker],
+        isAddrShow: false,
+      });
+      if (locationType === 2) {
+        this.changeValueFormat(currentLocations);
+        this.setData({
+          isAddrShow: true,
+        });
+      }
+    },
+    'layout,className': function (layout, className) {
+      const isFlex = layout !== 'vertical';
+      const cls = classNames(
+        ' weda-form-location weda-ui weda-formcells weui-cells weui-cells_form weui-cells_forms cloudbase_standard',
+        {
+          'weui-flex': isFlex,
+          [className]: className,
+        }
+      );
+      this.setData({ cls });
+    },
+  },
+});

package/components/form/location/index.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "mapChoose": "./components/mapChoose/index",
+    "formcell": "../formcell",
+    "wd-text": "../../wd-text/index",
+    "wd-button": "../../wd-button/index"
+  }
+}

package/components/form/location/index.wxml

@@ -0,0 +1,29 @@
+<formcell className="weda-ui weda-form-location {{className}}" style="{{style}}" label="{{null}}" layout="{{layout}}" multiCell="{{false}}" requiredFlag="{{requiredFlag}}">
+  <view class="form-location">
+    <view class="form-location-warp {{layout==='vertical'?'form-location-warp-vertical':''}} {{disabled ? 'form-location-disabled' : ''}}" wx:if="{{!isAddrShow}}">
+      <view class="form-location-label form-location_cell weda-formcells__label weui-cell" wx:if="{{labelVisible}}">
+        <label class="weda-formcells__flag" wx:if="{{requiredFlag}}">*</label>
+        <label> {{label}} </label>
+      </view>
+      <view class="form-location-con form-location_cell {{layout==='vertical'?'form-location-con-vertical':''}}" bindtap="chooseLocation" data-value="{{true}}">
+        <view class="form-location-con__icon-wrap">
+          <image class="form-location-con_img" src="location-btn.svg"></image>
+        </view>
+        <wd-button class="form-location-con__text" text="{{placeholder}}" variant="link"></wd-button>
+      </view>
+    </view>
+    <view class="form-location-addr {{disabled ? 'form-location-addr--disabled' : ''}} {{layout==='vertical'?'form-location-addr-vertical':''}}" wx:if="{{isAddrShow}}" bindtap="chooseLocation">
+      <view class="form-location-addr-icon">
+        <image wx:if="{{isAddrShow&&location.poiname}}" class="form-location-addr-image" src="location.svg" alt="" />
+      </view>
+      <view class="form-location-addr-box">
+        <wd-text class="form-location-addr-title wd-location__info" text="{{location.poiname}}"></wd-text>
+        <view class="form-location-addr-lat" wx:if="{{showLngLat}}"> {{location.longitude}}N,{{location.latitude}}E </view>
+      </view>
+    </view>
+    <view style="padding-left: 16px; padding-right: 16px; margin-top: 16px; padding-bottom: 16px" wx:if="{{showMap&&isAddrShow}}">
+      <map id="map" longitude="{{location.longitude}}" latitude="{{location.latitude}}" markers="{{markers}}" scale="16" enable-zoom="{{zoom}}" enable-scroll="{{drag}}" style="width: 100%; height: 200px"></map>
+    </view>
+    <mapChoose id="{{id}}" wx:if="{{isMapChooseVisible}}" isVisible="{{isMapChooseVisible}}" bindonClose="mapChooseOnClose" bindonConfirm="mapChooseOnConfirm" location="{{location}}" apiKey="{{isApikeyStatus.apiKey}}" circleRadius="{{locationRange}}" customRange="{{customRange}}" currentLocations="{{currentLocations}}" bind:error="handleError" />
+  </view>
+</formcell>

package/components/form/location/index.wxss

@@ -0,0 +1,151 @@
+@import '../../../style/weda-ui.wxss';
+/* components/location/location.wxss */
+
+.form-location-warp {
+  display: flex;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+}
+
+.form-location-disabled .form-location-con {
+  opacity: 0.4;
+}
+
+.form-location-warp-vertical {
+  flex-direction: column;
+}
+
+.form-location-warp::after {
+  bottom: 0;
+}
+
+.form-location_cell.form-location-con {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding-left: 0px;
+}
+
+.form-location-label_flag {
+  display: inline-block;
+  margin-right: 4px;
+  font-family: SimSun;
+  font-size: 12px;
+  color: #f60;
+}
+
+.form-location-label {
+  width: 130px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 12px;
+}
+
+.form-location-con-vertical {
+  padding-left: 16px !important;
+}
+
+.form-location-con_img {
+  min-width: 18px;
+  width: 18px;
+  height: 18px;
+  transform: translateX(20px);
+  filter: drop-shadow(-20px 1px 0 var(--wd-color-brand, #0052d9));
+}
+
+.form-location-con__text {
+  margin-left: 4px;
+  cursor: pointer;
+}
+
+.form-location_cell {
+  padding: 16px;
+  line-height: 1.41176471;
+  font-size: 16px;
+  color: #000000e6;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+}
+
+.weda-formcells__flag {
+  display: inline-block;
+  margin-left: 4px;
+  font-family: SimSun;
+  font-size: 12px;
+  color: #f60;
+  align-self: flex-start;
+}
+
+.form-location-addr {
+  display: flex;
+  align-items: flex-start;
+  padding-left: 130px;
+  padding-right: 32px;
+}
+
+.form-location-addr-vertical {
+  padding-left: 16px;
+}
+
+.form-location-addr-lat {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.4);
+  line-height: 20px;
+}
+
+.form-location-addr-image {
+  width: 19px;
+  height: 19px;
+}
+
+.form-location-addr-box {
+  margin-left: 4px;
+}
+
+.form-location_cell.form-location-label {
+  width: var(--wd-form-item-label-width);
+  padding-left: 0;
+  padding-right: 0;
+  margin-right: var(--wd-form-item-label-mr);
+  align-items: flex-start;
+}
+
+/* 标准化样式适配 start */
+.wd-form-item .wd-form-input-wrap .weda-form-location {
+  width: 100%;
+}
+.wd-mp-location-root .weda-form-location .weui-cells::before,
+.wd-mp-location-root .weda-form-location .weui-cells::after {
+  display: none;
+}
+
+.wd-form-item .wd-form-input-wrap .weda-form-location .form-location_cell {
+  padding: 0;
+}
+
+.wd-form-item .wd-form-input-wrap .weda-form-location .form-location-addr {
+  padding-left: 0;
+  padding-right: 0;
+}
+/* 标准化样式适配 end */
+
+.form-location-addr-icon {
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+}
+
+.form-location-addr--disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.form-location-addr--disabled .form-location-addr-icon {
+  opacity: 0.4;
+}
+
+.form-location-con__icon-wrap {
+  overflow: hidden;
+}

package/components/form/location/location-btn.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5001 5.99993C10.5001 7.38064 9.3808 8.49993 8.00009 8.49993C6.61938 8.49993 5.50009 7.38064 5.50009 5.99993C5.50009 4.61922 6.61938 3.49993 8.00009 3.49993C9.3808 3.49993 10.5001 4.61922 10.5001 5.99993ZM9.50009 5.99993C9.50009 5.1715 8.82852 4.49993 8.00009 4.49993C7.17166 4.49993 6.50009 5.1715 6.50009 5.99993C6.50009 6.82835 7.17166 7.49993 8.00009 7.49993C8.82852 7.49993 9.50009 6.82835 9.50009 5.99993Z" fill="#0052D9" style="fill:#0052D9;fill:color(display-p3 0.0000 0.3216 0.8510);fill-opacity:1;"/>
+<path d="M8.36196 14.4683C8.18821 14.7236 7.81196 14.7236 7.63822 14.4683L3.85557 8.91168C2.50041 6.92097 2.75204 4.24798 4.45488 2.54513C6.41284 0.58717 9.58733 0.587169 11.5453 2.54513C13.2481 4.24798 13.4998 6.92097 12.1446 8.91168L8.36196 14.4683ZM11.318 8.34895C12.4028 6.7553 12.2014 4.61544 10.8382 3.25224C9.27075 1.6848 6.72943 1.6848 5.16199 3.25224C3.79878 4.61545 3.59735 6.7553 4.68221 8.34895L8.00009 13.2229L11.318 8.34895Z" fill="#0052D9" style="fill:#0052D9;fill:color(display-p3 0.0000 0.3216 0.8510);fill-opacity:1;"/>
+</svg>