扫码输入组件，第一部分

Tevin

2021-11-04 da7356116c811802224348a53809ea11c96d764b

扫码输入组件，第一部分

 forms/input/CInputScanCode.scss

New file
@@ -0,0 +1,27 @@
/**
 * input-scan-code
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-input-scan-code {
    .c-input-scan-btn {
        width: 140px;
        height: 48px;
    }
    .c-input-scan-show {
        @include position(absolute, 50% n n 16px);
        width: 100px;
        box-sizing: border-box;
        transform: translateY(-50%);
        pointer-events: none;
        .at-icon-loading {
            margin-right: 9px;
            animation: atRotate 1s linear infinite;
        }
    }
    .at-input__icon {
        display: none;
    }
}

 forms/input/CInputScanCode.vue

New file
@@ -0,0 +1,107 @@
/**
 * CInputScanCode - 表单项，手机验证码输入框
 * @author Tevin
 */

<template>
    <view class="c-input-scan-code">
        <AtInput
            :name="itemRes.name"
            :title="itemRes.label"
            type="text"
            :placeholder="placeholder"
            :required="itemRes.required"
            :error="itemRes.error"
            :value="itemRes.formData[itemRes.name]"
            :onChange="evt=>itemRes.onChange(evt)"
        >
            <view
                class="c-input-scan-btn"
                @tap="evt => handleScan()"
            ></view>
            <AtButton
                class="c-input-scan-show"
                size="small"
                type="primary"
            >
                <text v-show="!scaning">扫描</text>
                <AtIcon
                    v-show="scaning"
                    value="loading"
                />
            </AtButton>
        </AtInput>
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { AtInput, AtButton, AtIcon } from 'taro-ui-vue';
import { Tools } from '@components/common/Tools';
import './cInputScanCode.scss';

export default {
    name: 'CInputScanCode',
    components: {
        AtInput,
        AtIcon,
        AtButton,
    },
    props: {
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
        // 占位提示
        placeholder: String,
    },
    data() {
        return {
            scaning: false,
        };
    },
    methods: {
        handleScan() {
            // 小程序
            if (process.env.TARO_ENV === 'weapp') {
                this.handleScaning('taro');
            }
            // h5页面
            else if (process.env.TARO_ENV === 'h5') {
                const ua = window.navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                    // 微信公众号中
                    this.handleScaning('taro');
                } else {
                    // 浏览器中
                    this.handleScaning('app');
                }
            }
        },
        handleScaning(type) {
            this.scaning = true;
            if (type === 'taro') {
                Taro.scanCode({
                    onlyFromCamera: true,
                    scanType: 'barCode',
                    success: res => {
                        this.scaning = false;
                        this.itemRes.onChange(res.result);
                    },
                    fail: err => {
                        if (err.errMsg.indexOf('cancel') >= 0) {
                            Tools.toast('扫码已取消');
                        } else {
                            Tools.toast('扫码失败！');
                        }
                        this.scaning = false;
                    },
                });
            } else if (type === 'app') {
                // TODO：扫码
                setTimeout(() => {
                    this.scaning = false;
                }, 1000);
            }
        },
    },
};
</script>

 forms/input/index.js

@@ -5,10 +5,12 @@

import CInput from '@components/forms/input/CInput.vue';
import CInputPhoneCode from '@components/forms/input/CInputPhoneCode.vue';
import CInputScanCode from '@components/forms/input/CInputScanCode.vue';
import CInputExpressCode from '@components/forms/input/CInputExpressCode.vue';

export {
    CInput,
    CInputPhoneCode,
    CInputScanCode,
    CInputExpressCode,
}