@cloudbase/weda-ui 2.0.26 → 3.1.0

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

@@ -1,219 +0,0 @@
-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

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

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

@@ -1,45 +0,0 @@
-<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

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

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

@@ -1,313 +0,0 @@
-import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
-import SparkMD5 from '../../../utils/spark-md5';
-import { transSize, uuid } 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: '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: [],
-    cloudFile: [],
-    strogeUrls: [],
-    singleFlag: false,
-  },
-  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 () {
-      const wxClientApi = wx;
-      const apiName = [
-        'c',
-        'h',
-        'o',
-        'o',
-        's',
-        'e',
-        'M',
-        'e',
-        's',
-        's',
-        'a',
-        'g',
-        'e',
-        'F',
-        'i',
-        'l',
-        'e',
-      ].join('');
-
-      //文件上传的函数，
-      wxClientApi[apiName]({
-        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 cloudPath = `${uploadPath}/${uuid().replaceAll('-', '')}-${
-          tempFile.name
-        }`;
-        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);
-              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: [...strogeUrls],
-                cloudFile: [...strogeUrls],
-              });
-              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,
-              //cloudFile:this.data.cloudFile.concat(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,
-        url: this.data.files,
-      });
-      return { urls: files.tempFiles };
-    },
-
-    onDelete: function (e) {
-      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);
-    },
-    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: {
-    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({
-        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

@@ -1,9 +0,0 @@
-{
-  "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

@@ -1,45 +0,0 @@
-<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>