From 285f34a71b049b40d86adf2fc50427ae6ff203b6 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Sat, 04 Feb 2023 09:28:55 +0800
Subject: [PATCH] 用户签名组件，按钮版
---
forms/userSignature/cUserSignature.scss | 11 +++++
forms/userSignature/CUserSignature.vue | 13 ++++--
forms/userSignature/index.js | 2 +
forms/userSignature/CUserSignatureBtn.vue | 77 ++++++++++++++++++++++++++++++++++++++
4 files changed, 98 insertions(+), 5 deletions(-)
diff --git a/forms/userSignature/CUserSignature.vue b/forms/userSignature/CUserSignature.vue
index 0c5dd73..f04bf42 100644
--- a/forms/userSignature/CUserSignature.vue
+++ b/forms/userSignature/CUserSignature.vue
@@ -1,5 +1,5 @@
/**
- * CUserSignature
+ * CUserSignature - 用户签名
* @author Tevin
*/
@@ -42,9 +42,9 @@
import { Fetcher } from '@components/bases/Fetcher';
import { $fetchCommon } from '@fetchers/FCommon';
import { $bridge } from '@components/common/Bridge';
+import { $hostBoot } from '@components/bases/HostBoot';
import project from '@project';
import './cUserSignature.scss';
-import { $hostBoot } from '@components/bases/HostBoot';
export default {
name: 'CUserSignature',
@@ -58,9 +58,9 @@
},
data() {
return {
- id: 'CUserSignatureCanvas' + Date.now() + parseInt(Math.random() * 10000),
- cavWidth: 1000,
- cavHeight: 1600,
+ // id: 'CUserSignatureCanvas' + Date.now() + parseInt(Math.random() * 10000),
+ // cavWidth: 1000,
+ // cavHeight: 1600,
};
},
computed: {},
@@ -90,6 +90,9 @@
const blob = new Blob([u8arr], { type: mime });
return URL.createObjectURL(blob);
},
+ $startEdit() {
+ this.handleStartEdit();
+ },
$uploadImage(callback) {
const file = {
url: this.itemRes.formData[this.itemRes.name],
diff --git a/forms/userSignature/CUserSignatureBtn.vue b/forms/userSignature/CUserSignatureBtn.vue
new file mode 100644
index 0000000..10d30a5
--- /dev/null
+++ b/forms/userSignature/CUserSignatureBtn.vue
@@ -0,0 +1,77 @@
+/**
+ * CUserSignatureBtn - 用户签名（按钮模式）
+ * @author Tevin
+ */
+
+<template>
+ <view class="c-user-signature-btn">
+ <AtButton
+ :class="btnClass"
+ :type="btnType"
+ :onClick="evt => handleOpenSign()"
+ >签名</AtButton>
+ <CForm
+ ref="signForm"
+ :formData="signData"
+ :onChange="evt => handleSignChange(evt)"
+ v-slot="{formRes}"
+ >
+ <CFormItem
+ name="sign"
+ :formRes="formRes"
+ v-slot="{itemRes}"
+ >
+ <CUserSignature
+ ref="signature"
+ :itemRes="itemRes"
+ />
+ </CFormItem>
+ </CForm>
+ </view>
+</template>
+
+<script>
+import { AtButton } from 'taro-ui-vue';
+import { CForm, CFormItem } from '@components/forms/form';
+import CUserSignature from './CUserSignature.vue';
+
+export default {
+ name: 'CUserSignatureBtn',
+ components: {
+ AtButton,
+ CForm,
+ CFormItem,
+ CUserSignature,
+ },
+ props: {
+ // 按钮样式
+ btnClass: String,
+ // 按钮类型
+ btnType: {
+ type: String,
+ default: 'primary',
+ },
+ // 签名回调
+ onSignChanged: Function,
+ },
+ data() {
+ return {
+ signData: {
+ sign: '',
+ },
+ };
+ },
+ methods: {
+ handleOpenSign() {
+ this.$refs.signature.$startEdit();
+ },
+ handleSignChange({ sign }) {
+ this.onSignChanged(sign);
+ },
+ $uploadImage(callback) {
+ this.$refs.signature(callback);
+ },
+ },
+ mounted() {},
+};
+</script>
diff --git a/forms/userSignature/cUserSignature.scss b/forms/userSignature/cUserSignature.scss
index 73d8c5b..987bc61 100644
--- a/forms/userSignature/cUserSignature.scss
+++ b/forms/userSignature/cUserSignature.scss
@@ -46,4 +46,15 @@
width: 100%;
height: 100%;
}
+}
+
+.c-user-signature-btn {
+ .at-button {
+ width: 100%;
+ margin: 0;
+ box-sizing: border-box;
+ }
+ .c-form {
+ display: none;
+ }
}
\ No newline at end of file
diff --git a/forms/userSignature/index.js b/forms/userSignature/index.js
index f73134f..e5a17d8 100644
--- a/forms/userSignature/index.js
+++ b/forms/userSignature/index.js
@@ -4,7 +4,9 @@
*/
import CUserSignature from '@components/forms/userSignature/CUserSignature.vue';
+import CUserSignatureBtn from '@components/forms/userSignature/CUserSignatureBtn.vue';
export {
CUserSignature,
+ CUserSignatureBtn,
}
\ No newline at end of file
--
Gitblit v1.9.1