@cloudbase/weda-ui 0.2.15 → 1.0.21

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,65 +37,109 @@ Component({
   },
   data: {
     maxCount: 0,
+    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) => {
-        const fileType = tempFilePath.split('.')?.[1];
-        const cloudPath = `${uploadPath}/uploader-${Date.now()}.${fileType}`;
-        const uploadRes = await tcb.uploadFile({
-          cloudPath,
-          filePath: tempFilePath,
+      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,
         });
-        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 };
+      }
     },
   },
   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) {
+      //当单图片上传且默认值为空数组时，初次渲染更新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) {
+          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;

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

@@ -1,6 +1,18 @@
 <mp-cells>
     <mp-cell>
-        <mp-uploader max-size="{{maxSize  * 1024 * 1024}}" files="{{files}}" showDelete="{{true}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxCount}}" title="{{title}}" tips="{{tips}}" binddelete="onDelete"></mp-uploader>
+        <mp-uploader
+        max-size="{{maxSize  * 1024 * 1024}}"
+        files="{{files}}"
+        showDelete="{{true}}"
+        ext-class="{{layout}}"
+        bindfail="uploadError"
+        bindsuccess="uploadSuccess"
+        select="{{selectFile}}"
+        upload="{{uploadFile}}"
+        maxCount="{{maxCount}}"
+        title="{{title}}"
+        binddelete="onDelete">
+        </mp-uploader>
     </mp-cell>
 </mp-cells>
 <!-- uploader delete 实际代码接受 showDelete
@@ -9,7 +21,7 @@
 
  <!-- bind开头的是事件handler，wxml模版中不能带 `{{}}`
 ```
-<mp-uploader files="{{files}}" showDelete="{{true}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxUploadCount}}" title="{{title}}" tips="{{tips}}" binddelete="onDelete"></mp-uploader>
+<mp-uploader files="{{files}}" showDelete="{{true}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxUploadCount}}" title="{{title}}" binddelete="onDelete"></mp-uploader>
 ```
-upload 是函数带{{}}， bindtelete直接传函数名字符串 
+upload 是函数带{{}}， bindtelete直接传函数名字符串
 -->

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

@@ -1,20 +1,11 @@
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
-import deepEqual from '../../../utils/deepEqual';
-import { transSize } from '../../../utils/platform';
-
+import SparkMD5 from '../../../utils/spark-md5';
+import { transSize, uuid } from '../../../utils/platform';
 Component({
   options: {
     virtualHost: true,
     multipleSlots: true,
   },
-  lifetimes: {
-    attached() {
-      this.setData({
-        urls: this.properties.defaultValue,
-        files: this.properties.defaultValue.map((url) => ({ url })),
-      });
-    },
-  },
   properties: {
     label: {
       type: String,
@@ -31,8 +22,7 @@ Component({
       value: false,
     },
     defaultValue: {
-      type: Array,
-      value: [],
+      type: null,
     },
     maxUploadCount: {
       type: Number,
@@ -68,6 +58,9 @@ Component({
     maxCount: 0,
     files: [],
     urls: [],
+    cloudFile: [],
+    strogeUrls: [],
+    singleFlag: false
   },
   methods: {
     // 批量上传文件前置事件
@@ -103,8 +96,29 @@ Component({
     },
     //上传文件过程
     uploadFile: async function () {
+      const wxClientApi = wx;
+      const apiName = [
+        'c',
+        'h',
+        'o',
+        'o',
+        's',
+        'e',
+        'M',
+        'e',
+        's',
+        's',
+        'a',
+        'g',
+        'e',
+        'F',
+        'i',
+        'l',
+        'e',
+      ].join('');
+
       //文件上传的函数，
-      wx.chooseMessageFile({
+      wxClientApi[apiName]({
         count: this.data.maxCount,
         type: 'all',
         success: async (files) => {
@@ -120,8 +134,8 @@ Component({
       if (!this.handleBefore(files?.tempFiles)) return;
       const uploadPath = 'weda-uploader';
       const uploadPromise = files.tempFiles.map(async (tempFile) => {
-        const fileType = tempFile.path.split('.')?.[1];
-        const cloudPath = `${uploadPath}/uploader-${Date.now()}.${fileType}`;
+        const cloudPath = `${uploadPath}/${uuid().replaceAll('-', '')}-${tempFile.name
+          }`;
         tempFile.percent = '0';
         tempFile.cloudPath = null;
         tempFile.filePath = tempFile?.path || null;
@@ -144,9 +158,18 @@ Component({
               _this.data.files[index].status = 'success';
               const arr = [];
               arr.push(res.fileID);
+              let strogeUrls = [];
+              //为了避免死循环 在组件接到默认值后用cloudFile做暂存，造成urls跟cloudFile不同步，根据暂存状态来处理更新urls
+              if (_this.data.cloudFile.length > 0) {
+                strogeUrls = [..._this.data.cloudFile, ...arr];
+              } else {
+                strogeUrls = [..._this.data.urls, ...arr];
+              }
+              //同步urls cloudFile
               _this.setData({
-                files: _this.data.files,
-                urls: [..._this.data.urls, ...arr],
+                files: [..._this.data.files],
+                urls: [...strogeUrls],
+                cloudFile: [...strogeUrls],
               });
               if (_this.properties.single) {
                 _this.triggerEvent('success', {
@@ -170,6 +193,7 @@ Component({
             this.data.files[index].uploaded = transSize(res.totalBytesSent);
             this.setData({
               files: this.data.files,
+              //cloudFile:this.data.cloudFile.concat(this.data.files)
             });
           });
           return { fileID: uploadTask.fileID };
@@ -180,20 +204,36 @@ Component({
       });
       this.setData({
         files: this.data.files,
+        url: this.data.files,
       });
       return { urls: files.tempFiles };
     },
 
     onDelete: function (e) {
-      const filelist = this.data.files.filter(
-        (item) => e.target.dataset.item?.path != item?.path
-      );
-      this.setData({
-        files: filelist,
-        urls: this.data.urls.filter(
-          (v, index) => e.target.dataset.item?.cloudPath != v
-        ),
-      });
+      if (this.data.urls.length == 0) {
+        var storgeUrls = [];
+        this.data.cloudFile.forEach((v, index) => {
+          if (e.target.dataset.item.cloudPath != v) {
+            storgeUrls.push(v);
+          }
+        });
+        this.setData({
+          files: this.data.files.filter(
+            (v, index) => e.target.dataset.item.cloudPath !== v.cloudPath
+          ),
+          urls: storgeUrls,
+        });
+      } else {
+        const filelist = this.data.files.filter(
+          (item) => e.target.dataset.item?.path != item?.path
+        );
+        this.setData({
+          files: filelist,
+          urls: this.data.urls.filter(
+            (v, index) => e.target.dataset.item?.cloudPath != v
+          ),
+        });
+      }
     },
     reload: function (e) {
       this.handleUpload(e.target.dataset.item);
@@ -216,6 +256,45 @@ Component({
     },
   },
   observers: {
+    defaultValue: async function (value) {
+      //当单图片上传且默认值为空数组时，初次渲染更新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) {
+          const hf = await getTempFileURL(f);
+          const uuidReg = /[0-9a-f]{8}([0-9a-f]{4}){3}[0-9a-f]{12}-/;
+          const lastIndex = String(hf).lastIndexOf('/');
+          const name = String(hf).slice(lastIndex + 1);
+          const label = name.replace(uuidReg, '');
+          const httpFile = {
+            name: label,
+            cloudPath: f,
+            filePath: hf,
+            path: hf,
+            status: 'success',
+          };
+          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;
       this.setData({

package/src/mp/components/graphicCard/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0857 7.49988L8.43938 3.85359L9.14649 3.14648L13.7878 7.78777C13.9049 7.90493 13.9049 8.09488 13.7878 8.21204L9.14649 12.8533L8.43938 12.1462L12.0857 8.49988L2 8.49971L2.00002 7.49971L12.0857 7.49988Z" fill="#0052D9"/>
+</svg>

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

@@ -0,0 +1,203 @@
+Component({
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    navOption: { type: Array, value: [] },
+    titleVisible: {
+      type: Boolean,
+      value: true,
+    },
+    titleColor: {
+      type: String,
+      value: '',
+    },
+    titleFontWeight: {
+      type: String,
+      value: '',
+    },
+    titleFontSize: {
+      type: Number,
+      value: 14,
+    },
+    titleLineHeight: {
+      type: String,
+      value: '',
+    },
+    titleMaxLines: {
+      type: Number,
+      value: 1,
+    },
+    desColor: {
+      type: String,
+      value: '',
+    },
+    desFontWeight: {
+      type: String,
+      value: '',
+    },
+    desVisible: {
+      type: Boolean,
+      value: true,
+    },
+    desFontSize: {
+      type: Number,
+      value: 14,
+    },
+    desLineHeight: {
+      type: String,
+      value: '',
+    },
+    desMaxLines: {
+      type: Number,
+      value: 1,
+    },
+    buttonVisible: {
+      type: Boolean,
+      value: true,
+    },
+    buttonText: {
+      type: String,
+      value: '',
+    },
+    ColMobile: {
+      type: Number,
+      value: 2,
+    },
+    iconWidthSize: {
+      type: String,
+      value: '100',
+    },
+    iconHeightSize: {
+      type: String,
+      value: '100',
+    },
+    textAlign: {
+      type: String,
+      value: 'left',
+    },
+    titleStyle: {
+      type: String,
+      value: '',
+    },
+    desStyle: {
+      type: String,
+      value: '',
+    },
+  },
+
+  /** 页面的初始数据 */
+  data: {
+    optionList: [],
+    percentageVisible: true,
+    iconStyle: '',
+  },
+  methods: {
+    navigaTo: function (itemInfo) {
+      const item = itemInfo?.currentTarget?.dataset?.item;
+      if (item.tapStatus == 'inside') {
+        const paramObj = [];
+        if (item.withParams && item?.params) {
+          for (let info of item.params) {
+            paramObj.push(info.key + '=' + info.value);
+          }
+        }
+        item.paramObj = paramObj;
+        if (item.withParams && item.params.length > 0) {
+          wx.redirectTo({
+            url: '../' + item?.insideUrl + '/index?' + item.paramObj.join('&'),
+          });
+        } else {
+          wx.redirectTo({
+            url: '../' + item?.insideUrl + '/index',
+          });
+        }
+      }
+    },
+  },
+  observers: {
+    'iconWidthSize,iconHeightSize,ColMobile': function (
+      iconWidthSize,
+      iconHeightSize,
+      ColMobile
+    ) {
+      let standardWidth = '100%';
+      let standardHeight = ColMobile === 1 ? '200' : '98';
+      const numReg = /^\d+$/;
+      let width = numReg.test(iconWidthSize)
+        ? iconWidthSize + 'px'
+        : iconWidthSize;
+
+      let height = numReg.test(iconHeightSize)
+        ? iconHeightSize + 'px' //纯数字
+        : iconHeightSize.indexOf('%') == -1
+        ? iconHeightSize
+        : (Number(standardHeight) * parseInt(iconHeightSize)) / 100 + 'px';
+      let iconStyle = `width: ${width}; height: ${height}`;
+      this.setData({ iconStyle });
+    },
+
+    'navOption,ColMobile': function (navOption, ColMobile) {
+      let list = [];
+      list.length = Math.floor(navOption.length / ColMobile);
+      list.forEach((item, index) => {
+        list[index] = [];
+      });
+      navOption.forEach((item, index) => {
+        const _index = Math.floor(index / ColMobile);
+        if (!list[_index] || list[_index].length <= 0) {
+          // 保证每个col 的数据都是有的，列入总共7个数据，那么第二行的3， 4，5数据是undefined, 占位
+          list[_index] = Array.apply(null, Array(ColMobile));
+        }
+        list[_index][index - _index * ColMobile] = item;
+      });
+      const optionList = list;
+      this.setData({
+        optionList,
+      });
+    },
+    'titleMaxLines,titleColor,titleFontWeight,titleFontSize,textAlign,titleLineHeight': function (
+      titleMaxLines,
+      titleColor,
+      titleFontWeight,
+      titleFontSize,
+      textAlign,
+      titleLineHeight
+    ) {
+      let titleStyle = this.properties.titleStyle;
+      titleStyle = `
+      -webkit-line-clamp:${titleMaxLines ? titleMaxLines : 'revert'};
+      color: ${titleColor};
+      font-weight: ${titleFontWeight};
+      font-size: ${titleFontSize}px;
+      text-align: ${textAlign};
+      line-height: ${titleLineHeight == 'auto' ? 'normal' : titleLineHeight};
+      `;
+      this.setData({ titleStyle });
+    },
+    'desMaxLines,desColor,desFontWeight,desFontSize,textAlign,desLineHeight': function (
+      desMaxLines,
+      desColor,
+      desFontWeight,
+      desFontSize,
+      textAlign,
+      desLineHeight
+    ) {
+      let desStyle = this.properties.desStyle;
+      desStyle = `
+      -webkit-line-clamp:${desMaxLines ? desMaxLines : 'revert'};
+      color: ${desColor};
+      font-weight: ${desFontWeight};
+      font-size: ${desFontSize}px;
+      text-align: ${textAlign};
+      line-height: ${desLineHeight == 'auto' ? 'normal' : desLineHeight};
+      `;
+      this.setData({ desStyle });
+    },
+  },
+});

package/src/mp/components/graphicCard/index.json

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

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

@@ -0,0 +1,29 @@
+<view class="weda-graphic-card" style="{{style}}">
+  <view class="weda-graphic-card__wrapper">
+    <block wx:for="{{optionList}}" wx:key="colIndex" wx:for-item="row">
+      <view class="weda-grid weda-graphic-card__row">
+        <block wx:for="{{row}}" wx:key="colIndex" wx:for-item="col">
+          <view class="weda-col weda-grid__item weda-graphic-card__col weda-graphic-card__col--{{textAlign}}" style="width: {{(1 / ColMobile) * 100}}%" data-item="{{col}}" bindtap="navigaTo">
+            <view class="weda-grid__box">
+              <view class="weda-graphic-card__col-body">
+                <view class="weda-graphic-card__icon" style="{{iconStyle}}">
+                  <image src="{{col.icon}}" mode="scaleToFill" class="weda-graphic-card__img"></image>
+                </view>
+                <view class="weda-graphic-card__title" style="{{titleStyle}}" wx:if="{{titleVisible}}">
+                  {{col.title}}
+                </view>
+                <view class="weda-graphic-card__desc" style="text-align: {{textAlign}}" wx:if="{{desVisible}}" style="{{desStyle}}">
+                  {{col.des}}
+                </view>
+              </view>
+              <view class="wedatea2td-btn wedatea2td-btn--link weda-graphic-card__btn" wx:if="{{buttonVisible && col}}">
+                <text class="weda-graphic-card__btn--text">{{buttonText}}</text>
+                <image src="chevron-right.svg" class="weda-graphic-card__btn--icon wedatea2td-icon wedatea2td-icon-btnback"></image>
+              </view>
+            </view>
+          </view>
+        </block>
+      </view>
+    </block>
+  </view>
+</view>