@xtdev/xt-miniprogram-ui 1.0.9 → 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,10 +1,7 @@
 {
   "name": "@xtdev/xt-miniprogram-ui",
-  "version": "1.0.9",
+  "version": "1.0.12",
   "description": "",
-  "bin": {
-    "xt-page-cli": "bin/index.js"
-  },
   "miniprogram": "libs",
   "publishConfig": {
     "access": "public",
@@ -12,16 +9,13 @@
   },
   "files": [
     "libs",
-    "bin",
-    "template",
     "README.md"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "gulp",
     "build": "gulp build",
-    "release": "yarn version --patch && yarn build && npm publish --access public --registry=https://registry.npmjs.org",
-    "cli:demo": "xt-page-cli create list"
+    "release": "yarn version --patch && yarn build && npm publish --access public --registry=https://registry.npmjs.org"
   },
   "repository": {
     "type": "git",
@@ -30,15 +24,12 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "chalk": "^4.0.0",
-    "commander": "^10.0.1",
     "del": "^3.0.0",
     "gulp": "^4.0.2",
     "gulp-changed": "^4.0.3",
     "gulp-clean": "^0.4.0",
     "gulp-json-transform": "^0.4.8",
-    "gulp-rename": "^2.0.0",
-    "mkdirp": "^3.0.1"
+    "gulp-rename": "^2.0.0"
   },
   "dependencies": {}
 }

package/bin/index.js

@@ -1,62 +0,0 @@
-#!/usr/bin/env node
-
-const program = require('commander');
-const path = require('path');
-const chalk = require('chalk');
-const mkdirp = require('mkdirp');
-const { readFileSync, existsSync, readdirSync, statSync, createReadStream, createWriteStream, writeFileSync } = require('fs');
-chalk.enabled = true
-/**
- * 拷贝文件夹下的文件到指定位置
- * @param {*} sourceDir 
- * @param {*} destDir 
- */
-function copyFiles(sourceDir, destDir) {
-  // 确保目标文件夹存在，如果不存在则创建它
-  mkdirp.sync(destDir);
-  const filenames = readdirSync(sourceDir);
-  filenames.forEach(function (filename) {
-    const sourceFile = path.join(sourceDir, filename);
-    const destFile = path.join(destDir, filename);
-    const stat = statSync(sourceFile);
-    if (stat.isDirectory()) {
-      // 如果当前文件是一个文件夹，则递归拷贝该文件夹下所有文件
-      copyFiles(sourceFile, destFile);
-    } else {
-      // 如果当前文件是一个普通文件，则复制文件到目标文件夹
-      const reader = createReadStream(sourceFile);
-      const writer = createWriteStream(destFile);
-      reader.pipe(writer);
-    }
-  });
-}
-// 新增创建
-program.command('create <template-name>')
-  .description('根据模板名称，快速构建页面模板')
-  .action(async (templateName) => {
-    console.log('🎉 开始构建');
-    if (!templateName) {
-      console.error(chalk.red.dim('请填写模板名称'));
-      return;
-    }
-    // const tempFolder = `/template/${templateName}`;
-    const tempFolder = path.join(__dirname, '..', `./template/${templateName}`);
-    console.log(tempFolder);
-    const tempExist = existsSync(`${tempFolder}/index.js`);
-    if (!tempExist) {
-      console.error(chalk.red.dim('请填写正确的模板名称'));
-      return;
-    }
-    console.log('📋 开始拷贝');
-    copyFiles(tempFolder, process.cwd());
-    console.log('✅ 拷贝完成');
-    console.log('🔄 更改json引入路径');
-    const jsonPath = path.join(process.cwd(), './index.json');
-    // 延迟一秒读取文件
-    await new Promise(resolve => setTimeout(resolve, 1000))
-    const data = readFileSync(jsonPath);
-    const result = data.toString('utf-8').replace(/\.\.\/\.\.\/libs/g, '@xtdev/xt-miniprogram-ui');
-    writeFileSync(jsonPath, result, 'utf-8');
-    console.log('🎉 创建完成');
-  });
-program.parse(process.argv);

package/template/list/index.js

@@ -1,81 +0,0 @@
-// template/index.js
-Page({
-
-    /**
-     * 页面的初始数据
-     */
-    data: {
-        page: {
-            isLoading: false,
-            size: 10,
-            over: false,
-            curPage: 0
-        },
-        list: []
-    },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad(options) {
-        this.getListData();
-    },
-    handleSearch(e) {
-        console.log(e.detail);
-        this.setData({
-            page: {
-                isLoading: false,
-                size: 10,
-                over: false,
-                curPage: 0
-            }
-        })
-        this.getListData(true);
-    },
-    async getListData(refresh = false) {
-        const { isLoading, curPage, size } = this.data.page;
-        if (isLoading) return;
-        wx.showLoading();
-        this.setData({
-            'page.isLoading': true,
-            'page.curPage': curPage + 1
-        })
-        // 模拟接口请求，开发请切换成真实数据
-        const data = await new Promise(resolve => {
-            setTimeout(() => {
-                const temp = new Array(size).fill(1).map(num => ({
-                    title: '北京老布鞋烟酒店',
-                    subTitle: '合作中',
-                    subTitleColor: '#6722ab',
-                    state: 20,
-                    dataList: [{
-                        label: '店老板名称',
-                        valueType: 'text',
-                        value: '张三',
-                    }, {
-                        label: '联系电话',
-                        valueType: 'tel',
-                        value: '18080166584',
-                    }, {
-                        label: '报销金',
-                        valueType: 'text',
-                        value: '3000元',
-                    }]
-                }));
-                resolve(temp);
-            }, 2000);
-        })
-        const list = refresh ? data : this.data.list.concat(data);
-        this.setData({
-            list,
-            'page.isLoading': false,
-            'page.over': list.length > 10
-        })
-        wx.hideLoading();
-    },
-    onReachBottom() {
-        if (!this.data.page.over) {
-            this.getListData();
-        }
-    }
-})

package/template/list/index.json

@@ -1,6 +0,0 @@
-{
-    "usingComponents": {
-        "xt-card-cell": "../../libs/xt-card-cell",
-        "xt-search": "../../libs/xt-search"
-    }
-}

package/template/list/index.wxml

@@ -1,17 +0,0 @@
-<view class="search-content">
-  <xt-search bind:onSearch="handleSearch"></xt-search>
-</view>
-<view wx:for="{{list}}" wx:key="id">
-  <xt-card-cell item="{{item}}">
-    <view slot="card-footer">
-      <!-- 列表按钮 -->
-      <view class="footer">
-        <view class="default-btn">
-          查看详情
-        </view>
-      </view>
-    </view>
-  </xt-card-cell>
-</view>
-<view wx:if="{{page.over}}" class="bottom-tips">没有更多数据</view>
-<view wx:elif="{{page.isLoading && list.length}}" class="bottom-tips">加载中...</view>

package/template/list/index.wxss

@@ -1,24 +0,0 @@
-page{
-    background-color: #f2f2f2;
-    padding: 24rpx;
-    box-sizing: border-box;
-}
-.search-content{
-    margin-bottom: 24rpx;
-}
-.default-btn {
-    display: inline-block;
-    color: #6722AB;
-    border: 2rpx solid #6722AB;
-    box-sizing: border-box;
-    border-radius: 120rpx;
-    margin-top: 32rpx;
-    font-size: 34rpx;
-    line-height: 48rpx;
-    font-weight: 800;
-    padding: 16rpx 32rpx;
-}
-.bottom-tips{
-    text-align: center;
-    padding: 20px;
-}