用户个人信息保护承诺弹窗

src/views/user/Login.vue

@@ -75,8 +75,10 @@
               <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
             </a-input>
           </a-form-item>
+          <div style="top:10px;float: left;font-size: 12px;color: #8b8b8b">
+            <a-checkbox v-model="single"></a-checkbox>&nbsp;我已阅读<a @click="commitmentSubmit">《用户个人信息保护承诺书》</a>
+          </div><br/>
           <div class="register"><router-link :to="{path: '/user/register'}">找回密码</router-link></div>
-
         <a-form-item style="margin-top:24vw/@vw">
           <a-button
                   size="large"
@@ -95,6 +97,8 @@
         @success="stepCaptchaSuccess"
         @cancel="stepCaptchaCancel">
       </two-step-captcha>
+      <LeakProofModel :v-model="LeakProofModel"></LeakProofModel>
+      <commitment ref="commitment" :countNum="countNum" @appendData="appendData" v-show="commitment"></commitment>
     </div>
   </div>
 </template>
@@ -107,16 +111,25 @@ import {timeFix} from "@/utils/util"
 import Vue from 'vue'
 import {ACCESS_TOKEN} from "@/store/mutation-types"
 import JGraphicCode from '@/components/jeecg/JGraphicCode'
+import LeakProofModel from '@/views/user/protocol/Leak-proof-model'
+import commitment from '@/views/user/protocol/commitment'
 import {setMaxDigits , RSAKeyPair , encryptedString} from '@/utils/RSA'
 
 
 export default {
   components: {
     TwoStepCaptcha,
-    JGraphicCode
+    JGraphicCode,
+    LeakProofModel,
+    commitment,
   },
   data() {
     return {
+      flag:false,
+      LeakProofModel:true,
+      commitment:false,
+      countNum:15,
+      single:false,
       buttondata:"登录",
       customActiveKey: "tab1",
       loginBtn: false,
@@ -203,9 +216,22 @@ export default {
         }, 1000)
       }
     },
+
+    appendData(data) {
+      this.single = data;
+    },
+    commitmentSubmit(){
+      this.commitment = true;
+      this.flag = true;
+      this.$refs.commitment.setTimer();
+      return;
+    },
     handleSubmit() {
+      if(!this.flag){
+        this.commitmentSubmit();
+        return;
+      }
       let that = this
-
       let loginParams = {
         smsCode: "xxxx"
       };

src/views/user/protocol/Leak-proof-model.vue

+<template>
+    <a-modal
+        title="防范信息泄露提示"
+        v-model="modal"
+        :closable="false"
+        :mask-closable="false">
+      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户个人信息依法保护，信息安全意识牢记心头，日常工作请注意防范用户信息泄露</p>
+
+      <div slot="footer">
+          <a-button type="primary" @click="ok">确定</a-button>
+      </div>
+    </a-modal>
+</template>
+
+<script>
+export default {
+  name: "Leak-proof-model",
+  data () {
+    return {
+      modal: true,
+    }
+  },
+  methods: {
+    ok () {
+      this.modal = false;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/user/protocol/commitment.vue

+<template>
+    <a-modal
+        title="用户个人信息保护承诺书"
+        v-model="modal"
+        :closable="false"
+        :mask-closable="false">
+      <p><strong>本人郑重承诺：</strong></p>
+      <p>1、严格遵守国家保密法律、法规和企业保密规章制度，履行保密义务。</p>
+      <p>2、严格遵守公司管理规定，对工作中接触的用户个人信息严格保密，不以口头、书面 、电子数据等方式进行记录、储存、复制，摘抄，确保用户信息不泄露。</p>
+      <p>3、在工作期间发现有用户个人信息泄露情况，立即向上级领导或公司安全保卫部门报告。</p>
+      <div slot="footer">
+          <a-checkbox v-model="single" style="float: left;font-size: 12px;color: #8b8b8b">&nbsp;我已阅读《用户个人信息保护承诺书》</a-checkbox>
+          <a-button type="primary" :loading="loading" :disabled="!single" @click="ok">{{ codeMsg }}</a-button>
+      </div>
+    </a-modal>
+</template>
+
+<script>
+export default {
+  name: "Leak-proof-model",
+  data () {
+    return {
+      modal: true,
+      single: false,
+      loading:true,
+      loginBtn: false,
+      countDown: 0,// 倒计时秒数
+      codeMsg:"确定",
+      timer: null,// 定时器
+    }
+  },
+  props: {
+    countNum:Number,
+  },
+  created(){
+  },
+  methods: {
+    ok () {
+      this.$emit("appendData",this.single);
+      this.modal = false
+    },
+    setTimer(){
+      this.countDown = this.countNum;
+      setInterval(() => {
+        this.countDown--;
+        if (this.countDown > 0 && this.countDown <= 15) {
+          this.loading = true;
+          this.codeMsg = "(" + this.countDown + "s)确定";
+        }else {
+          this.loading = false;
+          this.codeMsg = "确定";
+        }
+      }, 1000)
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file