<template>
|
<div class="box">
|
<!-- <div class="box_s">-->
|
<!-- <v-Tags :dataList="data" @change="changeTage"></v-Tags>-->
|
<!-- </div>-->
|
<!-- <v-Menu class="top" title="常用功能" :isShow="true"></v-Menu>-->
|
|
<!-- <button @click="openCodes">扫码</button>-->
|
<!-- <Test :openCode="openCode" :infos="['请扫描工装码', '请扫描货位码']" @close="close" @onDecode="onDecode" />-->
|
<template v-if="store.state.Menu.length > 0">
|
<v-Menu class="top" v-for="item in store.state.Menu" :key="item.id" :title="item.label" :isShow="false" :list="item.children"></v-Menu>
|
</template>
|
<template v-else>
|
<div class="box_notfound">
|
<img src="@/assets/icon/default_weishouquan@2x.png" alt="" />
|
</div>
|
</template>
|
|
</div>
|
<!-- <div class="page-scan">-->
|
<!-- <!–返回–>-->
|
<!-- <van-nav-bar title="扫描二维码/条形码" fixed-->
|
<!-- @click-left="clickIndexLeft()"-->
|
<!-- class="scan-index-bar">-->
|
<!-- <template #left>-->
|
<!-- <van-icon name="arrow-left" size="18" color="#fff"/>-->
|
<!-- <span style="color: #fff"> 取消 </span>-->
|
<!-- </template>-->
|
<!-- </van-nav-bar>-->
|
<!-- <!– 扫码区域 –>-->
|
<!-- <video ref="video" id="video" class="scan-video" autoplay></video>-->
|
<!-- <!– 提示语 –>-->
|
<!-- <div v-show="tipShow" class="scan-tip"> {{tipMsg}} </div>-->
|
<!-- <button @click="reset">重置</button>-->
|
<!-- </div>-->
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref } from "vue"
|
import { useStore } from "vuex"
|
import { BrowserMultiFormatReader } from '@zxing/library'
|
import vTags from '@/components/common/Tags.vue'
|
import vMenu from '@/components/common/Menu.vue'
|
const store = useStore()
|
let openCode = ref<boolean>(false)
|
|
// let loadingShow = ref<boolean>(false)
|
// let codeReader: any = ref(null)
|
// let vin = ref<null>(null)
|
// let scanText = ref<string>('')
|
// let tipMsg = ref<string>('正在尝试识别....')
|
// let tipShow = ref<boolean>(false)
|
|
// tags组件所需数据
|
const data = reactive<Array<object>>([
|
{
|
id: 1,
|
name: '今日',
|
isActive: true
|
},
|
{
|
id: 2,
|
name: '本月',
|
isActive: false
|
}
|
])
|
|
// 点击标签回调
|
const changeTage = (id: string | number): void => {
|
console.log(id)
|
}
|
// const openScan = async() => {
|
// codeReader.value.getVideoInputDevices().then((videoInputDevices: any) => {
|
// tipShow.value = true;
|
// tipMsg.value = '正在调用摄像头...';
|
// console.log('videoInputDevices', videoInputDevices);
|
// // 默认获取第一个摄像头设备id
|
// let firstDeviceId = videoInputDevices[0].deviceId;
|
// // 获取第一个摄像头设备的名称
|
// const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label);
|
// if (videoInputDevices.length > 1) {
|
// // 判断是否后置摄像头
|
// if (videoInputDeviceslablestr.indexOf('back') > -1) {
|
// firstDeviceId = videoInputDevices[0].deviceId;
|
// } else {
|
// firstDeviceId = videoInputDevices[1].deviceId;
|
// }
|
// }
|
// decodeFromInputVideoFunc(firstDeviceId);
|
// }).catch((err: any) => {
|
// tipShow.value = false;
|
// console.error(err);
|
// });
|
// }
|
//
|
// const openScanTwo = async () => {
|
// codeReader.value = await new BrowserMultiFormatReader();
|
// codeReader.value.getVideoInputDevices().then((videoInputDevices: any) => {
|
// tipShow.value = true;
|
// tipMsg.value = '正在调用摄像头...';
|
// console.log('videoInputDevices', videoInputDevices);
|
// // 默认获取第一个摄像头设备id
|
// let firstDeviceId = videoInputDevices[0].deviceId;
|
// // 获取第一个摄像头设备的名称
|
// const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label);
|
// if (videoInputDevices.length > 1) {
|
// // 判断是否后置摄像头
|
// if (videoInputDeviceslablestr.indexOf('back') > -1) {
|
// firstDeviceId = videoInputDevices[0].deviceId;
|
// } else {
|
// firstDeviceId = videoInputDevices[1].deviceId;
|
// }
|
// }
|
// decodeFromInputVideoFunc(firstDeviceId)
|
// }).catch((err: any) => {
|
// tipShow.value = false;
|
// console.error(err);
|
// });
|
// }
|
//
|
// const decodeFromInputVideoFunc = (firstDeviceId: any) => {
|
// codeReader.value.reset(); // 重置
|
// scanText.value = '';
|
// codeReader.value.decodeFromInputVideoDeviceContinuously(firstDeviceId, 'video', (result: any, err: any) => {
|
// tipMsg.value = '正在尝试识别...';
|
// scanText.value = '';
|
// if (result) {
|
// console.log('扫描结果', result);
|
// scanText.value = result.text;
|
// if (scanText.value) {
|
// tipShow.value = false
|
// // 这部分接下去的代码根据需要，读者自行编写了
|
// // this.$store.commit('app/SET_SCANTEXT', result.text);
|
// // console.log('已扫描的小票列表', this.$store.getters.scanTextArr);
|
// }
|
// }
|
// if (err && !(err)) {
|
// tipMsg.value = '识别失败';
|
// setTimeout(() => {
|
// tipShow.value = false;
|
// }, 2000)
|
// console.error(err)
|
// }
|
// });
|
// }
|
//
|
// const reset = () => {
|
// codeReader.value.reset()
|
// }
|
//
|
// onMounted(() => {
|
// console.log('浏览器信息', navigator.userAgent)
|
// codeReader.value = new BrowserMultiFormatReader()
|
// openScanTwo()
|
// })
|
</script>
|
|
<style lang="scss" scoped>
|
.scan-index-bar{
|
background-image: linear-gradient( -45deg, #42a5ff ,#59cfff);
|
}
|
.van-nav-bar__title{
|
color: #fff !important;
|
}
|
.scan-video{
|
height: 80vh;
|
}
|
.scan-tip{
|
width: 100vw;
|
text-align: center;
|
margin-bottom: 10vh;
|
color: white;
|
font-size: 5vw;
|
}
|
.page-scan{
|
overflow-y: hidden;
|
background-color: #363636;
|
}
|
.box {
|
width: 100%;
|
height: 100%;
|
background: #f5f5f5;
|
.top {
|
margin-top: 20px;
|
}
|
.box_notfound {
|
padding-top: 300px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: white;
|
img {
|
width: 388px;
|
height: 388px;
|
}
|
}
|
}
|
</style>
|
