From 8726e3080bd889ea67ceb26f9ca7039025e20452 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 08 Jul 2021 17:16:51 +0800
Subject: [PATCH] 实现页面间通讯公共模块
---
forms/imagePicker/CImagePicker.vue | 87 ++++++++++++++++++++++++++++++-------------
1 files changed, 61 insertions(+), 26 deletions(-)
diff --git a/forms/imagePicker/CImagePicker.vue b/forms/imagePicker/CImagePicker.vue
index c3f7ff5..108a27a 100644
--- a/forms/imagePicker/CImagePicker.vue
+++ b/forms/imagePicker/CImagePicker.vue
@@ -23,43 +23,32 @@
:onFail="evt=>handleFail(evt)"
:onImageClick="(index, file)=>handleImgView(index,file)"
/>
- <AtCurtain
- class="c-image-picker-view"
- closeBtnPosition="top-right"
- :isOpened="showImg"
- :onClose="evt=>handleImgClose()"
- >
- <image
- class="img"
- mode="aspectFit"
- :src="curtainImg"
- />
- </AtCurtain>
+ <CImageCompressor ref="compressor" />
</view>
</template>
<script>
-import { $ } from '@tarojs/extend';
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 CImageCompressor from './CImageCompressor.vue';
import './cImagePicker.scss';
export default {
name: 'CImagePicker',
components: {
+ CImageCompressor,
AtInput,
AtImagePicker,
AtCurtain,
},
props: {
+ // 表单数据资源（表单组件内部机制专用）
itemRes: Object,
},
data() {
- return {
- showImg: false,
- curtainImg: '',
- };
+ return {};
},
computed: {
files() {
@@ -75,7 +64,7 @@
},
},
methods: {
- handleChange(files, operationType, index) {
+ triggerChange(files) {
const value = [];
files.forEach(file => {
if (file.type === 'btn') {
@@ -85,14 +74,61 @@
});
this.itemRes.onChange(value);
},
+ handleChange(files, operationType, index) {
+ // 添加图片
+ if (operationType === 'add') {
+ const needs = files
+ .map((file, needIndex) => {
+ const fileInfo = file.file;
+ // 没有 file 信息对象，或者不是 blob 类型
+ if (!fileInfo || fileInfo.path.indexOf('blob') < 0) {
+ return false;
+ }
+ // 尺寸小于 2M 的图片
+ if (fileInfo.size < 1 * 1024 * 1024) {
+ return false;
+ }
+ return [fileInfo, needIndex];
+ })
+ .filter(Boolean);
+ // 存在需要压缩的图片，一次性压缩
+ if (needs.length > 0) {
+ const files2 = [...files];
+ const needPaths = needs.map(need => need[0].path);
+ this.$refs.compressor.$compress(needPaths, compressedFiles => {
+ compressedFiles.forEach((cpPath, cpIndex) => {
+ const filesIndex = needs[cpIndex][1];
+ files2[filesIndex] = {
+ url: cpPath.compress,
+ };
+ });
+ this.triggerChange(files2);
+ });
+ }
+ // 不存在，直接显示
+ else {
+ this.triggerChange(files);
+ }
+ }
+ // 删除图片，直接显示
+ else {
+ this.triggerChange(files);
+ }
+ },
handleImgView(index, file) {
- this.curtainImg = file.url;
- this.showImg = true;
+ const urls = this.files
+ .map(file => (file.type === 'btn' ? false : file.url))
+ .filter(Boolean);
+ Taro.previewImage({
+ current: file.url, // 当前显示图片的http链接
+ urls, // 需要预览的图片http链接列表
+ });
},
handleImgClose() {
this.showImg = false;
},
handleFail(msg) {
+ console.log(msg);
Taro.showToast({
title: msg,
icon: 'none',
@@ -101,14 +137,14 @@
});
},
$uploadImage(callback) {
- const url = $fetcherCommon.getUploadImgURL();
+ const url = $fetchCommon.getUploadImgURL();
const uploadTeam = [];
const imgs = [];
this.files.forEach(file => {
if (file.type === 'btn') {
return;
}
- // blob 二进制文件才上传
+ // blob 临时文件才上传
if (file.url.indexOf('blob') >= 0) {
uploadTeam.push(
new Promise((resolve, reject) => {
@@ -124,13 +160,13 @@
: res.data;
if (res2.state.code === 2000) {
resolve(
- $fetcherCommon.transImgPath(
+ $fetchCommon.transImgPath(
'fix',
res2.data.src
)
);
} else {
- reject({ message: 'res2.state.msg' });
+ reject({ message: res2.state.msg });
}
},
cancel() {
@@ -166,7 +202,6 @@
.find('.at-input__input')
.prepend(this.$refs.picker.$el);
} else if (process.env.TARO_ENV === 'weapp') {
- console.log(this.$refs);
$(this.$refs.input.$el)
.find('.at-input__container')
.append(this.$refs.picker.$el);
--
Gitblit v1.9.1