From da7356116c811802224348a53809ea11c96d764b Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 04 Nov 2021 11:10:00 +0800
Subject: [PATCH] 扫码输入组件，第一部分
---
forms/input/CInputScanCode.vue | 107 +++++++++++++++++++++++++++++++++++
forms/input/CInputScanCode.scss | 27 +++++++++
forms/input/index.js | 2
3 files changed, 136 insertions(+), 0 deletions(-)
diff --git a/forms/input/CInputScanCode.scss b/forms/input/CInputScanCode.scss
new file mode 100644
index 0000000..1d1b93d
--- /dev/null
+++ b/forms/input/CInputScanCode.scss
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/forms/input/CInputScanCode.vue b/forms/input/CInputScanCode.vue
new file mode 100644
index 0000000..81288f6
--- /dev/null
+++ b/forms/input/CInputScanCode.vue
@@ -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>
\ No newline at end of file
diff --git a/forms/input/index.js b/forms/input/index.js
index 8834d36..eb795b8 100644
--- a/forms/input/index.js
+++ b/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,
}
\ No newline at end of file
--
Gitblit v1.9.1