@cloudbase/weda-ui 1.0.24 → 2.0.8

package/src/docs/compsdocs/wxOpen/Phone.mdx

@@ -0,0 +1,60 @@
+# 获取手机号
+
+<TableLayoutView
+  componentKey="Phone"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+使用获取手机号组件能够在小程序运行态对用户的手机号进行获取，使用方式如下:
+
+1.创建应用，应用构建类型需要为小程序构建或三端构建。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/b9e5a27263fe0f992618757086010017.png)
+
+2.在编辑器中添加**获取手机号**组件。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/6eac32bcf54b345c5d23ee3ec49de19c.png)
+
+3.为应用创建一个字符串类型的普通变量，用于接收获取到的手机号信息。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/5bd62e877d0a5805368ca55633627403.png)
+
+4.为获取手机号组件配置变量赋值事件，实现当用户授权成功后将返回的手机号信息赋值给步骤3中的普通变量。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/98e456ef06ee76e138dcc13d03705f33.png)
+
+5.该组件仅在小程序真实运行状态下生效，因此我们在编辑器中添加一个文本组件并与普通变量进行绑定，当用户在小程序中点击获取手机号按钮并授权成功时，文本组件便会展示对应的手机号信息。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/9373c76dd92a98cd222eab37e7cca495.png)
+
+6.将应用发布到小程序，可以看到当点击获取手机号按钮并授权时，文本组件便会对获取到的手机号码信息进行展示。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/1b4c8a656ae0298534e9f5c2749c9b04.png)
+
+
+## 组件使用限制
+
+1.该组件仅支持在小程序端使用，并且小程序必须为**企业主体**。
+
+2.该组件必须在小程序真实环境使用才能够看到实际效果。
+
+## 属性
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Phone"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件
+
+<TableLayoutView
+  componentKey="Phone"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>

package/src/docs/compsdocs/wxOpen/Share.mdx

@@ -0,0 +1,46 @@
+# 小程序分享
+
+<TableLayoutView
+  componentKey="Share"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+小程序分享组件支持快捷实现小程序分享功能，在小程序中点击该组件时，便会根据当前组件配置进行页面的分享，使用方法如下:
+
+1.创建应用，应用构建类型需要为小程序构建或三端构建。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/b9e5a27263fe0f992618757086010017.png)
+
+2.为编辑区中添加**小程序分享**组件，并在右侧配置区进行分享参数的设置。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/500bda4094df6b2c519eec8976ec4acd.png)
+
+3.将应用发布到小程序，可以看到当点击小程序分享按钮时，会自动调起分享弹窗，分享信息与配置区的配置相同。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/5f9add0024c8cb8f65464a4700a12652.png)
+
+
+## 组件使用限制
+
+1.该组件必须在小程序真实环境使用才能够看到实际效果。
+
+## 属性
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Share"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件
+
+<TableLayoutView
+  componentKey="Share"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>

package/src/docs/compsdocs/wxOpen/UserInfo.mdx

@@ -0,0 +1,60 @@
+# 获取用户信息
+
+<TableLayoutView
+  componentKey="UserInfo"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+使用获取用户信息组件能够在小程序运行态对用户的微信头像、微信昵称等信息进行获取，使用方式如下:
+
+1.创建应用，应用构建类型需要为小程序构建或三端构建。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/b9e5a27263fe0f992618757086010017.png)
+
+2.在编辑器中添加**获取用户信息**组件，并且在组件的右侧配置区填写**信息用途**。(若不填写**信息用途**，将导致功能不可用，请注意)
+
+![](https://qcloudimg.tencent-cloud.cn/raw/44d4f6bf1c9aaffa4bf7e3a1c0bcf83e.png)
+
+3.为应用创建一个字符串类型的普通变量，用于接收获取到的用户信息。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/1dd6a703ff51f0fe45059fdb504d25ff.png)
+
+4.为获取用户信息组件配置变量赋值事件，实现当用户授权成功后将返回的用户信息赋值给步骤3中的普通变量。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/ed12e3858ffba97f9ecbae7557ed03db.png)
+
+5.该组件仅在小程序真实运行状态下生效，因此我们在编辑器中添加一个文本组件并与普通变量进行绑定，当用户在小程序中点击获取用户信息按钮并授权成功时，文本组件便会展示对应的用户信息。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/a55e1ab45de33489a1d61557a4f5f1b0.png)
+
+6.将应用发布到小程序，可以看到当点击获取用户信息按钮并授权时，文本组件便会对获取到的用户信息进行展示。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/7aa344e9347a894975598ba1ab7b987e.png)
+
+
+## 组件使用限制
+
+1.该组件必须在小程序真实环境使用才能够看到实际效果。
+
+2.组件右侧配置区中**信息用途**必须进行填写，否则组件将无法正常使用。
+
+## 属性
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="UserInfo"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件
+
+<TableLayoutView
+  componentKey="UserInfo"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>

