@cloudbase/weda-ui-mp 3.6.0

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

@@ -0,0 +1,49 @@
+<view class="weui-uploader {{extClass}}">
+  <view class="weui-uploader__hd {{layout}}">
+    <view class="weda-formcells__label weui-cell" wx:if="{{labelVisible}}">
+      <block wx:if="{{layout === 'horizontal'}}">
+        <label wx:if="{{requiredFlag}}" class="weda-formcells__flag">*</label>
+        <view class="">
+          <view class="weui-uploader__title">{{title}}</view>
+          <view class="weui-uploader__info" wx:if="{{maxCount > 1}}">{{currentFiles.length}}/{{maxCount}}</view>
+        </view>
+      </block>
+      <block wx:if="{{layout === 'vertical'|| layout ===''}}">
+        <view class="weui-uploader__label">
+          <label wx:if="{{requiredFlag}}" class="weda-formcells__flag">*</label>
+          <view class="weui-uploader__title">{{title}}</view>
+        </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 {{shapeClass}}">
+          <image class="weui-uploader__img {{shapeClass}}" 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 {{shapeClass}}">
+          <image class="weui-uploader__img {{shapeClass}}" 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 {{shapeClass}}" data-index="{{index}}" bindtap="previewImage">
+          <image class="weui-uploader__img {{shapeClass}}" src="{{item.url}}" mode="aspectFill" />
+        </view>
+      </block>
+    </view>
+    <view wx:if="{{currentFiles.length < maxCount && !readOnly}}" class="weui-uploader__input-box {{shapeClass}}" hover-class="weui-active">
+      <view wx:if="{{!disabled&&!isChooseAvatar}}" class="weui-uploader__input" bindtap="chooseImage"></view>
+
+      <button class="weui-uploader__input" wx:if="{{!disabled&&isChooseAvatar}}" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"></button>
+
+      <view wx:if="{{disabled}}" class="weui-uploader__uploader_disabled"></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/components/form/uploader/weui-uploader.wxss

@@ -0,0 +1,19 @@
+/* materials/gsd-h5-react/components/form/uploader/weui-uploader.wxss */
+.weui-uploader .img-shape-rounded-tectangle {
+  border-radius: 6px;
+}
+.weui-uploader .img-shape-circular {
+  border-radius: 50%;
+}
+.weui-uploader .img-shape-ectangle {
+  border-radius: 0px;
+}
+.weui-uploader__files .img-shape-ectangle::before {
+  border-radius: 0px;
+}
+.weui-uploader__files .img-shape-circular::before {
+  border-radius: 50%;
+}
+.weui-uploader__files .img-shape-rounded-tectangle::before {
+  border-radius: 6px;
+}

package/components/form/uploaderFile/index.js

