|
|
|
@ -4,15 +4,22 @@ |
|
|
|
<div class="index_rootContainer"> |
|
|
|
<b class="title">扫码登录</b> |
|
|
|
<p class="sub_title mt32">打开 <b>微信</b> 扫码登录</p> |
|
|
|
<div class=" mb32" v-if="status == 'waiting'"> |
|
|
|
<vue-qr :text="qrCodeUrl" :size="192" :dot-scale="1"></vue-qr> |
|
|
|
<div class="wxlogin-qrcode-box mb32" v-if="status == 'waiting'"> |
|
|
|
<Wxlogin |
|
|
|
v-if="appid && redirect_uri" |
|
|
|
:appid="appid" |
|
|
|
:redirect_uri="redirect_uri" |
|
|
|
scope="snsapi_login" |
|
|
|
:state="state" |
|
|
|
height="186px" |
|
|
|
href="data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE4OHB4O2JvcmRlcjpub25lO21hcmdpbi10b3A6MHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAxODhweDtkaXNwbGF5Om5vbmU7fQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9Ci5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9Ci53ZWJfcXJjb2RlX3R5cGVfaWZyYW1le2hlaWdodDoxODZweDt9Ci53ZWJfcXJjb2RlX3N3aXRjaF93cnAuanNfc3dpdGNoVG9GYXN0X3dycHttYXJnaW4tdG9wOjBweCAhaW1wb3J0YW50O2NvbG9yOiAjOEE5MDk5ICFpbXBvcnRhbnQ7fQoud2ViX3FyY29kZV9zd2l0Y2hfd3JwLmpzX3N3aXRjaFRvRmFzdF93cnAgYnV0dG9ue2NvbG9yOiAjOEE5MDk5ICFpbXBvcnRhbnQ7Y3Vyc29yOnBvaW50ZXI7fQoud2ViX3FyY29kZV9zd2l0Y2hfd3JwLmpzX3N3aXRjaFRvTm9ybWFsX3dycCBidXR0b257Y29sb3I6ICM4QTkwOTkgIWltcG9ydGFudDtjdXJzb3I6cG9pbnRlcjt9" |
|
|
|
></Wxlogin> |
|
|
|
</div> |
|
|
|
<div class="refreshCode" v-if="status == 'expired'" @click="refreshCode"> |
|
|
|
<i class="el-icon-refresh"></i> |
|
|
|
刷新二维码 |
|
|
|
</div> |
|
|
|
<!-- :logo-src="logoUrl" |
|
|
|
:logo-scale="0.2" --> |
|
|
|
|
|
|
|
<div class="attention gap10"> |
|
|
|
<el-checkbox v-model="checked"></el-checkbox> |
|
|
|
<b>登录即代表同意 <a @click="jumpDoc">《用户协议》</a>和 <a @click="jumpDoc">《隐私条款》</a></b> |
|
|
|
@ -40,123 +47,44 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import VueQr from 'vue-qr' |
|
|
|
import Wxlogin from 'vue-wxlogin'; |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
VueQr |
|
|
|
Wxlogin |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
checked: true, |
|
|
|
qrCodeUrl: 'https://example.com', |
|
|
|
token: '', |
|
|
|
status: 'expired', // waiting, scanned, confirmed, expired, error |
|
|
|
status: 'expired', |
|
|
|
loginTime:'', |
|
|
|
appid:false, |
|
|
|
redirectUri:false, |
|
|
|
state:'zjadmin' |
|
|
|
} |
|
|
|
}, |
|
|
|
created(){ |
|
|
|
// this.generateQRCode() |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
this.clearTimers(); |
|
|
|
this.getLoginConfig() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
jumpDoc() { |
|
|
|
|
|
|
|
}, |
|
|
|
// 刷新二维码 |
|
|
|
refreshCode() { |
|
|
|
|
|
|
|
}, |
|
|
|
async generateQRCode() { |
|
|
|
async getLoginConfig() { |
|
|
|
this.status = 'waiting'; |
|
|
|
this.qrCodeUrl = ''; |
|
|
|
return |
|
|
|
// try { |
|
|
|
// await this.$http('POST', '/api/admin/generate_qrcode', { |
|
|
|
// device_type: 'web', |
|
|
|
// timestamp: Date.now() |
|
|
|
// }).then(response => { |
|
|
|
// this.token = response.data.token; |
|
|
|
// this.qrCodeUrl = response.data.qr_code_url; |
|
|
|
|
|
|
|
// // 开始轮询检查状态 |
|
|
|
// this.startPolling(); |
|
|
|
|
|
|
|
// // 设置二维码过期时间（5分钟） |
|
|
|
// this.setExpireTimer(); |
|
|
|
// }).catch(error => { |
|
|
|
// console.error('生成二维码失败:', error); |
|
|
|
// this.status = 'error'; |
|
|
|
// }); |
|
|
|
// } catch (error) { |
|
|
|
// console.error('生成二维码失败:', error); |
|
|
|
// this.status = 'error'; |
|
|
|
// } |
|
|
|
}, |
|
|
|
|
|
|
|
// 开始轮询检查扫码状态 |
|
|
|
startPolling() { |
|
|
|
this.clearTimers(); |
|
|
|
|
|
|
|
// this.pollInterval = setInterval(async () => { |
|
|
|
// if (this.status === 'confirmed' || this.status === 'expired' || this.status === 'error') { |
|
|
|
// this.clearTimers(); |
|
|
|
// return; |
|
|
|
// } |
|
|
|
|
|
|
|
// try { |
|
|
|
// await this.$http('POST', '/api/admin/check_scan_status', { |
|
|
|
// token: this.token |
|
|
|
// }).then(response => { |
|
|
|
// this.status = response.data.status; |
|
|
|
|
|
|
|
// if (response.data.status === 'scanned') { |
|
|
|
// // 扫码后等待确认 |
|
|
|
// setTimeout(() => { |
|
|
|
// this.handleLoginConfirm(); |
|
|
|
// }, 2000); |
|
|
|
// } else if (response.data.status === 'confirmed') { |
|
|
|
// this.handleLoginSuccess(response.data); |
|
|
|
// } else if (response.data.status === 'expired') { |
|
|
|
// this.status = 'expired'; |
|
|
|
// this.clearTimers(); |
|
|
|
// } |
|
|
|
// }).catch(error => { |
|
|
|
// console.error('检查扫码状态失败:', error); |
|
|
|
// this.status = 'error'; |
|
|
|
// this.clearTimers(); |
|
|
|
// }); |
|
|
|
// } catch (error) { |
|
|
|
// console.error('检查扫码状态失败:', error); |
|
|
|
// this.status = 'error'; |
|
|
|
// this.clearTimers(); |
|
|
|
// } |
|
|
|
// }, 2000); |
|
|
|
}, |
|
|
|
|
|
|
|
// 处理登录确认 |
|
|
|
async handleLoginConfirm() { |
|
|
|
// try { |
|
|
|
// await this.$http('POST', '/api/admin/confirm_login', { |
|
|
|
// token: this.token |
|
|
|
// }).then(response => { |
|
|
|
// if (response.data.success) { |
|
|
|
// this.handleLoginSuccess(response.data); |
|
|
|
// } else { |
|
|
|
// this.status = 'expired'; |
|
|
|
// } |
|
|
|
// }).catch(error => { |
|
|
|
// console.error('登录确认失败:', error); |
|
|
|
// this.status = 'error'; |
|
|
|
// }); |
|
|
|
// } catch (error) { |
|
|
|
// console.error('登录确认失败:', error); |
|
|
|
// this.status = 'error'; |
|
|
|
// } |
|
|
|
this.redirect_uri = ''; |
|
|
|
this.appid = ''; |
|
|
|
try { |
|
|
|
await this.$http('POST', '/api/callback/get_admin_login_config').then(response => { |
|
|
|
this.appid = response.data.appid |
|
|
|
this.redirect_uri = response.data.redirect_uri |
|
|
|
}).catch(error => { |
|
|
|
console.error('生成二维码失败:', error); |
|
|
|
this.status = 'error'; |
|
|
|
}); |
|
|
|
} catch (error) { |
|
|
|
console.error('生成二维码失败:', error); |
|
|
|
this.status = 'error'; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 处理登录成功 |
|
|
|
handleLoginSuccess(data) { |
|
|
|
this.status = 'confirmed'; |
|
|
|
this.userInfo = data.user_info; |
|
|
|
@ -172,30 +100,6 @@ export default { |
|
|
|
this.$emit('login-success', data); |
|
|
|
}, 1000); |
|
|
|
}, |
|
|
|
|
|
|
|
// 设置过期定时器 |
|
|
|
setExpireTimer() { |
|
|
|
this.expireTimer = setTimeout(() => { |
|
|
|
if (this.status !== 'confirmed') { |
|
|
|
this.status = 'expired'; |
|
|
|
this.clearTimers(); |
|
|
|
} |
|
|
|
}, 5 * 60 * 1000); // 5分钟过期 |
|
|
|
}, |
|
|
|
|
|
|
|
// 清除所有定时器 |
|
|
|
clearTimers() { |
|
|
|
if (this.pollInterval) { |
|
|
|
clearInterval(this.pollInterval); |
|
|
|
this.pollInterval = null; |
|
|
|
} |
|
|
|
if (this.expireTimer) { |
|
|
|
clearTimeout(this.expireTimer); |
|
|
|
this.expireTimer = null; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -246,6 +150,10 @@ export default { |
|
|
|
color: #626573; |
|
|
|
margin-top: 32px; |
|
|
|
margin-bottom: 12px; |
|
|
|
b{ |
|
|
|
font-weight: bold; |
|
|
|
color: #1E2226; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.img { |
|
|
|
@ -379,4 +287,10 @@ export default { |
|
|
|
#ecomLoginForm { |
|
|
|
height: 280px; |
|
|
|
} |
|
|
|
|
|
|
|
.wxlogin-qrcode-box{ |
|
|
|
div:first-of-type{ |
|
|
|
height: 214px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
longchao
4 weeks ago