From 3d824907a4b38ab6f66e6615b60bf5a29dbe1dba Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 02 Dec 2021 11:13:16 +0800
Subject: [PATCH] 调整公共文字颜色
---
forms/imagePicker/CImagePicker.vue | 64 ++++++++++++++++++++++++--------
1 files changed, 48 insertions(+), 16 deletions(-)
diff --git a/forms/imagePicker/CImagePicker.vue b/forms/imagePicker/CImagePicker.vue
index 7312a7f..09012bd 100644
--- a/forms/imagePicker/CImagePicker.vue
+++ b/forms/imagePicker/CImagePicker.vue
@@ -14,9 +14,10 @@
/>
<AtImagePicker
ref="picker"
- multiple
mode="aspectFit"
- :count="9"
+ :multiple="count > 1"
+ :count="count"
+ :showAddBtn="!selectedFull"
:length="3"
:files="files"
:onChange="(files,operationType,index)=>handleChange(files,operationType,index)"
@@ -31,7 +32,8 @@
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import { AtInput, AtImagePicker, AtCurtain } from 'taro-ui-vue';
-import { $fetcherCommon } from '@fetchers/FCommon';
+import { $fetchCommon } from '@fetchers/FCommon';
+import { Tools } from '@components/common/Tools';
import CImageCompressor from './CImageCompressor.vue';
import './cImagePicker.scss';
@@ -46,6 +48,11 @@
props: {
// 表单数据资源（表单组件内部机制专用）
itemRes: Object,
+ // 最大图片张数
+ count: {
+ type: Number,
+ default: 1,
+ },
},
data() {
return {};
@@ -59,17 +66,16 @@
} else if (Object.prototype.toString.call(value) === '[object Array]') {
files = value.map(url => ({ url }));
}
- files.push({ type: 'btn' });
return files;
+ },
+ selectedFull() {
+ return this.files.length >= this.count;
},
},
methods: {
- triggerChange(files) {
+ _triggerChange(files) {
const value = [];
files.forEach(file => {
- if (file.type === 'btn') {
- return;
- }
value.push(file.url);
});
this.itemRes.onChange(value);
@@ -77,14 +83,40 @@
handleChange(files, operationType, index) {
// 添加图片
if (operationType === 'add') {
- const needs = files
+ // 屏蔽其他格式
+ let nextFiles = files.filter(file => {
+ // 新添加
+ if (file.file && file.file.originalFileObj) {
+ if (
+ /image\/(gif|png|jpg|jpeg)/.test(
+ file.file.originalFileObj.type
+ )
+ ) {
+ return true;
+ } else {
+ Tools.toast('不支持的格式，请选择其他图片！');
+ return false;
+ }
+ }
+ // 非本次添加的图片
+ else {
+ return true;
+ }
+ });
+ // 限制数量
+ if (nextFiles.length > this.count) {
+ Tools.toast('最多只能选 ' + this.count + ' 张图片！');
+ nextFiles = nextFiles.splice(0, this.count);
+ }
+ // 检查是否需要压缩
+ const needs = nextFiles
.map((file, needIndex) => {
const fileInfo = file.file;
// 没有 file 信息对象，或者不是 blob 类型
if (!fileInfo || fileInfo.path.indexOf('blob') < 0) {
return false;
}
- // 尺寸小于 2M 的图片
+ // 尺寸小于 1M 的图片
if (fileInfo.size < 1 * 1024 * 1024) {
return false;
}
@@ -93,7 +125,7 @@
.filter(Boolean);
// 存在需要压缩的图片，一次性压缩
if (needs.length > 0) {
- const files2 = [...files];
+ const files2 = [...nextFiles];
const needPaths = needs.map(need => need[0].path);
this.$refs.compressor.$compress(needPaths, compressedFiles => {
compressedFiles.forEach((cpPath, cpIndex) => {
@@ -102,17 +134,17 @@
url: cpPath.compress,
};
});
- this.triggerChange(files2);
+ this._triggerChange(files2);
});
}
// 不存在，直接显示
else {
- this.triggerChange(files);
+ this._triggerChange(nextFiles);
}
}
// 删除图片，直接显示
else {
- this.triggerChange(files);
+ this._triggerChange(files);
}
},
handleImgView(index, file) {
@@ -137,7 +169,7 @@
});
},
$uploadImage(callback) {
- const url = $fetcherCommon.getUploadImgURL();
+ const url = $fetchCommon.getUploadImgURL();
const uploadTeam = [];
const imgs = [];
this.files.forEach(file => {
@@ -160,7 +192,7 @@
: res.data;
if (res2.state.code === 2000) {
resolve(
- $fetcherCommon.transImgPath(
+ $fetchCommon.transImgPath(
'fix',
res2.data.src
)
--
Gitblit v1.9.1