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.
409 lines
11 KiB
409 lines
11 KiB
<template>
|
|
<div>
|
|
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
|
<el-menu-item index="1">账号登录</el-menu-item>
|
|
<el-menu-item index="2">身份认证</el-menu-item>
|
|
</el-menu>
|
|
<div class="menu_body">
|
|
<div v-show="isShow">
|
|
<div id="accountLogin">
|
|
<div class="menu_body_text">电子税局登录</div>
|
|
<el-form ref="form" :model="form" label-width="140px" label-position="left" class="form">
|
|
<el-row>
|
|
<el-col :span="34">
|
|
<el-form-item label="电子税务局用户名">
|
|
<el-select v-model="form.name" placeholder="请选择电子税局用户名">
|
|
<el-option v-for="item in dzsjList" :key="item.id" :label="item.yhm" :value="item"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12"></el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div class="button"><el-button :loading="anewLoginBtnLoading" @click="anewLoginBtn()" type="primary">重新登录</el-button></div>
|
|
</div>
|
|
</div>
|
|
<div v-show="!isShow">
|
|
<div id="authentication">
|
|
<div class="at_title">请使用税务APP扫描下方二维码进行身份验证</div>
|
|
<div class="at_input">
|
|
<div class="at_labe">电子税局用户名</div>
|
|
<div class="select">
|
|
<el-select v-model="formQr.name" placeholder="请选择电子税局用户名">
|
|
<el-option v-for="item in dzsjList" :key="item.id" :label="item.yhm" :value="item"></el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="button"><el-button :loading="getQrCodeBtnloading" @click="getQrCodeBtn()" type="primary">获取认证二维码</el-button></div>
|
|
</div>
|
|
<div class="qrcode" ref="qrCodeUrl"></div>
|
|
<div class="qrcodetext" v-show="qrcodeShow">可将二维码图片发给认证人员进行身份认证，手机端完成认证后自动同步认证结果，开展后续数电业务操作。</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<el-dialog
|
|
class="dialog"
|
|
title="短信登录"
|
|
:visible.sync="dialogVisible"
|
|
width="550px"
|
|
>
|
|
<div class="dialog_title">
|
|
<div class="dialog_img"><img src="@/assets/images/tishi.png" height="20px" width="20px"></div>
|
|
<div class="dialog_text">为了您的账号安全和信用安全，请进行安全验证。验证码将以短信形式发送至电子税务局绑定的手机号。</div>
|
|
</div>
|
|
<div class="dialog_body">
|
|
<div class="dialog_body_zh"><div class="label">数电账号:</div><div class="zh">{{this.smsFrom.zh}}</div></div>
|
|
<div class="dialog_body_yzm">
|
|
<div class="label">验证码:</div>
|
|
<div class="input"><el-input v-model="dxyzm" placeholder="请输入验证码"></el-input></div>
|
|
<div><el-button :loading="getyzmBtnloading" @click="getyzmBtn()" type="primary">获取验证码</el-button></div>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="yzmloginBtn()">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<el-dialog
|
|
title="责任人"
|
|
:visible.sync="zzrdialogVisible"
|
|
width="550px"
|
|
>
|
|
<el-form ref="form" :model="form" label-width="60px" label-position="left" align="center" class="form">
|
|
<el-row class="zzr">
|
|
<el-col :span="12">
|
|
<el-form-item label="责任人">
|
|
<el-select v-model="zzrlx" placeholder="请选择责任人">
|
|
<el-option v-for="item in zrrList" :key="item.val" :label="item.label" :value="item.val"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="zzrdialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="zzrloginBtn()">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import QRCode from 'qrcodejs2'
|
|
import { getRpaQrCodeApi, postRpaAuthStatusApi, queryRpaTaxAccountApi, rpaLoginApi } from '@/api/digital/taxBureauLogin'
|
|
export default {
|
|
name:"taxBureauLogin",
|
|
data() {
|
|
return {
|
|
isShow:true,
|
|
activeIndex: '1',
|
|
activeIndex2: '1',
|
|
form:{
|
|
name:{}
|
|
},
|
|
formQr:{
|
|
name:{}
|
|
},
|
|
loginKey:{
|
|
id:'',
|
|
key:''
|
|
},
|
|
dzsjList:[],
|
|
ffm:0,
|
|
dialogVisible:false,
|
|
smsFrom:{
|
|
zh:'',
|
|
yzm:''
|
|
},
|
|
zrrList:[],
|
|
zzrdialogVisible:false,
|
|
dxyzm:'',
|
|
zzrlx:'',
|
|
qrcodeShow:false,
|
|
timer:null,
|
|
rzid:'',
|
|
anewLoginBtnLoading:false,
|
|
getyzmBtnloading:false,
|
|
getQrCodeBtnloading:false
|
|
};
|
|
},
|
|
methods: {
|
|
handleSelect(key, keyPath) {
|
|
key === '1' ? this.isShow = true : this.isShow = false
|
|
},
|
|
getRpaAuthStatus(){
|
|
queryRpaTaxAccountApi().then(res => {
|
|
this.dzsjList = res.data
|
|
this.form.name = this.dzsjList[length]
|
|
});
|
|
},
|
|
anewLoginBtn(){
|
|
this.$confirm('登录操作有可能会影响到开票业务，确定要使用该账号登录电子税务局吗？', '确认', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.postLogin()
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
});
|
|
});
|
|
},
|
|
postLogin(){
|
|
let parames = {
|
|
yhm:this.form.name.yhm,mm:this.form.name.mm,ffm:this.ffm,dxyzm:this.dxyzm,zzrlx:this.zzrlx
|
|
}
|
|
this.anewLoginBtnLoading = true;
|
|
rpaLoginApi(parames).then(({data})=>{
|
|
this.ffm = data.hxff
|
|
|
|
if(data.hxff === "0"){
|
|
this.$message({
|
|
message: '登录成功',
|
|
type: 'success'
|
|
});
|
|
}
|
|
if(data.hxff === "1"){
|
|
this.postLogin()
|
|
}
|
|
if(data.hxff === "2"){
|
|
let list = [];
|
|
for (let Key in data.personList) {
|
|
arr.push({
|
|
val:Key,
|
|
label:this.zrrList[Key]
|
|
})
|
|
this.zrrList = list
|
|
}
|
|
this.zzrdialogVisible = true;
|
|
}
|
|
if(data.hxff === "3"){
|
|
this.dxyzm = data.dxyzm
|
|
this.smsFrom.zh = this.form.name.yhm;
|
|
this.dialogVisible = true;
|
|
}
|
|
}).finally(()=>{
|
|
this.anewLoginBtnLoading = false;
|
|
})
|
|
},
|
|
//重新获取验证码
|
|
getyzmBtn(){
|
|
this.getyzmBtnloading = true;
|
|
this.ffm = '1'
|
|
rpaLoginApi({yhm:this.form.name.yhm,mm:this.form.name.mm,ffm:this.ffm}).finally(()=>{
|
|
this.getyzmBtnloading = false;
|
|
})
|
|
},
|
|
yzmloginBtn(){
|
|
if(!this.dxyzm){
|
|
this.$message({
|
|
message: '验证码不能为空',
|
|
type: 'warning'
|
|
});
|
|
}else {
|
|
this.postLogin()
|
|
this.dialogVisible = false;
|
|
}
|
|
|
|
},
|
|
// 责任人
|
|
zzrloginBtn(){
|
|
if(!this.zzrlx){
|
|
this.$message({
|
|
message: '责任人不能为空',
|
|
type: 'warning'
|
|
});
|
|
}else {
|
|
this.postLogin()
|
|
this.zzrdialogVisible = false;
|
|
}
|
|
},
|
|
//获取二维码
|
|
getQrCodeBtn(){
|
|
this.getQrCodeBtnloading = true;
|
|
getRpaQrCodeApi({yhm: this.formQr.name.yhm}).then(({data})=>{
|
|
this.$refs.qrCodeUrl.innerHTML = '';
|
|
let qrcode = new QRCode(this.$refs.qrCodeUrl, {
|
|
text: data.ewm,
|
|
width: 150,
|
|
height: 150,
|
|
colorDark: '#000000',
|
|
colorLight: '#ffffff',
|
|
correctLevel: QRCode.CorrectLevel.H
|
|
})
|
|
this.qrcodeShow = true
|
|
this.rzid = data.rzid
|
|
this.polling()
|
|
}).finally(()=>{
|
|
this.getQrCodeBtnloading = false;
|
|
})
|
|
},
|
|
polling(){
|
|
postRpaAuthStatusApi({rzid:this.rzid,yhm:this.formQr.name.yhm}).then(({data})=>{
|
|
window.clearInterval(this.timer);
|
|
this.timer = null
|
|
if(data.slzt === '1' ){
|
|
|
|
this.timer = window.setInterval( ()=>{ this.polling() },3000)
|
|
}
|
|
if(data.slzt === '2' ){
|
|
window.clearInterval(this.timer);
|
|
this.timer = null
|
|
this.$message({
|
|
message: '当前账号已认证通过',
|
|
type: 'success'
|
|
});
|
|
this.$nextTick(()=>{
|
|
this.$refs.qrCodeUrl.innerHTML = '';
|
|
this.qrcodeShow = false;
|
|
})
|
|
}
|
|
if(data.slzt === '3' ){
|
|
this.$message({
|
|
message: '扫码失败',
|
|
type: 'success'
|
|
});
|
|
window.clearInterval(this.timer);
|
|
this.timer = null
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
let searchParams = new URLSearchParams(window.location.search);
|
|
this.loginKey.id = searchParams.get('id')
|
|
this.loginKey.key = searchParams.get('key')
|
|
this.$store.commit('SET_AUTH_STATUS',this.loginKey)
|
|
},
|
|
mounted() {
|
|
if(this.loginKey.id !== '' && this.loginKey.key !== ''){
|
|
this.getRpaAuthStatus()
|
|
}
|
|
},
|
|
beforeDestroy(){
|
|
window.clearInterval(this.timer);
|
|
this.timer = null
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.menu_body{
|
|
::v-deep.el-input--suffix .el-input__inner {
|
|
//height: 30px;
|
|
width: 100%;
|
|
}
|
|
width: 100%;
|
|
height: calc(75vh);
|
|
margin-top: 150px;
|
|
display: flex;
|
|
justify-content: center;
|
|
#accountLogin{
|
|
width: 400px;
|
|
height: 400px;
|
|
//background-color: #6c5656;
|
|
.menu_body_text{
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
}
|
|
.form{
|
|
margin: 12% 0;
|
|
}
|
|
.button{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
#authentication{
|
|
margin-top: -100px;
|
|
width: 500px;
|
|
height: 400px;
|
|
.at_title{
|
|
text-align: center;
|
|
|
|
}
|
|
.qrcode{
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: auto;
|
|
margin-top: 40px;
|
|
}
|
|
.qrcodetext{
|
|
padding-top: 70px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666;
|
|
}
|
|
.at_input{
|
|
margin-top: 40px;
|
|
.at_labe{
|
|
line-height: 30px;
|
|
width: 120px;
|
|
}
|
|
display: flex;
|
|
height: 40px;
|
|
justify-items: center;
|
|
.select{
|
|
margin: 0 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
.dialog{
|
|
|
|
.dialog_title{
|
|
padding: 10px 10px 0 10px;
|
|
width: 460px;
|
|
display: flex;
|
|
margin: auto;
|
|
background: #fff4e3;
|
|
border: 1px solid #e6a23c;
|
|
.dialog_text{
|
|
|
|
margin-left: 10px;
|
|
width: 450px;
|
|
height: 70px;
|
|
}
|
|
}
|
|
.dialog_body{
|
|
|
|
.dialog_body_zh{
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20px 0 0 25px;
|
|
height: 40px;
|
|
.label{
|
|
width: 90px;
|
|
}
|
|
.zh{
|
|
padding-top: 3px;
|
|
}
|
|
}
|
|
.dialog_body_yzm{
|
|
height: 40px;
|
|
margin: 20px 0 0 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 40px;
|
|
.label{
|
|
width: 90px;
|
|
}
|
|
.input{
|
|
margin-right: 20px;
|
|
}
|
|
|
|
}
|
|
}
|
|
.zzr{
|
|
margin-left: 40px;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|