安全性问题处理：添加页面访问校验组件抽出 --提交人：阳华祥

src/components/common/CheckAgent.vue

@@ -0,0 +1,200 @@
+<template>
+  <!-- 短信验证 -->
+  <van-dialog
+    v-model="checkModel.show"
+    title="提示"
+    show-cancel-button
+    @confirm="checkModelConfirm"
+    @cancel="checkModelCancel"
+    :before-close="checkModelBeforeClose"
+  >
+    <p class="p10 fs14">
+      为保护客户隐私数据安全，请您授权访问，短信验证码已发送至您手机号{{ checkModel.mobile | encryCheckModelMobile }}，请您输入验证码以完成后续操作。
+    </p>
+    <van-cell-group class="flex align-items-c pr5 mb15">
+      <van-field maxlength="6" placeholder="请输入短信验证码" v-model="checkModel.authCode" clearable label-width="0" />
+      <van-button type="danger" plain size="small" class="w160 p0" @click="checkModelGetCode" :disabled="checkModel.codeDisabled" v-no-more-click="2000">{{
+        checkModel.codeDisabled ? `${checkModel.countDown}s后重新获取` : '获取验证码'
+      }}</van-button>
+    </van-cell-group>
+  </van-dialog>
+</template>
+<script>
+import { Search, Cell, IndexBar, IndexAnchor, Popup, Button, Tag, Dialog, Field } from 'vant'
+import { checkEnterPower, getAuthCode, getCheckModelAgentInfo } from '@/api/ebiz/common/common'
+export default {
+  name: 'CheckAgent',
+  props: {},
+  components: {
+    [Search.name]: Search,
+    [Cell.name]: Cell,
+    [IndexBar.name]: IndexBar,
+    [IndexAnchor.name]: IndexAnchor,
+    [Popup.name]: Popup,
+    [Button.name]: Button,
+    [Field.name]: Field,
+    [Dialog.name]: Dialog,
+    [Tag.name]: Tag
+  },
+  data() {
+    return {
+      checkModel: {
+        show: false,
+        authCode: '',
+        smsId: '',
+        mobile: '',
+        timeId: null, // 计时器ID
+        countDown: 60, // 倒计时
+        codeDisabled: false // 获取验证码按钮是否禁用
+      }
+    }
+  },
+  created() {
+    this.checkModelEnterValidate()
+  },
+  filters: {
+    // 电话号码加密
+    encryCheckModelMobile(code) {
+      return code.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
+    }
+  },
+  methods: {
+    // 校验是否显示弹窗
+    async checkModelEnterValidate() {
+      let checkModelResult = await checkEnterPower({ operateType: 'isEnter' })
+      if (checkModelResult.result == 0) {
+        if (checkModelResult.enterFlag == '0') {
+          //  已校验过 触发成功事件
+          let that = this
+          this.$emit('checModelSuccessMethod', that.checkModel.show)
+        } else {
+          this.checkModelFilter()
+        }
+      } else {
+        this.$toast(checkModelResult.resultMessage)
+      }
+    },
+    //弹窗关闭提示
+    checkModelBeforeClose(action, done) {
+      if (action === 'confirm' && !this.checkModel.show) {
+        setTimeout(done, 1000)
+      } else {
+        done(false)
+      }
+    },
+    // 内外勤处理
+    async checkModelFilter() {
+      const agentInfoRes = await getCheckModelAgentInfo({})
+      if (agentInfoRes.result == 0) {
+        if (!/^N{1}/.test(agentInfoRes.branchType)) {
+          this.checkModel.mobile = agentInfoRes.phoneNo
+          this.checkModel.show = true
+        } else {
+          // 已校验过 触发成功事件
+          this.checkModel.show = false
+          let that = this
+          this.$emit('checModelSuccessMethod', that.checkModel.show)
+        }
+      } else {
+        this.$toast(agentInfoRes.resultMessage)
+      }
+    },
+    // 提交处理
+    async checkModelConfirm() {
+      if (!this.checkModel.codeDisabled) {
+        this.checkModel.show = true
+        return this.$toast('请先获取验证码')
+      }
+      if (!this.checkModel.authCode || this.checkModel.authCode == '') {
+        this.checkModel.show = true
+        return this.$toast('请输入短信验证码')
+      }
+      if (this.checkModel.authCode.length !== 6) {
+        this.checkModel.show = true
+        return this.$toast('验证码格式错误')
+      }
+      let that = this
+      let checkModelResult = await checkEnterPower({ operateType: 'validateSms', smsId: that.checkModel.smsId, code: that.checkModel.authCode })
+      if (checkModelResult.result == 0) {
+        // 校验通过过 触发成功事件
+        this.checkModel.show = false
+        let that = this
+        this.$emit('checModelSuccessMethod', that.checkModel.show)
+      } else {
+        this.checkModel.show = true
+        this.checkModel.codeDisabled = true
+        window.clearInterval(this.checkModel.timeId)
+        this.$toast(checkModelResult.resultMessage)
+      }
+    },
+    // 跳转首页
+    checkModelCancel() {
+      // 跳转首页
+      this.$jump({
+        flag: 'home'
+      })
+    },
+    // 获取验证码
+    checkModelGetCode() {
+      this.checkModel.codeDisabled = true
+      let data = {
+        operateType: 'agentValidateEnter',
+        type: 'H5',
+        operateCode: this.checkModel.mobile,
+        system: 'agentApp',
+        operateCodeType: '0'
+      }
+      //获取验证码
+      getAuthCode(data).then(res => {
+        if (res.result == 0) {
+          this.checkModel.smsId = res.sessionId
+          this.checkModel.smsCode = null
+          //倒计时
+          this.checkModel.timeId = setInterval(() => {
+            this.checkModel.countDown--
+            if (this.checkModel.countDown <= 0) {
+              window.clearInterval(this.checkModel.timeId)
+              this.checkModel.codeDisabled = false
+              this.checkModel.countDown = 60
+            }
+          }, 1000)
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.index-bar {
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  font-size: 15px;
+  margin-top: 8px;
+}
+
+.index-bar li {
+  display: flex;
+  align-items: center;
+}
+
+.index-bar::-webkit-scrollbar {
+  display: none;
+}
+li {
+  display: flex;
+}
+.index-bar span,
+.index-bar van-icon {
+  align-items: flex-center;
+}
+.active {
+  color: #e9332e;
+}
+.activeline {
+  background: #e9332e;
+}
+</style>