ebiz-h5/src/components/common/CheckAgent.vue

<template>
  <!-- 短信验证 -->
  <van-dialog
    v-model="checkModel.show"
    title="提示"
    show-cancel-button
    @confirm="checkModelConfirm"
    @cancel="checkModelCancel"
    :before-close="checkModelBeforeClose"
  >
    <van-tabs v-model="active" @click="clickTable">
      <van-tab>
        <template #title>密码校验</template>
        <div class="p10 fs14">
          <p>为保护客户隐私数据安全，请您授权访问。请在下面输入框输入登录密码后完成后续操作。</p>
          <van-field
            minlength="6"
            class="pt5 mt10"
            style="border-top:1px solid #eaeaea;border-bottom:1px solid #eaeaea"
            v-model="checkModel.pwd"
            clearable
            type="password"
            label="密码:"
            name="密码"
            label-width="3em"
            placeholder="请输入密码"
          />
        </div>
      </van-tab>
      <van-tab :disabled="isShowSms">
        <template #title>短信校验</template>
        <div>
          <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>
        </div>
      </van-tab>
    </van-tabs>
  </van-dialog>
</template>
<script>
import { Search, Cell, IndexBar, IndexAnchor, Popup, Button, Tag, Dialog, Field, Tab, Tabs } from 'vant'
import { checkEnterPower, getAuthCode, getCheckModelAgentInfo } from '@/api/ebiz/common/common'
export default {
  name: 'CheckAgent',
  props: {},
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [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 {
      active: 0,
      isShowSms: true,
      checkModel: {
        pwd: null,
        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: {
    clickTable() {
      console.log('active', this.active)
    },
    // 校验是否显示弹窗
    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 (/^[0-9][0-9]*$/.test(agentInfoRes.branchType)) {
          // 内勤 并且手机号码正确
          this.checkModel.mobile = agentInfoRes.phoneNo
          this.checkModel.show = true
          this.isShowSms = false
        } else {
          // 已校验过 触发成功事件
          this.checkModel.show = true
        }
      } else {
        this.$toast(agentInfoRes.resultMessage)
      }
    },
    // 提交处理
    async checkModelConfirm() {
      let that = this
      let reqParam = { operateType: 'validateSms', smsId: that.checkModel.smsId, code: that.checkModel.authCode }
      if (this.active == 0) {
        if (!this.checkModel.pwd || this.checkModel.pwd == '') {
          this.checkModel.show = true
          return this.$toast('请输入密码')
        }
        if (this.checkModel.pwd.length < 6) {
          this.checkModel.pwd = ''
          this.checkModel.show = true
          return this.$toast('密码格式错误，请重新输入')
        }
        reqParam = {
          operateType: 'validatePwd',
          pwd: this.$MD5(this.checkModel.pwd)
        }
      } else {
        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('验证码格式错误')
        }
        reqParam = {
          operateType: 'validateSms',
          smsId: that.checkModel.smsId,
          code: that.checkModel.authCode
        }
      }
      let checkModelResult = await checkEnterPower(reqParam)
      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>