@cloudbase/weda-ui 0.2.14 → 0.2.17

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

@@ -0,0 +1,341 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    className: {
+      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: '',
+      },
+    },
+    locationType: {
+      type: Number,
+      value: 1,
+    },
+    customLocation: {
+      type: Object,
+      value: {
+        latitude: 22.540366,
+        longitude: 113.934559,
+        poiname: '深圳市南山区深南大道10000号腾讯大厦',
+      },
+    },
+  },
+
+  lifetimes: {
+    attached: function () {
+      const wxClientApi = wx;
+      const apiName = [
+        'g',
+        'e',
+        't',
+        'L',
+        'o',
+        'c',
+        'a',
+        't',
+        'i',
+        'o',
+        'n',
+      ].join('');
+
+      // 在组件实例进入页面节点树时执行
+      const getCurrentLocation = (locationType) => {
+        wxClientApi[apiName]({
+          isHighAccuracy: true, //高精度定位
+          success: (res) => {
+            let { latitude, longitude } = res;
+            let location = {
+              latitude,
+              longitude,
+              poiname: '',
+            };
+            let marker = {
+              id: 887,
+              latitude,
+              longitude,
+              width: 25,
+              height: 35,
+            };
+            this.setData({
+              location,
+              markers: [marker],
+              currentLocations: location,
+              currentPosition: {
+                status: true,
+                message: '',
+              },
+            });
+            this.setLocation(location);
+            if (locationType === 1) {
+              this.triggerEvent('change', {
+                value: null,
+              });
+            } else {
+              this.setData({
+                isAddrShow: true,
+              });
+              this.changeValueFormat(location);
+            }
+          },
+          fail: ({ errMsg }) => {
+            console.log('getlocation', errMsg);
+            let currentPositionMsg = errMsg;
+            this.triggerEvent('change', {
+              value: null,
+            });
+            if (
+              errMsg ===
+              'getLocation:fail 频繁调用会增加电量损耗，可考虑使用 wx.onLocationChange 监听地理位置变化'
+            ) {
+              currentPositionMsg = '频繁获取当前定位会增加电量损耗请稍后再选择';
+              setTimeout(() => {
+                getCurrentLocation(locationType);
+              }, 3000);
+            }
+            this.setData({
+              currentPosition: {
+                status: false,
+                message: currentPositionMsg,
+              },
+              currentLocations: {},
+            });
+          },
+        });
+      };
+      const { locationType, customLocation } = this.properties;
+      if (locationType === 1 || locationType === 2) {
+        getCurrentLocation(locationType);
+      } else if (locationType === 3) {
+        this.setData({
+          currentPosition: {
+            status: true,
+            message: '',
+          },
+        });
+        if (this.checkCustomLocation(customLocation)) {
+          wx.showToast({
+            icon: 'none',
+            title: '位置输入格式错误 请检查',
+          });
+          return;
+        } else {
+          this.setLocation(customLocation);
+          this.changeValueFormat(customLocation);
+        }
+      }
+    },
+    detached: function () {
+      // 在组件实例被从页面节点树移除时执行
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    location: {
+      latitude: 39.98410411,
+      longitude: 116.307503,
+      poiname: '',
+    },
+    markers: [],
+    isAddrShow: false,
+    currentPosition: {
+      status: false,
+      message: '获取当前定位中',
+    },
+    currentLocations: {},
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    chooseSite() {
+      let { latitude, longitude } = this.data.location;
+      let currentPosition = this.data.currentPosition;
+      if (this.properties.disabled || !currentPosition.status) {
+        return wx.showToast({
+          icon: 'none',
+          title: currentPosition.status ? '已禁用' : currentPosition.message,
+          duration: 2000,
+        });
+      }
+      const wxClientApi = wx;
+      const apiName = [
+        'c',
+        'h',
+        'o',
+        'o',
+        's',
+        'e',
+        'L',
+        'o',
+        'c',
+        'a',
+        't',
+        'i',
+        'o',
+        'n',
+      ].join('');
+      wxClientApi[apiName]({
+        latitude,
+        longitude,
+        success: (res) => {
+          if (res.name) {
+            this.changeLocation({
+              ...res,
+              poiname: res.name,
+            });
+          }
+        },
+        fail: (err) => {
+          console.log('chooseLocation err', err);
+        },
+      });
+    },
+    changeLocation(location) {
+      let isAddrShow = this.data.isAddrShow;
+      if (!isAddrShow) {
+        this.setData({
+          isAddrShow: true,
+        });
+      }
+      let marker = {
+        id: 887,
+        latitude: location.latitude,
+        longitude: location.longitude,
+        width: 25,
+        height: 35,
+      };
+      this.setData({
+        location,
+        markers: [marker],
+      });
+      this.changeValueFormat(location);
+    },
+    checkCustomLocation(params) {
+      let { latitude, longitude } = params;
+      let message = '';
+      if (Object.prototype.toString.call(params) !== '[object Object]') {
+        return (message = '位置输入格式错误 请检查');
+      } else if (!latitude || !Number(latitude)) {
+        return (message = '位置输入格式错误 请检查');
+      } else if (!longitude || !Number(longitude)) {
+        return (message = '位置输入格式错误 请检查');
+      } else if (!params) {
+        return (message = '位置输入格式错误 请检查');
+      }
+    },
+    setLocation(value) {
+      const { latitude, longitude } = value;
+      let marker = {
+        id: 887,
+        latitude,
+        longitude,
+        width: 25,
+        height: 35,
+      };
+      this.setData({
+        location: value,
+        markers: [marker],
+      });
+      this.changeValueFormat(value);
+    },
+    changeValueFormat(value) {
+      const { latitude, longitude, poiname } = value;
+      let location = {
+        address: poiname,
+        geopoint: {
+          coordinates: [latitude, longitude],
+          type: 'Point',
+        },
+      };
+      this.triggerEvent('change', {
+        value: location,
+      });
+    },
+  },
+  observers: {
+    value: function (value) {
+      const currentLocations = this.data.currentLocations;
+      if (value || !currentLocations.latitude) return;
+      const locationType = this.properties.locationType;
+      const { latitude, longitude } = currentLocations;
+      let marker = {
+        id: 887,
+        latitude,
+        longitude,
+        width: 25,
+        height: 35,
+      };
+      this.setData({
+        location: currentLocations,
+        markers: [marker],
+        isAddrShow: false,
+      });
+      if (locationType === 1) {
+        this.triggerEvent('change', {
+          value: null,
+        });
+      } else if (locationType === 2) {
+        this.changeValueFormat(currentLocations);
+        this.setData({
+          isAddrShow: true,
+        });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "MapChoose":"./components/mapChoose/index"
+  }
+}

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

@@ -0,0 +1,25 @@
+<!--components/location/location.wxml-->
+
+<view class="form-location">
+  <view class="form-location-warp">
+    <view class="form-location-label form-location_cell" wx:if="{{labelVisible}}">
+      {{label}}
+    </view>
+    <view class="form-location-con form-location_cell" bindtap="chooseSite" data-value="{{true}}" >
+      <image class="form-location-con_img" src="https://qcloudimg.tencent-cloud.cn/raw/6542e1ce1dd36a90085b2eb979801df9.png"></image>
+      <text class="form-location-con-text">选择地理位置</text>
+    </view>
+  </view>
+  <view class="form-location-addr" wx:if="{{isAddrShow}}">
+    <image wx:if="{{isAddrShow&&location.poiname}}" class="form-location-addr-image" src="https://qcloudimg.tencent-cloud.cn/raw/f9729e0b091f394110a6e12d3f4e7290.png" alt="" />
+    <view class="form-location-addr-box" >
+      <view class="form-location-addr-title">{{location.poiname}}</view>
+      <view class="form-location-addr-lat" wx:if="{{showLngLat}}">
+        {{location.longitude}}N,{{location.latitude}}E
+      </view>
+    </view>
+  </view>
+  <view style="padding-left: 32px;padding-right: 32px;margin-top: 8px;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>
+</view>

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

@@ -0,0 +1,91 @@
+/* components/location/location.wxss */
+
+.form-location {
+}
+
+.form-location-warp {
+  display: flex;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+}
+
+.form-location::before,
+.form-location::after {
+  left: 32px;
+  right: 32px;
+  content: ' ';
+  position: absolute;
+  height: 0px;
+  z-index: 2;
+  color: #e2e1e1;
+  border-top: 1px solid #e2e1e1;
+}
+
+.form-location-warp::after {
+  bottom: 0;
+}
+
+.form-location-con {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.form-location-label_flag {
+  display: inline-block;
+  margin-right: 4px;
+  font-family: SimSun;
+  font-size: 12px;
+  color: #f60;
+}
+
+.form-location-label {
+  max-width: 150px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.form-location-con_img {
+  min-width: 18px;
+  width: 18px;
+  height: 18px;
+}
+.form-location-con-text {
+  color: #006eff;
+  margin-left: 8px;
+  cursor: pointer;
+}
+
+.form-location_cell {
+  padding: 16px 32px;
+  line-height: 1.41176471;
+  font-size: 17px;
+  overflow: hidden;
+  position: relative;
+}
+
+.form-location-addr {
+  display: flex;
+  align-items: flex-start;
+  padding-left: 32px;
+  padding-right: 32px;
+}
+
+.form-location-addr-title {
+  font-size: 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: 12px;
+}

package/src/mp/components/form/radio/index.js

@@ -75,4 +75,9 @@ Component({
       },
     ]),
   },
+  observers: {
+    range: function (range) {
+      this.setData({ defaultRange: range });
+    },
+  },
 });

