@xtdev/xt-miniprogram-ui 1.2.60 → 1.2.61

package/libs/xt-toast/index.js

@@ -0,0 +1,85 @@
+// src/xt-toast/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+      show:{
+        type:Boolean,
+        value:false
+      },
+      type:{
+        type:String,
+        value:'nomal'
+      },
+      duration:{
+        type:Number,
+        value:5000
+      },
+      message:{
+        type:String,
+        value:''
+      },
+      navDuration:{
+        type:Number,
+        value:null
+      },
+      navUrl:{
+        type:String,
+        value:null
+      }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+      // 带跳转的toast是否允许自动消失
+      dispear: false
+    },
+    observers:{
+      show(val){
+        if(val){
+          this.showToast();
+        }
+      }
+    },
+    lifetimes:{
+      attached(){
+        // if(this.properties.type == 'nomal') this.showToast();
+        if(this.properties.type == 'navToast') this.showNavToast();
+      }
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+      // 常规toast
+      showToast(){
+        console.log('查看变量',this.properties.show);
+        wx.showToast({
+          title: this.properties.message,
+          duration: this.properties.duration,
+          icon:'none'
+        })
+      },
+      // 带跳转的提示
+      showNavToast(){
+        if(this.properties.navDuration){
+          setTimeout(()=>{
+            this.setData({
+              dispear: true
+            })
+          },this.properties.navDuration)
+        }
+      },
+      // 点击提示框跳转至目标页面
+      navTo(){
+        if(this.properties.navUrl){
+          wx.navigateTo({
+            url: this.properties.navUrl,
+          })
+        }
+      }
+    }
+})

package/libs/xt-toast/index.json

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

package/libs/xt-toast/index.wxml

@@ -0,0 +1,6 @@
+<!--src/xt-toast/index.wxml-->
+<!-- 带跳转的提示 -->
+<view class="nav_toast_box" wx:if="{{type === 'navToast'}}" style="{{dispear?'opacity: 0;':''}}" catchtap="navTo">
+  <view class="nav_toast_text">{{message}}</view>
+   <xt-icon class="nav_icon" slot="right-icon" icon="arrow" size="32"></xt-icon>
+</view>

package/libs/xt-toast/index.wxss

@@ -0,0 +1,27 @@
+/* src/xt-toast/index.wxss */
+.nav_toast_box{
+  /* position: absolute; */
+  /* left: 50%; */
+  /* margin-left: -351rpx; */
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #FCE1D4;
+  border-radius: 8rpx;
+  padding: 20rpx 24rpx;
+  box-sizing: border-box;
+  transition:all 0.3s linear;
+}
+.nav_toast_text{
+  width: 598rpx;
+  box-sizing: border-box;
+  line-height: 40rpx;
+  font-size: 28rpx;
+  font-family: PingFang SC-Semibold, PingFang SC;
+  color: #F26B27;
+}
+.nav_icon{
+  color: #F26B27;
+  margin-left: 24rpx;
+}

package/libs/xt-uploader/README.md

@@ -0,0 +1,46 @@
+# Icon图标
+
+### 介绍
+用于表单列表上传图片
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/p4fiMjw3F7ssMNhQxafHCnsn8ZZ8m67Q.png "列表uploader效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-uploader": "@xtdev/xt-miniprogram-ui/xt-uploader",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```
+<xt-uploader title="标题标题"></xt-uploader>
+```
+
+##API
+
+####xt-uploader props
+
+| 参数        | 说明         |  类型      |  默认值
+| ----------- | ----------- | ---------- |  --------  |
+| fileList      | 图片列表，必传，受控组件 | Array<String> | `[]`
+| title      | 表单标题 | string |
+| max      | 上传最大值，每次可选照片数，默认为9 | number | 9
+| upload-desc      | 上传文案说明 | `String` |
+| custom-upload      | 是否自定义上传,true 点击盒子触发upload | boolean | `false`
+| disabled   | 是否禁用，禁用时不能删除和上传,可预览  | boolean |  `false`
+| sourceType   | 照片来源  | `Array<String>` | ["album", "camera"]
+| upload-api   | 组件库放公网，上传接口api，必传  | {url: 'https://...',fileDir: 'microComponents'} |
+
+####Events
+
+| 事件名            | 说明          |  回调参数               |
+| ---------------- | ------------- | ---------------------- |
+| bind:upload      | 上传成功后触发，如果customUpload为true则点击上传及触发 | fileList:图片列表, url：当前上传图片地址 |
+| bind:delete      | 删除成功后触发 | fileList:图片列表, url：当前删除图片地址，index：当前删除图片索引 |
+| bind:error      | 上传失败后触发 | errMsg: 失败原因 |

