@xtdev/xt-miniprogram-ui 1.0.10 → 1.0.13

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,6 @@
+{
+    "component": true,
+    "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,44 @@
+# 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` |
+| upload-desc      | 上传文案说明 | `String` |
+| custom-upload      | 是否自定义上传,true 点击盒子触发upload | `Boolean` |
+| disabled   | 是否禁用，禁用时不能删除和上传,可预览  | `Boolean` |
+| sourceType   | 照片来源  | ["album", "camera"] |
+
+####Events
+
+| 事件名            | 说明          |  回调参数               |
+| ---------------- | ------------- | ---------------------- |
+| bind:upload      | 上传成功后触发，如果customUpload为true则点击上传及触发 | fileList:图片列表, url：当前上传图片地址 |
+| bind:delete      | 删除成功后触发 | fileList:图片列表, url：当前删除图片地址，index：当前删除图片索引 |

package/libs/xt-uploader/index.js

@@ -0,0 +1,150 @@
+// src/xt-uploader/index.js
+const utils = require("./utils");
+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: ["camera"],
+		},
+		customUpload: {
+			type: Boolean,
+			value: false,
+		},
+		disabled: {
+			type: Boolean,
+			value: false,
+		},
+	},
+
+	/**
+	 * 组件的初始数据
+	 */
+	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(url) {
+			this.triggerEvent("upload", { fileList: this.properties.fileList, url });
+		},
+		// 点击上传
+		startTakePhoto() {
+			const _this = this;
+			if (this.properties.customUpload) {
+				this.triggerEvent("upload", {});
+				return;
+			}
+			wx.chooseMedia({
+				count: 1,
+				mediaType: ["image"],
+				sizeType: ["compressed"],
+				sourceType: this.properties.sourceType,
+				success(res) {
+					console.log(res, "0000");
+					// tempFilePath可以作为img标签的src属性显示图片
+					const tempFilePaths = res.tempFiles[0].tempFilePath;
+					_this.uploadImage_v(tempFilePaths);
+				},
+				fail(error) {
+					wx.showToast({
+						title: error && error.errMsg,
+						icon: "none",
+					});
+				},
+			});
+		},
+		// 上传文件
+		uploadImage_v(filePaths) {
+			let _this = this;
+			const { fileList } = _this.properties;
+			wx.showLoading("图片上传中");
+			utils.newHttp(
+				"/core/file/oss/miniProgramPolicy",
+				"GET",
+				{
+					dir: "microComponents",
+				},
+				(res) => {
+					const { host, signature, accessKeyId, policy, dir } = res.data;
+					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",
+							"wow-token": "c9fbecb5fdeecb78e8745db9225d88e1",
+						},
+						success: (res) => {
+							if (res.statusCode == 200) {
+								let url = host + dir + "/" + name;
+								fileList.push(url);
+								_this.onUploadSuccess(url);
+								wx.showToast({
+									icon: "success",
+									title: "上传成功",
+								});
+							}
+						},
+						fail: (err) => {
+							wx.showToast({
+								icon: "error",
+								title: err.errMsg || "网络错误，请重试",
+							});
+						},
+					});
+				}
+			);
+		},
+	},
+});

package/libs/xt-uploader/index.json

@@ -0,0 +1,7 @@
+{
+	"component": true,
+	"styleIsolation": "isolated",
+	"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,67 @@
+/* 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   : 32rpx;
+}
+
+.file_item:not(:last-child) {
+  margin-right: 32rpx;
+}
+
+.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,73 @@
+// import md5 from "md5";
+
+function newhttpRequest(url, method, params, callBack, header) {
+	//change - gml  接口url拼接
+	var full_url = "https://gateway.tanjiu.cn" + url;
+	wx.request({
+		url: full_url,
+		method: method,
+		header: {
+			"content-type": "application/json",
+			// Authorization: md5(pass),
+			"ls-client-id": "TANJIUCLOUD_BUSINESS",
+			token: "openApi",
+			"x-login-session": JSON.stringify({ userId: "2022199" }),
+			...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: esult.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.0.10",
+  "version": "1.0.13",
   "description": "",
   "miniprogram": "libs",
   "publishConfig": {