|
|
@@ -12,7 +12,17 @@
|
|
|
:rules="rules"
|
|
|
class="login-form ele-bg-white"
|
|
|
@keyup.enter.native="submit"
|
|
|
- >
|
|
|
+ >
|
|
|
+ <el-popover
|
|
|
+ width="150"
|
|
|
+ trigger="hover">
|
|
|
+ <div>
|
|
|
+ <img style="width: 100%;" :src="qrcodeUrl" alt="" srcset="">
|
|
|
+ <div style="text-align: center;">下载APP</div>
|
|
|
+ </div>
|
|
|
+ <div slot="reference" class="switch-btn"></div>
|
|
|
+ </el-popover>
|
|
|
+
|
|
|
<h4>{{ $t('login.title') }}</h4>
|
|
|
<el-form-item prop="loginName">
|
|
|
<el-input
|
|
|
@@ -113,6 +123,7 @@
|
|
|
import { getPathAddress } from '@/api/system/file';
|
|
|
import { setCurrentUser } from '@/utils/token-util';
|
|
|
import { factoryareaId } from '@/api/system/user';
|
|
|
+ import QRCode from 'qrcode';
|
|
|
|
|
|
export default {
|
|
|
// eslint-disable-next-line vue/multi-word-component-names
|
|
|
@@ -142,7 +153,8 @@
|
|
|
// 验证码base64数据
|
|
|
captcha: '',
|
|
|
// 验证码内容, 实际项目去掉
|
|
|
- text: ''
|
|
|
+ text: '',
|
|
|
+ qrcodeUrl: ''
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -179,6 +191,7 @@
|
|
|
},
|
|
|
created() {
|
|
|
this.changeCaptcha();
|
|
|
+ this.generateQRCode();
|
|
|
if (getToken()) {
|
|
|
this.goHome();
|
|
|
} else {
|
|
|
@@ -187,6 +200,16 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ generateQRCode() {
|
|
|
+ QRCode.toDataURL('http://aiot.zoomwin.com.cn:51008/__UNI__45B3907__20250418095147.apk', {
|
|
|
+ errorCorrectionLevel: 'H',
|
|
|
+ margin: 2,
|
|
|
+ scale: 8,
|
|
|
+ }).then(url => {
|
|
|
+ console.log('qrcodeUrl', url);
|
|
|
+ this.qrcodeUrl = url;
|
|
|
+ });
|
|
|
+ },
|
|
|
/* 提交 */
|
|
|
submit() {
|
|
|
this.$refs.form.validate((valid) => {
|
|
|
@@ -285,6 +308,21 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ .switch-btn {
|
|
|
+ background: url(@/assets/qr-code-sprites.png) 0 0 / 40px auto no-repeat;
|
|
|
+ cursor: pointer;
|
|
|
+ height: 40px;
|
|
|
+ left: 8px;
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ width: 40px;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .switch-btn:hover {
|
|
|
+ background-position: 0 -40px;
|
|
|
+ }
|
|
|
+
|
|
|
/* 背景 */
|
|
|
.login-wrapper {
|
|
|
padding: 50px 20px;
|
