@cloudbase/weda-ui 0.2.17 → 2.0.8

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

@@ -6,20 +6,35 @@
 	multiCell="{{false}}"
 	requiredFlag="{{requiredFlag}}"
 >
-	<view class="{{subCls}}">
+<view class="{{subCls}}">
 		<view class="weui-cell__bd">
 			<picker
+			wx:if="{{mode!='mutiRegion'}}"
 			 class="weui-picker__group weui-input"
 			 bindchange="onChange"
 			 bindcancel="onCancel"
 			 mode="{{mode}}"
 			 range="{{selectRange}}"
+			 disabled="{{disabled}}"
 			 start="{{start}}"
 			 end="{{end}}"
+			disabled="{{disabled}}"
 			 value="{{value}}"
+			 fields="{{dateMode}}"
 			>
+			<label class="{{displayCls}}">{{displayValue}}</label>
+			</picker>
+			<picker wx:if="{{mode=='mutiRegion'}}"
+			 mode="multiSelector"
+			 disabled="{{disabled}}"
+			 range="{{multiArray}}"
+			 range-key='value'
+			 bindcolumnchange="columnchange"
+			 value="{{multiIndex}}"
+			 bindchange='onChange'
+			 class="weui-picker__group weui-input">
 				<label class="{{displayCls}}">{{displayValue}}</label>
 			</picker>
 		</view>
-	</view>
+</view>
 </formcell>

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

@@ -1 +1,5 @@
 @import '../../../style/weda-ui.wxss';
+.weda-ui .weui-cell.weui-check__label {
+    padding: 16px;
+    padding-left: 0;
+  }

package/src/mp/components/form/select/region/index.js

@@ -0,0 +1,101 @@
+import { callWedaApi } from '../../../../utils/tcb';
+
+export let provinces = [];
+export let cities = [];
+export let regions = [];
+export let regionData = [];
+/**
+ *  获取运行态地区数据
+ *  查询所有的省市区数据https://iwiki.woa.com/pages/viewpage.action?pageId=1582408865
+ */
+export async function getAreaCode() {
+  try {
+    const res = await callWedaApi({
+      action: 'QueryRuntimeAreaCode',
+      data: { Mask: "11100" },
+    });
+    return res?.AreaCodeList;
+  } catch (error) {
+    console.error('错误', error);
+    return {};
+  }
+}
+export const getRegionTree = async function (defaultValue) {
+  regionData = await getAreaCode();
+  splitAreaData(regionData, regionData);
+  return changeResult(defaultValue, regionData);
+};
+export const splitAreaData = (areaData) => {
+  provinces = [];
+  cities = [];
+  regions = [];
+  areaData.forEach(item => {
+    if (!item.Deprecated) {
+      if (item?.Type == 1) {
+        provinces.push(item);
+      } if (item?.Type == 2 || (item?.Type == 1 && item.CentralCity)) {
+        cities.push(item);
+      } else if (item?.Type == 3) {
+        regions.push(item);
+      }
+    }
+  });
+};
+/***
+ * 用于构建change事件result返回值
+ */
+export const changeResult = (regionValue, areaData) => {
+  const defaultValue = regionValue ? regionValue.split(',') : null;
+  const changeValue = [];
+  const defaultIndex = [];
+  if (defaultValue && defaultValue.length > 0) {
+    defaultValue.forEach((element, index) => {
+      areaData.map((item, id) => {
+        //区级判重
+        if ((item?.Value == element && index != 2) || (item?.Value == element && item.Code.substr(0, 2) == changeValue[0].code.substr(0, 2) && index == 2)) {
+          changeValue.push({
+            value: item?.Value,
+            code: item?.Code
+          }
+          );
+          defaultIndex.push(id);
+        }
+      });
+    });
+  }
+  return { value: regionValue, result: changeValue };
+};
+/**
+ * 拼接地区选择默认值显示规则
+ */
+export const buildDisplayValue = (data, indexList, type) => {
+  let provinceItem = [];
+  let cityItem;
+  let regionItem;
+  switch (type) {
+    case 'levelOne': {
+      provinceItem = data[0][indexList[0]];
+      return {
+        value: provinceItem.value,
+        result: [provinceItem]
+      };
+    }
+    case 'levelTwo': {
+      provinceItem = data[0][indexList[0]];
+      cityItem = data[1][indexList[1]];
+      return {
+        value: provinceItem.value + "," + cityItem.value,
+        result: [provinceItem, cityItem]
+      };
+    }
+    case 'levelThree': {
+      provinceItem = data[0][indexList[0]];
+      cityItem = data[1][indexList[1]];
+      regionItem = data[2][indexList[2]];
+      return {
+        value: provinceItem.value + "," + cityItem.value + "," + regionItem.value,
+        result: [provinceItem, cityItem, regionItem]
+      };
+    }
+  }
+};

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

