/**
|
* CUserSignature - 用户签名
|
* @author Tevin
|
*/
|
|
<template>
|
<view class="c-user-signature">
|
<AtInput
|
ref="input"
|
:name="itemRes.name"
|
:title="itemRes.label"
|
:required="itemRes.required"
|
:error="itemRes.error"
|
/>
|
<view
|
ref="drawing"
|
class="c-user-signature-drawing"
|
>
|
<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>
|
</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 {
|
name: 'CUserSignature',
|
components: {
|
AtInput,
|
AtIcon,
|
CSignatureLayer,
|
},
|
props: {
|
// 表单数据资源（表单组件内部机制专用）
|
itemRes: Object,
|
},
|
data() {
|
return {
|
drawSelf: process.env.TARO_ENV === 'weapp',
|
};
|
},
|
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') {
|
$(this.$refs.input.$el)
|
.find('.at-input__input')
|
.prepend(this.$refs.drawing.$el);
|
} else if (process.env.TARO_ENV === 'weapp') {
|
$(this.$refs.input.$el)
|
.find('.at-input__container')
|
.append(this.$refs.drawing);
|
}
|
},
|
};
|
</script>
|
