.

build.sh

@@ -0,0 +1,3 @@
+(cd visitor && yarn build)
+cordova prepare
+cordova build android --release -- --keystore=release.jks --storePassword=qwerasdf --password=qwerasdf --alias=drew

package.json

@@ -39,4 +39,4 @@
     ]
   },
   "dependencies": {}
-}
+}

visitor/package.json

@@ -17,7 +17,6 @@
     "cordova-plugin-android-notch": "^1.0.3",
     "cordova-plugin-x5-webview": "^3.1.3",
     "core-js": "^3.6.5",
-    "dom-to-image": "^2.6.0",
     "qrcode": "^1.4.4",
     "resolve-url": "^0.2.1",
     "vant": "^2.12.9",

visitor/src/plugins/http.js

@@ -44,6 +44,7 @@ axiosInstance.interceptors.response.use(
 export default {
     axios: axiosInstance,
     install(_Vue, options) {
+        window.axios = axiosInstance;
         _Vue.prototype.$baseUrl = baseUrl;
         _Vue.prototype.$axios = axiosInstance;
         _Vue.prototype.$http = {

visitor/src/views/scan.vue

@@ -33,6 +33,7 @@ export default {
                                 query: { id }
                             });
                         } else {
+                            self.$toast('无效的二维码');
                             self.back();
                         }
                     } else {

visitor/src/views/settings.vue

@@ -27,7 +27,7 @@ export default {
                 this.$toast('请输入正确的地址');
                 return;
             }
-            this.$toast.loading();
+            this.$toast.loading({ duration: 0 });
             axios
                 .get('/user/my', { baseURL: this.serverUrl })
                 .then(res => {

visitor/src/views/visitorInfo.vue

@@ -47,29 +47,31 @@
             </div>
             <div style="height: 15px;"></div>
         </template>
-
-        <canvas id="canvas" width="580" height="400" ref="canvas"></canvas>
+        <!-- <div style="padding:10px 20px 40px 20px">
+            <van-slider v-model="scale" />
+        </div> -->
+        <canvas id="canvas" width="768" height="640" ref="canvas"></canvas>
         <canvas id="qrcode-canvas" class="qrcode" ref="qrCanvas"></canvas>
     </div>
 </template>
 <script>
 import resolveUrl from 'resolve-url';
-import domtoimage from 'dom-to-image';
 import QRCode from 'qrcode';
 export default {
     data() {
         return {
             visitorInfo: null,
-            base64: ''
+            base64: '',
+            scale: 50
         };
     },
     mounted() {
-        console.log(resolveUrl(this.$http.axios.defaults.baseURL, `/visitorInfo/${this.$route.query.id}`));
-        this.$http.get(`/visitorInfo/get/${this.$route.query.id}`).then(res => {
+        console.log(resolveUrl(this.$http.axios.defaults.baseURL, `/visitorInfo/${this.$route.query.id}?view=true`));
+        this.$http.get(`/visitorInfo/get/${this.$route.query.id}?view=true`).then(res => {
             this.visitorInfo = res;
             this.$nextTick(() => {
                 const qrCanvas = document.createElement('canvas');
-                qrCanvas.width = 580;
+                qrCanvas.width = 400;
                 qrCanvas.height = 400;
                 QRCode.toCanvas(
                     qrCanvas,
@@ -82,38 +84,46 @@ export default {
                         if (error) console.error(error);
                         console.log('success!');
                         const ctx = this.$refs.canvas.getContext('2d');
-                        const qrSize = 280;
-                        const gap = qrSize / 3;
+                        const qrSize = 360;
+                        const gap = 130;
 
                         let fontFamily = ctx.font.replace(/\d+px\s/, '');
                         console.log(fontFamily);
                         ctx.fillStyle = '#ffffff';
-                        ctx.fillRect(0, 0, 580, 400);
-                        ctx.drawImage(qrCanvas, 20, 60, qrSize, qrSize);
+                        ctx.fillRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
+                        ctx.drawImage(qrCanvas, 40, 52, qrSize, qrSize);
+
+                        // ctx.lineWidth = 20;
+                        // ctx.strokeStyle = '#000000';
+                        // ctx.setLineDash([12]);
+                        // ctx.beginPath();
+                        // ctx.rect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
+                        // ctx.stroke();
 
                         //label
-                        ctx.font = '23px ' + fontFamily;
+                        ctx.font = '32px ' + fontFamily;
                         ctx.fillStyle = '#000000';
-                        ctx.fillText('姓名：', 320, 90);
+                        ctx.fillText('姓名：', 420, 90);
 
                         ctx.fillStyle = '#000000';
-                        ctx.fillText('访问部门：', 320, 90 + gap);
+                        ctx.fillText('访问部门：', 420, 90 + gap);
 
                         ctx.fillStyle = '#000000';
-                        ctx.fillText('访问时间：', 320, 90 + gap * 2);
+                        ctx.fillText('访问时间：', 420, 90 + gap * 2);
 
                         //value
-                        ctx.font = 'bold 26px ' + fontFamily;
+                        ctx.font = 'bold 36px ' + fontFamily;
                         ctx.fillStyle = '#000000';
-                        ctx.fillText(res.name, 320, 130);
+                        ctx.fillText(res.name, 420, 140);
 
                         ctx.fillStyle = '#000000';
-                        ctx.fillText(res.visitDepartment, 320, 130 + gap);
+                        ctx.fillText(res.visitDepartment, 420, 140 + gap);
 
                         ctx.fillStyle = '#000000';
-                        ctx.fillText(this.toDate(res.visitTime), 320, 130 + gap * 2);
+                        ctx.fillText(this.toDate(res.visitTime), 420, 140 + gap * 2);
 
                         this.base64 = this.$refs.canvas.toDataURL().replace('data:image/png;base64,', '');
+                        console.log(this.base64);
                     }
                 );
             });
@@ -124,12 +134,15 @@ export default {
             return time.split(' ')[0];
         },
         print() {
-            this.$toast.loading();
-            setTimeout(() => {
-                this.$toast.clear();
-            }, 5000);
+            this.$toast.loading({ duration: 5000 });
+            let canvas = document.createElement('canvas');
+            canvas.width = (this.$refs.canvas.width * this.scale) / 100;
+            canvas.height = (this.$refs.canvas.height * this.scale) / 100;
+            canvas.getContext('2d').drawImage(this.$refs.canvas, 0, 0, canvas.width, canvas.height);
+            let base64 = canvas.toDataURL().replace('data:image/png;base64,', '');
+            console.log(base64);
             if (window.cordova && cordova.plugins.EmbeddedPrinter) {
-                cordova.plugins.EmbeddedPrinter.printPic(this.base64);
+                cordova.plugins.EmbeddedPrinter.printPic(base64);
             }
         }
     }
@@ -205,7 +218,7 @@ export default {
 }
 #canvas {
     transform-origin: 0 0;
-    transform: scale(0.6);
+    transform: scale(0.45);
     z-index: -1;
     opacity: 0;
     position: absolute;

visitor/yarn.lock

@@ -3308,11 +3308,6 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
-dom-to-image@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/dom-to-image/-/dom-to-image-2.6.0.tgz#8a503608088c87b1c22f9034ae032e1898955867"
-  integrity sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc=
-
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz?cache=0&sync_timestamp=1604239910191&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomain-browser%2Fdownload%2Fdomain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"

www/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>visitor</title><script src="cordova.js"></script><link href="css/app.e27377e1.css" rel="preload" as="style"><link href="css/chunk-vendors.411e226c.css" rel="preload" as="style"><link href="js/app.0ae578b1.js" rel="preload" as="script"><link href="js/chunk-vendors.6e473729.js" rel="preload" as="script"><link href="css/chunk-vendors.411e226c.css" rel="stylesheet"><link href="css/app.e27377e1.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but visitor doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.6e473729.js"></script><script src="js/app.0ae578b1.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>visitor</title><script src="cordova.js"></script><link href="css/app.74ed6dde.css" rel="preload" as="style"><link href="css/chunk-vendors.ae4deb06.css" rel="preload" as="style"><link href="js/app.ee67a975.js" rel="preload" as="script"><link href="js/chunk-vendors.bc20e4a1.js" rel="preload" as="script"><link href="css/chunk-vendors.ae4deb06.css" rel="stylesheet"><link href="css/app.74ed6dde.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but visitor doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.bc20e4a1.js"></script><script src="js/app.ee67a975.js"></script></body></html>