@xtdev/xt-miniprogram-ui 1.1.24 → 1.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,83 @@
1
+ // src/xt-form/index.js
2
+ Component({
3
+ /**
4
+ * 组件的属性列表
5
+ */
6
+ properties: {
7
+ item: {
8
+ type: Object,
9
+ value: {
10
+ key: '', // 必传,输入框的key值,唯一性
11
+ title: '', // 标题
12
+ value: '', // 展示的值
13
+ maxlength: -1, // 默认为-1
14
+ placeholder: '', // 输入框为空时占位符
15
+ // 输入框类型:input-普通输入框 select-选择框 inputBtn-带按钮 inputUnit-带单位
16
+ inputType: '',
17
+ unit: '', // 单位输入框的单位文案
18
+ btnText: '', // 按钮输入框的按钮文案
19
+ icon: '', // 带icon选择框,icon的链接地址
20
+ iconSize: '', // incon大小类型: big-定位或其它图标 small-右箭头
21
+ error: '', // 输入框下方的错误提示信息文案
22
+ showError: false, // 是否展示 error信息
23
+ type: '', // 输入框的输入类型, 非必传,不传则默认为文本
24
+ disabled: false,
25
+ backColor: '', // 背景色,默认#f5f5f5
26
+ }
27
+ },
28
+ },
29
+
30
+ /**
31
+ * 组件的初始数据
32
+ */
33
+ data: {
34
+ focus: false, // 是否聚焦
35
+ value: '', // 输入框的值
36
+ type: 'text', // 输入框的输入类型, 默认为文本
37
+ maxlength: -1, // 默认没有maxlength
38
+ disabled: false, // 默认不禁用
39
+ backColor: '#f5f5f5', // 默认灰色
40
+ },
41
+
42
+ /**
43
+ * 组件的方法列表
44
+ */
45
+ methods: {
46
+ onFocus() {
47
+ this.setData({
48
+ focus: true
49
+ })
50
+ },
51
+ onBlur(e) {
52
+ let item = e.currentTarget.dataset.item;
53
+ item.value = this.data.value;
54
+ this.setData({
55
+ focus: false
56
+ })
57
+ this.triggerEvent('onBlur', item);
58
+ },
59
+ onInputChange(e) {
60
+ let item = e.currentTarget.dataset.item;
61
+ this.setData({
62
+ value: e.detail.value
63
+ })
64
+ this.triggerEvent('onInputChange', item);
65
+ },
66
+ // 点击选择框
67
+ onOpenSelect(e) {
68
+ let item = e.currentTarget.dataset.item;
69
+ if (item.disabled) {
70
+ return;
71
+ }
72
+ this.triggerEvent('onOpenSelect', item);
73
+ },
74
+ // 点击输入框中的按钮
75
+ onBtnClick(e) {
76
+ let item = e.currentTarget.dataset.item;
77
+ if (item.disabled) {
78
+ return;
79
+ }
80
+ this.triggerEvent('onBtnClick', item);
81
+ },
82
+ }
83
+ })
@@ -0,0 +1,5 @@
1
+ {
2
+ "component": true,
3
+ "styleIsolation": "apply-shared",
4
+ "usingComponents": {}
5
+ }
@@ -0,0 +1,67 @@
1
+ <!-- 标题 -->
2
+ <view wx:if="{{item.title}}" class="xt-input-title {{focus?'title-hover': item.showError?'error-hover':''}}">{{item.title}}<text wx:if="{{item.require}}" class="require {{focus?'title-hover':''}}">*</text></view>
3
+ <!-- 默认输入框 -->
4
+ <input
5
+ wx:if="{{item.inputType === 'input'}}"
6
+ type="{{item.type || type}}"
7
+ value="{{item.value}}"
8
+ placeholder="{{item.placeholder}}"
9
+ bindfocus="onFocus"
10
+ bindblur="onBlur"
11
+ bindinput="onInputChange"
12
+ data-item="{{item}}"
13
+ disabled="{{item.disabled || disabled}}"
14
+ maxlength="{{item.maxlength || maxlength}}"
15
+ class="xt-input xt-default"
16
+ style="background-color: {{item.backColor || backColor}}"
17
+ />
18
+ <!-- 带单位输入框 -->
19
+ <view class="xt-input-div" style="background-color: {{item.backColor || backColor}}" wx:if="{{item.inputType === 'inputUnit'}}">
20
+ <input
21
+ type="{{item.type || type}}"
22
+ value="{{item.value}}"
23
+ placeholder="{{item.placeholder}}"
24
+ bindfocus="onFocus"
25
+ bindblur="onBlur"
26
+ bindinput="onInputChange"
27
+ data-item="{{item}}"
28
+ disabled="{{item.disabled || disabled}}"
29
+ maxlength="{{item.maxlength || maxlength}}"
30
+ class="xt-input-unit"
31
+ />
32
+ <view class="xt-inputunit-text">
33
+ {{item.unit}}
34
+ </view>
35
+ </view>
36
+ <!-- 带按钮输入框 -->
37
+ <view class="xt-input-div" style="background-color: {{item.backColor || backColor}}" wx:if="{{item.inputType === 'inputBtn'}}">
38
+ <input
39
+ value="{{item.value}}"
40
+ type="{{item.type || type}}"
41
+ placeholder="{{item.placeholder}}"
42
+ bindfocus="onFocus"
43
+ bindblur="onBlur"
44
+ bindinput="onInputChange"
45
+ data-item="{{item}}"
46
+ disabled="{{item.disabled || disabled}}"
47
+ maxlength="{{item.maxlength || maxlength}}"
48
+ class="xt-input-btn"
49
+ />
50
+ <view class="xt-inputbtn-text" bindtap="onBtnClick" data-item="{{item}}">
51
+ {{item.btnText}}
52
+ </view>
53
+ </view>
54
+ <!-- 选择框 -->
55
+ <view bindtap="onOpenSelect" data-item="{{item}}" class="xt-select {{item.iconSize}} " wx:if="{{item.inputType === 'select'}}">
56
+ <view class="xt-select-input {{item.value?'':'xt-placeholder'}}" style="background-color: {{item.backColor || backColor}}">
57
+ {{item.value?item.value:item.placeholder}}
58
+ </view>
59
+ <image wx:if="{{!item.disabled}}" class="xt-input-icon " src="{{item.icon}}"></image>
60
+ </view>
61
+ <!-- 错误提示 -->
62
+ <view class="error-div" wx:if="{{item.error && item.showError && !focus}}">
63
+ <image class='error-img' src="https://img.tanjiu.cn/home/B3xFaxewJHAJXmwErFFd3c8YhwjAdRcy.png" mode=""/>
64
+ <view class="error-text">{{item.error}}</view>
65
+ </view>
66
+ <!-- 自定义内容 -->
67
+ <slot></slot>
@@ -0,0 +1,141 @@
1
+ /* input:默认 开始 */
2
+ .xt-input-title {
3
+ font-size: 34rpx;
4
+ line-height: 48rpx;
5
+ font-weight: 800;
6
+ color: #000000;
7
+ margin-bottom: 16rpx;
8
+ }
9
+ .require {
10
+ color: #FF4D4D;
11
+ }
12
+ .title-hover {
13
+ color: #6622AA;
14
+ }
15
+ .error-hover {
16
+ color: #FF4D4D;
17
+ }
18
+
19
+ .xt-input {
20
+ width: 100%;
21
+ box-sizing: border-box;
22
+ font-size: 40rpx;
23
+ line-height: 56rpx;
24
+ border-radius: 12rpx;
25
+ }
26
+ .xt-default {
27
+ height: 96rpx;
28
+ padding: 0 16rpx;
29
+ }
30
+ /* input:带按钮或单位 */
31
+ .xt-input-div {
32
+ width: 100%;
33
+ display: flex;
34
+ align-items: center;
35
+ border-radius: 12rpx;
36
+ }
37
+ .xt-input-div input{
38
+ flex: 1;
39
+ }
40
+ .xt-input-btn {
41
+ height: 112rpx;
42
+ font-size: 40rpx;
43
+ line-height: 56rpx;
44
+ padding: 0 16rpx;
45
+ box-sizing: border-box;
46
+ }
47
+ .xt-inputbtn-text {
48
+ font-size: 34rpx;
49
+ line-height: 48rpx;
50
+ padding: 16rpx 32rpx;
51
+ box-sizing: border-box;
52
+ background-color: #6722AB;
53
+ color: white;
54
+ border-radius: 120rpx;
55
+ height: 80rpx;
56
+ margin-right: 24rpx;
57
+ font-weight: 800;
58
+ }
59
+ /* 单位 */
60
+ .xt-input-unit {
61
+ height: 96rpx;
62
+ font-size: 40rpx;
63
+ line-height: 56rpx;
64
+ padding: 0 16rpx;
65
+ box-sizing: border-box;
66
+ }
67
+ .xt-inputunit-text {
68
+ font-size: 40rpx;
69
+ line-height: 96rpx;
70
+ box-sizing: border-box;
71
+ color: #000000;
72
+ height: 96rpx;
73
+ margin-right: 32rpx;
74
+ }
75
+ /* select:开始 */
76
+ .xt-select {
77
+ position: relative;
78
+ width: 100%;
79
+ height: auto;
80
+ }
81
+ .xt-select-input {
82
+ width: 100%;
83
+ font-size: 40rpx;
84
+ line-height: 56rpx;
85
+ box-sizing: border-box;
86
+ border-radius: 12rpx;
87
+ }
88
+ .xt-placeholder {
89
+ color: #727272;
90
+ }
91
+ .xt-input-icon {
92
+ position: absolute;
93
+ top: 50%;
94
+ right: 16rpx;
95
+ transform: translate(0%, -50%);
96
+ }
97
+ /* 右边小图标 */
98
+ .small view{
99
+ padding: 20rpx 48rpx 20rpx 16rpx;
100
+ }
101
+ .small image{
102
+ width: 32rpx;
103
+ height: 32rpx;
104
+ }
105
+ /* 右边大图标 */
106
+ .big view{
107
+ padding: 20rpx 80rpx 20rpx 16rpx;
108
+ }
109
+ .big image{
110
+ width: 48rpx;
111
+ height: 48rpx;
112
+ }
113
+ /* select:结束 */
114
+ /* textarea */
115
+ .xt-textarea {
116
+ box-sizing: border-box;
117
+ width: 100%;
118
+ padding: 20rpx 16rpx;
119
+ font-size: 40rpx;
120
+ line-height: 56rpx;
121
+ border-radius: 12rpx;
122
+ /* min-height: 96rpx; */
123
+ }
124
+ /* */
125
+ .error-div {
126
+ display: flex;
127
+ }
128
+ .error-img {
129
+ width: 32rpx;
130
+ height: 32rpx;
131
+ margin-right: 8rpx;
132
+ margin-top: 14rpx;
133
+ }
134
+ .error-text {
135
+ font-size: 32rpx;
136
+ line-height: 44rpx;
137
+ color: #ff4d4d;
138
+ flex: 1;
139
+ margin-top: 8rpx;
140
+ word-break: break-all;
141
+ }
@@ -1,198 +1,215 @@
1
1
  // src/xt-uploader/index.js
