实现快递单号扫描输入组件

Tevin

2021-07-08 8f73817cd1fdbd3e3b23d76d0ce6ba65a85e8950

实现快递单号扫描输入组件

 forms/input/CInputExpressCode.vue

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

<template>
    <view class="c-input-express-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-express-btn"
                @tap="evt => handleScan()"
            ></view>
            <view class="c-input-express-scan">
                <view
                    v-show="!scaning"
                    class="gg-scan"
                ></view>
                <AtIcon
                    v-show="scaning"
                    value="loading"
                />
            </view>
        </AtInput>
    </view>
</template>

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

export default {
    name: 'CInputExpressCode',
    components: {
        AtInput,
        AtIcon,
    },
    props: {
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
        // 占位提示
        placeholder: String,
    },
    data() {
        return {
            scaning: false,
        };
    },
    methods: {
        handleScan() {
            this.scaning = true;
            Taro.scanCode({
                onlyFromCamera: true,
                scanType: 'barCode',
                success: res => {
                    this.scaning = false;
                    if (!res.result || !/^[0-9a-zA-Z]*$/g.test(res.result)) {
                        Tools.toast('请扫描快递单号！');
                        return;
                    }
                    this.itemRes.onChange(res.result);
                },
                fail: err => {
                    Tools.toast('扫码失败！');
                    this.scaning = false;
                },
            });
        },
    },
};
</script>

 forms/input/cInputExpressCode.scss

New file
@@ -0,0 +1,62 @@
/**
 * input-express-code
 * @author Tevin
 */

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

.c-input-express-code {
    .c-input-express-btn {
        width: 100px;
        height: 48px;
    }
    .c-input-express-scan {
        @include position(absolute, 50% n n 0);
        width: 100px;
        padding-left: 24px;
        color: #ccc;
        box-sizing: border-box;
        transform: translateY(-50%);
        pointer-events: none;
        .gg-scan {
            box-sizing: border-box;
            position: relative;
            display: block;
            width: 18px;
            height: 18px;
            transform: scale(2.5, 2.5);
            background:
                linear-gradient(to left, currentColor 22px,
                    transparent 0) no-repeat center/2px 22px
        }
        .gg-scan::after,
        .gg-scan::before {
            content: "";
            display: block;
            box-sizing: border-box;
            position: absolute;
            width: 6px;
            height: 14px;
            border: 2px solid;
            top: 2px
        }
        .gg-scan::before {
            border-right: 0;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px
        }
        .gg-scan::after {
            border-left: 0;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            right: 0
        }
        .at-icon-loading {
            margin-right: 9px;
            animation: atRotate 1s linear infinite;
        }
    }
    .at-input__icon {
        display: none;
    }
}

 forms/input/index.js

@@ -5,8 +5,10 @@

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

export {
    CInput,
    CInputPhoneCode,
    CInputExpressCode,
}