/**
|
* 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>
|
</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 project from '@project';
|
import './cUserSignature.scss';
|
|
export default {
|
name: 'CUserSignature',
|
components: {
|
AtInput,
|
AtIcon,
|
},
|
props: {
|
// 表单数据资源（表单组件内部机制专用）
|
itemRes: Object,
|
},
|
data() {
|
return {
|
// id: 'CUserSignatureCanvas' + Date.now() + parseInt(Math.random() * 10000),
|
// cavWidth: 1000,
|
// cavHeight: 1600,
|
};
|
},
|
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);
|
});
|
}
|
// 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;
|
}
|
// 不是临时文件，视为上传成功
|
if (
|
file.url.indexOf('blob') < 0 &&
|
file.url.indexOf('wxfile') < 0 &&
|
file.url.indexOf('http://tmp/') < 0
|
) {
|
callback('success');
|
return;
|
}
|
// 开始上传
|
let header = {};
|
if (process.env.TARO_ENV === 'weapp') {
|
const localCookies = JSON.parse(Taro.getStorageSync('cookies') || '{}');
|
const cookiesArr = [];
|
Object.keys(localCookies).forEach(key => {
|
cookiesArr.push(key + '=' + localCookies[key]);
|
});
|
header['Cookie'] = cookiesArr.join('; ');
|
}
|
Taro.uploadFile({
|
url: $hostBoot.getHost() + $fetchCommon.getUploadImgURL(),
|
header,
|
filePath: file.url,
|
fileName: file.fileName,
|
name: 'file',
|
formData: {},
|
success: res => {
|
const res2 =
|
typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
|
if (res2.state.code === 2000) {
|
const serverUrl = $fetchCommon.transImgPath(
|
'fix',
|
res2.data.src || res2.data.file || res2.data.url
|
);
|
this.itemRes.onChange(serverUrl);
|
callback('success');
|
} else {
|
callback('error', res2.state.msg);
|
}
|
},
|
cancel() {
|
callback('error', '上传图片已取消！');
|
},
|
fail() {
|
callback('error', '上传图片失败！');
|
},
|
});
|
},
|
},
|
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.$el);
|
}
|
},
|
};
|
</script>
|
