@xtdev/xt-miniprogram-ui 1.2.77 → 1.2.79

package/libs/xt-uploader/index.js

@@ -1,20 +1,20 @@
 // src/xt-uploader/index.js
-const utils = require("./utils");
+const utils = require('./utils');
 // 节流函数
-function _throttle(fn, wait = 500, isImmediate = false){
+function _throttle(fn, wait = 500, isImmediate = false) {
   var flag = true;
-  return function(){
-    if(flag == true){
-      var context = this
-      var args = arguments
-      flag = false
-      isImmediate && fn.apply(context,args)
+  return function () {
+    if (flag == true) {
+      var context = this;
+      var args = arguments;
+      flag = false;
+      isImmediate && fn.apply(context, args);
       setTimeout(() => {
-        !isImmediate && fn.apply(context,args)
-        flag = true
-      },wait)
+        !isImmediate && fn.apply(context, args);
+        flag = true;
+      }, wait);
     }
-  }
+  };
 }
 
 Component({
@@ -24,11 +24,11 @@ Component({
   properties: {
     title: {
       type: String,
-      value: "",
+      value: '',
     },
     icon: {
       type: String,
-      value: "https://img.tanjiu.cn/home/DDDsrH7PpNhneQsXGFmGGPcSM3QYXG8N.png",
+      value: 'https://img.tanjiu.cn/home/DDDsrH7PpNhneQsXGFmGGPcSM3QYXG8N.png',
     },
     fileList: {
       type: Array,
@@ -40,16 +40,16 @@ Component({
     },
     uploadDesc: {
       type: String,
-      value: "",
+      value: '',
     },
     // ["album", "camera"]
     sourceType: {
       type: Array,
-      value: ["album", "camera"],
+      value: ['album', 'camera'],
     },
     fileType: {
       type: String,
-      value: "image",
+      value: 'image',
     },
     customUpload: {
       type: Boolean,
@@ -72,14 +72,45 @@ Component({
      */
     waterData: {
       type: Object | null,
-      value: null
+      value: null,
     },
   },
 
   /**
    * 组件的初始数据
    */
-  data: {},
+  data: {
+    tempFileList: [], // 临时文件列表
+  },
+  /**
+   * 初始化本地数据
+   */
+  observers: {
+    fileList: function (newVal, oldVal) {
+      const { tempFileList } = this.data;
+      newVal.forEach(url => {
+        const urlIndex = tempFileList.findIndex(item => {
+          // 获取文件后缀
+          const suffix = url.split('.').pop();
+          // 根据文件后缀判断视频还是照片
+          if (['mp4', 'mkv', 'avi', 'mov', 'flv'].includes(suffix)) {
+            item.fileType = 'video';
+          } else {
+            item.fileType = 'image';
+          }
+          // 取图片文件名对比
+          const fileName = item.url.split('/').pop();
+          return fileName.includes(url.split('/').pop());
+        });
+        if (urlIndex === -1) {
+          tempFileList.push({ url, updateStatus: 'success' });
+        }
+      });
+      this.setData({
+        tempFileList,
+      });
+    },
+  },
 
   /**
    * 组件的方法列表
@@ -98,137 +129,204 @@ Component({
     onDelete(e) {
       const url = e.currentTarget.dataset.url;
       const index = e.currentTarget.dataset.index;
-      this.properties.fileList.splice(index, 1);
-      this.triggerEvent("delete", {
-        fileList: this.properties.fileList,
-        url,
-        index,
+      let { tempFileList } = this.properties;
+      // 判断删除的本地临时文件还是后台图片
+      tempFileList.splice(index, 1);
+      this.setData({
+        tempFileList,
       });
+      if (!url.startsWith('http://tmp')) {
+        const fileList = tempFileList.map(item => item.url);
+        this.triggerEvent('delete', {
+          fileList,
+          url,
+          index,
+        });
+      }
     },
     // 上传成功
     onUploadSuccess(files, url) {
-      this.triggerEvent("upload", { fileList: files, url });
+      this.triggerEvent('upload', { fileList: files, url });
     },
     // 上传失败
     onUploadError(errMsg) {
-      this.triggerEvent("error", { errMsg });
+      this.triggerEvent('error', { errMsg });
+    },
+    /**
+     * 重新上传
+     * @param {*} e
+     */
+    reUpload(e) {
+      const reloadItem = e.currentTarget.dataset.item;
+      const url = reloadItem.url;
+      const { tempFileList } = this.data;
+      tempFileList.forEach(item => {
+        if (item.url === url) {
+          item.updateStatus = 'uploading';
+        }
+      });
+      this.setData({
+        tempFileList,
+      });
+      this.startUpload(reloadItem);
     },
     // 点击上传
-    startTakePhoto: _throttle(function (e) {
-      console.log("onStartTakePhoto", e);
-      const _this = this;
-      const {
-        customUpload,
-        uploadApi,
-        max,
-        sourceType,
-        fileList,
-        fileType,
-        waterData,
-      } = this.properties;
-      if (customUpload) {
-        this.triggerEvent("upload", {});
-        return;
-      }
-      if (!uploadApi || !uploadApi.url) {
-        wx.showToast({
-          title: "请传入上传接口",
-          icon: "error",
-        });
-        return;
-      }
-      // ios企微环境下不支持该API
-      const { platform, environment } = this.getSystemInfo();
-      console.log(platform, environment);
-      let chooseImgApi = (environment !== "wxwork" || platform !== "ios") ? wx.chooseMedia : fileType == 'video' ? wx.chooseVideo : wx.chooseImage;
-      chooseImgApi({
-        count: max - fileList.length,
-        mediaType: ["image"],
-        mediaType: fileType == "video" ? ["video"] : ["image"],
-        sizeType: ["compressed"],
-        sourceType,
-        success(res) {
-          console.log(res, "0000");
-          if (fileType == "video" && res.tempFiles[0].size / 1024 / 1024 > 100) {
-            // 视频上传不允许超过100M
-            wx.showToast({title: '视频大小不可超过100M', icon: "none"});
-            return;
-          }
-          // tempFilePath可以作为img标签的src属性显示图片
-          const tempFilePaths = res.tempFiles;
-          if (Array.isArray(tempFilePaths) && tempFilePaths.length) {
-            Promise.allSettled(
-              tempFilePaths.map((temp) =>
-                _this[waterData?'uploadWaterFile' : 'uploadImage_v'](temp.tempFilePath || temp.path, waterData)
-              )
-            ).then((uploadRes) => {
-              wx.hideLoading();
-              console.log("----uploadRes", uploadRes);
-              // 上传成功
-              const successUrls = uploadRes
-                .filter((result) => result.status == "fulfilled")
-                .map((result) => result.value);
-              if (successUrls.length) {
-                const files = fileList.concat(successUrls);
-                _this.onUploadSuccess(files, successUrls);
-              }
-              // 上传失败
-              const errorList = uploadRes.filter(
-                (result) => result.status == "rejected"
-              );
-              if (errorList.length) {
-                _this.onUploadError(errorList[0].value);
-              }
+    startTakePhoto: _throttle(
+      function (e) {
+        console.log('onStartTakePhoto', e);
+        const _this = this;
+        const { customUpload, uploadApi, max, sourceType, fileList, fileType, tempFileList } = this.properties;
+        if (customUpload) {
+          this.triggerEvent('upload', {});
+          return;
+        }
+        if (!uploadApi || !uploadApi.url) {
+          wx.showToast({
+            title: '请传入上传接口',
+            icon: 'error',
+          });
+          return;
+        }
+        // ios企微环境下不支持该API
+        const { platform, environment } = this.getSystemInfo();
+        console.log(platform, environment);
+        let chooseImgApi =
+          environment !== 'wxwork' || platform !== 'ios'
+            ? wx.chooseMedia
+            : fileType == 'video'
+              ? wx.chooseVideo
+              : wx.chooseImage;
+        chooseImgApi({
+          count: max - fileList.length,
+          mediaType: ['image'],
+          mediaType: fileType == 'video' ? ['video'] : ['image'],
+          sizeType: ['compressed'],
+          sourceType,
+          maxDuration: 60,
+          success(res) {
+            console.log(res, '0000');
+            let { tempFiles, tempFilePath } = res;
+            if (!tempFiles && !tempFilePath) {
+              return wx.showToast({ title: '文件读取失败', icon: 'none' });
+            }
+            // 兼容旧版本 wx.chooseVideo 返回的不是数组
+            if (!tempFiles) {
+              tempFiles = [res];
+            }
+            if (fileType == 'video' && res.tempFiles[0].size / 1024 / 1024 > 100) {
+              // 视频上传不允许超过100M
+              wx.showToast({ title: '视频大小不可超过100M', icon: 'none' });
+              return;
+            }
+            const newFileList = tempFiles.map((temp, index) => ({
+              url: temp.tempFilePath || temp.path,
+              name: temp.fileName || temp.name,
+              size: temp.size,
+              fileType: temp.fileType || temp.type,
+              updateStatus: 'uploading',
+              processText: '视频上传中',
+              id: temp.id || Date.now() + index,
+            }));
+            let showTempFiles = tempFileList.concat(newFileList);
+            _this.setData({
+              tempFileList: showTempFiles,
             });
-          }
-        },
-        fail(error) {
-          _this.onUploadError(error && error.errMsg);
-          console.log("-----选取失败", error && error.errMsg);
-        },
-      });
-    }, 1500, true),
+            // 校验是否需要打水印
+            newFileList.forEach(temp => {
+              _this.startUpload(temp);
+            });
+          },
+          fail(error) {
+            _this.onUploadError(error && error.errMsg);
+            console.log('-----选取失败', error && error.errMsg);
+          },
+        });
+      },
+      1500,
+      true
+    ),
     getSystemInfo() {
-      const environment = wx.getSystemInfoSync().environment || "wechat";
+      const environment = wx.getSystemInfoSync().environment || 'wechat';
       const platform = wx.getSystemInfoSync().platform;
       return {
         environment,
         platform,
       };
     },
+    /**
+     * 开始上传
+     */
+    async startUpload(temp) {
+      const _this = this;
+      const { waterData } = this.properties;
+      const { tempFileList = [] } = this.data;
+      _this[waterData ? 'uploadWaterFile' : 'uploadImage_v'](temp.url, waterData)
+        .then(({ url, tempFilePath }) => {
+          console.log('----uploadRes', url, temp);
+          url = url.replace('http://', 'https://');
+          url = url.replace('stsapp.oss-cn-hangzhou.aliyuncs.com', 'img.tanjiu.cn');
+
+          tempFileList.forEach(temp => {
+            if (temp.url == tempFilePath) {
+              temp.url = url;
+              temp.processText = '上传成功';
+              temp.updateStatus = 'success';
+            }
+          });
+          _this.setData({
+            tempFileList,
+          });
+          const files = tempFileList.map(temp => temp.url);
+          _this.onUploadSuccess(files, url);
+        })
+        .catch(({ url, tempFilePath }) => {
+          tempFileList.forEach(temp => {
+            if (temp.url == tempFilePath) {
+              temp.processText = '上传失败';
+              temp.updateStatus = 'failed';
+            }
+          });
+          _this.setData({
+            tempFileList,
+          });
+        });
+    },
     /** 上传水印照片 */
-    async uploadWaterFile(
-      path,
-      data = {},
-      url = "core/file/upload/multiV2",
-      baseUrl = "https://gateway.tanjiu.cn/",
-    ) {
+    async uploadWaterFile(path, data = {}, url = 'core/file/upload/multiV2', baseUrl = 'https://gateway.tanjiu.cn/') {
       return new Promise((reslove, reject) => {
         let fullUrl = baseUrl + url;
-        wx.showLoading("上传中");
         wx.uploadFile({
           url: fullUrl,
           filePath: path,
-          name: "file",
+          name: 'file',
           formData: data,
           header: {
-            "Content-Type": "multipart/form-data",
-            "wow-token": "c9fbecb5fdeecb78e8745db9225d88e1",
+            'Content-Type': 'multipart/form-data',
+            'wow-token': 'c9fbecb5fdeecb78e8745db9225d88e1',
           },
-          success: (res) => {
+          success: res => {
             let result = JSON.parse(res.data);
-            if (result.code == "0000") {
-              reslove(result.data[0]);
+            if (result.code == '0000') {
+              reslove({
+                url: result.data[0],
+                tempFilePath: path, // 原始文件路径
+              });
             } else {
-              reject(result.msg)
+              reject({
+                errMsg: result.msg,
+                tempFilePath: path,
+              });
             }
           },
-          fail: (err) => {
+          fail: err => {
             wx.showToast({
               title: '上传失败',
-              icon: "error",
-            })
-            reject(err);
+              icon: 'error',
+            });
+            reject({
+              errMsg: err.errMsg,
+              tempFilePath: path,
+            });
           },
         });
       });
@@ -237,15 +335,14 @@ Component({
     uploadImage_v(filePaths) {
       return new Promise((resolve, reject) => {
         const { url, fileDir, ...header } = this.properties.uploadApi;
-        wx.showLoading({title: "上传中", mask: true});
         utils.newHttp(
           url,
-          "GET",
+          'GET',
           {
-            dir: fileDir || "microComponents",
+            dir: fileDir || 'microComponents',
           },
           header,
-          (res) => {
+          res => {
             const { host, signature, accessKeyId, policy, dir } = res.data;
             if (host) {
               let path = filePaths;
@@ -253,40 +350,38 @@ Component({
               wx.uploadFile({
                 url: host,
                 filePath: filePaths,
-                name: "file",
+                name: 'file',
                 formData: {
-                  key: dir + "/" + name,
+                  key: dir + '/' + name,
                   policy,
-                  success_action_status: "200",
+                  success_action_status: '200',
                   OSSAccessKeyId: accessKeyId,
                   signature,
                 },
                 header: {
                   // "Content-Type": "multipart/form-data",
                 },
-                success: (res) => {
+                success: res => {
                   if (res.statusCode == 200) {
-                    let url = host + dir + "/" + name;
-                    resolve(url);
-                    // fileList.push(url);
-                    // _this.onUploadSuccess(url);
-                    // wx.showToast({
-                    // 	icon: "success",
-                    // 	title: "上传成功",
-                    // });
+                    let url = host + dir + '/' + name;
+                    resolve({
+                      url: url,
+                      tempFilePath: path, // 原始文件路径
+                    });
                   }
                 },
-                fail: (err) => {
-                  reject(err.errMsg || "网络错误，请重试");
-                  // _this.onUploadError(err.errMsg || "网络错误，请重试");
-                  // wx.showToast({
-                  // 	icon: "error",
-                  // 	title: err.errMsg || "网络错误，请重试",
-                  // });
+                fail: err => {
+                  reject({
+                    errMsg: err.errMsg || '网络错误，请重试',
+                    tempFilePath: path,
+                  });
                 },
               });
             } else {
-              reject(res.message);
+              reject({
+                errMsg: res.message || '网络错误，请重试',
+                tempFilePath: filePaths,
+              });
               // _this.onUploadError(res.message);
             }
           }

package/libs/xt-uploader/index.json

@@ -1,7 +1,5 @@
 {
     "component": true,
 	"styleIsolation": "apply-shared",
-	"usingComponents": {
-		"xt-icon": "../xt-icon/index"
-	}
+	"usingComponents": {}
 }

package/libs/xt-uploader/index.wxml

@@ -2,21 +2,52 @@
 <view class="xt-uploader">
   <view class="title_text" wx:if="{{title}}">{{title}}</view>
   <view class="file_box">
-    <view wx:for="{{fileList}}" wx:key="index" class="file_item">
-      <block wx:if="{{fileType == 'video'}}">
-        <video class="file_img" src="{{item}}" mode="aspectFill" data-url="{{item}}" data-index="{{index}}" />
-        <!-- 删除 -->
-        <image src="https://img.tanjiu.cn/home/idzQXfttSiQryeX3jYEfc5xjWhZPdwY4.png" class="close_box" mode="aspectFill" bindtap="onDelete" data-url="{{item}}" data-index="{{index}}" wx:if="{{!disabled}}"></image>
-      </block>
-      <block wx:else>
-        <image class="file_img" src="{{item}}" mode="aspectFit" bindtap="onPreviewImage" data-url="{{item}}" data-index="{{index}}" />
-        <!-- 删除 -->
-        <xt-icon icon="shanchu" size="48" class="close_box" bindtap="onDelete" data-url="{{item}}" data-index="{{index}}" wx:if="{{!disabled}}"></xt-icon>
-      </block>
+    <view wx:for="{{tempFileList}}" wx:key="index" class="file_wrap">
+      <view class="file_item">
+        <block wx:if="{{fileType == 'video'}}">
+          <video class="file_img" src="{{item.url}}" mode="aspectFill" data-url="{{item.url}}" data-index="{{index}}" />
+          <!-- 删除 -->
+          <image
+            src="https://img.tanjiu.cn/home/idzQXfttSiQryeX3jYEfc5xjWhZPdwY4.png"
+            class="close_box"
+            mode="aspectFill"
+            bindtap="onDelete"
+            data-url="{{item.url}}"
+            data-index="{{index}}"
+            wx:if="{{!disabled}}"
+          ></image>
+        </block>
+        <block wx:else>
+          <image class="file_img" src="{{item.url}}" mode="aspectFit" bindtap="onPreviewImage" data-url="{{item.url}}" data-index="{{index}}" />
+          <!-- 删除 -->
+          <image
+            src="https://img.tanjiu.cn/home/idzQXfttSiQryeX3jYEfc5xjWhZPdwY4.png"
+            class="close_box"
+            mode="aspectFill"
+            bindtap="onDelete"
+            data-url="{{item.url}}"
+            data-index="{{index}}"
+            wx:if="{{!disabled}}"
+          ></image>
+        </block>
+      </view>
+      <!-- 上传状态 -->
+      <view class="loading-progress" wx:if="{{item.updateStatus == 'uploading'}}">
+        <view class="progress-inner"></view>
+      </view>
+      <view class="upload-progress" wx:if="{{item.updateStatus == 'uploading'}}">{{item.fileType == 'video'? '视频':'照片'}}上传中</view>
+
+      <view class="upload-success" wx:elif="{{item.updateStatus == 'success'}}">
+        <image class="icon" src="https://img.tanjiu.cn/home/DziAN8B4eaB6r2h4WX7b55Zj6F4WW4Kn.png"></image> {{item.fileType == 'video'? '视频':'照片'}}上传成功
+      </view>
+      <view class="upload-failed" wx:elif="{{item.updateStatus == 'failed'}}">
+        <image class="icon" src="https://img.tanjiu.cn/home/dtBtxsJYcQbhnbcZN5hKCyiFkS3TFiHy.png"></image>
+        <view bind:tap="reUpload" data-item="{{item}}"> 上传失败，<text class="reupload">重新上传</text> </view>
+      </view>
     </view>
     <view class="file_item" wx:if="{{!disabled && fileList.length<max}}" bindtap="startTakePhoto">
       <image src="{{icon}}" class="camera_icon" />
       <view wx:if="{{uploadDesc}}" class="upload_desc">{{uploadDesc}}</view>
     </view>
   </view>
-</view>
+</view>

package/libs/xt-uploader/index.wxss

@@ -1,37 +1,38 @@
 /* src/xt-uploader/index.wxss */
 .xt-uploader {
-  background-color   : #fff;
+  background-color: #fff;
   /* padding         : 32rpx;
   padding-bottom     : 0; */
 }
 
 .title_text {
   line-height: 48rpx;
-  font-size  : 34rpx;
-  font-family: PingFang SC-Semibold,
+  font-size: 34rpx;
+  font-family:
+    PingFang SC-Semibold,
     PingFang SC;
-  font-weight  : 800;
-  color        : #000000;
+  font-weight: 800;
+  color: #000000;
   margin-bottom: 16rpx;
 }
 
 .file_box {
-  display  : flex;
+  display: flex;
   flex-wrap: wrap;
 }
 
 .file_item {
-  width           : 196rpx;
-  height          : 196rpx;
-  border-radius   : 8rpx;
-  overflow        : hidden;
-  position        : relative;
-  display         : flex;
-  flex-direction  : column;
-  justify-content : center;
-  align-items     : center;
-  background-color: #F5F5F5;
-  margin-bottom   : 16rpx;
+  width: 196rpx;
+  height: 196rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #f5f5f5;
+  margin-bottom: 16rpx;
   flex-shrink: 0;
 }
 
@@ -40,31 +41,98 @@
 }
 
 .camera_icon {
-  width : 80rpx;
+  width: 80rpx;
   height: 80rpx;
 }
 
 .file_img {
-  width : 196rpx;
+  width: 196rpx;
   height: 196rpx;
 }
 
 .close_box {
-  position   : absolute;
+  position: absolute;
   line-height: 48rpx;
-  width      : 48rpx;
-  height     : 48rpx;
-  top        : 0;
-  right      : 0;
-  color      : rgba(0, 0, 0, 0.5);
+  width: 48rpx;
+  height: 48rpx;
+  top: 0;
+  right: 0;
+  color: rgba(0, 0, 0, 0.5);
 }
 
 .upload_desc {
   line-height: 40rpx;
-  font-size  : 28rpx;
-  font-family: PingFang SC-Regular,
+  font-size: 28rpx;
+  font-family:
+    PingFang SC-Regular,
     PingFang SC;
   font-weight: 400;
-  color      : #727272;
-  margin-top : 8rpx;
-}
+  color: #727272;
+  margin-top: 8rpx;
+}
+
+.loading-progress {
+  width: 100%;
+  height: 20rpx;
+  background-color: #eee;
+  border-radius: 10rpx;
+  overflow: hidden;
+  position: relative;
+}
+.progress-inner {
+  height: 100%;
+  background-color: #6722ab;
+  width: 0;
+  border-radius: 10rpx 0 0 10rpx;
+  animation: loadProgress 20s forwards ease-in-out;
+}
+
+.upload-progress {
+  opacity: 0.8;
+  font-size: 28rpx;
+}
+
+.upload-success {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2rpx;
+  font-family:
+    PingFang SC,
+    PingFang SC;
+  font-weight: 600;
+  font-size: 18rpx;
+  color: #30bf67;
+  line-height: 26rpx;
+}
+
+.upload-success .icon {
+  width: 24rpx;
+  height: 24rpx;
+}
+
+.upload-failed {
+  font-family:
+    PingFang SC,
+    PingFang SC;
+  font-weight: 600;
+  font-size: 18rpx;
+  color: #ff4d4d;
+  line-height: 26rpx;
+  text-align: center;
+}
+.upload-failed .icon {
+  width: 24rpx;
+  height: 24rpx;
+}
+.reupload {
+  text-decoration: underline;
+}
+@keyframes loadProgress {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xtdev/xt-miniprogram-ui",
-  "version": "1.2.77",
+  "version": "1.2.79",
   "description": "",
   "miniprogram": "libs",
   "publishConfig": {