1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| /**
| * 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"
| v-if="scanable"
| >
| <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 {
| // 小程序中才开启扫描功能
| scanable: process.env.TARO_ENV === 'weapp',
| scaning: false,
| };
| },
| methods: {
| handleScan() {
| this.scaning = true;
| Taro.scanCode({
| onlyFromCamera: false,
| 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 => {
| if (err.errMsg.indexOf('cancel') >= 0) {
| Tools.toast('扫码已取消');
| } else {
| Tools.toast('扫码失败！');
| }
| this.scaning = false;
| },
| });
| },
| },
| };
| </script>
|
|
