You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
2.8 KiB
132 lines
2.8 KiB
<template> |
|
<div class="google"> |
|
<div class="googleCont"> |
|
<div class="leftBox"> |
|
<div id="qrcode" ref="qrcodeDom"></div> |
|
<p class="googleKey">{{ googleKey }}</p> |
|
</div> |
|
<div class="rightBox"> |
|
<p class="rightTitle">{{ $t('personal.security.googlepop.code') }}</p> |
|
<div class="inputBox"> |
|
<el-input |
|
v-model="code" |
|
:placeholder="$t('personal.security.googlepop.code_p')" |
|
></el-input> |
|
</div> |
|
|
|
<el-button class="confirm" type="primary" @click="confirm"> |
|
{{ $t('personal.security.confirm') }} |
|
</el-button> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import {getGoogleKey, bingGoogle} from '@/api/user'; |
|
import QRCode from 'qrcodejs2'; |
|
export default { |
|
name: 'google', |
|
props: ['google'], |
|
data() { |
|
return { |
|
code: '', |
|
googleKey: '', |
|
}; |
|
}, |
|
created() { |
|
this.getKey(); |
|
}, |
|
methods: { |
|
qrcode(text) { |
|
let qrcode = new QRCode('qrcode', { |
|
width: 100, |
|
height: 100, |
|
// text: text, |
|
}); |
|
qrcode.makeCode(text); |
|
}, |
|
confirm() { |
|
if (this.code === '') { |
|
this.$message.warning(this.$t('personal.security.googlepop.code_p')); |
|
} else { |
|
bingGoogle({ |
|
key: this.googleKey, |
|
code: this.code, |
|
}).then(res => { |
|
// console.log(res); |
|
if (res.data.code === 200) { |
|
this.$message.success(this.$t('personal.security.editEmail.bind')); |
|
} else { |
|
this.$message.warning(res.data.msg); |
|
} |
|
|
|
this.$emit('confirm', !this.google); |
|
}); |
|
} |
|
}, |
|
getKey() { |
|
getGoogleKey().then(res => { |
|
if (res.data.code === 200) { |
|
this.googleKey = res.data.data; |
|
//处理二维码不叠加 |
|
if (this.$refs.qrcodeDom != undefined || this.$refs.qrcodeDom != '') { |
|
this.$refs.qrcodeDom.innerHTML = ''; |
|
this.qrcode('otpauth://totp/flamex.io?secret=' + res.data.data); |
|
} |
|
} |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss"> |
|
.google { |
|
.googleCont { |
|
display: flex; |
|
width: 85%; |
|
margin: 24px auto 0; |
|
justify-content: space-between; |
|
} |
|
|
|
.leftBox { |
|
width: 225px; |
|
} |
|
#qrcode { |
|
img { |
|
margin: 0 auto; |
|
border: 4px solid #fff; |
|
} |
|
} |
|
.rightTitle { |
|
font-size: 14px; |
|
color: #686e7c; |
|
font-weight: 400; |
|
margin-top: 5px; |
|
} |
|
.googleKey { |
|
font-size: 12px; |
|
color: #686e7c; |
|
text-align: center; |
|
margin-top: 10px; |
|
font-weight: 400; |
|
} |
|
.inputBox { |
|
width: 280px; |
|
height: 36px; |
|
margin: 8px 0 15px 0; |
|
} |
|
.el-input { |
|
width: 98%; |
|
height: 97%; |
|
} |
|
|
|
.confirm { |
|
width: 275px; |
|
height: 40px; |
|
background-color: #e8494a; |
|
border-color: #e8494a; |
|
} |
|
} |
|
</style>
|
|
|