From 8f73817cd1fdbd3e3b23d76d0ce6ba65a85e8950 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 08 Jul 2021 19:12:46 +0800
Subject: [PATCH] 实现快递单号扫描输入组件
---
forms/input/cInputExpressCode.scss | 62 ++++++++++++++++++++
forms/input/CInputExpressCode.vue | 81 +++++++++++++++++++++++++++
forms/input/index.js | 2
3 files changed, 145 insertions(+), 0 deletions(-)
diff --git a/forms/input/CInputExpressCode.vue b/forms/input/CInputExpressCode.vue
new file mode 100644
index 0000000..a8f9336
--- /dev/null
+++ b/forms/input/CInputExpressCode.vue
@@ -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>
\ No newline at end of file
diff --git a/forms/input/cInputExpressCode.scss b/forms/input/cInputExpressCode.scss
new file mode 100644
index 0000000..0351661
--- /dev/null
+++ b/forms/input/cInputExpressCode.scss
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/forms/input/index.js b/forms/input/index.js
index 109a433..8834d36 100644
--- a/forms/input/index.js
+++ b/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,
}
\ No newline at end of file
--
Gitblit v1.9.1