package/src/mp/components/form/select/index.wxml

@@ -1,5 +1,5 @@
-<formcell 
-	className="{{cls}}" 
+<formcell
+	className="{{cls}}"
 	style="{{style}}"
 	label="{{labelVisible ? label : null}}"
 	layout="{{layout}}"
@@ -9,7 +9,7 @@
 	<view class="{{subCls}}">
 		<view class="weui-cell__bd">
 			<picker
-			 class="weui-picker__group"
+			 class="weui-picker__group weui-input"
 			 bindchange="onChange"
 			 bindcancel="onCancel"
 			 mode="{{mode}}"
@@ -22,4 +22,4 @@
 			</picker>
 		</view>
 	</view>
-</formcell>
+</formcell>

package/src/mp/components/form/textarea/index.wxml

@@ -1,5 +1,5 @@
-<formcell 
-	className="{{cls}}" 
+<formcell
+	className="{{cls}}"
 	style="{{style}}"
 	label="{{labelVisible ? label : null}}"
 	layout="{{layout}}"
@@ -8,15 +8,16 @@
 >
   <view class="weui-cell weui-cell_active weui-cell_form}} {{disabled ? 'weui-cell_disabled' : ''}}">
     <view class="weui-cell__bd">
-      <textarea 
-        class="weui-textarea" 
+      <textarea
+        class="weui-textarea"
         placeholder="{{placeholder}}"
         placeholder-class="weui-input__placeholder"
         bindinput="handleChange"
         value="{{value}}"
