HomeAccounting

1
<template>
2
    <v-app id="inspire">
3
        <v-toolbar dark color="primary">
4
            <v-tooltip bottom>
5
                <v-btn icon @click="goToLK()" slot="activator">
6
                    <v-icon>input</v-icon>
7
                </v-btn>
8
                <span>Вернуться в ЛК</span>
9
            </v-tooltip>
10
            <v-toolbar-title class="white--text">QRCodeScanner</v-toolbar-title>
11
            <v-spacer></v-spacer>
12

13
        </v-toolbar>
14
        <v-menu
15
                transition="slide-x-transition"
16
                bottom
17
                right
18
                :close-on-content-click="false"
19
                :nudge-width="200"
20
        >
21
            <v-card>
22

23
            </v-card>
24
        </v-menu>
25
        <v-alert
26
                dismissible
27
                :value="isShowAlert"
28
                :type="alertType"
29
        >
30
            {{alertMessage}}
31
        </v-alert>
32
        <template>
33
            <v-card>
34
                <v-card-title class="headline">Выбор камеры</v-card-title>
35
                <v-card-text>
36
                        <v-alert
37
                                :value="cameraIsNotSupported"
38
                                type="warning"
39
                        >
40
                            Камера не найдена или функционал не поддерживается
41
                        </v-alert>
42
                    <template v-for="camera in cameras">
43
                        <v-btn flat small color="primary" @click="selectCamera(camera)">{{camera.name}}</v-btn>
44
                    </template>
45
                </v-card-text>
46
                <v-card-actions>
47
                    <div>
48
                        <video id="preview" width="100%"></video>
49
                    </div>
50
                    <div>
51
                        <template v-for="string in scanned">
52
                            <div>{{string}}</div>
53
                        </template>
54
                    </div>
55
                </v-card-actions>
56
                <v-card-actions v-if="!cameraIsNotSupported">
57
                    <v-btn color="error" @click="stopCamera()">Камера стоп</v-btn>
58
                </v-card-actions>
59
            </v-card>
60

61
        </template>
62
    </v-app>
63
</template>
64

65
<script>
66
    import Instascan from 'instascan';
67
    export default {
68
        name: "qrcode-scanner",
69
        data: () => ({
70
            cameras: [],
71
            scanner: {},
72
            cameraIsNotSupported: true,
73
            scanned: [],
74

75
            isShowAlert: false,
76
            alertType: 'success',
77
            alertMessage: '',
78
        }),
79
        methods: {
80
            selectCamera(camera) {
81
               this.scanner.start(camera);
82
            },
83
            stopCamera() {
84
                this.scanner.stop();
85
            },
86
            goToLK() {
87
                window.location.href="/pa";
88
            },
89
            showAlert(type, message) {
90
                this.alertType = type;
91
                this.alertMessage = message;
92
                this.isShowAlert = true;
93
            },
94
            sendToServer(method, url, data) {
95
                axios({
96
                    method: method,
97
                    url: url,
98
                    data: data
99
                })
100
                .then(response=> {
101
                    console.log(response);
102
                    if(response.data.status === 'saved') {
103
                        this.showAlert('success', 'Чек сохранен');
104
                    }
105
                    else {
106
                        this.showAlert('error', response.data.message);
107
                    }
108
                })
109
                .catch(error => {
110
                    this.showAlert('error', error.message);
111
                    console.error(error);
112
                });
113
            },
114
            sendCheck(qrCodeString) {
115
                let data = {
116
                    qrcode: qrCodeString,
117

118
                };
119
                this.sendToServer('post', '/qr-code-scanner/send-check', data);
120
            }
121
        },
122
        mounted() {
123
            this.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), mirror: false });
124
            this.scanner.addListener('scan', (content, image) => {
125
                this.scanned.push(content);
126
                this.sendCheck(content);
127
                this.stopCamera();
128
            });
129

130
            Instascan.Camera.getCameras().then((cameras) => {
131
                if (cameras.length > 0) {
132
                    this.cameras = cameras;
133
                    this.cameraIsNotSupported = false;
134
                } else {
135
                    this.cameraIsNotSupported = true;
136
                }
137
            }).catch(function (e) {
138
                this.showAlert('error', error.message);
139
                console.error(e);
140
            });
141
        },
142
    }
143
</script>
144

145
<style scoped>
146

147
</style>