'123'

ruoyi-framework/src/main/java/com/ruoyi/framework/web/service/SsoLoginService.java

@@ -18,7 +18,7 @@ import org.springframework.stereotype.Service;
  * @package: com.ruoyi.framework.web.service
  * @className: ThirdLoginService
  * @author: sean
- * @description: TODO
+ * @description: 无密码登录服务
  * @date: 2023/2/22 7:53
  * @version: 1.0
  */

ruoyi-framework/src/main/java/com/ruoyi/framework/web/service/SsoUserDetailsService.java

@@ -17,7 +17,7 @@ import org.springframework.stereotype.Service;
  * @package: com.ruoyi.framework.web.service
  * @className: ThirdUserDetailsService
  * @author: sean
- * @description: TODO
+ * @description: 无密码登录服务
  * @date: 2023/2/22 8:26
  * @version: 1.0
  */

ruoyi-ui/package.json

@@ -60,6 +60,7 @@
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
+    "vue-qrcode-reader": "^3.2.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",

ruoyi-ui/src/permission.js

@@ -9,7 +9,7 @@ import defaultSettings from '@/settings'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register', '/ssoLogin']
+const whiteList = ['/login', '/register', '/ssoLogin','/scan']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

ruoyi-ui/src/router/index.js

@@ -94,7 +94,13 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
-  }
+  },
+  //调用手机摄像扫码
+  {
+    path: '/scan',
+    component: () => import('@/views/scan/scanPage'),
+    hidden: true
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载

ruoyi-ui/src/views/scan/scan.vue

@@ -0,0 +1,204 @@
+<!-- Scanner.vue -->
+<template>
+  <div class="scanner">
+    <qrcode-stream
+      ref="qrCodeReaderRef"
+      :camera="camera"
+      @decode="onDecode"
+      @init="onInit"
+      style="height: 100vh"
+    >
+      <div v-if="scanBox">
+        <div class="qr-scanner">
+          <div class="box">
+            <div class="line"></div>
+            <div class="angle"></div>
+          </div>
+        </div>
+      </div>
+    </qrcode-stream>
+  </div>
+</template>
+<script>
+  import { QrcodeStream } from "vue-qrcode-reader";
+  export default {
+    components: { QrcodeStream },
+    data() {
+      return {
+        camera: "auto",  // auto为开始获取摄像头，rear为后置，front为前置，off为关闭
+        result: "", // 扫码结果信息
+        error: "", // 错误信息
+        scanBox: false
+      };
+    },
+    created() {},
+    methods: {
+      //回调扫描结果
+      onDecode(result) {
+        if (result) {
+          this.$emit("success", result);
+        }
+      },
+      // 检查是否调用摄像头
+      async onInit(promise) {
+        try {
+          const { capabilities } = await promise;
+          this.$emit('init', capabilities)
+          this.camera = 'rear'
+          setTimeout(() => {
+            this.scanBox = true
+          }, 1000)
+        } 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";
+          } else if (error.name === "InsecureContextError") {
+            this.error =
+              "ERROR: 仅允许在安全上下文中访问摄像机。使用HTTPS或本地主机，而不是HTTP。";
+          } else {
+            this.error = "ERROR:摄像机错误";
+          }
+          this.$emit("err", this.error);
+        }
+      }
+    },
+  };
+</script>
+<style scoped>
+  .error {
+    font-weight: bold;
+    color: red;
+  }
+</style>
+<style scoped>
+  .scanner {
+    width: 100vw;
+    border-color: #585858;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+  .qrcode-stream-camera {
+    width: 100%;
+    height: 100%;
+    display: block;
+    -o-object-fit: cover;
+    object-fit: cover;
+    position: absolute;
+    top: 0%;
+    left: 0%;
+  }
+  .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;
+    position: relative;
+    /* background-color: #1110;*/
+
+    /* background-color: #111; */
+  }
+
+  .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 .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>

ruoyi-ui/src/views/scan/scanPage.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="visitor">
+    <el-button type="primary" @click="displayScanner(true)">点击调起摄像头扫描二维码</el-button>
+    <!-- 扫码二维码组件 -->
+    <scanner v-if="showScanner" @success="handleScanResult" @err="handleScanError"></scanner>
+  </div>
+</template>
+
+<script>
+  import Scanner from '@/views/scan/scan.vue'
+
+  export default {
+    components: { Scanner },
+    data() {
+      return {
+        showScanner: false
+      }
+    },
+    methods: {
+      // 显示摄像头
+      displayScanner(val) {
+        this.showScanner = val
+      },
+      // 处理摄像头打开错误
+      handleScanError(error) {
+        this.$message.error(error)
+        this.displayScanner(false)
+      },
+      // 处理扫描结果
+      async handleScanResult(res) {
+        console.log(res)
+      }
+    }
+  }
+</script>