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.
310 lines
13 KiB
310 lines
13 KiB
<template>
|
|
<div id="a-login">
|
|
<h4 style="text-align: center;color: white;background: #00afff;margin: 0px;padding-top: 15px;padding-bottom: 15px; margin-bottom: 40px">自主授权登陆</h4>
|
|
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="medium" v-if="ruleForm.showone" v-loading="loadingone">
|
|
<el-form-item label="税号" prop="nsrsbh">
|
|
<el-input v-model="ruleForm.nsrsbh" placeholder="请输入纳税人识别号" @blur="fetchRegionData()"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="地区" prop="nsrdq">
|
|
<el-select v-model="ruleForm.nsrdq" placeholder="请选择地区" style="width: 100%">
|
|
<el-option label="北京" value="beijing"></el-option>
|
|
<el-option label="宁波" value="ningbo"></el-option>
|
|
<el-option label="深圳" value="shenzhen"></el-option>
|
|
<el-option label="青岛" value="qingdao"></el-option>
|
|
<el-option label="厦门" value="xiamen"></el-option>
|
|
<el-option label="大连" value="dalian"></el-option>
|
|
<el-option label="浙江" value="zhejiang"></el-option>
|
|
<el-option label="四川" value="sichuan"></el-option>
|
|
<el-option label="上海(新版登录)" value="shanghai"></el-option>
|
|
<el-option label="广东(新版登录)" value="guangdong"></el-option>
|
|
<el-option label="重庆" value="chongqing"></el-option>
|
|
<el-option label="天津" value="tianjin"></el-option>
|
|
<el-option label="陕西" value="shanxi"></el-option>
|
|
<el-option label="内蒙古" value="neimenggu"></el-option>
|
|
<el-option label="河南" value="henan"></el-option>
|
|
<el-option label="福建" value="fujian"></el-option>
|
|
<el-option label="云南" value="yunnan"></el-option>
|
|
<el-option label="吉林" value="jilin"></el-option>
|
|
<el-option label="江苏" value="jiangsu"></el-option>
|
|
<el-option label="湖南" value="hunan"></el-option>
|
|
<el-option label="安徽" value="anhui"></el-option>
|
|
<el-option label="贵州" value="guizhou"></el-option>
|
|
<el-option label="广西" value="guangxi"></el-option>
|
|
<el-option label="河北" value="hebei"></el-option>
|
|
<el-option label="黑龙江" value="heilongjiang"></el-option>
|
|
<el-option label="湖北" value="hubei"></el-option>
|
|
<el-option label="甘肃" value="gansu"></el-option>
|
|
<el-option label="海南" value="hainan"></el-option>
|
|
<el-option label="宁夏" value="ningxia"></el-option>
|
|
<el-option label="辽宁" value="liaoning"></el-option>
|
|
<el-option label="青海" value="qinghai"></el-option>
|
|
<el-option label="山西" value="shanxi"></el-option>
|
|
<el-option label="江西" value="jiangxi"></el-option>
|
|
<el-option label="山东" value="shandong"></el-option>
|
|
<el-option label="新疆" value="xinjiang"></el-option>
|
|
<el-option label="西藏" value="xizang"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="登陆方式" prop="loginType">
|
|
<el-select v-model="ruleForm.loginType" placeholder="" style="width: 100%">
|
|
<el-option label="账密" value="1"></el-option>
|
|
<el-option label="扫码登陆" value="2"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="用户名" prop="nsrInfo.bsryxz">
|
|
<el-input v-model="ruleForm.nsrInfo.bsryxz" placeholder = "居民身份证号码/手机号码/用户名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="身份证号" prop="">
|
|
<el-input v-model="ruleForm.nsrInfo.sfzjhm" placeholder = "请输入身份证号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="手机号" prop="nsrInfo.zjh">
|
|
<el-input v-model="ruleForm.nsrInfo.zjh" placeholder = "请输入手机号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="用户密码" prop="nsrInfo.gsnsmm">
|
|
<el-input v-model="ruleForm.nsrInfo.gsnsmm" placeholder = "请输入个人用户密码"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="登陆身份" prop="nsrInfo.dlsf">
|
|
<el-select v-model="ruleForm.nsrInfo.dlsf" placeholder="请选择登陆身份" style="width: 100%">
|
|
<el-option label="财务负责人" value="1"></el-option>
|
|
<el-option label="法定代表人" value="2"></el-option>
|
|
<el-option label="办税员" value="3"></el-option>
|
|
<el-option label="开票员" value="7"></el-option>
|
|
<el-option label="办税人" value="7"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="success" @click="submitForm('ruleForm')" size="medium" style="width: 70%;height: 50px;display:block;margin:0 auto">确认提交</el-button>
|
|
</el-form-item>
|
|
<el-form-item prop="checked">
|
|
<el-checkbox v-model="ruleForm.checked" style="margin-left: 20px;margin-bottom: 10px">请阅读并同意我们的<router-link to="XA" style="color: red">用户协议</router-link></el-checkbox><br>
|
|
<span style="color: #ffb612;font-size: 10px;margin-left: 20px">为保证数据采集的完整性，请优先使用法人、财务负责人等省份的账号授权登录</span>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="medium" v-if="ruleForm.showtwo" v-loading="loading">
|
|
<p style="text-align: center;margin-bottom: 30px">短信验证码已发送，请提交短信验证码</p>
|
|
<el-form-item prop="ruleForm.smsCode" style="height: 50px">
|
|
<el-input v-model="ruleForm.smsCode" style="height: 30px;width: 60%;margin-left: 20%"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="success" @click="submitFormWithMsgCode()" size="medium" style="width: 70%;height: 50px;display:block;margin:0 auto">确认提交</el-button>
|
|
</el-form-item>
|
|
<span @click="changeShow()" style="color: #787be8;text-decoration-line: underline;margin-left: 50%">重新授权</span>
|
|
</el-form>
|
|
|
|
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="medium" v-if="ruleForm.showthree">
|
|
<el-row style="margin-left: 500px">
|
|
<el-col :xl="12" :lg="12" >
|
|
<el-result icon="success" title="" subTitle="">
|
|
</el-result>
|
|
</el-col>
|
|
</el-row>
|
|
<p style="text-align: center;margin-bottom: 30px">授权成功,任务可能需要5-10分钟，请耐心等待...</p>
|
|
<span @click="changeShow()" style="color: #787be8;text-decoration-line: underline;margin-left: 48%">重新授权</span>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {login,submitNote,submitNoteResult,getAddress} from "@/api/freedom/login";
|
|
export default {
|
|
name: "Login",
|
|
data() {
|
|
let checkedFn = (rule, value, callback) => {
|
|
if (!value) {
|
|
callback(new Error("请勾选同意协议"));
|
|
} else {
|
|
callback();
|
|
}
|
|
};
|
|
return {
|
|
ruleForm: {
|
|
smsCode : "",
|
|
showone : true,
|
|
showtwo : false,
|
|
showthree : false,
|
|
nsrsbh: '',
|
|
nsrdq: '',
|
|
loginType: '1',
|
|
checked : false,
|
|
traceno : "",
|
|
nsrInfo:{
|
|
dlsf :"",
|
|
dlsfmm : "",
|
|
gsnsmm : "",
|
|
sfzjhm : "",
|
|
zjh : "",
|
|
gsnsyhm : "",
|
|
bsryxz : "",
|
|
}
|
|
},
|
|
rules: {
|
|
nsrsbh: [
|
|
{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }
|
|
],
|
|
nsrdq: [
|
|
{ required: true, message: '请选择地区', trigger: 'change' }
|
|
],
|
|
loginType: [
|
|
{ required: true, message: '请选择登陆方式', trigger: 'change' }
|
|
],
|
|
"nsrInfo.bsryxz": [
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
|
],
|
|
"nsrInfo.sfzjhm": [
|
|
{ required: true, message: '请输入身份证号', trigger: 'blur' }
|
|
],
|
|
"nsrInfo.zjh": [
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' }
|
|
],
|
|
"nsrInfo.gsnsmm": [
|
|
{ required: true, message: '请输入个人密码', trigger: 'blur' }
|
|
],
|
|
checked: [
|
|
{ validator: checkedFn, trigger: "change" }
|
|
// { type: 'array', required: true, message: '请勾选同意协议', trigger: 'change' }
|
|
]
|
|
},
|
|
loading : false,
|
|
loadingone: false
|
|
};
|
|
},
|
|
methods: {
|
|
fetchRegionData() {
|
|
const taxNumber = this.ruleForm.nsrsbh;
|
|
// 发送请求到后端，获取地区数据
|
|
getAddress(taxNumber).then(res => {
|
|
console.log(res.msg);
|
|
const regionData = res.msg;
|
|
this.ruleForm.nsrdq = regionData;
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
});
|
|
},
|
|
submitForm(formName) {
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
// alert('submit!');
|
|
this.ruleForm.nsrInfo.dlsfmm = this.ruleForm.nsrInfo.gsnsmm;
|
|
this.ruleForm.nsrInfo.bsryxz = this.ruleForm.nsrInfo.zjh;
|
|
this.ruleForm.nsrInfo.gsnsyhm = this.ruleForm.nsrInfo.zjh;
|
|
this.loadingone = true;
|
|
login(this.ruleForm).then(res=>{
|
|
if (res.code == 200){
|
|
this.ruleForm.traceno = res.msg;
|
|
let timer = setInterval(() => {
|
|
this.fun(timer)
|
|
}, 5000)
|
|
}else {
|
|
this.loadingone = false;
|
|
this.$alert("<font color='red'>登陆失败，失败原因"+res.msg+"</font>")
|
|
}
|
|
|
|
}).catch(()=>{
|
|
this.loadingone = false;
|
|
this.ruleForm.showone = true;
|
|
this.ruleForm.showtwo = false;
|
|
this.ruleForm.showthree = false;
|
|
});
|
|
} else {
|
|
console.log('error submit!!');
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
submitFormWithMsgCode(){
|
|
this.loading = true;
|
|
submitNote(this.ruleForm.traceno,this.ruleForm.nsrsbh,this.ruleForm.smsCode,this.ruleForm.nsrInfo.zjh)
|
|
.then(res=>{
|
|
if (res.code == "200"){
|
|
let timer = setInterval(() => {
|
|
this.fun1(timer)
|
|
}, 5000)
|
|
}else {
|
|
this.loading = false;
|
|
this.ruleForm.showone = false;
|
|
this.ruleForm.showtwo = true;
|
|
this.ruleForm.showthree = false;
|
|
console.log("进入方法")
|
|
console.log(this.loading)
|
|
}
|
|
}).catch(()=>{
|
|
this.loading = false;
|
|
this.ruleForm.showone = false;
|
|
this.ruleForm.showtwo = true;
|
|
this.ruleForm.showthree = false;
|
|
console.log("进入catch方法")
|
|
});
|
|
|
|
},
|
|
fun (timer) {
|
|
setTimeout(()=>{
|
|
// 这里ajax 请求的代码片段和判断是否停止定时器
|
|
submitNoteResult(this.ruleForm.traceno,this.ruleForm.nsrsbh,this.ruleForm.smsCode,this.ruleForm.nsrInfo.zjh)
|
|
.then(res=>{
|
|
if (res.msg == "10012"){
|
|
this.ruleForm.showone = false;
|
|
this.ruleForm.showtwo = false;
|
|
this.ruleForm.showthree = true;
|
|
this.loading = false;
|
|
this.loadingone = false;
|
|
clearInterval(timer)
|
|
}else if(res.msg == "10011"){
|
|
this.ruleForm.showone = false;
|
|
this.ruleForm.showtwo = true;
|
|
this.ruleForm.showthree = false;
|
|
this.loadingone = false;
|
|
this.loading = false;
|
|
clearInterval(timer)
|
|
}
|
|
}).catch(()=>{
|
|
this.ruleForm.showone = false;
|
|
this.ruleForm.showtwo = true;
|
|
this.ruleForm.showthree = false;
|
|
this.loading = false;
|
|
this.loadingone = false;
|
|
clearInterval(timer)
|
|
});
|
|
}, 0)
|
|
},
|
|
fun1 (timer) {
|
|
setTimeout(()=>{
|
|
// 这里ajax 请求的代码片段和判断是否停止定时器
|
|
submitNoteResult(this.ruleForm.traceno,this.ruleForm.nsrsbh,this.ruleForm.smsCode,this.ruleForm.nsrInfo.zjh)
|
|
.then(res=>{
|
|
if (res.msg == "10012"){
|
|
this.ruleForm.showone = false;
|
|
this.ruleForm.showtwo = false;
|
|
this.ruleForm.showthree = true;
|
|
this.loading = false;
|
|
this.loadingone = false;
|
|
clearInterval(timer)
|
|
}
|
|
}).catch(()=>{
|
|
this.ruleForm.showone = false;
|
|
this.ruleForm.showtwo = true;
|
|
this.ruleForm.showthree = false;
|
|
this.loading = false;
|
|
this.loadingone = false;
|
|
clearInterval(timer)
|
|
});
|
|
}, 0)
|
|
},
|
|
resetForm(formName) {
|
|
this.$refs[formName].resetFields();
|
|
},
|
|
changeShow(){
|
|
this.ruleForm.showone = true;
|
|
this.ruleForm.showtwo = false;
|
|
this.ruleForm.showthree = false;
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|