102 lines
2.4 KiB
Vue
102 lines
2.4 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="uni-title">监听按键扫码结果：</view>
|
||
<view class="uni-list">
|
||
<view class="uni-cell">
|
||
<view class="scan-result">
|
||
{{resultCode}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<form @submit="formSubmit">
|
||
<view class="uni-form-item uni-column">
|
||
<view class="title">actionKey</view>
|
||
<input class="uni-input" name="actionKey" placeholder="请输入actionKey" />
|
||
</view>
|
||
<view class="uni-form-item uni-column">
|
||
<view class="title">codeKey</view>
|
||
<input class="uni-input" name="codeKey" placeholder="请输入codeKey" />
|
||
</view>
|
||
<view class="uni-form-item uni-column">
|
||
<view class="title">scanDownKey</view>
|
||
<input class="uni-input" name="scanDownKey" placeholder="输入scanDownKey" />
|
||
</view>
|
||
<view class="uni-btn-v">
|
||
<button form-type="submit">提交参数</button>
|
||
<button type="default" form-type="reset">重置</button>
|
||
</view>
|
||
</form>
|
||
<view>================= 分割线 =======================</view>
|
||
<button type="default" @click="scanCode()">手动触发按键L</button>
|
||
|
||
<wuli-scan-code v-if="isLoadScan" :customintent="customintent" ref="wlscInst"></wuli-scan-code>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import wuliScanCode from '@/components/wuli-scan-code/index.vue'
|
||
export default {
|
||
components: {
|
||
wuliScanCode
|
||
},
|
||
data() {
|
||
return {
|
||
resultCode: '',
|
||
customintent: undefined,
|
||
isLoadScan: true
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onUnload() {
|
||
// 移除监听事件
|
||
uni.$off('wuli-appscan')
|
||
},
|
||
onShow() {
|
||
let that = this
|
||
uni.$off('wuli-appscan') // 每次进来先 移除全局自定义事件监听器
|
||
uni.$on('wuli-appscan', (res) => {
|
||
console.log('扫码结果：', res.code);
|
||
this.resultCode = res.code
|
||
})
|
||
},
|
||
methods: {
|
||
scanCode() {
|
||
this.$refs.wlscInst.triggerKeyScan()
|
||
},
|
||
formSubmit: function(e) {
|
||
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
|
||
//定义表单规则
|
||
var rule = [
|
||
];
|
||
//进行表单检查
|
||
var formData = e.detail.value;
|
||
this.isLoadScan = false
|
||
this.customintent = {
|
||
...formData
|
||
}
|
||
setTimeout(()=> {
|
||
this.isLoadScan = true
|
||
}, 500)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.scan-result {
|
||
min-height: 50rpx;
|
||
line-height: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
.uni-cell{
|
||
min-height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.uni-list{
|
||
margin-bottom: 30rpx;
|
||
}
|
||
</style> |