@@ -64,7 +64,7 @@ Component({
       this.setData({
         cls: classNames({
           'weda-ui': true,
-          'weda-radio': true,
+          'weda-textarea': true,
           [className]: className,
         }),
       });

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

@@ -1 +1,5 @@
 @import '../../../style/weda-ui.wxss';
+
+.weda-ui .weda-textarea .weui-cell_form {
+  padding: 16px;
+}

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

@@ -40,30 +40,39 @@ Component({
     cloudFile: [],
     files: [],
     urls: [],
+    singleFlag: false,
     uploadFile: async function (files) {
-      // 文件上传的函数，返回一个promise
-      const uploadPath = 'weda-uploader';
-      const tcb = await getCloudInstance();
-      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回调函数中获取到
-      // https://github.com/wechat-miniprogram/weui-miniprogram/blob/a3630575910302e3b94e69fcef266d2b509de650/src/components/uploader/uploader.ts#L149
-      // 写死的从返回值的 .urls 获取展示用的url来用。一定要将tempFilePaths透传下去，否则会重新加载然后出现闪白
-      return { urls: files.tempFilePaths, cloudUrls };
+      try {
+        // 文件上传的函数，返回一个promise
+        const uploadPath = 'weda-uploader';
+        const tcb = await getCloudInstance();
+        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回调函数中获取到
+        // https://github.com/wechat-miniprogram/weui-miniprogram/blob/a3630575910302e3b94e69fcef266d2b509de650/src/components/uploader/uploader.ts#L149
+        // 写死的从返回值的 .urls 获取展示用的url来用。一定要将tempFilePaths透传下去，否则会重新加载然后出现闪白
+        return { urls: files.tempFilePaths, cloudUrls };
+      } catch (e) {
+        wx.showToast({
+          title: `${e}` || '上传失败',
+          icon: 'none',
+          duration: 2000,
+        });
+      }
     },
   },
   methods: {
@@ -103,10 +112,13 @@ Component({
   },
   observers: {
     defaultValue: async function (value) {
-      // if (!Array.isArray(value)) {
-      //   value = [value].filter((v) => v.length > 0);
-      //  //value = [value]
-      // }
+      //当单图片上传且默认值为空数组时，初次渲染更新value，以避免空串提交类型不匹配问题
+      if (Array.isArray(value) && !this.data.singleFlag) {
+        this.setData({
+          urls: value
+        });
+        this.data.singleFlag = true;
+      }
       if (value) {
         let httpFiles = [];
         for (let f of value) {

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

@@ -2,8 +2,9 @@
   "component": true,
   "styleIsolation": "shared",
   "usingComponents": {
-    "mp-uploader": "weui-miniprogram/uploader/uploader",
+    "mp-uploader": "./weui-uploader",
     "mp-cells": "weui-miniprogram/cells/cells",
-    "mp-cell": "weui-miniprogram/cell/cell"
+    "mp-cell": "weui-miniprogram/cell/cell",
+    "formcell": "../formcell"
   }
 }

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

@@ -1,20 +1,24 @@
-<mp-cells>
-    <mp-cell>
-        <mp-uploader
+<view
+    class="weda-ui weui-cells weui-cells_form {{className}}"
+    id="{{id}}"
+    style="{{style}}"
+>
+    <mp-uploader
         max-size="{{maxSize  * 1024 * 1024}}"
         files="{{files}}"
+        title="{{title}}"
         showDelete="{{true}}"
         ext-class="{{layout}}"
         bindfail="uploadError"
         bindsuccess="uploadSuccess"
+        layout="{{layout}}"
         select="{{selectFile}}"
         upload="{{uploadFile}}"
         maxCount="{{maxCount}}"
-        title="{{title}}"
         binddelete="onDelete">
-        </mp-uploader>
-    </mp-cell>
-</mp-cells>
+    </mp-uploader>
+</view>
+
 <!-- uploader delete 实际代码接受 showDelete
     https://developers.weixin.qq.com/community/develop/doc/000a4e7b9cc158c110aa3961056400
  -->

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

@@ -13,6 +13,24 @@
   justify-content: space-between;
 }
 
-.weui-uploader.horizontal .weui-uploader__bd {
-  padding-left: 32px;
+.weui-uploader.horizontal .weda-formcells__label {
+  width: 130px;
+}
+
+.weui-uploader__label {
+  display: flex;
+  flex: 1;
+}
+
+.weui-uploader__title {
+  flex: unset;
+}
+.weda-ui .weui-uploader.horizontal .weui-uploader__bd {
+  padding: 16px 0;
+}
+.weda-ui .weui-uploader.vertical .weui-uploader__bd {
+  padding: 16px;
+}
+.weui-uploader__hd.vertical {
+  padding-bottom: 0;
 }

package/src/mp/components/form/uploader/weui-uploader.js

@@ -0,0 +1,209 @@
+Component({
+    options: {
+        addGlobalClass: true,
+        virtualHost: true
+    },
+    properties: {
+        title: {
+            type: String,
+            value: '图片上传'
+        },
+        sizeType: {
+            type: Array,
+            value: ['original', 'compressed']
+        },
+        sourceType: {
+            type: Array,
+            value: ['album', 'camera']
+        },
+        maxSize: {
+            type: Number,
+            value: 5 * 1024 * 1024
+        },
+        maxCount: {
+            // 最多上传多少个文件
+            type: Number,
+            value: 1
+        },
+        files: {
+            // 当前的图片列表, {url, error, loading}
+            type: Array,
+            value: [],
+            observer(newVal) {
+                this.setData({
+                    currentFiles: newVal
+                });
+            }
+        },
+        select: {
+            // 过滤某个文件
+            type: null,
+            value: () => { }
+        },
+        upload: {
+            // 返回Promise的一个文件上传的函数
+            type: null,
+            value: null
+        },
+        tips: {
+            type: String,
+            value: ''
+        },
+        layout: {
+          type: String,
+          value: 'horizontal'
+        },
+        extClass: {
+            type: String,
+            value: ''
+        },
+        showDelete: {
+            // 是否显示delete按钮
+            type: Boolean,
+            value: true
+        }
+    },
+    data: {
+        currentFiles: [],
+        showPreview: false,
+        previewImageUrls: []
+    },
+    ready() { },
+    methods: {
+        previewImage(e) {
+            const { index } = e.currentTarget.dataset;
+            const previewImageUrls = [];
+            this.data.files.forEach((item) => {
+                previewImageUrls.push(item.url);
+            });
+            this.setData({
+                previewImageUrls,
+                previewCurrent: index,
+                showPreview: true
+            });
+        },
+        chooseImage() {
+            if (this.uploading)
+                return;
+            wx.chooseImage({
+                count: this.data.maxCount - this.data.files.length,
+                sizeType: this.data.sizeType,
+                sourceType: this.data.sourceType,
+                success: (res) => {
+                    // console.log('chooseImage resp', res)
+                    // 首先检查文件大小
+                    let invalidIndex = -1;
+                    // @ts-ignore
+                    res.tempFiles.forEach((item, index) => {
+                        if (item.size > this.data.maxSize) {
+                            invalidIndex = index;
+                        }
+                    });
+                    if (typeof this.data.select === 'function') {
+                        const ret = this.data.select(res);
+                        if (ret === false) {
+                            return;
+                        }
+                    }
+                    if (invalidIndex >= 0) {
+                        this.triggerEvent('fail', {
+                            type: 1,
+                            errMsg: `chooseImage:fail size exceed ${this.data.maxSize}`,
+                            total: res.tempFilePaths.length,
+                            index: invalidIndex
+                        }, {});
+                        return;
+                    }
+                    // 获取文件内容
+                    const mgr = wx.getFileSystemManager();
+                    const contents = res.tempFilePaths.map((item) => {
+                        // @ts-ignore
+                        const fileContent = mgr.readFileSync(item);
+                        return fileContent;
+                    });
+                    const obj = {
+                        tempFilePaths: res.tempFilePaths,
+                        tempFiles: res.tempFiles,
+                        contents
+                    };
+                    // 触发选中的事件，开发者根据内容来上传文件，上传了把上传的结果反馈到files属性里面
+                    this.triggerEvent('select', obj, {});
+                    const files = res.tempFilePaths.map((item, i) => ({
+                        loading: true,
+                        url: res.tempFilePaths[i] ||
+                            `data:image/jpg;base64,${wx.arrayBufferToBase64(contents[i])}`
+                    }));
+                    if (!files || !files.length)
+                        return;
+                    if (typeof this.data.upload === 'function') {
+                        const len = this.data.files.length;
+                        const newFiles = this.data.files.concat(files);
+                        this.setData({
+                            files: newFiles,
+                            currentFiles: newFiles
+                        });
+                        this.loading = true;
+                        this.data
+                            .upload(obj)
+                            .then((json) => {
+                            this.loading = false;
+                            if (json.urls) {
+                                const oldFiles = this.data.files;
+                                json.urls.forEach((url, index) => {
+                                    oldFiles[len + index].url = url;
+                                    oldFiles[len + index].loading = false;
+                                });
+                                this.setData({
+                                    files: oldFiles,
+                                    currentFiles: newFiles
+                                });
+                                this.triggerEvent('success', json, {});
+                            }
+                            else {
+                                this.triggerEvent('fail', {
+                                    type: 3,
+                                    errMsg: 'upload file fail, urls not found'
+                                }, {});
+                            }
+                        })
+                            .catch((err) => {
+                            this.loading = false;
+                            const oldFiles = this.data.files;
+                            res.tempFilePaths.forEach((item, index) => {
+                                oldFiles[len + index].error = true;
+                                oldFiles[len + index].loading = false;
+                            });
+                            this.setData({
+                                files: oldFiles,
+                                currentFiles: newFiles
+                            });
+                            this.triggerEvent('fail', {
+                                type: 3,
+                                errMsg: 'upload file fail',
+                                error: err
+                            }, {});
+                        });
+                    }
+                },
+                fail: (fail) => {
+                    if (fail.errMsg.indexOf('chooseImage:fail cancel') >= 0) {
+                        this.triggerEvent('cancel', {}, {});
+                        return;
+                    }
+                    fail.type = 2;
+                    this.triggerEvent('fail', fail, {});
+                }
+            });
+        },
+        deletePic(e) {
+            const index = e.detail.index;
+            const files = this.data.files;
+            const file = files.splice(index, 1);
+            this.setData({
+                files,
+                currentFiles: files
+            });
+            this.triggerEvent('delete', { index, item: file[0] });
+        }
+    }
+});

package/src/mp/components/form/uploader/weui-uploader.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "mp-gallery": "weui-miniprogram/gallery/gallery"
+    },
+    "styleIsolation": "shared"
+}

package/src/mp/components/form/uploader/weui-uploader.wxml

@@ -0,0 +1,45 @@
+<view class="weui-uploader {{extClass}}">
+    <view class="weui-uploader__hd {{layout}}">
+        <view class="weda-formcells__label weui-cell">
+            <block wx:if="{{layout === 'horizontal'}}">
+                <view class="">
+                    <view class="weui-uploader__title">{{title}}</view>
+                    <view class="weui-uploader__info" wx:if="{{maxCount > 1}}">{{currentFiles.length}}/{{maxCount}}</view>
+                </view>
+                <label wx:if="{{true}}" class="weda-formcells__flag">*</label>
+            </block>
+            <block wx:if="{{layout === 'vertical'}}">
+                <view class="weui-uploader__label">
+                    <view class="weui-uploader__title">{{title}}</view>
+                    <label wx:if="{{true}}" class="weda-formcells__flag">*</label>
+                </view>
+                <view class="weui-uploader__info" wx:if="{{maxCount > 1}}">{{currentFiles.length}}/{{maxCount}}</view>
+            </block>
+        </view>
+    </view>
+    <view class="weui-uploader__bd">
+        <view class="weui-uploader__files">
+            <block wx:for="{{currentFiles}}" wx:key="*this">
+                <view wx:if="{{item.error}}" data-index="{{index}}" bindtap="previewImage" class="weui-uploader__file weui-uploader__file_status">
+                    <image class="weui-uploader__img" src="{{item.url}}" mode="aspectFill" />
+                    <view class="weui-uploader__file-content">
+                        <icon type="warn" size="23" color="#F43530"></icon>
+                    </view>
+                </view>
+                <view wx:elif="{{item.loading}}" data-index="{{index}}" bindtap="previewImage" class="weui-uploader__file weui-uploader__file_status">
+                    <image class="weui-uploader__img" src="{{item.url}}" mode="aspectFill" />
+                    <view class="weui-uploader__file-content">
+                        <view class="weui-loading"></view>
+                    </view>
+                </view>
+                <view wx:else class="weui-uploader__file" data-index="{{index}}" bindtap="previewImage">
+                    <image class="weui-uploader__img" src="{{item.url}}" mode="aspectFill" />
+                </view>
+            </block>
+        </view>
+        <view wx:if="{{currentFiles.length < maxCount}}" class="weui-uploader__input-box" hover-class="weui-active">
+            <view class="weui-uploader__input" bindtap="chooseImage"></view>
+        </view>
+    </view>
+    <mp-gallery class="gallery" hide-on-click="{{true}}" show-delete="{{showDelete}}" show="{{showPreview}}" binddelete="deletePic" img-urls="{{previewImageUrls}}" current="{{previewCurrent}}"></mp-gallery>
+</view>

package/src/mp/components/form/uploader/weui-uploader.wxss

@@ -0,0 +1 @@
+/* materials/gsd-h5-react/components/form/uploader/weui-uploader.wxss */

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

@@ -60,6 +60,7 @@ Component({
     urls: [],
     cloudFile: [],
     strogeUrls: [],
+    singleFlag: false
   },
   methods: {
     // 批量上传文件前置事件
@@ -133,9 +134,8 @@ Component({
       if (!this.handleBefore(files?.tempFiles)) return;
       const uploadPath = 'weda-uploader';
       const uploadPromise = files.tempFiles.map(async (tempFile) => {
-        const cloudPath = `${uploadPath}/${uuid().replaceAll('-', '')}-${
-          tempFile.name
-        }`;
+        const cloudPath = `${uploadPath}/${uuid().replaceAll('-', '')}-${tempFile.name
+          }`;
         tempFile.percent = '0';
         tempFile.cloudPath = null;
         tempFile.filePath = tempFile?.path || null;
@@ -257,9 +257,13 @@ Component({
   },
   observers: {
     defaultValue: async function (value) {
-      // if (!Array.isArray(value)) {
-      //   value = [value].filter((v) => v.length > 0);
-      // }
+      //当单图片上传且默认值为空数组时，初次渲染更新value，以避免空串提交类型不匹配问题
+      if (Array.isArray(value) && !this.data.singleFlag) {
+        this.setData({
+          urls: value
+        });
+        this.data.singleFlag = true;
+      }
       let httpFiles = [];
       if (value && JSON.stringify(value) != '[]') {
         for (let f of value) {

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

@@ -5,7 +5,8 @@
 }
 .weda-uploader-files__hd {
   width: 100%;
-  padding: 24px 20px 8px 20px;
+  padding: 16px;
+  padding-left: 0;
   display: flex;
   background-color: #ffffff;
 }
@@ -20,9 +21,8 @@
 .weda-uploader-files__title {
   font-size: 14px;
   line-height: 20px;
-  color: #000;
-  margin-right: 20px;
-  padding-top: 6px;
+  padding: 16px;
+  width: 130px;
 }
 .weda-uploader-files__btn {
   margin: 0;

package/src/mp/components/image/index.wxss

@@ -32,7 +32,8 @@
 }
 
 .weda-image-error {
-  position: relative;
+  position: relative !important;
+  display: inline-block !important;
 }
 
 .weda-image-error::before {
@@ -43,4 +44,4 @@
   top: 0;
   width: 100%;
   height: 100%;
-}
+}