|
@@ -5,13 +5,11 @@
|
|
|
<el-card class="scan-card" shadow="hover">
|
|
|
<div class="scan-card-content">
|
|
|
<h1 class="title">扫码登录</h1>
|
|
|
- <el-input v-model="account" placeholder="请输入账号"></el-input>
|
|
|
- <el-button type="primary" @click="login" :disabled="!deviceId">登录</el-button>
|
|
|
+ <el-input v-model="userName" placeholder="请输入账号" style="margin-bottom: 20px;"></el-input>
|
|
|
+ <el-button type="primary" @click="login" >登录</el-button>
|
|
|
<div class="qrcode-container" v-show="showQRCode">
|
|
|
- <div class="qrcode" ref="qrcodeContainer"></div>
|
|
|
- <div v-if="!loading" class="qrcode-refresh" @click="getQRCode">
|
|
|
- <i class="el-icon-refresh"></i>
|
|
|
- <span>刷新二维码</span>
|
|
|
+ <div>
|
|
|
+ <img ref="imageElement" alt="Base64 Image" style="width:250px,height:auto ;">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -22,60 +20,56 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import QRCode from 'qrcodejs2';
|
|
|
-import { getQrCode, getDeviceIdByAccount } from '@/api/qw/login';
|
|
|
+import { getQrCode } from '@/api/qw/login';
|
|
|
+import { getDeviceId} from '@/api/qw/account';
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- account: '', // 用户输入的账号
|
|
|
+ userName: '', // 用户输入的账号
|
|
|
qrcode: null, // 二维码实例
|
|
|
loading: false, // 刷新按钮加载状态
|
|
|
deviceId: '', // 账号关联的 deviceId
|
|
|
showQRCode: false, // 是否显示二维码
|
|
|
errorMessage: '', // 错误信息
|
|
|
+ qrCode:'',
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- async login() {
|
|
|
- try {
|
|
|
- const response = await getDeviceIdByAccount(this.account);
|
|
|
+ login() {
|
|
|
+ const userName = this.userName;
|
|
|
+ getDeviceId(userName).then(response => {
|
|
|
this.deviceId = response.deviceId;
|
|
|
- this.showQRCode = !!this.deviceId; // 根据 deviceId 控制是否显示二维码
|
|
|
- if (this.showQRCode) {
|
|
|
+ });
|
|
|
+ this.showQRCode = !!this.deviceId; // 根据 deviceId 控制是否显示二维码
|
|
|
+ if (this.showQRCode) {
|
|
|
// 获取二维码
|
|
|
- this.getQRCode();
|
|
|
+ getQrCode(this.deviceId).then(response => {
|
|
|
+ this.qrCode = response.data;
|
|
|
+ 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 = '请检查账号是否正确或是否审核通过';
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- // 处理错误
|
|
|
- console.error(error);
|
|
|
- }
|
|
|
- },
|
|
|
- async getQRCode() {
|
|
|
- this.loading = true;
|
|
|
- try {
|
|
|
- const response = await getQrCode();
|
|
|
- this.generateQRCode(response.qrCode);
|
|
|
- } catch (error) {
|
|
|
- // 处理错误
|
|
|
- console.error(error);
|
|
|
- }
|
|
|
- this.loading = false;
|
|
|
- },
|
|
|
- generateQRCode(base64String) {
|
|
|
- // 渲染二维码
|
|
|
- if (this.qrcode) {
|
|
|
- this.qrcode.clear();
|
|
|
- }
|
|
|
- this.qrcode = new QRCode(this.$refs.qrcodeContainer, {
|
|
|
- text: base64String,
|
|
|
- width: 180,
|
|
|
- height: 180,
|
|
|
- });
|
|
|
},
|
|
|
+ // convertBase64ToImage(qrCode) {
|
|
|
+
|
|
|
+ // const base64Data = qrCode; // Base64 编码
|
|
|
+
|
|
|
+ // console.log(base64Data)
|
|
|
+ // const image = new Image();
|
|
|
+ // image.onload = () => {
|
|
|
+ // this.$refs.imageElement.src = image.src;
|
|
|
+ // };
|
|
|
+ // image.src = `data:image/jpeg;base64,${base64Data}`;
|
|
|
+ // },
|
|
|
+
|
|
|
},
|
|
|
};
|
|
|
</script>
|