From a250b6216753cfd0c0622a1fbc0f3254fc8e0a4f Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Tue, 19 Mar 2024 18:39:44 +0800
Subject: [PATCH] 图片预览组件，支持图片显示
---
forms/userSignature/CUserSignature.vue | 33 +++++++++++++++++++++++++--------
1 files changed, 25 insertions(+), 8 deletions(-)
diff --git a/forms/userSignature/CUserSignature.vue b/forms/userSignature/CUserSignature.vue
index 0c5dd73..ba66a1f 100644
--- a/forms/userSignature/CUserSignature.vue
+++ b/forms/userSignature/CUserSignature.vue
@@ -1,5 +1,5 @@
/**
- * CUserSignature
+ * CUserSignature - 用户签名
* @author Tevin
*/
@@ -32,6 +32,10 @@
/>
</view>
</view>
+ <CSignatureLayer
+ v-if="drawSelf"
+ ref="drawLayer"
+ />
</view>
</template>
@@ -42,15 +46,17 @@
import { Fetcher } from '@components/bases/Fetcher';
import { $fetchCommon } from '@fetchers/FCommon';
import { $bridge } from '@components/common/Bridge';
+import { $hostBoot } from '@components/bases/HostBoot';
+import CSignatureLayer from '@components/forms/userSignature/CSignatureLayer';
import project from '@project';
import './cUserSignature.scss';
-import { $hostBoot } from '@components/bases/HostBoot';
export default {
name: 'CUserSignature',
components: {
AtInput,
AtIcon,
+ CSignatureLayer,
},
props: {
// 表单数据资源（表单组件内部机制专用）
@@ -58,9 +64,7 @@
},
data() {
return {
- id: 'CUserSignatureCanvas' + Date.now() + parseInt(Math.random() * 10000),
- cavWidth: 1000,
- cavHeight: 1600,
+ drawSelf: process.env.TARO_ENV === 'weapp',
};
},
computed: {},
@@ -76,7 +80,17 @@
this.itemRes.onChange(url);
});
}
- // TODO: 普通h5、小程序中，使用 canvas 签名
+ // 小程序中
+ else if (process.env.TARO_ENV === 'weapp') {
+ this.$refs.drawLayer.$onDraw(sign => {
+ if (sign.indexOf('http') >= 0) {
+ this.itemRes.onChange(sign);
+ } else {
+ this.itemRes.onChange(sign);
+ }
+ });
+ }
+ // TODO: 普通h5，使用 canvas 签名
},
_transBase64ToBlob(base64) {
const arr = base64.split(',');
@@ -89,6 +103,9 @@
}
const blob = new Blob([u8arr], { type: mime });
return URL.createObjectURL(blob);
+ },
+ $startEdit() {
+ this.handleStartEdit();
},
$uploadImage(callback) {
const file = {
@@ -132,7 +149,7 @@
if (res2.state.code === 2000) {
const serverUrl = $fetchCommon.transImgPath(
'fix',
- res2.data.src || res2.data.file || res2.data.url
+ res2.data.src || res2.data.file || res2.data.url,
);
this.itemRes.onChange(serverUrl);
callback('success');
@@ -157,7 +174,7 @@
} else if (process.env.TARO_ENV === 'weapp') {
$(this.$refs.input.$el)
.find('.at-input__container')
- .append(this.$refs.drawing.$el);
+ .append(this.$refs.drawing);
}
},
};
--
Gitblit v1.9.1