package/libs/xt-uploader/index.js

@@ -0,0 +1,233 @@
+// src/xt-uploader/index.js
+const utils = require("./utils");
+// 节流函数
+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)
+      setTimeout(() => {
+        !isImmediate && fn.apply(context,args)
+        flag = true
+      },wait)
+    }
+  }
+}
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    title: {
+      type: String,
+      value: "",
+    },
+    fileList: {
+      type: Array,
+      value: [],
+    },
+    max: {
+      type: Number,
+      value: 9,
+    },
+    uploadDesc: {
+      type: String,
+      value: "",
+    },
+    // ["album", "camera"]
+    sourceType: {
+      type: Array,
+      value: ["album", "camera"],
+    },
+    customUpload: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    uploadApi: {
+      type: Object,
+      value: {},
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 预览
+    onPreviewImage(e) {
+      const url = e.target.dataset.url;
+      // const index = e.target.dataset.index;
+      wx.previewImage({
+        urls: this.properties.fileList,
+        current: url,
+      });
+    },
+    // 删除
+    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,
+      });
+    },
+    // 上传成功
+    onUploadSuccess(files, url) {
+      this.triggerEvent("upload", { fileList: files, url });
+    },
+    // 上传失败
+    onUploadError(errMsg) {
+      this.triggerEvent("error", { errMsg });
+    },
+    // 点击上传
+    startTakePhoto: _throttle(function (e) {
+      console.log("onStartTakePhoto", e);
+      const _this = this;
+      const {
+        customUpload,
+        uploadApi,
+        max,
+        sourceType,
+        fileList,
+      } = 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 : wx.chooseImage;
+      chooseImgApi({
+        count: max - fileList.length,
+        mediaType: ["image"],
+        sizeType: ["compressed"],
+        sourceType,
+        success(res) {
+          console.log(res, "0000");
+          // tempFilePath可以作为img标签的src属性显示图片
+          const tempFilePaths = res.tempFiles;
+          if (Array.isArray(tempFilePaths) && tempFilePaths.length) {
+            Promise.allSettled(
+              tempFilePaths.map((temp) =>
+                _this.uploadImage_v(temp.tempFilePath || temp.path)
+              )
+            ).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);
+              }
+            });
+          }
+        },
+        fail(error) {
+          _this.onUploadError(error && error.errMsg);
+          console.log("-----选取失败", error && error.errMsg);
+        },
+      });
+    }, 1500, true),
+    getSystemInfo() {
+      const environment = wx.getSystemInfoSync().environment || "wechat";
+      const platform = wx.getSystemInfoSync().platform;
+      return {
+        environment,
+        platform,
+      };
+    },
+    // 上传文件
+    uploadImage_v(filePaths) {
+      return new Promise((resolve, reject) => {
+        const { url, fileDir, ...header } = this.properties.uploadApi;
+        wx.showLoading({title: "上传中", mask: true});
+        utils.newHttp(
+          url,
+          "GET",
+          {
+            dir: fileDir || "microComponents",
+          },
+          header,
+          (res) => {
+            const { host, signature, accessKeyId, policy, dir } = res.data;
+            if (host) {
+              let path = filePaths;
+              let name = utils.random_string(32) + utils.get_suffix(path);
+              wx.uploadFile({
+                url: host,
+                filePath: filePaths,
+                name: "file",
+                formData: {
+                  key: dir + "/" + name,
+                  policy,
+                  success_action_status: "200",
+                  OSSAccessKeyId: accessKeyId,
+                  signature,
+                },
+                header: {
+                  // "Content-Type": "multipart/form-data",
+                },
+                success: (res) => {
+                  if (res.statusCode == 200) {
+                    let url = host + dir + "/" + name;
+                    resolve(url);
+                    // fileList.push(url);
+                    // _this.onUploadSuccess(url);
+                    // wx.showToast({
+                    // 	icon: "success",
+                    // 	title: "上传成功",
+                    // });
+                  }
+                },
+                fail: (err) => {
+                  reject(err.errMsg || "网络错误，请重试");
+                  // _this.onUploadError(err.errMsg || "网络错误，请重试");
+                  // wx.showToast({
+                  // 	icon: "error",
+                  // 	title: err.errMsg || "网络错误，请重试",
+                  // });
+                },
+              });
+            } else {
+              reject(res.message);
+              // _this.onUploadError(res.message);
+            }
+          }
+        );
+      });
+    },
+  },
+});

