@cloudbase/weda-ui 0.2.14 → 0.2.17

package/src/mp/components/form/location/components/mapChoose/index.js

@@ -0,0 +1,201 @@
+import debounce from '../../../../../utils/debounce';
+import dr_square_point from '../../../../../utils/dr_square_point';
+let QQMapWX = require('../../../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk');
+let qqmapsdk;
+
+// components/mapChoose/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    location: {
+      type: Object,
+      value: {
+        latitude: 39.984104,
+        longitude: 116.307503,
+        poiname: '',
+      },
+    },
+    APIKEY: {
+      type: String,
+      value: '',
+    },
+    range: {
+      type: Number,
+      value: 1000,
+    },
+  },
+
+  lifetimes: {
+    attached: function () {
+      let location = this.properties.location;
+      let marker = {
+        id: 'id-marker',
+        latitude: location.latitude,
+        longitude: location.longitude,
+        width: 25,
+        height: 35,
+      };
+      this.setData({
+        markers: [marker],
+        originMarker: {
+          ...marker,
+          id: 'origin',
+        },
+        choosedLocation: location,
+      });
+      // 实例化API核心类
+      qqmapsdk = new QQMapWX({
+        key: this.properties.APIKEY,
+      });
+    },
+    detached: function () {
+      // 在组件实例被从页面节点树移除时执行
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    searchValue: '',
+    isSearch: false,
+    exploreList: [],
+    searchList: [],
+    choosedLocation: {
+      latitude: null,
+      longitude: null,
+    },
+    originMarker: {},
+    markers: [],
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    regionchange(event) {
+      let {
+        type,
+        detail: { centerLocation },
+      } = event;
+      if (type === 'begin') return;
+      let marker = {
+        id: 'id-marker',
+        latitude: centerLocation.latitude,
+        longitude: centerLocation.longitude,
+        width: 25,
+        height: 35,
+      };
+      this.setData({
+        markers: [marker, this.data.originMarker],
+      });
+      this.searchLocation('路', 20, centerLocation, this, 'exploreList');
+    },
+    comfirm(event) {
+      this.triggerEvent('setIsSelectMapVisible');
+      if (
+        this.data.choosedLocation.latitude &&
+        event.currentTarget.dataset.value
+      ) {
+        this.triggerEvent('changeLocation', this.data.choosedLocation);
+      }
+    },
+    changeInput(e) {
+      this.setData({
+        searchValue: e.detail.value,
+      });
+      if (!e.detail.value) {
+        setTimeout(() => {
+          this.setData({
+            searchList: [],
+          });
+        }, 1000);
+        return;
+      }
+      this.searchLocation(
+        e.detail.value,
+        10,
+        this.data.markers[0],
+        this,
+        'searchList'
+      );
+    },
+    focusInput() {
+      this.setData({
+        isSearch: true,
+      });
+    },
+    cancleSearch() {
+      this.setData({
+        isSearch: false,
+        searchValue: '',
+      });
+    },
+    searchLocation: debounce((value, page_size, location, _this, type) => {
+      let range = _this.properties.range / 1000;
+      let { leftBottom, rightTop } = dr_square_point(
+        location.longitude,
+        location.latitude,
+        range
+      );
+      qqmapsdk.search({
+        keyword: value,
+        page_size,
+        rectangle: `${leftBottom[0]},${leftBottom[1]},${rightTop[0]},${rightTop[1]}`,
+        success: (res) => {
+          _this.setData({
+            [type]: res.data,
+          });
+        },
+        fail: function (err) {
+          console.log('err search', err);
+          if (
+            err.message ===
+            'getLocation:fail 频繁调用会增加电量损耗，可考虑使用 wx.onLocationChange 监听地理位置变化'
+          ) {
+            wx.showToast({
+              title:
+                '获取周边信息接口并发限制 高频调用请前往腾讯地图后台申请配额',
+              icon: 'none',
+              duration: 2000,
+            });
+          }
+        },
+      });
+    }, 500),
+    chooseSite(event) {
+      let { title, location, id } = event.currentTarget.dataset.location;
+      let type = event.currentTarget.dataset.type;
+      location = {
+        latitude: location.lat,
+        longitude: location.lng,
+        poiname: title,
+        id,
+      };
+      if (type === 'search') {
+        let marker = {
+          id: 'id-marker',
+          latitude: location.latitude,
+          longitude: location.longitude,
+          width: 25,
+          height: 35,
+        };
+        let originMarker = this.data.originMarker;
+        this.setData({
+          isSearch: false,
+          searchList: [],
+          searchValue: '',
+          choosedLocation: location,
+          markers: [marker, originMarker],
+        });
+        this.searchLocation('路', 20, location, this, 'exploreList');
+      } else {
+        this.setData({
+          choosedLocation: location,
+        });
+      }
+    },
+  },
+});

package/src/mp/components/form/location/components/mapChoose/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/src/mp/components/form/location/components/mapChoose/index.wxml

