68 lines
2.2 KiB
Vue
68 lines
2.2 KiB
Vue
<template>
|
||
<div class="config-section mt60">
|
||
<h3 class="config-section-title">
|
||
<label>登录二维码 </label>
|
||
<span class="btn-qr-code" v-if="!isPlatformLoggedIn" @click="handleGetQrCode"> 获取二维码 </span>
|
||
</h3>
|
||
<div class="qr-code-display">
|
||
<div v-if="!qrCodeUrl" class="qr-code-placeholder">
|
||
<p>点击下方"获取二维码"按钮获取二维码</p>
|
||
</div>
|
||
<div v-else style="text-align: center;">
|
||
<img :src="qrCodeUrl" alt="登录二维码"
|
||
style="max-width: 100%; max-height: 200px; border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
|
||
<div class="qr-code-info" style="margin-top: 10px; font-size: 11px; color: #666;">
|
||
<p>请使用微信扫描二维码登录</p>
|
||
<p v-if="qrCodeCountdownActive && qrCodeCountdown > 0"
|
||
style="margin-top: 8px; font-size: 12px; color: #667eea; font-weight: bold;">
|
||
{{ qrCodeCountdown }}秒后自动刷新
|
||
</p>
|
||
<p v-if="qrCodeExpired"
|
||
style="margin-top: 8px; font-size: 12px; color: #ff4757; font-weight: bold;">
|
||
请重新刷新二维码，这个二维码就不能用了
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import qrCodeMixin from '../mixins/qrCodeMixin';
|
||
import { mapState } from 'vuex';
|
||
import platformMixin from '../mixins/platformMixin';
|
||
import logMixin from '../mixins/logMixin.js';
|
||
|
||
export default {
|
||
name: 'QrCodeSection',
|
||
mixins: [qrCodeMixin, platformMixin, logMixin],
|
||
computed: {
|
||
...mapState('qrCode', ['qrCodeUrl', 'qrCodeCountdownActive', 'qrCodeCountdown', 'qrCodeExpired'])
|
||
},
|
||
methods: {
|
||
async handleGetQrCode() {
|
||
const success = await this.getQrCode();
|
||
if (success) {
|
||
// 获取成功后启动自动刷新
|
||
this.startQrCodeAutoRefresh();
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
// 如果已有二维码，启动自动刷新
|
||
if (this.qrCodeUrl && !this.isPlatformLoggedIn) {
|
||
this.startQrCodeAutoRefresh();
|
||
}
|
||
},
|
||
beforeUnmount() {
|
||
// 组件销毁时清理
|
||
this.stopQrCodeAutoRefresh();
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
// 样式已经在全局 CSS 中定义
|
||
</style>
|
||
|