@xtdev/xt-miniprogram-ui 1.0.10 → 1.0.12

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-tag props
+
+| 参数      | 说明 |  类型 |
+| ----------- | ----------- | ---------- |
+| fileList      | 图片列表，必传，受控组件 | `Array<String>` |
+| title      | 表单标题 | `String` |
+| max      | 上传最大值，默认为9 | `Number` |
+| uploadDesc      | 上传文案说明 | `String` |
+| customUpload      | 是否自定义上传,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
+import utils from "./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?.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,6 @@
+{
+	"component": true,
+	"usingComponents": {
+		"xt-icon": "../xt-icon/index"
+	}
+}

package/libs/xt-uploader/index.wxml

@@ -0,0 +1,16 @@
+<!-- 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}}" />
+      <view class="close_box" bindtap="onDelete" data-url="{{item}}" data-index="{{index}}" wx:if="{{!disabled}}">
+        <xt-icon icon="shanchu" size="48"></xt-icon>
+      </view>
+    </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,66 @@
+/* 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;
+  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,164 @@
+// import md5 from "md5";
+
+function newhttpV1(url, method, params, callBack, header) {
+	var timestamp = Date.parse(new Date());
+	var date = new Date(timestamp);
+	//获取年份
+	var Y = date.getFullYear();
+	//获取月份
+	var M =
+		date.getMonth() + 1 < 10
+			? "0" + (date.getMonth() + 1)
+			: date.getMonth() + 1;
+	//获取当日日期
+	var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+	var currentDate = Y + "-" + M + "-" + D;
+
+	//后端验证授权的字符串
+	var pass =
+		"MIIBOjANBgkqhkiG9w0BAQEFAAOCAScAMIIBIgKCARkA2a6BXaPViAbEvAPn3qtB" +
+		currentDate;
+
+	//change - gml  接口url拼接
+	var full_url = "https://gateway.tanjiu.cn" + url;
+	// 请求的唯一性
+	let onlySign = url + JSON.stringify(params);
+	if (getApp().hasQKey(onlySign)) {
+		return;
+	}
+	wx.request({
+		url: full_url,
+		method: method,
+		header: {
+			"content-type": "application/json",
+			// Authorization: md5(pass),
+			"ls-client-id": "TANJIUCLOUD_BUSINESS",
+			token: "openApi",
+			// xtoken: getApp().globalData?.xtoken,
+			"x-login-session": JSON.stringify({ userId: "2022199" }),
+			// xtoken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOjc0NDkwMjM1NjQ2MjMzODA0OCwicm5TdHIiOiJoT3ZoUVVxMjM3SUtDelpPN0dXb09jdnA2ZGdIV1g2byIsImF1dGhUb2tlbkJvIjp7Imd1aWQiOjc0NDkwMjM1NjQ2MjMzODA0OCwicGxhdGZvcm1Vc2VySWQiOjE1NTYwODA3ODE0Mjg1NzIxNiwiYXBwQ29kZSI6IlRBTl9TQUxFU01BTiIsInBsYXRmb3JtQ2xpZW50VHlwZSI6IldFQ0hBVF9BUFBMRVRTIiwicGxhdGZvcm1DbGllbnRDb2RlIjoiV0VDSEFUX0FQUExFVFNfVEFOX1NBTEVTTUFOIiwid2VhdmVyVXNlck5hbWUiOiJlbnRlcnByaXNlX3dlY2hhdF8zNl94dXp1byIsInRlbmFudElkIjoxLCJlbnYiOiJ0ZXN0In0sIm9wZW5pZCI6Im9mODFMNU9jVGduMHNnRDBKQlpTZFpRcnZ4ZlEiLCJ1bmlvbmlkIjoib3BVLUQwb1E4RjBQUTY0NnpSREpIRG1sMzJMQSIsImlhdCI6MTY3NjQ1MzQ1OTE3NiwiZXhwIjoxNjc3MDU4MjU5MTc2LCJ0b2tlbklkIjoiZmQ0M2U0MjIxYjJjNDVkN2EyYWJhNTdkZTNhNGY1NmEifQ.weXKWnX7sWmL7f1s2a2MuOKZd5Yw8elzrG824JY0R-4',
+			...header,
+		},
+		data: params,
+		success(res) {
+			if (res.data) {
+				var result = {
+					data: res.data.data,
+					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 || err.message,
+			};
+			wx.showToast({
+				title: esult.message || "请检查网络是否通畅，稍后重试！",
+				icon: "none",
+			});
+			console.log("err = ", err);
+			callBack(result);
+		},
+		complete() {
+			getApp().delQKey(onlySign);
+		},
+	});
+	getApp().createQKey(onlySign);
+}
+
+function newhttpRequest(url, method, params, callBack, header) {
+	var timestamp = Date.parse(new Date());
+	var date = new Date(timestamp);
+	//获取年份
+	var Y = date.getFullYear();
+	//获取月份
+	var M =
+		date.getMonth() + 1 < 10
+			? "0" + (date.getMonth() + 1)
+			: date.getMonth() + 1;
+	//获取当日日期
+	var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+	var currentDate = Y + "-" + M + "-" + D;
+
+	//后端验证授权的字符串
+	var pass =
+		"MIIBOjANBgkqhkiG9w0BAQEFAAOCAScAMIIBIgKCARkA2a6BXaPViAbEvAPn3qtB" +
+		currentDate;
+
+	//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;
+}
+
+export default {
+	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.12",
   "description": "",
   "miniprogram": "libs",
   "publishConfig": {