优化单选式开关在h5页面上的表现

Tevin

2024-07-02 0dc0b818c2e88ee54dc2c0db0a2aab1436a7b476

 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);
        }
    },
};