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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
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>
|
|