@@ -0,0 +1,42 @@
+<!--components/mapChoose/index.wxml-->
+<view class="map-choose">
+  <view class="map-choose-header">
+    <view class="map-choose-header_title">选择地理位置</view>
+    <view class="cross" bindtap="comfirm" ></view>
+  </view>
+  <view class="map-choose-body">
+    <view class="map-choose-body-saerch {{isSearch?'map-choose-header_search_input_value':''}}">
+      <view class="map-choose-header_search_input">
+        <input type="text" value="{{searchValue}}" bindinput="changeInput" bindfocus="focusInput" />
+        <view class="map-choose-header_search_place" wx:if="{{!isSearch}}">
+          <image src="https://qcloudimg.tencent-cloud.cn/raw/388c48cdcbe9ca07f5682fb10d05ebdd.png"></image>
+          <text>搜索地点</text>
+        </view>
+      </view>
+      <view class="map-choose-header_search_input_cancle" wx:if="{{isSearch}}" bindtap="cancleSearch">取消</view>
+    </view>
+    <view class="map-choose-search" wx:if="{{isSearch}}">
+      <view class="map-choose-explore_ul map-choose-search_ul">
+        <view class="map-choose-explore_li" wx:for="{{searchList}}" wx:key="index" data-location="{{item}}" bindtap="chooseSite" data-type="search">
+          <view class="map-choose-explore_li_con" style="font-size: 14px;">{{item.title}} </view>
+          <view class="map-choose-explore_li_con" style="color: rgb(146, 148, 150);">{{item.address}}</view>
+          <view class="map-choose-explore_li_arow" />
+        </view>
+      </view>
+    </view>
+    <view class="map-choose-explore" wx:if="{{!isSearch}}">
+      <map id="choose-map" longitude="{{choosedLocation.longitude}}" latitude="{{choosedLocation.latitude}}" scale="14" style="width: 100%; height: 200px;" bindregionchange="regionchange" markers="{{markers}}" ></map>
+      <view class="map-choose-explore_ul">
+        <view class="map-choose-explore_li {{choosedLocation.id==item.id?'map-choose-explore_li_choosed':''}} " wx:for="{{exploreList}}" wx:key="index" data-location="{{item}}" bindtap="chooseSite">
+          <view class="map-choose-explore_li_con" style="font-size: 14px;">{{item.title}} </view>
+          <view class="map-choose-explore_li_con" style="color: rgb(146, 148, 150);">{{item.address}}</view>
+          <view class="map-choose-explore_li_arow" />
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="map-choose-footer">
+    <button data-value="true" bindtap="comfirm">确认</button>
+    <button bindtap="comfirm">取消</button>
+  </view>
+</view>

package/src/mp/components/form/location/components/mapChoose/index.wxss

@@ -0,0 +1,188 @@
+/* components/mapChoose/index.wxss */
+.map-choose {
+  position: fixed;
+  z-index: 100;
+  width: 100vw;
+  height: 100vh;
+  background-color: #fff;
+  left: 0;
+  top: 0;
+}
+
+.map-choose-footer {
+  display: flex;
+  align-items: self-start;
+  justify-content: center;
+  height: 60px;
+  padding-top: 8px;
+  left: 0;
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.map-choose-footer button {
+  width: 90px;
+  margin: 0 10px;
+  font-weight: normal;
+  color: #006eff;
+  font-size: 14px;
+  border-radius: 0;
+}
+
+.map-choose-footer button:nth-child(1) {
+  background-color: #006eff;
+  color: #fff;
+}
+.map-choose-footer button:nth-child(2) {
+  border: 1px solid #cfd5de;
+  background-color: #fff;
+}
+
+.map-choose-header {
+  height: 30px;
+  margin: 0 20px;
+  line-height: 30px;
+  font-weight: 700;
+  position: relative;
+}
+
+.cross {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 51%;
+  right: 0;
+  transform: translate(0, -48%);
+}
+
+.cross::before,
+.cross::after {
+  content: '';
+  width: 2px;
+  height: 18px;
+  background: #93979b;
+  position: absolute;
+  right: 10px;
+}
+
+.cross::before {
+  transform: rotate(45deg);
+}
+
+.cross::after {
+  transform: rotate(-45deg);
+}
+
+.map-choose-body {
+  height: calc(100% - 98px);
+}
+
+.map-choose-body-saerch {
+  padding: 8px 20px;
+  position: relative;
+  border-bottom: 1px solid #d3d3d3;
+}
+
+.map-choose-header_search_input {
+  height: 30px;
+  background-color: #ebebeb;
+  padding-left: 10px;
+  padding-right: 10px;
+  color: #b4b4b4;
+  font-size: 15px;
+  line-height: 31px;
+  border-radius: 5px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: relative;
+  display: flex;
+}
+
+.map-choose-header_search_input_value {
+  padding-right: 60px;
+}
+
+.map-choose-header_search_input input {
+  height: 30px;
+  line-height: 30px;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+.map-choose-header_search_input_cancle {
+  color: #006eff;
+  position: absolute;
+  height: 30px;
+  line-height: 30px;
+  top: 8px;
+  right: 20px;
+}
+
+.map-choose-header_search_place {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  transform: translate(-50%, 0);
+}
+.map-choose-header_search_place image {
+  width: 14px;
+  height: 14px;
+}
+
+.map-choose-search,
+.map-choose-explore {
+  width: 100%;
+  height: calc(100% - 47px);
+}
+
+.map-choose-explore_ul {
+  height: calc(100% - 200px);
+  overflow-y: scroll;
+  padding: 0 20px;
+}
+
+.map-choose-search_ul {
+  height: 100%;
+}
+
+.map-choose-explore_li {
+  width: 100%;
+  height: 46px;
+  padding-top: 6px;
+  position: relative;
+  border-bottom: 1px solid #d3d3d3;
+  cursor: pointer;
+  position: relative;
+  font-size: 12px;
+  padding-bottom: 3px;
+}
+
+.map-choose-explore_li_arow {
+  display: none;
+}
+
+.map-choose-explore_li_choosed .map-choose-explore_li_arow {
+  display: block;
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translate(0, -50%);
+  width: 16px;
+  height: 16px;
+  display: block !important;
+  background-image: url('https://qcloudimg.tencent-cloud.cn/raw/354c15c0cb845120ac3e9c474e6737b3.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.map-choose-explore_li_con {
+  width: 98%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}