/**
|
* 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-space"></view>
|
<AtButton
|
class="c-input-scan-btn"
|
size="small"
|
type="primary"
|
:onClick="evt => handleScan()"
|
>
|
<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,
|
// 由业务层调用app
|
onScaning: Function,
|
},
|
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') {
|
if (this.onScaning) {
|
this.onScaning(res => {
|
this.scaning = false;
|
if (res.result) {
|
this.itemRes.onChange(res.result);
|
}
|
});
|
}
|
}
|
},
|
},
|
};
|
</script>
|
