qrcodejs2二维码生成js
<div class="code-box"><div class="qrcode" ref="qrCodeUrl"></div><div class="rxpired-box" v-show="rxpired"><p>已过期</p>..
·
<div class="qrcode" ref="qrCodeUrl"></div>
<div class="rxpired-box" v-show="rxpired">
<p>已过期</p>
<Button type="primary" @click="bindRefresh">点击刷新</Button>
</div>
import QRCode from 'qrcodejs2'
methods: {
// 切换扫码
bindScan(){
if(!this.isScan){
this.isScan = true
this.getSanCodeKey()
}
this.loginType = 1
},
// 生成二维码
creatQrCode() {
let url= `${window.location.protocol}//${window.location.host}/pages/users/scan_login/index?key=${this.codeKey}`;
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: url, // 需要转换为二维码的内容
width: 160,
height: 160,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
},
// 关闭模态框
closeModel () {
let msg = this.$Message.loading({
content: '登录中...',
duration: 0
});
AccountLogin({
account: this.formInline.username,
password: this.formInline.password,
imgcode: this.formInline.code
}).then(async res => {
msg();
let expires = this.getExpiresTime(res.data.exp_time);
// 记录用户登陆信息
setCookies('kefu_uuid', res.data.kefuInfo.uid, expires);
setCookies('kefu_token', res.data.token, expires);
setCookies('kefu_expires_time', res.data.exp_time, expires);
setCookies('kefuInfo', res.data.kefuInfo, expires);
// 记录用户信息
this.$store.commit('kefu/setInfo', res.data.kefuInfo)
if(this.$store.state.media.isMobile){
//手机页面
return this.$router.replace({ path: this.$route.query.redirect || '/kefu/mobile_list' });
}else{
// pc页面
return this.$router.replace({ path: this.$route.query.redirect || '/kefu/pc_list' });
}
}).catch(res => {
msg();
let data = res === undefined ? {} : res;
this.errorNum++;
this.captchas();
this.$Message.error(data.msg || '登录失败');
if (this.jigsaw) this.jigsaw.reset();
});
},
getExpiresTime (expiresTime) {
let nowTimeNum = Math.round(new Date() / 1000);
let expiresTimeNum = expiresTime - nowTimeNum;
return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
},
closefail () {
if (this.jigsaw) this.jigsaw.reset();
this.$Message.error('校验错误');
},
handleResize (event) {
this.fullWidth = document.documentElement.clientWidth
},
captchas: function () {
this.imgcode = Setting.apiBaseURL + '/captcha_pro?' + Date.parse(new Date());
},
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.closeModel();
}
})
},
// 获取客服扫码key
getSanCodeKey(){
getSanCodeKey().then(res=>{
this.codeKey = res.data.key
this.creatQrCode()
this.scanTime = setInterval(()=>{
this.timeNum++
if(this.timeNum>=60){
this.timeNum = 0
window.clearInterval(this.scanTime)
this.rxpired = true
}else{
this.getScanStatus()
}
},1000)
}).catch(error=>{
this.timeNum = 0
window.clearInterval(this.scanTime)
this.rxpired = true
this.$Message.error(error.msg)
})
},
// 扫码登录情况
getScanStatus(){
scanStatus(this.codeKey).then(async res=>{
// 0 = 二维码过期需要重新获取授权凭证
if(res.data.status == 0){
this.timeNum = 0
window.clearInterval(this.scanTime)
this.rxpired = true
}
// 1=正在扫描
if(res.data.status == 1){
}
// 3 扫描成功正在登录
if(res.data.status == 3){
window.clearInterval(this.scanTime)
let expires = this.getExpiresTime(res.data.exp_time);
// 记录用户登陆信息
setCookies('kefu_uuid', res.data.kefuInfo.uid, expires);
setCookies('kefu_token', res.data.token, expires);
setCookies('kefu_expires_time', res.data.exp_time, expires);
setCookies('kefuInfo', res.data.kefuInfo, expires);
// 记录用户信息
this.$store.commit('kefu/setInfo', res.data.kefuInfo)
if(this.$store.state.media.isMobile){
//手机页面
return this.$router.replace({ path: this.$route.query.redirect || '/kefu/mobile_list' });
}else{
// pc页面
return this.$router.replace({ path: this.$route.query.redirect || '/kefu/pc_list' });
}
}
}).catch(error=>{
this.$Modal.error({
title: '提示',
content: error.msg
});
this.timeNum = 0
window.clearInterval(this.scanTime)
this.rxpired = true
})
},
// 刷新二维码
bindRefresh(){
this.$refs.qrCodeUrl.innerHTML = ''
this.rxpired = false
this.getSanCodeKey()
}
},
更多推荐
已为社区贡献7条内容
所有评论(0)