package/src/docs/compsdocs/wxOpen/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "微信开放能力",
+  "position": 100
+}

package/src/mp/components/button/index.js

@@ -41,6 +41,24 @@ Component({
     openType: {
       type: String,
     },
+    sessionFrom: {
+      type: String,
+    },
+    sendMessageTitle: {
+      type: String,
+    },
+    sendMessagePath: {
+      type: String,
+    },
+    sendMessageImg: {
+      type: String,
+    },
+    showMessageCard: {
+      type: Boolean,
+    },
+    appParameter: {
+      type: String,
+    }
   },
   data: {
     cls: '',
@@ -48,9 +66,7 @@ Component({
   methods: {
     ...handleEvents([
       { title: '点击', name: 'tap' },
-      { title: '获取手机号', name: 'getPhoneNumber' },
       { title: '打开客服会话', name: 'contact' },
-      { title: '获取用户信息', name: 'getUserInfo' },
       { title: '打开App', name: 'launchApp' },
       { title: '打开授权设置', name: 'openSetting' },
     ]),

package/src/mp/components/button/index.wxml

@@ -7,11 +7,15 @@
  open-type="{{openType}}"
  form-type="{{formType}}"
  bind:tap="tap"
- bindgetphonenumber="{{'getP' + 'honeN' + 'umber'}}"
  bindcontact="contact"
- bindgetuserinfo="getUserInfo"
  bindlaunchapp="launchApp"
  bindopensetting="openSetting"
+ session-from="{{sessionFrom}}"
+ send-message-title="{{sendMessageTitle}}"
+ send-message-path="{{sendMessagePath}}"
+ send-message-img="{{sendMessageImg}}"
+ show-message-card="{{showMessageCard}}"
+ app-parameter="{{appParameter}}"
 >
 	<block>{{text ? text : ''}}</block>
 	<slot name="contentSlot" wx:if="{{!text}}" />

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

@@ -1,8 +1,8 @@
 <view class="{{className}}" style="{{style}}">
 	<view class="{{cls}}">
 		<view wx:if="{{!!label}}" class="weda-formcells__label weui-cell">
-			<label wx:if="{{requiredFlag}}" class="weda-formcells__flag">*</label>
 			<label>{{label}}</label>
+			<label wx:if="{{requiredFlag}}" class="weda-formcells__flag">*</label>
 		</view>
 		<view class="weda-formcells__content {{isFlex ? 'weui-flex__item' : ''}}">
 			<slot></slot>

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

@@ -6,4 +6,21 @@
   font-family: SimSun;
   font-size: 12px;
   color: #f60;
+  align-self: flex-start;
+}
+
+.weda-formcells.weui-flex .weda-formcells__label {
+  width: 130px;
+}
+
+.weui-cells__group_form .weui-cell {
+  padding: 16px 16px;
+}
+
+.weda-formcells__content.weui-flex__item .weui-cell_form {
+  padding: 0;
+}
+
+.weda-formcells__content.weui-flex__item .weui-cell_form {
+  padding-right: 16px;
 }

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

@@ -1 +1,16 @@
 @import '../../../style/weda-ui.wxss';
+
+/*
+把weui-cell 的padding还回到input
+*/
+.weda-ui .weui-input {
+    padding: 28rpx 0;
+}
+
+.weui-btn_input-clear {
+    align-self: center;
+}
+
+/**
+ * END
+ */

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

@@ -1,8 +1,5 @@
 /* components/location/location.wxss */
 
-.form-location {
-}
-
 .form-location-warp {
   display: flex;
   white-space: nowrap;
@@ -26,10 +23,11 @@
   bottom: 0;
 }
 
-.form-location-con {
+.form-location_cell.form-location-con {
   flex: 1;
   display: flex;
   align-items: center;
+  padding-left: 0px;
 }
 
 .form-location-label_flag {
@@ -41,7 +39,7 @@
 }
 
 .form-location-label {
-  max-width: 150px;
+  width: 130px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -59,7 +57,7 @@
 }
 
 .form-location_cell {
-  padding: 16px 32px;
+  padding: 16px;
   line-height: 1.41176471;
   font-size: 17px;
   overflow: hidden;

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

@@ -249,12 +249,14 @@ Component({
     },
   },
   observers: {
-    'defaultValue, defaultTime, defaultRegion,defaultMutiRegion': function (
+    'defaultValue, defaultTime, defaultRegion,defaultMutiRegion,defaultDate': function (
       defaultValue,
       defaultTime,
-      defaultRegion
+      defaultRegion,
+      defaultMutiRegion,
+      defaultDate
     ) {
-      const { range, mode, separator, placeholder, dateMode, defaultDate, format, option, defaultMutiRegion } =
+      const { range, mode, separator, placeholder, dateMode, format, option } =
         this.properties;
       let value, displayValue;
       switch (mode) {

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/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.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"
+}