135 lines
3.4 KiB
Vue
135 lines
3.4 KiB
Vue
<!-- 敏感信息授权按钮组件 -->
|
||
<template>
|
||
<div>
|
||
<el-button class="grant-btn" type="text" @click="grantPrivilege">敏感信息授权</el-button>
|
||
<el-dialog append-to-body title="敏感信息短信授权" v-model:visible="dialogVisible">
|
||
<el-form>
|
||
<el-form-item label="手机号">
|
||
<el-row>{{ mobile }}</el-row>
|
||
</el-form-item>
|
||
<el-form-item label="验证码">
|
||
<el-col :span="11">
|
||
<el-input type="number" style="display: inline-block" maxlength="6" placeholder="请输入验证码" v-model="form.code"></el-input>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-button style="display: inline; margin-left: 5px" plain type="text" @click.prevent="getCode()">{{ title }}</el-button>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-alert :closable="false">验证通过后将去除脱敏，有效期为30分钟，请尽快操作</el-alert>
|
||
<el-alert type="warning" :closable="false"
|
||
>手机号码登记后统一维护，如有修改，请联系相关部门。教职工(组织人事处) 学生(班主任) 驻校人员(后勤处)</el-alert
|
||
>
|
||
</el-form>
|
||
|
||
<template v-slot:footer>
|
||
<span class="dialog-footer" style="text-aligin: center">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="checkCode">确 定</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import request from '@/router/axios';
|
||
export default {
|
||
name: 'sensitive',
|
||
data() {
|
||
return {
|
||
dialogVisible: false,
|
||
second: '', //倒计时
|
||
disabled: false, //是否禁用按钮
|
||
timer: null, //计时器
|
||
form: {
|
||
code: '',
|
||
},
|
||
mobile: '**',
|
||
};
|
||
},
|
||
computed: {
|
||
title() {
|
||
return this.disabled ? `重新获取 ( ${this.second} ) s` : '获取验证码';
|
||
},
|
||
},
|
||
methods: {
|
||
grantPrivilege() {
|
||
this.dialogVisible = true;
|
||
this.form.code = '';
|
||
this.getMobile();
|
||
},
|
||
getCode() {
|
||
// console.log('点击')
|
||
|
||
let that = this;
|
||
let s = 60; //倒计时间
|
||
if (!that.timer) {
|
||
that.second = s;
|
||
that.disabled = true;
|
||
|
||
that.timer = setInterval(() => {
|
||
if (that.second > 0 && this.second <= s) {
|
||
that.second--;
|
||
} else {
|
||
that.disabled = false;
|
||
clearInterval(that.timer);
|
||
this.timer = null;
|
||
}
|
||
}, 1000);
|
||
|
||
that.sendCode();
|
||
}
|
||
},
|
||
getMobile() {
|
||
request({
|
||
url: '/admin/mobile/getMobile',
|
||
method: 'get',
|
||
}).then((response) => {
|
||
console.log(response.data);
|
||
if (response.data.data) {
|
||
this.mobile = response.data.data;
|
||
} else {
|
||
this.$message.error(response.data.msg);
|
||
}
|
||
});
|
||
},
|
||
sendCode() {
|
||
request({
|
||
url: '/admin/mobile/codeSensitive',
|
||
method: 'get',
|
||
}).then((response) => {
|
||
console.log(response.data);
|
||
if (response.data.data) {
|
||
this.$message.success('短信发送成功');
|
||
} else {
|
||
this.$message.error(response.data.msg);
|
||
}
|
||
});
|
||
},
|
||
checkCode() {
|
||
request({
|
||
url: '/admin/mobile/checkSensitiveCode',
|
||
method: 'post',
|
||
data: { code: this.form.code },
|
||
}).then((response) => {
|
||
console.log(response.data);
|
||
if (response.data.data) {
|
||
this.dialogVisible = false;
|
||
this.$message.success('校验通过');
|
||
} else {
|
||
this.$message.error('校验失败');
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.wrapper {
|
||
display: inline-block;
|
||
}
|
||
.grant-btn {
|
||
marigin: 0px 5px !important;
|
||
color: #f39217;
|
||
}
|
||
</style>
|