2
2
  const utils = require("./utils");
3
3
  Component({
4
- /**
5
- * 组件的属性列表
6
- */
7
- properties: {
8
- title: {
9
- type: String,
10
- value: "",
11
- },
12
- fileList: {
13
- type: Array,
14
- value: [],
15
- },
16
- max: {
17
- type: Number,
18
- value: 9,
19
- },
20
- uploadDesc: {
21
- type: String,
22
- value: "",
23
- },
24
- // ["album", "camera"]
25
- sourceType: {
26
- type: Array,
27
- value: ["album", "camera"],
28
- },
29
- customUpload: {
30
- type: Boolean,
31
- value: false,
32
- },
33
- disabled: {
34
- type: Boolean,
35
- value: false,
36
- },
37
- uploadApi: {
38
- type: Object,
39
- value: {},
40
- },
41
- },
4
+ /**
5
+ * 组件的属性列表
6
+ */
7
+ properties: {
8
+ title: {
9
+ type: String,
10
+ value: "",
11
+ },
12
+ fileList: {
13
+ type: Array,
14
+ value: [],
15
+ },
16
+ max: {
17
+ type: Number,
18
+ value: 9,
19
+ },
20
+ uploadDesc: {
21
+ type: String,
22
+ value: "",
23
+ },
24
+ // ["album", "camera"]
25
+ sourceType: {
26
+ type: Array,
27
+ value: ["album", "camera"],
28
+ },
29
+ customUpload: {
30
+ type: Boolean,
31
+ value: false,
32
+ },
33
+ disabled: {
34
+ type: Boolean,
35
+ value: false,
36
+ },
37
+ uploadApi: {
38
+ type: Object,
39
+ value: {},
40
+ },
41
+ },
42
42
 
43
- /**
44
- * 组件的初始数据
45
- */
46
- data: {},
43
+ /**
44
+ * 组件的初始数据
45
+ */
46
+ data: {},
47
47
 
48
- /**
49
- * 组件的方法列表
50
- */
51
- methods: {
52
- // 预览
53
- onPreviewImage(e) {
54
- const url = e.target.dataset.url;
55
- // const index = e.target.dataset.index;
56
- wx.previewImage({
57
- urls: this.properties.fileList,
58
- current: url,
59
- });
60
- },
61
- // 删除
62
- onDelete(e) {
63
- const url = e.currentTarget.dataset.url;
64
- const index = e.currentTarget.dataset.index;
65
- this.properties.fileList.splice(index, 1);
66
- this.triggerEvent("delete", {
67
- fileList: this.properties.fileList,
68
- url,
69
- index,
70
- });
71
- },
72
- // 上传成功
73
- onUploadSuccess(files, url) {
74
- this.triggerEvent("upload", { fileList: files, url });
75
- },
76
- // 上传失败
77
- onUploadError(errMsg) {
78
- this.triggerEvent("error", { errMsg });
79
- },
80
- // 点击上传
81
- startTakePhoto() {
82
- const _this = this;
83
- const { customUpload, uploadApi, max, sourceType, fileList } =
84
- this.properties;
85
- if (customUpload) {
86
- this.triggerEvent("upload", {});
87
- return;
88
- }
89
- if (!uploadApi || !uploadApi.url) {
90
- wx.showToast({
91
- title: "请传入上传接口",
92
- icon: "error",
93
- });
94
- return;
95
- }
96
- wx.chooseMedia({
97
- count: max - fileList.length,
98
- mediaType: ["image"],
99
- sizeType: ["compressed"],
100
- sourceType,
101
- success(res) {
102
- console.log(res, "0000");
103
- // tempFilePath可以作为img标签的src属性显示图片
104
- const tempFilePaths = res.tempFiles;
105
- if (Array.isArray(tempFilePaths) && tempFilePaths.length) {
106
- Promise.allSettled(
107
- tempFilePaths.map((temp) =>
108
- _this.uploadImage_v(temp.tempFilePath)
109
- )
110
- ).then((uploadRes) => {
111
- wx.hideLoading();
112
- console.log("----uploadRes", uploadRes);
113
- // 上传成功
114
- const successUrls = uploadRes
115
- .filter((result) => result.status == "fulfilled")
116
- .map((result) => result.value);
117
- if (successUrls.length) {
118
- const files = fileList.concat(successUrls);
119
- _this.onUploadSuccess(files, successUrls);
120
- }
121
- // 上传失败
122
- const errorList = uploadRes.filter(
123
- (result) => result.status == "rejected"
124
- );
125
- if (errorList.length) {
126
- _this.onUploadError(errorList[0].value);
127
- }
128
- });
129
- }
130
- },
131
- fail(error) {
132
- _this.onUploadError(error && error.errMsg);
133
- console.log("-----选取失败", error && error.errMsg);
134
- },
135
- });
136
- },
137
- // 上传文件
138
- uploadImage_v(filePaths) {
139
- return new Promise((resolve, reject) => {
140
- const { url, fileDir, ...header } = this.properties.uploadApi;
141
- wx.showLoading("上传中");
142
- utils.newHttp(
143
- url,
144
- "GET",
145
- {
146
- dir: fileDir || "microComponents",
147
- },
148
- header,
149
- (res) => {
150
- const { host, signature, accessKeyId, policy, dir } = res.data;
151
- if (host) {
152
- let path = filePaths;
153
- let name = utils.random_string(32) + utils.get_suffix(path);
154
- wx.uploadFile({
155
- url: host,
156
- filePath: filePaths,
157
- name: "file",
158
- formData: {
159
- key: dir + "/" + name,
160
- policy,
161
- success_action_status: "200",
162
- OSSAccessKeyId: accessKeyId,
163
- signature,
164
- },
165
- header: {
166
- // "Content-Type": "multipart/form-data",
167
- },
168
- success: (res) => {
169
- if (res.statusCode == 200) {
170
- let url = host + dir + "/" + name;
171
- resolve(url);
172
- // fileList.push(url);
173
- // _this.onUploadSuccess(url);
174
- // wx.showToast({
175
- // icon: "success",
176
- // title: "上传成功",
177
- // });
178
- }
179
- },
180
- fail: (err) => {
181
- reject(err.errMsg || "网络错误,请重试");
182
- // _this.onUploadError(err.errMsg || "网络错误,请重试");
183
- // wx.showToast({
184
- // icon: "error",
185
- // title: err.errMsg || "网络错误,请重试",
186
- // });
187
- },
188
- });
189
- } else {
190
- reject(res.message);
191
- // _this.onUploadError(res.message);
192
- }
193
- }
194
- );
195
- });
196
- },
197
- },
48
+ /**
49
+ * 组件的方法列表
50
+ */
51
+ methods: {
52
+ // 预览
53
+ onPreviewImage(e) {
54
+ const url = e.target.dataset.url;
55
+ // const index = e.target.dataset.index;
56
+ wx.previewImage({
57
+ urls: this.properties.fileList,
58
+ current: url,
59
+ });
60
+ },
61
+ // 删除
62
+ onDelete(e) {
63
+ const url = e.currentTarget.dataset.url;
64
+ const index = e.currentTarget.dataset.index;
65
+ this.properties.fileList.splice(index, 1);
66
+ this.triggerEvent("delete", {
67
+ fileList: this.properties.fileList,
68
+ url,
69
+ index,
70
+ });
71
+ },
72
+ // 上传成功
73
+ onUploadSuccess(files, url) {
74
+ this.triggerEvent("upload", { fileList: files, url });
75
+ },
76
+ // 上传失败
77
+ onUploadError(errMsg) {
78
+ this.triggerEvent("error", { errMsg });
79
+ },
80
+ // 点击上传
81
+ startTakePhoto() {
82
+ const _this = this;
83
+ const {
84
+ customUpload,
85
+ uploadApi,
86
+ max,
87
+ sourceType,
88
+ fileList,
89
+ } = this.properties;
90
+ if (customUpload) {
91
+ this.triggerEvent("upload", {});
92
+ return;
93
+ }
94
+ if (!uploadApi || !uploadApi.url) {
95
+ wx.showToast({
96
+ title: "请传入上传接口",
97
+ icon: "error",
98
+ });
99
+ return;
100
+ }
101
+ // ios企微环境下不支持该API
102
+ const { platform, environment } = this.getSystemInfo();
103
+ console.log(platform, environment);
104
+ let chooseImgApi = (environment !== "wxwork" || platform !== "ios") ? wx.chooseMedia : wx.chooseImage;
105
+ chooseImgApi({
106
+ count: max - fileList.length,
107
+ mediaType: ["image"],
108
+ sizeType: ["compressed"],
109
+ sourceType,
110
+ success(res) {
111
+ console.log(res, "0000");
112
+ // tempFilePath可以作为img标签的src属性显示图片
113
+ const tempFilePaths = res.tempFiles;
114
+ if (Array.isArray(tempFilePaths) && tempFilePaths.length) {
115
+ Promise.allSettled(
116
+ tempFilePaths.map((temp) =>
117
+ _this.uploadImage_v(temp.tempFilePath || temp.path)
118
+ )
119
+ ).then((uploadRes) => {
120
+ wx.hideLoading();
121
+ console.log("----uploadRes", uploadRes);
122
+ // 上传成功
123
+ const successUrls = uploadRes
124
+ .filter((result) => result.status == "fulfilled")
125
+ .map((result) => result.value);
126
+ if (successUrls.length) {
127
+ const files = fileList.concat(successUrls);
128
+ _this.onUploadSuccess(files, successUrls);
129
+ }
130
+ // 上传失败
131
+ const errorList = uploadRes.filter(
132
+ (result) => result.status == "rejected"
133
+ );
134
+ if (errorList.length) {
135
+ _this.onUploadError(errorList[0].value);
136
+ }
137
+ });
138
+ }
139
+ },
140
+ fail(error) {
141
+ _this.onUploadError(error && error.errMsg);
142
+ console.log("-----选取失败", error && error.errMsg);
143
+ },
144
+ });
145
+ },
146
+ getSystemInfo() {
147
+ const environment = wx.getSystemInfoSync().environment || "wechat";
148
+ const platform = wx.getSystemInfoSync().platform;
149
+ return {
150
+ environment,
151
+ platform,
152
+ };
153
+ },
154
+ // 上传文件
155
+ uploadImage_v(filePaths) {
156
+ return new Promise((resolve, reject) => {
157
+ const { url, fileDir, ...header } = this.properties.uploadApi;
158
+ wx.showLoading("上传中");
159
+ utils.newHttp(
160
+ url,
161
+ "GET",
162
+ {
163
+ dir: fileDir || "microComponents",
164
+ },
165
+ header,
166
+ (res) => {
167
+ const { host, signature, accessKeyId, policy, dir } = res.data;
168
+ if (host) {
169
+ let path = filePaths;
170
+ let name = utils.random_string(32) + utils.get_suffix(path);
171
+ wx.uploadFile({
172
+ url: host,
173
+ filePath: filePaths,
174
+ name: "file",
175
+ formData: {
176
+ key: dir + "/" + name,
177
+ policy,
178
+ success_action_status: "200",
179
+ OSSAccessKeyId: accessKeyId,
180
+ signature,
181
+ },
182
+ header: {
183
+ // "Content-Type": "multipart/form-data",
184
+ },
185
+ success: (res) => {
186
+ if (res.statusCode == 200) {
187
+ let url = host + dir + "/" + name;
188
+ resolve(url);
189
+ // fileList.push(url);
190
+ // _this.onUploadSuccess(url);
191
+ // wx.showToast({
192
+ // icon: "success",
193
+ // title: "上传成功",
194
+ // });
195
+ }
196
+ },
197
+ fail: (err) => {
198
+ reject(err.errMsg || "网络错误,请重试");
199
+ // _this.onUploadError(err.errMsg || "网络错误,请重试");
200
+ // wx.showToast({
201
+ // icon: "error",
202
+ // title: err.errMsg || "网络错误,请重试",
203
+ // });
204
+ },
205
+ });
206
+ } else {
207
+ reject(res.message);
208
+ // _this.onUploadError(res.message);
209
+ }
210
+ }
211
+ );
212
+ });
213
+ },
214
+ },
198
215
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xtdev/xt-miniprogram-ui",
3
- "version": "1.1.24",
3
+ "version": "1.1.25",
4
4
  "description": "",
5
5
  "miniprogram": "libs",
6
6
  "publishConfig": {