@@ -0,0 +1,481 @@
+import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
+import { transSize, randomStr } from '../../../utils/platform';
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  properties: {
+    label: {
+      type: String,
+      value: '文件上传',
+    },
+    //是否显示标题
+    labelVisible: {
+      type: Boolean,
+      value: true,
+    },
+    //单文件上传模式
+    single: {
+      type: Boolean,
+      value: false,
+    },
+    defaultValue: {
+      type: null,
+    },
+    maxUploadCount: {
+      type: Number,
+      value: 9,
+    },
+    //单个文件最大使用限制
+    maxSize: {
+      type: Number,
+      value: 10,
+    },
+    layout: {
+      type: String,
+      value: '',
+    },
+    extClass: {
+      type: String,
+      value: '',
+    },
+    tips: {
+      type: Boolean,
+      value: false,
+    },
+    status: {
+      type: String,
+      valve: 'success',
+    },
+    downloadVisible: {
+      type: Boolean,
+      value: true,
+    },
+    requiredFlag: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    readOnly: {
+      type: Boolean,
+      value: false,
+    },
+    callbacks: {
+      type: Object,
+      value: null,
+    },
+  },
+  data: {
+    maxCount: 0,
+    files: [],
+    urls: [],
+    cloudFile: [],
+    strogeUrls: [],
+    singleFlag: false,
+
+    layoutCls: '',
+    showActionsheet: false,
+    groups: [
+      { text: '照片图库', value: 1 },
+      { text: '拍照或录像', value: 2 },
+      { text: '选取聊天文件', value: 3 },
+    ],
+  },
+  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 > 500 * 1024 * 1024)) {
+        wx.showToast({
+          title: `上传文件大小不能超过500M`,
+          icon: 'none',
+          duration: 2000,
+        });
+        return false;
+      }
+      return true;
+    },
+    //上传文件过程
+    uploadFile: async function () {
+      //文件上传的函数，
+      wx.chooseMessageFile({
+        count: this.data.maxCount,
+        type: 'all',
+        success: async (files) => {
+          await this.handleUpload(files?.tempFiles);
+        },
+        fail(e) {
+          this.triggerEvent('error', e.detail);
+        },
+      });
+    },
+    //拍摄或从手机相册中选择图片或视频
+    chooseMedia: async function (value) {
+      wx.chooseMedia({
+        count: this.data.maxCount,
+        sourceType: value === 1 ? ['album'] : ['camera'],
+        maxDuration: 60,
+        success: async (files) => {
+          await this.handleUpload(files?.tempFiles);
+        },
+        fail(e) {
+          this.triggerEvent('error', e.detail);
+        },
+      });
+    },
+    handleUpload: async function (files, reload = false) {
+      var _this = this;
+      if (!this.handleBefore(files)) return;
+
+      const callbacks = this.data.callbacks;
+      let shouldUploadToCos = true;
+      if (typeof callbacks?.beforeUpload === 'function') {
+        try {
+          const mgr = wx.getFileSystemManager();
+          const ret = await callbacks.beforeUpload({
+            tempFilePaths: files.map((f) => f.path || f.tempFilePath),
+            base64Uri: files.map((f) => {
+              const content = mgr.readFileSync(f.path || f.tempFilePath);
+              return `data:;base64,${wx.arrayBufferToBase64(content)}`;
+            }),
+          });
+          if (typeof ret === 'boolean') {
+            shouldUploadToCos = ret;
+          } else if (
+            Array.Array(ret) &&
+            ret.every((i) => typeof i === 'string')
+          ) {
+            files = ret.map((path, idx) => {
+              files[idx].path = path;
+            });
+          }
+        } catch (err) {
+          console.error('上传前处理函数抛错', err);
+          shouldUploadToCos = false;
+        }
+      }
+      if (shouldUploadToCos === false) {
+        return false;
+      }
+
+      const initFiles = files.map((i) => ({
+        ...i,
+        percent: '0',
+        cloudPath: null,
+        name: i?.name || i?.tempFilePath.slice(9),
+        filePath: i?.path || i?.tempFilePath || null,
+        size: transSize(i?.size),
+        status: 'pending',
+      }));
+      let filelsList = reload
+        ? this.data.files
+        : [...this.data.files, ...initFiles];
+      this.setData({
+        files: filelsList,
+      });
+      Promise.all(
+        initFiles.map(async (tempFile) => {
+          return new Promise(function (resolve) {
+            _this.handleUploadFile({
+              _tempFile: tempFile,
+              onSuccess: (res) => {
+                filelsList = filelsList.map((i) =>
+                  i.filePath === res.filePath ? res : i
+                );
+                _this.triggerEvent('success', {
+                  value: res.cloudPath,
+                  file: res,
+                });
+                resolve(res);
+              },
+              onProgressUpdate: (res) => {
+                filelsList = filelsList.map((i) =>
+                  i.filePath === res.filePath ? res : i
+                );
+                _this.setData({
+                  files: filelsList,
+                });
+              },
+              onFail: (res, error) => {
+                filelsList = filelsList.map((i) =>
+                  i.filePath === res.filePath ? res : i
+                );
+                _this.triggerEvent('error', error.detail);
+                resolve(res);
+              },
+            });
+          });
+        })
+      ).then((res) => {
+        const result = filelsList.map(
+          (i) => res.find((j) => j.filePath === i.filePath) || i
+        );
+        const cloudPathList = result
+          .filter((i) => i.cloudPath)
+          .map((j) => j.cloudPath);
+        this.setData({
+          files: result,
+          urls: cloudPathList,
+          cloudFile: cloudPathList,
+        });
+        _this.handleChange(cloudPathList);
+      });
+    },
+    handleUploadFile: async function ({
+      _tempFile,
+      onSuccess,
+      onProgressUpdate,
+      onFail,
+    }) {
+      const tempFile = {
+        ..._tempFile,
+      };
+      const uploadPath = 'weda-uploader';
+      const cloudPath = `${uploadPath}/${randomStr()}-${tempFile.name}`;
+      try {
+        const tcb = await getCloudInstance();
+        const uploadTask = await tcb.uploadFile({
+          cloudPath: cloudPath,
+          filePath: tempFile.path || tempFile.tempFilePath,
+          success(res) {
+            tempFile.cloudPath = res.fileID;
+            tempFile.percent = 100;
+            tempFile.status = 'success';
+            if (onSuccess) {
+              onSuccess(tempFile);
+            }
+          },
+          fail(e) {
+            tempFile.status = 'fail';
+            wx.showModal({
+              title: '上传失败，请重试',
+              content: e.message,
+              showCancel: false,
+            });
+            onFail(tempFile, {
+              detail: e,
+            });
+          },
+        });
+        if (typeof uploadTask.onProgressUpdate === 'function') {
+          uploadTask.onProgressUpdate((res) => {
+            tempFile.percent = String(res.progress);
+            tempFile.status = res.progress == 100 ? 'success' : 'uploading';
+            tempFile.uploaded = transSize(res.totalBytesSent);
+            if (onProgressUpdate) {
+              onProgressUpdate(tempFile);
+            }
+          });
+        } else {
+          tempFile.percent = '100';
+          tempFile.status = 'success';
+          tempFile.cloudPath = uploadTask.fileID;
+          onSuccess(tempFile);
+        }
+      } catch (e) {
+        tempFile.status = 'fail';
+        wx.showModal({
+          title: '上传失败，请重试',
+          content: e.message,
+          showCancel: false,
+        });
+        if (onFail) {
+          onFail(tempFile, e);
+        }
+      }
+    },
+    onDelete: function (e) {
+      let newUrls = [];
+      if (this.data.urls.length == 0) {
+        this.data.cloudFile.forEach((v) => {
+          if (e.target.dataset.item.cloudPath != v) {
+            newUrls.push(v);
+          }
+        });
+        this.setData({
+          files: this.data.files.filter(
+            (v) => e.target.dataset.item.cloudPath !== v.cloudPath
+          ),
+          urls: newUrls,
+        });
+      } else {
+        const filelist = this.data.files.filter(
+          (item) =>
+            e.target.dataset.item?.path != item?.path ||
+            e.target.dataset.item?.tempFilePath != item?.tempFilePath
+        );
+        newUrls = this.data.urls.filter(
+          (v) => e.target.dataset.item?.cloudPath != v
+        );
+        this.setData({
+          files: filelist,
+          urls: newUrls,
+        });
+      }
+      this.handleChange(newUrls);
+    },
+
+    // change 事件
+    handleChange: function (values) {
+      let value = values;
+      if (this.properties.single) {
+        value = values[0] ?? '';
+      }
+      this.triggerEvent('change', { value });
+    },
+
+    reload: function (e) {
+      this.handleUpload([e.target.dataset.item], true);
+    },
+    downloadFile: async function (e) {
+      const path = e.target.dataset.item?.cloudPath;
+
+      const fileSrc = /^cloud:/.test(path) ? await getTempFileURL(path) : path;
+      if (fileSrc) {
+        wx.showLoading({
+          title: '下载中',
+          mask: true,
+        });
+        wx.downloadFile({
+          url: fileSrc,
+          success(res) {
+            wx.hideLoading();
+            const fileManager = wx.getFileSystemManager();
+            fileManager.saveFile({
+              tempFilePath: res.tempFilePath,
+              success: (res) => {
+                wx.hideLoading();
+                wx.openDocument({
+                  filePath: res.savedFilePath,
+                  showMenu: true,
+                  fail: function () {
+                    // https://developers.weixin.qq.com/community/develop/doc/0006a6b6f2cf60404299d51ab56809?highLine=wx.openDocument
+                    wx.showToast({
+                      title: `该文档类型暂不支持下载`,
+                      icon: 'none',
+                      duration: 2000,
+                    });
+                  },
+                });
+              },
+            });
+          },
+          fail(e) {
+            wx.hideLoading();
+            wx.showToast({
+              title: e.errMsg,
+              icon: 'none',
+              duration: 2000,
+            });
+          },
+        });
+      }
+    },
+    onButtonTap: function () {
+      this.setData({
+        showActionsheet: true,
+      });
+    },
+    onActionTap: function (e) {
+      this.setData({
+        showActionsheet: false,
+      });
+      switch (e?.detail?.value) {
+        // 照片图库
+        case 1:
+        // 拍照或录像
+        // eslint-disable-next-line no-fallthrough
+        case 2:
+          this.chooseMedia(e?.detail?.value);
+          break;
+        // 选取聊天文件
+        case 3:
+          this.uploadFile();
+          break;
+      }
+    },
+  },
+  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) != '[]') {
+        const values = Array.isArray(value) ? value : [value];
+        for (let f of values) {
+          if (f.startsWith('cloud:')) {
+            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);
+          }
+        }
+        const files = this.data.files;
+        // 文件上传成功也会触发defaultValue变化，此情况不执行初始化文件列表
+        if (!files?.length) {
+          this.setData({
+            files: httpFiles,
+            cloudFile:
+              JSON.stringify(value) != JSON.stringify(this.data.cloudFile)
+                ? [].concat(value)
+                : [],
+          });
+        }
+      } else {
+        this.setData({
+          files: [],
+          cloudFile: [],
+        });
+      }
+    },
+    'maxUploadCount, single': function (maxUploadCount, single) {
+      const maxCount = single ? 1 : maxUploadCount;
+      this.setData({
+        maxCount,
+      });
+    },
+    'layout,extClass': function (layout, extClass) {
+      const temp = `weda-formcells weui-cells weui-cells_forms ${extClass}`;
+      const layoutCls =
+        layout !== 'vertical' ? ` weui-flex ${temp}` : `${temp}`;
+      this.setData({ layoutCls });
+    },
+  },
+});

