From 293f7f686b9ae08d67f8eb0db5ac1a4dd32d8d58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=BF=94=E5=AE=87-=E6=97=85=E7=AE=A1=E5=AE=B6?=
 <153298343@qq.com>
Date: Thu, 26 May 2022 10:40:59 +0800
Subject: [PATCH] up

---
 package.json                     |   1 +
 src/components/QrCode/QrCode.vue | 295 ++++++++++++++++++++++++++++++
 src/components/Tinymce/index.vue |   2 +-
 src/permission.js                |   2 +-
 src/router/index.js              |   4 +
 src/views/active/checkOrder.vue  | 296 +++++++++++++++++++++++++++++++
 6 files changed, 598 insertions(+), 2 deletions(-)
 create mode 100644 src/components/QrCode/QrCode.vue
 create mode 100644 src/views/active/checkOrder.vue

diff --git a/package.json b/package.json
index 6e0353f..58c495e 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "view-design": "^4.7.0",
     "vue": "2.6.10",
     "vue-count-to": "^1.0.13",
+    "vue-qrcode-reader": "^3.1.0",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"
   },
diff --git a/src/components/QrCode/QrCode.vue b/src/components/QrCode/QrCode.vue
new file mode 100644
index 0000000..1e40ea1
--- /dev/null
+++ b/src/components/QrCode/QrCode.vue
@@ -0,0 +1,295 @@
+// qrcode.vue
+<template>
+  <div>
+    <!-- <p class="error">{{ error }}</p> -->
+    <!--错误信息-->
+
+    <!-- <p class="decode-result">
+          扫描结果:
+          <b>{{ result }}</b>
+      </p> -->
+    <!--扫描结果-->
+    <!-- <p @click="openCamera">打开相机</p>
+      <div v-show="show" class="cameraMessage">
+          <p @click="closeCamera">关闭相机</p>
+          <p @click="openFlash">打开手电筒</p>
+          <p @click="switchCamera">相机反转</p>
+      </div> -->
+
+    <qrcode-stream v-show="qrcode" :camera="camera" :torch="torchActive" @decode="onDecode" @init="onInit">
+      <div>
+        <div class="qr-scanner">
+          <div class="box">
+            <div class="line"></div>
+            <div class="angle"></div>
+          </div>
+          <div class="txt">
+            将二维码放入框内，即自动扫描
+            <div class="myQrcode" style="padding: 10px 20px;">
+              <el-form ref="form" :model="form" label-position="top" label-width="80px">
+                <el-form-item label="核销码">
+                  <el-input v-model="form.code" style="text-align: center;" ref="input"></el-input>
+                </el-form-item>
+
+                <el-form-item>
+                  <el-button type="primary" @click="onSubmit">确认核销</el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </qrcode-stream>
+  </div>
+</template>
+
+<script>
+  // 下载插件
+  // cnpm install --save  vue-qrcode-reader
+
+  // 引入
+  import {
+    QrcodeStream
+  } from 'vue-qrcode-reader';
+
+  export default {
+    // 注册
+    components: {
+      QrcodeStream
+    },
+    mounted() {
+      this.$refs.input.focus(); // 聚焦
+    },
+    data() {
+      return {
+        form: {
+          code: ""
+        },
+        result: '', // 扫码结果信息
+        error: '', // 错误信息
+        // show: false,
+        // qrcode: false,
+        qrcode: true,
+        torchActive: false,
+        camera: 'front',
+      };
+    },
+
+    methods: {
+      onDecode(result) {
+        console.log(result);
+        this.result = result;
+      },
+      async onInit(promise) {
+        const {
+          capabilities
+        } = await promise;
+
+        const TORCH_IS_SUPPORTED = !!capabilities.torch;
+        try {
+          await promise;
+        } catch (error) {
+          if (error.name === 'NotAllowedError') {
+            this.error = 'ERROR: 您需要授予相机访问权限';
+          } else if (error.name === 'NotFoundError') {
+            this.error = 'ERROR: 这个设备上没有摄像头';
+          } else if (error.name === 'NotSupportedError') {
+            this.error = 'ERROR: 所需的安全上下文(HTTPS、本地主机)';
+          } else if (error.name === 'NotReadableError') {
+            this.error = 'ERROR: 相机被占用';
+          } else if (error.name === 'OverconstrainedError') {
+            this.error = 'ERROR: 安装摄像头不合适';
+          } else if (error.name === 'StreamApiNotSupportedError') {
+            this.error = 'ERROR: 此浏览器不支持流API';
+          }
+        }
+      },
+      // 打开相机
+      // openCamera() {
+      //     this.camera = 'rear'
+      //     this.qrcode = true
+      //     this.show = true
+      // },
+      // 关闭相机
+      // closeCamera() {
+      //     this.camera = 'off'
+      //     this.qrcode = false
+      //     this.show = false
+      // },
+      // 打开手电筒
+      // openFlash() {
+      //     switch (this.torchActive) {
+      //         case true:
+      //             this.torchActive = false
+      //             break
+      //         case false:
+      //             this.torchActive = true
+      //             break
+      //     }
+      // },
+      // 相机反转
+      // switchCamera() {
+      //     // console.log(this.camera);
+      //     switch (this.camera) {
+      //         case 'front':
+      //             this.camera = 'rear'
+      //             console.log(this.camera)
+      //             break
+      //         case 'rear':
+      //             this.camera = 'front'
+      //             console.log(this.camera)
+      //             break
+      //     }
+      // }
+    },
+  };
+</script>
+<style scoped>
+  .el-input__inner{
+    text-align: center !important;
+  }
+  .error {
+    font-weight: bold;
+    color: red;
+  }
+
+  .cameraMessage {
+    width: 100%;
+    height: 60px;
+  }
+
+  .qr-scanner {
+    background-image: linear-gradient(0deg,
+        transparent 24%,
+        rgba(32, 255, 77, 0.1) 25%,
+        rgba(32, 255, 77, 0.1) 26%,
+        transparent 27%,
+        transparent 74%,
+        rgba(32, 255, 77, 0.1) 75%,
+        rgba(32, 255, 77, 0.1) 76%,
+        transparent 77%,
+        transparent),
+      linear-gradient(90deg,
+        transparent 24%,
+        rgba(32, 255, 77, 0.1) 25%,
+        rgba(32, 255, 77, 0.1) 26%,
+        transparent 27%,
+        transparent 74%,
+        rgba(32, 255, 77, 0.1) 75%,
+        rgba(32, 255, 77, 0.1) 76%,
+        transparent 77%,
+        transparent);
+    background-size: 3rem 3rem;
+    background-position: -1rem -1rem;
+    width: 100%;
+    /* height: 100%; */
+    height: 100vh;
+    /* height: 288px; */
+    position: relative;
+    background-color: #1110;
+
+    /* background-color: #111; */
+  }
+
+  /* .qrcode-stream-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 82px;
+  clear: both;
+} */
+  /* .qrcode-stream-wrapper >>> .qrcode-stream-camera {
+  width: 213px;
+  height: 210px;
+  clear: both;
+  margin-top: 39px;
+} */
+  .qr-scanner .box {
+    width: 213px;
+    height: 213px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    overflow: hidden;
+    border: 0.1rem solid rgba(0, 255, 51, 0.2);
+    /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
+  }
+
+  .qr-scanner .txt {
+    width: 100%;
+    height: 35px;
+    line-height: 35px;
+    font-size: 14px;
+    text-align: center;
+    /* color: #f9f9f9; */
+    margin: 0 auto;
+    position: absolute;
+    top: 70%;
+    left: 0;
+  }
+
+  .qr-scanner .myQrcode {
+    text-align: center;
+    color: #00ae10;
+  }
+
+  .qr-scanner .line {
+    height: calc(100% - 2px);
+    width: 100%;
+    background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
+    border-bottom: 3px solid #00ff33;
+    transform: translateY(-100%);
+    animation: radar-beam 2s infinite alternate;
+    animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
+    animation-delay: 1.4s;
+  }
+
+  .qr-scanner .box:after,
+  .qr-scanner .box:before,
+  .qr-scanner .angle:after,
+  .qr-scanner .angle:before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 3vw;
+    height: 3vw;
+
+    border: 0.2rem solid transparent;
+  }
+
+  .qr-scanner .box:after,
+  .qr-scanner .box:before {
+    top: 0;
+    border-top-color: #00ff33;
+  }
+
+  .qr-scanner .angle:after,
+  .qr-scanner .angle:before {
+    bottom: 0;
+    border-bottom-color: #00ff33;
+  }
+
+  .qr-scanner .box:before,
+  .qr-scanner .angle:before {
+    left: 0;
+    border-left-color: #00ff33;
+  }
+
+  .qr-scanner .box:after,
+  .qr-scanner .angle:after {
+    right: 0;
+    border-right-color: #00ff33;
+  }
+
+  @keyframes radar-beam {
+    0% {
+      transform: translateY(-100%);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+</style>
diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index 0ebdf65..bcd4633 100644
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -18,7 +18,7 @@
   import load from './dynamicLoadScript'
 
   // why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
-  const tinymceCDN = '/tinymce/tinymce.min.js'
+  const tinymceCDN = '/admin/tinymce/tinymce.min.js'
 
   export default {
     name: 'Tinymce',
diff --git a/src/permission.js b/src/permission.js
index 309a594..85ecad4 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@ import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login'] // no redirect whitelist
+const whiteList = ['/login','/check'] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {
   // start progress bar
diff --git a/src/router/index.js b/src/router/index.js
index d16e88f..46e8056 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -34,6 +34,10 @@ export const constantRoutes = [{
     path: '/login',
     component: () => import('@/views/login/index'),
     hidden: true
+  }, {
+    path: '/check',
+    component: () => import('@/views/active/checkOrder'),
+    hidden: true
   },
 
   {
diff --git a/src/views/active/checkOrder.vue b/src/views/active/checkOrder.vue
new file mode 100644
index 0000000..8cd9fc6
--- /dev/null
+++ b/src/views/active/checkOrder.vue
@@ -0,0 +1,296 @@
+// qrcode.vue
+<template>
+  <div>
+    <!-- <p class="error">{{ error }}</p> -->
+    <!--错误信息-->
+
+    <!-- <p class="decode-result">
+          扫描结果:
+          <b>{{ result }}</b>
+      </p> -->
+    <!--扫描结果-->
+    <!-- <p @click="openCamera">打开相机</p>
+      <div v-show="show" class="cameraMessage">
+          <p @click="closeCamera">关闭相机</p>
+          <p @click="openFlash">打开手电筒</p>
+          <p @click="switchCamera">相机反转</p>
+      </div> -->
+
+    <qrcode-stream v-show="qrcode" :camera="camera" :torch="torchActive" @decode="onDecode" @init="onInit">
+      <div>
+        <div class="qr-scanner">
+          <div class="box">
+            <div class="line"></div>
+            <div class="angle"></div>
+          </div>
+          <div class="txt">
+            将二维码放入框内，即自动扫描
+            <div class="myQrcode" style="padding: 10px 20px;">
+              <el-form ref="form" :model="form" label-position="top" label-width="80px">
+                <el-form-item label="核销码">
+                  <el-input v-model="form.code" :autofocus="true" style="text-align: center;" ref="input"></el-input>
+                </el-form-item>
+
+                <el-form-item>
+                  <el-button type="primary" @click="onSubmit">确认核销</el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </qrcode-stream>
+  </div>
+</template>
+
+<script>
+  // 下载插件
+  // cnpm install --save  vue-qrcode-reader
+
+  // 引入
+  import {
+    QrcodeStream
+  } from 'vue-qrcode-reader';
+
+  export default {
+    // 注册
+    components: {
+      QrcodeStream
+    },
+    mounted() {
+      this.$refs.input.focus(); // 聚焦
+    },
+    data() {
+      return {
+        form: {
+          code: ""
+        },
+        result: '', // 扫码结果信息
+        error: '', // 错误信息
+        // show: false,
+        // qrcode: false,
+        qrcode: true,
+        torchActive: false,
+        camera: 'rear',
+      };
+    },
+
+    methods: {
+      onDecode(result) {
+        console.log(result);
+        this.form.code=result;
+        this.result = result;
+      },
+      async onInit(promise) {
+        const {
+          capabilities
+        } = await promise;
+
+        const TORCH_IS_SUPPORTED = !!capabilities.torch;
+        try {
+          await promise;
+        } catch (error) {
+          if (error.name === 'NotAllowedError') {
+            this.error = 'ERROR: 您需要授予相机访问权限';
+          } else if (error.name === 'NotFoundError') {
+            this.error = 'ERROR: 这个设备上没有摄像头';
+          } else if (error.name === 'NotSupportedError') {
+            this.error = 'ERROR: 所需的安全上下文(HTTPS、本地主机)';
+          } else if (error.name === 'NotReadableError') {
+            this.error = 'ERROR: 相机被占用';
+          } else if (error.name === 'OverconstrainedError') {
+            this.error = 'ERROR: 安装摄像头不合适';
+          } else if (error.name === 'StreamApiNotSupportedError') {
+            this.error = 'ERROR: 此浏览器不支持流API';
+          }
+        }
+      },
+      // 打开相机
+      // openCamera() {
+      //     this.camera = 'rear'
+      //     this.qrcode = true
+      //     this.show = true
+      // },
+      // 关闭相机
+      // closeCamera() {
+      //     this.camera = 'off'
+      //     this.qrcode = false
+      //     this.show = false
+      // },
+      // 打开手电筒
+      // openFlash() {
+      //     switch (this.torchActive) {
+      //         case true:
+      //             this.torchActive = false
+      //             break
+      //         case false:
+      //             this.torchActive = true
+      //             break
+      //     }
+      // },
+      // 相机反转
+      // switchCamera() {
+      //     // console.log(this.camera);
+      //     switch (this.camera) {
+      //         case 'front':
+      //             this.camera = 'rear'
+      //             console.log(this.camera)
+      //             break
+      //         case 'rear':
+      //             this.camera = 'front'
+      //             console.log(this.camera)
+      //             break
+      //     }
+      // }
+    },
+  };
+</script>
+<style scoped>
+  .el-input__inner{
+    text-align: center !important;
+  }
+  .error {
+    font-weight: bold;
+    color: red;
+  }
+
+  .cameraMessage {
+    width: 100%;
+    height: 60px;
+  }
+
+  .qr-scanner {
+    background-image: linear-gradient(0deg,
+        transparent 24%,
+        rgba(32, 255, 77, 0.1) 25%,
+        rgba(32, 255, 77, 0.1) 26%,
+        transparent 27%,
+        transparent 74%,
+        rgba(32, 255, 77, 0.1) 75%,
+        rgba(32, 255, 77, 0.1) 76%,
+        transparent 77%,
+        transparent),
+      linear-gradient(90deg,
+        transparent 24%,
+        rgba(32, 255, 77, 0.1) 25%,
+        rgba(32, 255, 77, 0.1) 26%,
+        transparent 27%,
+        transparent 74%,
+        rgba(32, 255, 77, 0.1) 75%,
+        rgba(32, 255, 77, 0.1) 76%,
+        transparent 77%,
+        transparent);
+    background-size: 3rem 3rem;
+    background-position: -1rem -1rem;
+    width: 100%;
+    /* height: 100%; */
+    height: 100vh;
+    /* height: 288px; */
+    position: relative;
+    background-color: #1110;
+
+    /* background-color: #111; */
+  }
+
+  /* .qrcode-stream-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 82px;
+  clear: both;
+} */
+  /* .qrcode-stream-wrapper >>> .qrcode-stream-camera {
+  width: 213px;
+  height: 210px;
+  clear: both;
+  margin-top: 39px;
+} */
+  .qr-scanner .box {
+    width: 213px;
+    height: 213px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    overflow: hidden;
+    border: 0.1rem solid rgba(0, 255, 51, 0.2);
+    /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
+  }
+
+  .qr-scanner .txt {
+    width: 100%;
+    height: 35px;
+    line-height: 35px;
+    font-size: 14px;
+    text-align: center;
+    /* color: #f9f9f9; */
+    margin: 0 auto;
+    position: absolute;
+    top: 70%;
+    left: 0;
+  }
+
+  .qr-scanner .myQrcode {
+    text-align: center;
+    color: #00ae10;
+  }
+
+  .qr-scanner .line {
+    height: calc(100% - 2px);
+    width: 100%;
+    background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
+    border-bottom: 3px solid #00ff33;
+    transform: translateY(-100%);
+    animation: radar-beam 2s infinite alternate;
+    animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
+    animation-delay: 1.4s;
+  }
+
+  .qr-scanner .box:after,
+  .qr-scanner .box:before,
+  .qr-scanner .angle:after,
+  .qr-scanner .angle:before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 3vw;
+    height: 3vw;
+
+    border: 0.2rem solid transparent;
+  }
+
+  .qr-scanner .box:after,
+  .qr-scanner .box:before {
+    top: 0;
+    border-top-color: #00ff33;
+  }
+
+  .qr-scanner .angle:after,
+  .qr-scanner .angle:before {
+    bottom: 0;
+    border-bottom-color: #00ff33;
+  }
+
+  .qr-scanner .box:before,
+  .qr-scanner .angle:before {
+    left: 0;
+    border-left-color: #00ff33;
+  }
+
+  .qr-scanner .box:after,
+  .qr-scanner .angle:after {
+    right: 0;
+    border-right-color: #00ff33;
+  }
+
+  @keyframes radar-beam {
+    0% {
+      transform: translateY(-100%);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+</style>