package/libs/xt-uploader/index.json

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

package/libs/xt-uploader/index.wxml

@@ -0,0 +1,15 @@
+<!-- src/xt-uploader/index.wxml -->
+<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">
+      <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>
+    </view>
+    <view class="file_item" wx:if="{{!disabled && fileList.length<max}}" bindtap="startTakePhoto">
+      <image src="https://img.tanjiu.cn/home/DDDsrH7PpNhneQsXGFmGGPcSM3QYXG8N.png" class="camera_icon" />
+      <view wx:if="{{uploadDesc}}" class="upload_desc">{{uploadDesc}}</view>
+    </view>
+  </view>
+</view>

package/libs/xt-uploader/index.wxss

@@ -0,0 +1,68 @@
+/* src/xt-uploader/index.wxss */
+.xt-uploader {
+  background-color   : #fff;
+  /* padding         : 32rpx;
+  padding-bottom     : 0; */
+}
+
+.title_text {
+  line-height: 48rpx;
+  font-size  : 34rpx;
+  font-family: PingFang SC-Semibold,
+    PingFang SC;
+  font-weight  : 800;
+  color        : #000000;
+  margin-bottom: 16rpx;
+}
+
+.file_box {
+  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;
+  flex-shrink: 0;
+}
+
+.file_item:not(:last-child) {
+  margin-right: 16rpx;
+}
+
+.camera_icon {
+  width : 80rpx;
+  height: 80rpx;
+}
+
+.file_img {
+  width : 196rpx;
+  height: 196rpx;
+}
+
+.close_box {
+  position   : absolute;
+  line-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,
+    PingFang SC;
+  font-weight: 400;
+  color      : #727272;
+  margin-top : 8rpx;
+}

package/libs/xt-uploader/utils.js

@@ -0,0 +1,69 @@
+// import md5 from "md5";
+
+function newhttpRequest(url, method, params, header, callBack) {
+	wx.request({
+		url,
+		method: method,
+		header: {
+			"content-type": "application/json",
+			// Authorization: md5(pass),
+			token: "openApi",
+			...header,
+		},
+		data: params,
+		success(res) {
+			if (res.data) {
+				var result = {
+					data: res.data.data || res.data.retdata || res,
+					message: res.data.message || res.data.errMsg,
+					code:
+						res.data.code ||
+						res.data.errCode ||
+						(res.data.code == 0 || res.data.errCode == 0 ? 0 : null),
+				};
+				callBack(result);
+			}
+		},
+		fail(err) {
+			var result = {
+				success: false,
+				data: {},
+				message: err.errMsg || err.msg,
+			};
+			wx.showToast({
+				title: result.message || "请检查网络是否通畅，稍后重试！",
+				icon: "none",
+			});
+			console.log("err = ", err);
+			callBack(result);
+		},
+	});
+}
+
+function random_string(len) {
+	len = len || 32;
+	let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
+	let maxPos = chars.length;
+	let pwd = "";
+	for (let i = 0; i < len; i++) {
+		pwd += chars.charAt(Math.floor(Math.random() * maxPos));
+	}
+	return pwd;
+}
+
+// 解密
+function get_suffix(filename) {
+	console.log(filename, "filename");
+	let pos = filename.lastIndexOf(".");
+	let suffix = "";
+	if (pos != -1) {
+		suffix = filename.substring(pos);
+	}
+	return suffix;
+}
+
+module.exports = {
+	newHttp: newhttpRequest,
+	random_string,
+	get_suffix,
+};

package/package.json

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