a

src/components/tools/sensitive.vue

@@ -0,0 +1,139 @@
+<!-- 敏感信息授权按钮组件 -->
+<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>