|
@@ -1,21 +1,27 @@
|
|
|
<template>
|
|
|
<div class="scan-login">
|
|
|
- <el-row align="middle" justify="center">
|
|
|
- <el-col :span="8">
|
|
|
- <el-card class="scan-card" shadow="hover">
|
|
|
- <div class="scan-card-content">
|
|
|
- <h1 class="title">扫码登录</h1>
|
|
|
- <el-input v-model="account" placeholder="请输入账号" style="margin-bottom: 20px;"></el-input>
|
|
|
- <el-button type="primary" @click="login" >登录</el-button>
|
|
|
- <div class="qrcode-container" v-show="showQRCode">
|
|
|
- <div>
|
|
|
- <img ref="imageElement" alt="Base64 Image" style="width:250px,height:auto ;">
|
|
|
+ <el-form ref="qwForm" :model="qwForm" :rules="qwRules" label-width="70px">
|
|
|
+ <el-row v-loading="loading" align="middle" justify="center">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-card class="scan-card" shadow="hover">
|
|
|
+ <div class="scan-card-content">
|
|
|
+ <h1 class="title">扫码登录</h1>
|
|
|
+ <el-form-item label="手机号" prop="account" style="width:100%">
|
|
|
+ <el-input v-model="qwForm.account" placeholder="请输入账号" style="margin-bottom: 20px"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-button type="primary" @click.native.prevent="handleLogin">登录</el-button>
|
|
|
+ <div class="qrcode-container" v-show="showQRCode">
|
|
|
+ <div>
|
|
|
+ <img ref="imageElement" alt="Base64 Image" style="width:250px,height:auto ;">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -26,6 +32,7 @@ import { getDeviceId} from '@/api/qw/account';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ loading: false,// 遮罩层
|
|
|
account: '', // 用户输入的账号
|
|
|
qrcode: null, // 二维码实例
|
|
|
loading: false, // 刷新按钮加载状态
|
|
@@ -33,35 +40,58 @@ export default {
|
|
|
showQRCode: false, // 是否显示二维码
|
|
|
errorMessage: '', // 错误信息
|
|
|
qrCode:'',
|
|
|
+ qwForm: {
|
|
|
+ account:null
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ qwRules: {
|
|
|
+ account: [
|
|
|
+ { required: true, message: "请输入账号", trigger: "blur" }
|
|
|
+ ]
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- login() {
|
|
|
- const account = this.account;
|
|
|
- getDeviceId(account).then(response => {
|
|
|
- this.deviceId = response.deviceId;
|
|
|
+ handleLogin() {
|
|
|
+
|
|
|
+ this.$refs.qwForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ const account = this.qwForm.account;
|
|
|
+ this.loading=true;
|
|
|
+ if (this.showQRCode) {
|
|
|
+ this.getQrCode();
|
|
|
+ }else{
|
|
|
+ getDeviceId(account).then(response => {
|
|
|
+ this.deviceId = response.deviceId;
|
|
|
+ this.showQRCode = !!this.deviceId; // 根据 deviceId 控制是否显示二维码
|
|
|
+ if (this.showQRCode) {
|
|
|
+ this.getQrCode();
|
|
|
+ }else{
|
|
|
+ // deviceId 为空时显示错误提示
|
|
|
+ this.errorMessage = '请检查账号是否正确或是否审核通过';
|
|
|
+ this.loading=false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
});
|
|
|
- this.showQRCode = !!this.deviceId; // 根据 deviceId 控制是否显示二维码
|
|
|
- if (this.showQRCode) {
|
|
|
- // 获取二维码
|
|
|
- getQrCode(this.deviceId).then(response => {
|
|
|
- this.qrCode = response.data.qrcode;
|
|
|
- const base64Data = this.qrCode; // Base64 编码
|
|
|
- const image = new Image();
|
|
|
- image.onload = () => {
|
|
|
- this.$refs.imageElement.src = image.src;
|
|
|
- };
|
|
|
- image.src = `data:image/jpeg;base64,${base64Data}`;
|
|
|
- });
|
|
|
- } else {
|
|
|
- // deviceId 为空时显示错误提示
|
|
|
- this.errorMessage = '请检查账号是否正确或是否审核通过';
|
|
|
- }
|
|
|
},
|
|
|
- // convertBase64ToImage(qrCode) {
|
|
|
+ getQrCode(){
|
|
|
+ // 获取二维码
|
|
|
+ getQrCode(this.deviceId).then(response => {
|
|
|
+ this.qrCode = response.data.qrcode;
|
|
|
+ const base64Data = this.qrCode; // Base64 编码
|
|
|
+ const image = new Image();
|
|
|
+ image.onload = () => {
|
|
|
+ this.$refs.imageElement.src = image.src;
|
|
|
+ };
|
|
|
+ image.src = `data:image/jpeg;base64,${base64Data}`;
|
|
|
+ this.loading=false;
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
+ // convertBase64ToImage(qrCode) {
|
|
|
// const base64Data = qrCode; // Base64 编码
|
|
|
-
|
|
|
// console.log(base64Data)
|
|
|
// const image = new Image();
|
|
|
// image.onload = () => {
|
|
@@ -76,8 +106,9 @@ export default {
|
|
|
|
|
|
<style scoped>
|
|
|
.scan-login {
|
|
|
- height: 100vh;
|
|
|
+ height: 80vh;
|
|
|
display: flex;
|
|
|
+ flex: 1;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
@@ -95,7 +126,8 @@ export default {
|
|
|
|
|
|
.title {
|
|
|
font-size: 24px;
|
|
|
- margin-bottom: 20px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ margin-top: 0px;
|
|
|
}
|
|
|
|
|
|
.qrcode-container {
|