+        disable="{{disabled}}"
         maxlength="{{maxLength}}"
       ></textarea>
       <view wx:if="{{counterVisible}}" class="weui-textarea-counter"><span>{{!!value ? value.length : 0}}</span>/{{maxLength}}</view>
     </view>
   </view>
-</formcell>
+</formcell>

package/src/mp/components/form/uploader/index.js

@@ -1,18 +1,11 @@
-import { getCloudInstance } from '../../../utils/tcb';
-// import deepEqual from '../../../utils/deepEqual';
+import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
+import SparkMD5 from '../../../utils/spark-md5';
 
 Component({
   options: {
     virtualHost: true,
   },
-  lifetimes: {
-    attached() {
-      this.setData({
-        urls: this.properties.defaultValue,
-        files: this.properties.defaultValue.map((url) => ({ url })),
-      });
-    },
-  },
+
   properties: {
     maxUploadCount: {
       type: Number,
@@ -31,8 +24,7 @@ Component({
       value: 'horizontal',
     },
     defaultValue: {
-      type: Array,
-      value: [],
+      type: null,
     },
     single: {
       type: Boolean,
@@ -45,22 +37,27 @@ Component({
   },
   data: {
     maxCount: 0,
+    cloudFile: [],
     files: [],
     urls: [],
     uploadFile: async function (files) {
       // 文件上传的函数，返回一个promise
       const uploadPath = 'weda-uploader';
-
       const tcb = await getCloudInstance();
-      const uploadPromise = files.tempFilePaths.map(async (tempFilePath) => {
-        const fileType = tempFilePath.split('.')?.[1];
-        const cloudPath = `${uploadPath}/uploader-${Date.now()}.${fileType}`;
-        const uploadRes = await tcb.uploadFile({
-          cloudPath,
-          filePath: tempFilePath,
-        });
-        return { fileID: uploadRes.fileID };
-      });
+      const uploadPromise = files.tempFilePaths.map(
+        async (tempFilePath, index) => {
+          var spark = new SparkMD5.ArrayBuffer();
+          spark.append(files.contents[index]);
+          var md5Path = spark.end(false);
+          const fileType = tempFilePath.split('.')[1];
+          const cloudPath = `${uploadPath}/${md5Path}-${Date.now()}.${fileType}`;
+          const uploadRes = await tcb.uploadFile({
+            cloudPath,
+            filePath: tempFilePath,
+          });
+          return { fileID: uploadRes.fileID };
+        }
+      );
       const uploadFileList = await Promise.all(uploadPromise);
       const cloudUrls = uploadFileList.map((file) => file.fileID);
       // 这里返回的东西会在uploadSuccess回调函数中获取到
@@ -71,39 +68,66 @@ Component({
   },
   methods: {
     uploadError: function (e) {
-      // console.log('upload error', e.detail);
       this.triggerEvent('error', e.detail);
     },
     uploadSuccess: async function (e) {
       const urls = e.detail.cloudUrls; // uploadFile 获取返回值
       // 小程序自带tempURL 不需要调用 tcb.getTempFileURL 获取
       this.triggerEvent('success', {
-        value: urls[0],
+        value: urls,
       });
       this.setData({
         files: this.data.files.concat(e.detail.urls.map((url) => ({ url }))),
-        urls: [...this.data.urls, ...urls],
+        urls: [...this.data.cloudFile, ...urls],
       });
     },
     onDelete: function (e) {
-      this.setData({
-        files: this.data.files.filter((v, index) => e.detail.index !== index),
-        urls: this.data.urls.filter((v, index) => e.detail.index !== index),
-      });
+      if (this.data.urls.length == 0) {
+        var storgeUrls = [];
+        this.data.cloudFile.forEach((v, index) => {
+          if (e.detail.index != index) {
+            storgeUrls.push(v);
+          }
+        });
+        this.setData({
+          files: this.data.files.filter((v, index) => e.detail.index !== index),
+          urls: storgeUrls,
+        });
+      } else {
+        this.setData({
+          files: this.data.files.filter((v, index) => e.detail.index !== index),
+          urls: this.data.urls.filter((v, index) => e.detail.index !== index),
+        });
+      }
     },
   },
   observers: {
-    // 'defaultValue': function(value) {
-    //   if(!deepEqual(value, this.data.urls)) {
-    //     if(!Array.isArray(value)) {
-    //       value = [value].filter(v => v.length > 0);
-    //     }
-    //     this.setData({
-    //       files: value.map(f => ({url: f})),
-    //       urls: value
-    //     });
-    //   }
-    // },
+    defaultValue: async function (value) {
+      // if (!Array.isArray(value)) {
+      //   value = [value].filter((v) => v.length > 0);
+      //  //value = [value]
+      // }
+      if (value) {
+        let httpFiles = [];
+        for (let f of value) {
+          const hf = await getTempFileURL(f);
+          const httpFile = { url: hf };
+          httpFiles.push(httpFile);
+        }
+        this.setData({
+          files: httpFiles,
+          cloudFile:
+            JSON.stringify(value) != JSON.stringify(this.data.cloudFile)
+              ? value
+              : [],
+        });
+      } else {
+        this.setData({
+          files: [],
+          cloudFile: [],
+        });
+      }
+    },
 
     'maxUploadCount, single': function (maxUploadCount, single) {
       const maxCount = single ? 1 : maxUploadCount;