|
|
@@ -1,48 +1,75 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <nav-bar theme="light" @click-left="$router.go(-1)" transparent></nav-bar>
|
|
|
+ <div class="scan">
|
|
|
+ <nav-bar title="扫码" theme="light" @click-left="$router.go(-1)" transparent></nav-bar>
|
|
|
+ <img src="../assets/line.png" class="scan-line" />
|
|
|
+ <div class="tip">扫描二维码/条码</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { Plugins } from '@capacitor/core';
|
|
|
const { BarcodeScanner } = Plugins;
|
|
|
export default {
|
|
|
- mounted() {
|
|
|
+ async mounted() {
|
|
|
BarcodeScanner.hideBackground();
|
|
|
+ this.bodyBackgorund = window.getComputedStyle(document.body).background;
|
|
|
+ this.appBackground = window.getComputedStyle(this.$el.parentElement).background;
|
|
|
document.body.style.background = 'transparent';
|
|
|
- document.querySelector('#root').style.background = 'transparent';
|
|
|
- this.startScan();
|
|
|
+ this.$el.parentElement.style.background = 'transparent';
|
|
|
+ console.log('mounted');
|
|
|
+ if (await this.checkPermission()) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.startScan();
|
|
|
+ this.$el.style.background = 'transparent';
|
|
|
+ }, 300);
|
|
|
+ } else {
|
|
|
+ this.$router.go(-1);
|
|
|
+ }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- async checkPermission() {
|
|
|
- // check or request permission
|
|
|
- const status = await BarcodeScanner.checkPermission({ force: true });
|
|
|
+ bodyBackgorund: '',
|
|
|
+ appBackground: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async checkPermission() {
|
|
|
+ // check or request permission
|
|
|
+ const status = await BarcodeScanner.checkPermission({ force: true });
|
|
|
|
|
|
- if (status.granted) {
|
|
|
- // the user granted permission
|
|
|
- return true;
|
|
|
- }
|
|
|
- return false;
|
|
|
- },
|
|
|
- async startScan() {
|
|
|
- if (!this.checkPermission()) {
|
|
|
- return;
|
|
|
- }
|
|
|
+ if (status.granted) {
|
|
|
+ // the user granted permission
|
|
|
+ return true;
|
|
|
+ }
|
|
|
|
|
|
- BarcodeScanner.hideBackground(); // make background of WebView transparent
|
|
|
- const result = BarcodeScanner.startScan(); // start scanning and wait for a result
|
|
|
+ if (status.denied) {
|
|
|
+ // the user denied permission for good
|
|
|
+ // redirect user to app settings if they want to grant it anyway
|
|
|
+ try {
|
|
|
+ await this.$dialog.confirm({
|
|
|
+ title: '提示',
|
|
|
+ message: '需要获取相机权限'
|
|
|
+ });
|
|
|
+ BarcodeScanner.openAppSettings();
|
|
|
+ } catch (error) {}
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ async startScan() {
|
|
|
+ BarcodeScanner.hideBackground(); // make background of WebView transparent
|
|
|
+ const result = await BarcodeScanner.startScan(); // start scanning and wait for a result
|
|
|
|
|
|
- // if the result has content
|
|
|
- if (result.hasContent) {
|
|
|
- console.log(result.content); // log the raw scanned content
|
|
|
- }
|
|
|
- },
|
|
|
- stopScan() {
|
|
|
- BarcodeScanner.showBackground();
|
|
|
- BarcodeScanner.stopScan();
|
|
|
+ // if the result has content
|
|
|
+ if (result.hasContent) {
|
|
|
+ console.log(result.content); // log the raw scanned content
|
|
|
+ document.body.style.background = this.bodyBackgorund;
|
|
|
+ this.$el.parentElement.background = this.appBackground;
|
|
|
+ this.$router.go(-1);
|
|
|
}
|
|
|
- };
|
|
|
+ },
|
|
|
+ stopScan() {
|
|
|
+ BarcodeScanner.showBackground();
|
|
|
+ BarcodeScanner.stopScan();
|
|
|
+ }
|
|
|
},
|
|
|
deactivated() {
|
|
|
this.stopScan();
|
|
|
@@ -52,4 +79,49 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang="sass" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+.scan {
|
|
|
+ background: black;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+.scan-line {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ animation: mymove 2s infinite, myfade 3s infinite;
|
|
|
+ animation-duration: 2s, 2s;
|
|
|
+ animation-timing-function: linear, linear;
|
|
|
+ animation-iteration-count: infinite, infinite;
|
|
|
+}
|
|
|
+@keyframes mymove {
|
|
|
+ 0% {
|
|
|
+ top: 0px;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ top: 50vh;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes myfade {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 5% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 75% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tip {
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ font-size: 14px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: calc(80px + var(--safe-bottom));
|
|
|
+ text-align: center;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+</style>
|
