@cloudbase/weda-ui 0.2.11 → 0.2.15

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

@@ -0,0 +1,233 @@
+import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
+import deepEqual from '../../../utils/deepEqual';
+import { transSize } 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,
+      value: '文件上传',
+    },
+    //是否显示标题
+    labelVisible: {
+      type: Boolean,
+      value: true,
+    },
+    //单文件上传模式
+    single: {
+      type: Boolean,
+      value: false,
+    },
+    defaultValue: {
+      type: Array,
+      value: [],
+    },
+    maxUploadCount: {
+      type: Number,
+      value: 9,
+    },
+    //单个文件最大使用限制
+    maxSize: {
+      type: Number,
+      value: 10,
+    },
+    layout: {
+      type: String,
+      value: 'horizontal',
+    },
+    extClass: {
+      type: String,
+      value: '',
+    },
+    tips: {
+      type: Boolean,
+      value: false,
+    },
+    status: {
+      type: String,
+      valve: 'success',
+    },
+    downloadVisible: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    maxCount: 0,
+    files: [],
+    urls: [],
+  },
+  methods: {
+    // 批量上传文件前置事件
+    handleBefore: function (files = []) {
+      if (this.data.files.length + files.length > this.data.maxCount) {
+        wx.showToast({
+          title: `上传文件总数不能超过${this.data.maxCount}个`,
+          icon: 'none',
+          duration: 2000,
+        });
+        return false;
+      }
+      if (
+        this.properties.maxSize &&
+        files.some((f) => f.size > this.properties.maxSize * 1024 * 1024)
+      ) {
+        wx.showToast({
+          title: `上传文件大小不能超过${this.properties.maxSize}M`,
+          icon: 'none',
+          duration: 2000,
+        });
+        return false;
+      }
+      if (files.some((f) => f.size > 1024 * 1024 * 1024)) {
+        wx.showToast({
+          title: `上传文件大小不能超过1024M`,
+          icon: 'none',
+          duration: 2000,
+        });
+        return false;
+      }
+      return true;
+    },
+    //上传文件过程
+    uploadFile: async function () {
+      //文件上传的函数，
+      wx.chooseMessageFile({
+        count: this.data.maxCount,
+        type: 'all',
+        success: async (files) => {
+          this.handleUpload(files);
+        },
+        fail(e) {
+          this.triggerEvent('error', e.detail);
+        },
+      });
+    },
+    handleUpload: async function (files) {
+      var _this = this;
+      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}`;
+        tempFile.percent = '0';
+        tempFile.cloudPath = null;
+        tempFile.filePath = tempFile?.path || null;
+        tempFile.size = transSize(tempFile?.size);
+        tempFile.status = 'uploading';
+        this.data.files.push(tempFile);
+        this.setData({
+          files: [...this.data.files],
+        });
+        //初始上传文件状态
+        let index = this.data.files.length - 1;
+        try {
+          const tcb = await getCloudInstance();
+          const uploadTask = await tcb.uploadFile({
+            cloudPath: cloudPath,
+            filePath: tempFile.path,
+            success(res) {
+              _this.data.files[index].cloudPath = res.fileID;
+              _this.data.files[index].percent = 100;
+              _this.data.files[index].status = 'success';
+              const arr = [];
+              arr.push(res.fileID);
+              _this.setData({
+                files: _this.data.files,
+                urls: [..._this.data.urls, ...arr],
+              });
+              if (_this.properties.single) {
+                _this.triggerEvent('success', {
+                  value: _this.data.urls[0],
+                });
+              } else {
+                _this.triggerEvent('success', {
+                  value: _this.data.urls,
+                });
+              }
+            },
+            fail() {
+              this.data.files[index].status = 'fail';
+            },
+          });
+          uploadTask.onProgressUpdate((res) => {
+            this.data.files[index].percent = String(res.progress);
+            res.progress == 100
+              ? (this.data.files[index].status = 'success')
+              : (this.data.files[index].status = 'uploading');
+            this.data.files[index].uploaded = transSize(res.totalBytesSent);
+            this.setData({
+              files: this.data.files,
+            });
+          });
+          return { fileID: uploadTask.fileID };
+        } catch (e) {
+          this.triggerEvent('error', e.detail);
+          this.data.files[index].status = 'fail';
+        }
+      });
+      this.setData({
+        files: 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
+        ),
+      });
+    },
+    reload: function (e) {
+      this.handleUpload(e.target.dataset.item);
+    },
+    downloadFile: async function (e) {
+      const fileSrc = await getTempFileURL(e.target.dataset.item?.cloudPath);
+      wx.downloadFile({
+        url: fileSrc,
+        success(res) {
+          // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
+          if (res.statusCode === 200) {
+            wx.showToast({
+              title: `下载成功`,
+              icon: 'none',
+              duration: 2000,
+            });
+          }
+        },
+      });
+    },
+  },
+  observers: {
+    'maxUploadCount, single': function (maxUploadCount, single) {
+      const maxCount = single ? 1 : maxUploadCount;
+      this.setData({
+        maxCount,
+      });
+    },
+    urls: function (urls) {
+      let value = urls;
+      if (this.properties.single) {
+        value = urls[0] ?? '';
+      }
+      this.triggerEvent('change', { value });
+    },
+  },
+});

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

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "mp-icon": "weui-miniprogram/icon/icon",
+    "mp-cells": "weui-miniprogram/cells/cells",
+    "mp-cell": "weui-miniprogram/cell/cell"
+  }
+}

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

@@ -0,0 +1,46 @@
+<view class="weda-uploader-files {{extClass}}">
+    <view class="weda-uploader-files__hd">
+        <view class="weda-uploader-files__title" wx:if="{{labelVisible}}">{{label}}</view>
+        <view>
+            <button class="weui-btn weda-uploader-files__btn" bindtap="uploadFile">上传文件</button>
+            <view wx:if="{{maxCount!=1}}" class="weda-uploader-files__tips">支持批量上传</view>
+            <view wx:else><slot name="tips"></slot></view>
+        </view>
+    </view>
+    <view class="weda-uploader-files__bd">
+        <view class="weda-uploader-files__files" wx-if="{{files.length > 0}}">
+            <block wx:for="{{files}}" wx:key="index">
+                <view class="weda-uploader-files__item">
+                    <view class="weda-uploader-files__item-left">
+                        <view class="weda-uploader-files__file-detail">
+                            <text class="weda-uploader-files__file-name">{{item.name}}</text>
+                            <view wx:if="{{item.status === 'success' || item.status === 'fail'}}" class="weda-uploader-files__file-status">
+                                <mp-icon wx:if="{{item.status === 'success' }}" icon="done2" size="{{16}}" color="#00A870" type="field"></mp-icon>
+                                <mp-icon wx:if="{{item.status === 'fail' }}" icon="close2" size="{{16}}" color="#E34D59" type="field"></mp-icon>
+                                <text class="weda-uploader-files__file-status--msg">{{item.status === 'success' ? '上传成功' : '上传失败'}}</text>
+                            </view>
+                        </view>
+                        <view class="weda-uploader-files__progress weui-progress" wx-if="{{item.status === 'pending' || item.status === 'uploading'}}">
+                            <view class="weui-progress__bar">
+                                <progress percent="{{item.percent}}" stroke-width="3" activeColor="#0052D9" backgroundColor="#E7E7E7" stroke-width="3"/>
+                            </view>
+                        </view>
+                        <view class="weda-uploader-files__file-foot">
+                            <div>
+                              <text wx-if="{{item.status === 'uploading' || item.status === 'pending'}}">{{item.status === 'uploading' ? item.uploaded : '0K' }}/</text>
+                              <text>{{item.size}}</text>
+                            </div>
+                            <div wx-if="{{item.status === 'uploading' || item.status === 'pending'}}">{{item.status === 'pending' ? '等待上传' : '上传中'}}</div>
+
+                        </view>
+                    </view>
+                    <view class="weda-uploader-files__btn-group">
+                        <image wx-if="{{item.status === 'success'&&downloadVisible}}" data-item="{{item}}"  bindtap="downloadFile" class="weda-uploader-files__icon" src="https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/4cba5da1-cde4-40c6-a075-86eff22858a4.svg"></image>
+                        <image wx-if="{{item.status === 'fail'}}" data-item="{{item}}"  bindtap="reload" class="weda-uploader-files__icon" src="https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/af5486eb-65e0-4536-8e51-6c68a17b71ac.svg"></image>
+                        <image class="weda-uploader-files__icon" data-item="{{item}}" bindtap="onDelete" src="https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/2372f6a8-2f6a-4f30-92bf-73c62a5c0ae7.svg"></image>
+                    </view>
+                </view>
+            </block>
+        </view>
+    </view>
+</view>

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

@@ -0,0 +1,105 @@
+@import '../../../style/weda-ui.wxss';
+.weda-uploader-files {
+  width: 100%;
+  background-color: #f6f6f6;
+}
+.weda-uploader-files__hd {
+  width: 100%;
+  padding: 24px 20px 8px 20px;
+  display: flex;
+  background-color: #ffffff;
+}
+
+.weda-uploader-files__btn::after {
+  border: 1px solid #dcdcdc;
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  transform: none;
+}
+.weda-uploader-files__title {
+  font-size: 14px;
+  line-height: 20px;
+  color: #000;
+  margin-right: 20px;
+  padding-top: 6px;
+}
+.weda-uploader-files__btn {
+  margin: 0;
+  width: 88px;
+  height: 32px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  line-height: 22px;
+  color: #000;
+  border: 1px solid #dcdcdc;
+  border-radius: 3px;
+  font-weight: normal;
+  background-color: transparent;
+}
+.weda-uploader-files__tips {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.4);
+}
+.weda-uploader-files__item {
+  width: 100%;
+  margin-top: 8px;
+  padding: 16px;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.weda-uploader-files__item-left {
+  flex: 1;
+  margin-right: 16px;
+}
+.weda-uploader-files__file-detail {
+  display: flex;
+  align-items: center;
+}
+.weda-uploader-files__file-name {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.9);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+}
+.weda-uploader-files__file-status {
+  margin-left: 24px;
+  width: 28%;
+}
+.weda-uploader-files__file-status--msg {
+  margin-left: 4px;
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.9);
+}
+.weda-uploader-files__file-foot {
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.4);
+  margin-top: 8px;
+  display: flex;
+  justify-content: space-between;
+}
+.weda-uploader-files__btn-group {
+  display: flex;
+}
+.weda-uploader-files__icon {
+  width: 24px;
+  height: 24px;
+}
+.weda-uploader-files__icon + .weda-uploader-files__icon {
+  margin-left: 16px;
+}
+.weda-uploader-files__progress {
+  margin-top: 4px;
+}

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

@@ -37,76 +37,78 @@ Component({
       value: false,
     },
     imgPreview: {
-        type: Boolean,
-        value: false
+      type: Boolean,
+      value: false,
     },
     maskClosable: {
-        type: Boolean,
-        value: true
-    }
+      type: Boolean,
+      value: true,
+    },
   },
   methods: {
-    load: function(e) {
+    load: function (e) {
       this.triggerEvent('error', e.detail);
       this.setData({
         realHeight: e.detail.height,
-        realWidth: e.detail.width
+        realWidth: e.detail.width,
       });
     },
-    error: function(e) {
+    error: function (e) {
       this.setData({
         isError: true,
-        clsx: this.properties.className + 'weda-image-error'
+        clsx: this.properties.className + 'weda-image-error',
       });
       this.triggerEvent('error', e.detail);
     },
-    onImgTap: function() {
-        if(this.properties.imgPreview && !this.data.isError) {
-          // 计算图片预览展示高度
-          const {windowWidth, windowHeight} = wx.getSystemInfoSync();
-          const showHeight = windowWidth / (this.data.realWidth / this.data.realHeight);
-          const offsetHeight = windowHeight / 2 - (showHeight / 2);
-            this.setData({
-              showImg: true,
-              zoom: 1,
-              previewTranslateY: 0,
-              previewTranslateX: 0,
-              showHeight,
-              offsetHeight
-            });
-        }
+    onImgTap: function (e) {
+      if (this.properties.imgPreview && !this.data.isError) {
+        // 计算图片预览展示高度
+        const { windowWidth, windowHeight } = wx.getSystemInfoSync();
+        const showHeight =
+          windowWidth / (this.data.realWidth / this.data.realHeight);
+        const offsetHeight = windowHeight / 2 - showHeight / 2;
+        this.setData({
+          showImg: true,
+          zoom: 1,
+          previewTranslateY: 0,
+          previewTranslateX: 0,
+          showHeight,
+          offsetHeight,
+        });
+      }
+      this.triggerEvent('tap', e.detail);
     },
-    onPinch: function(ev) {
+    onPinch: function (ev) {
       let zoom = ev.detail.zoom;
       // zoom = this.data.zoom * zoom;
-      if(zoom > 5) {
+      if (zoom > 5) {
         zoom = 5;
       }
-      if(zoom < 0.6) {
+      if (zoom < 0.6) {
         zoom = 0.6;
       }
       this.setData({
-        zoom
+        zoom,
       });
     },
-    onPressMove: function(ev) {
+    onPressMove: function (ev) {
       this.setData({
         previewTranslateX: this.data.previewTranslateX + ev.detail.deltaX,
-        previewTranslateY: this.data.previewTranslateY + ev.detail.deltaY
+        previewTranslateY: this.data.previewTranslateY + ev.detail.deltaY,
       });
     },
-    onMaskClick: function() {
-        if(this.properties.maskClosable) {
-            this.setData({
-                showImg: false
-            });
-        }
-    },
-    onCloseClick: function() {
+    onMaskClick: function () {
+      if (this.properties.maskClosable) {
         this.setData({
-            showImg: false
+          showImg: false,
         });
-    }
+      }
+    },
+    onCloseClick: function () {
+      this.setData({
+        showImg: false,
+      });
+    },
   },
   data: {
     showImg: false,
@@ -118,13 +120,13 @@ Component({
     previewTranslateX: 0,
     previewTranslateY: 0,
     realHeight: 0,
-    realWidth: 0
+    realWidth: 0,
   },
   observers: {
-    className: function() {
+    className: function () {
       const className = this.properties.className;
       this.setData({
-        clsx: className
+        clsx: className,
       });
     },
     src: function () {
@@ -147,35 +149,35 @@ Component({
         });
       }
     },
-    'fit, mode': function(fit, mode) {
-      if(fit) {
-        switch(fit) {
+    'fit, mode': function (fit, mode) {
+      if (fit) {
+        switch (fit) {
           case 'cover':
             this.setData({
-              imgMode: 'aspectFill'
+              imgMode: 'aspectFill',
             });
             break;
           case 'contain':
             this.setData({
-              imgMode: 'aspectFit'
+              imgMode: 'aspectFit',
             });
             break;
           case 'fill':
             this.setData({
-              imgMode: 'scaleToFill'
+              imgMode: 'scaleToFill',
             });
             break;
           default:
             this.setData({
-              imgMode: 'scaleToFill'
+              imgMode: 'scaleToFill',
             });
             break;
         }
       } else {
         this.setData({
-          imgMode: mode
+          imgMode: mode,
         });
       }
-    }
+    },
   },
 });

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

@@ -7,6 +7,10 @@ Component({
       type: String,
       value: '',
     },
+    level: {
+      type: String,
+      value: '0',
+    },
     maxLines: {
       type: Number,
       value: 2,
@@ -23,10 +27,39 @@ Component({
       type: String,
       value: '',
     },
+    textAlign: {
+      type: String,
+      value: '',
+    },
+    textColor: {
+      type: String,
+      value: '',
+    },
     style: {
       type: String,
       value: '',
     },
   },
   methods: {},
+  observers: {
+    level: function (level) {
+      const levelName = `level_${level}`;
+      if (level !== '0') {
+        this.setData({ levelName });
+      }
+    },
+    'textAlign,textColor': function (textAlign, textColor) {
+      let style = this.properties.style;
+      // 添加文本颜色属性
+      if (textColor !== '') {
+        style = `${style};color:${textColor}`;
+      }
+
+      // 添加对齐属性
+      if (textAlign !== '') {
+        style = `${style};text-align: ${textAlign}`;
+      }
+      this.setData({ style });
+    },
+  },
 });

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

@@ -1,5 +1,5 @@
 <text 
-  class="weda-text weda-ui {{className}}" 
+  class="weda-text weda-ui {{className}} {{levelName}}" 
   id="{{id}}"
   user-select="{{userSelect}}"
   style="-webkit-line-clamp:{{maxLines}}; white-space: {{ space ? 'pre-warp' : 'pre-line'}}; {{style}}"

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

@@ -6,3 +6,21 @@
   /* -webkit-line-clamp: 1; */
   /* white-space: pre-line; */
 }
+.weda-text.level_1 {
+  font-size: 64px !important;
+}
+.weda-text.level_2 {
+  font-size: 56px !important;
+}
+.weda-text.level_3 {
+  font-size: 48px !important;
+}
+.weda-text.level_4 {
+  font-size: 40px !important;
+}
+.weda-text.level_5 {
+  font-size: 32px !important;
+}
+.weda-text.level_6 {
+  font-size: 24px !important;
+}

package/src/mp/index.json

@@ -12,6 +12,7 @@
     "Textarea": "components/form/textarea/index",
     "Select": "components/form/select/index",
     "Uploader": "components/form/uploader/index",
+    "UploaderFile": "components/form/uploaderFile/index",
     "Container": "components/container/index",
     "Slot": {
       "type": "native",

package/src/mp/utils/platform.js

@@ -0,0 +1,20 @@
+/**
+ * 文件字节转换
+ */
+export const transSize = (size) => {
+  const b = parseInt(size) || 0;
+  const getBig = (d) => Math.ceil(d / 1024) || 0;
+  if (b < 1024) {
+    return `${size}B`;
+  }
+  const k = getBig(size);
+  if (k < 1024) {
+    return `${k}K`;
+  }
+  const m = getBig(k);
+  if (m < 1024) {
+    return `${m}M`;
+  }
+  const g = getBig(m);
+  return `${g}G`;
+};