package/components/form/uploaderFile/index.json

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

package/components/form/uploaderFile/index.wxml

@@ -0,0 +1,52 @@
+<view class="weda-uploader-files weda-ui">
+  <block wx:if="{{!readOnly}}">
+    <view class="weda-uploader-files__hd {{layoutCls}}">
+      <view class="weda-uploader-files__title weda-formcells__label weui-cell" wx:if="{{labelVisible}}">
+        <label wx:if="{{requiredFlag}}" class="weda-formcells__flag">*</label>
+        {{label}}
+      </view>
+      <view class="weda-uploader-files__btn-contain">
+        <button class="weui-btn weda-uploader-files__btn" bindtap="onButtonTap" disabled="{{disabled}}">上传文件</button>
+
+        <view wx:if="{{maxCount!=1}}" class="weda-uploader-files__tips">支持批量上传</view>
+        <view wx:else>
+          <slot name="tips"></slot>
+        </view>
+      </view>
+    </view>
+  </block>
+  <view class="weda-uploader-files__bd">
+    <view class="weda-uploader-files__files" wx-if="{{files.length > 0}}">
+      <block wx:for="{{files}}" wx:key="filePath">
+        <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>
+            <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">
+              <view wx:if="{{item.status === 'success' || item.status === 'fail'}}" class="weda-uploader-files__file-status">
+                <text class="weda-uploader-files__file-status--msg">{{item.status === 'success' ? '上传成功' : '上传失败'}}</text>
+              </view>
+              <div class="weda-uploader-files__file-size">
+                <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 wx-if="{{!disabled}}" 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>
+  <mp-actionSheet bindactiontap="onActionTap" show="{{showActionsheet}}" actions="{{groups}}" title="选择文件来源"> </mp-actionSheet>
+</view>