From 2c8603596c79d104e4189a06eb796a8699e25140 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 16 May 2024 17:08:33 +0800
Subject: [PATCH] 列表筛选器组件，调整数据传递格式，横条完整支持输入框
---
forms/userSignature/CUserSignature.vue | 106 ++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 93 insertions(+), 13 deletions(-)
diff --git a/forms/userSignature/CUserSignature.vue b/forms/userSignature/CUserSignature.vue
index 09dbbc2..71a7882 100644
--- a/forms/userSignature/CUserSignature.vue
+++ b/forms/userSignature/CUserSignature.vue
@@ -1,15 +1,10 @@
/**
- * CUserSignature
+ * CUserSignature - 用户签名
* @author Tevin
*/
<template>
<view class="c-user-signature">
- <!-- <AtSwitch
- :title="itemRes.label"
- :checked="itemRes.formData[itemRes.name]"
- :onChange="evt=>itemRes.onChange(evt)"
- /> -->
<AtInput
ref="input"
:name="itemRes.name"
@@ -21,17 +16,40 @@
ref="drawing"
class="c-user-signature-drawing"
>
- <view class="button">
- <AtIcon value="edit" />
+ <view
+ class="c-user-signature-button"
+ @tap="evt => handleStartEdit()"
+ >
+ <image
+ class="c-user-signature-preview"
+ v-if="itemRes.formData[itemRes.name]"
+ mode="aspectFit"
+ :src="itemRes.formData[itemRes.name]"
+ />
+ <AtIcon
+ v-if="!itemRes.formData[itemRes.name]"
+ value="edit"
+ />
</view>
- <text class="tips">（点击修改）</text>
</view>
+ <CSignatureLayer
+ v-if="drawSelf"
+ ref="drawLayer"
+ />
</view>
</template>
<script>
+import Taro from '@tarojs/taro';
import { AtInput, AtIcon } from 'taro-ui-vue';
import { $ } from '@tarojs/extend';
+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 { uploadImage } from '@components/forms/imagePicker';
+import project from '@project';
import './cUserSignature.scss';
export default {
@@ -39,16 +57,78 @@
components: {
AtInput,
AtIcon,
+ CSignatureLayer,
},
props: {
// 表单数据资源（表单组件内部机制专用）
itemRes: Object,
},
data() {
- return {};
+ return {
+ drawSelf: process.env.TARO_ENV === 'weapp',
+ };
},
- computed: {
- className() {},
+ computed: {},
+ methods: {
+ handleStartEdit() {
+ // 混合App中
+ if (project.appHybrid) {
+ $bridge.invoking('_get_user_sign', sign => {
+ if (!sign) {
+ return;
+ }
+ const url = this._transBase64ToBlob(sign.result);
+ this.itemRes.onChange(url);
+ });
+ }
+ // 小程序中
+ 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(',');
+ const mime = arr[0].match(/:(.*?);/)[1];
+ const bstr = atob(arr[1]);
+ let n = bstr.length;
+ const u8arr = new Uint8Array(n);
+ while (n--) {
+ u8arr[n] = bstr.charCodeAt(n);
+ }
+ 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],
+ fileName: 'file-' + Date.now() + '.png',
+ };
+ // 没有上传内容，视为无需上传
+ if (!file.url) {
+ callback('success');
+ return;
+ }
+ uploadImage([file], (state, res) => {
+ if (state === 'success') {
+ this.itemRes.onChange(res[0]);
+ setTimeout(() => {
+ callback(state);
+ }, 10);
+ } else if (state === 'error') {
+ callback(state, res);
+ }
+ });
+ },
},
mounted() {
if (process.env.TARO_ENV === 'h5') {
@@ -58,7 +138,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