hjb_pc/components/verifition/Verify/verifySlider.vue

<template>
  <div style="position: relative;">
    <div v-if="type === '2'" class="verify-img-out" :style="{ height: parseInt(setSize.imgHeight) + vSpace + 'px' }">
      <div v-loading="loading"  class="verify-img-panel" :style="{ width: setSize.imgWidth, height: setSize.imgHeight }">
        <img
            :src="backImgBase ? 'data:image/png;base64,' + backImgBase : defaultImg"
            alt=""
            style="width: 100%; height: 100%; display: block;"
        />
        <div v-show="showRefresh" class="verify-refresh" @click="refresh"><i class="iconfont icon-refresh" /></div>
        <transition name="tips">
          <span v-if="tipWords" class="verify-tips" :class="passFlag ? 'suc-bg' : 'err-bg'">{{ tipWords }}</span>
        </transition>
      </div>
    </div>
    <!-- 公共部分 -->
    <div
        class="verify-bar-area"
        :style="{ width: setSize.imgWidth, height: barSize.height, 'line-height': barSize.height }"
    >
      <span class="verify-msg" v-text="text" />
      <div
          class="verify-left-bar"
          :style="{
          width: leftBarWidth !== undefined ? leftBarWidth : barSize.height,
          height: barSize.height,
          'border-color': leftBarBorderColor,
          transaction: transitionWidth,
        }"
      >
        <span class="verify-msg" v-text="finishText" />
        <div
            class="verify-move-block"
            :style="{
            width: barSize.height,
            height: barSize.height,
            'background-color': moveBlockBackgroundColor,
            left: moveBlockLeft,
            transition: transitionLeft,
          }"
            @touchstart="start"
            @mousedown="start"
        >
          <i :class="['verify-icon iconfont', iconClass]" :style="{ color: iconColor }" />
          <div
              v-if="type === '2'"
              class="verify-sub-block"
              :style="{
              width: Math.floor((parseInt(setSize.imgWidth) * 47) / 310) + 'px',
              height: setSize.imgHeight,
              top: '-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
              'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
            }"
          >
            <img
                :src="'data:image/png;base64,' + blockBackImgBase"
                alt=""
                style="width: 100%; height: 100%; display: block;"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
/**
 * VerifySlide
 * @description 滑块
 * */
import { aesEncrypt } from './../utils/ase'
import { resetSize } from './../utils/util'
import { knowUserCaptchaApi, knowUserSmsCaptchaApi } from '~/server/userApi'
//  "captchaType":"blockPuzzle",
export default {
  name: 'VerifySlide',
  props: {
    captchaType: {
      type: String,
    },
    type: {
      type: String,
      default: '1',
    },
    phone: {
      type: String,
      default: '',
    },
    // 弹出式pop，固定fixed
    mode: {
      type: String,
      default: 'fixed',
    },
    vSpace: {
      type: Number,
      default: 5,
    },
    explain: {
      type: String,
      default: '向右滑动完成验证',
    },
    imgSize: {
      type: Object,
      default() {
        return {
          width: '310px',
          height: '155px',
        }
      },
    },
    blockSize: {
      type: Object,
      default() {
        return {
          width: '50px',
          height: '50px',
        }
      },
    },
    barSize: {
      type: Object,
      default() {
        return {
          width: '310px',
          height: '40px',
        }
      },
    },
    defaultImg: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      secretKey: '', // 后端返回的加密秘钥 字段
      passFlag: '', // 是否通过的标识
      backImgBase: '', // 验证码背景图片
      blockBackImgBase: '', // 验证滑块的背景图片
      backToken: '', // 后端返回的唯一token值
      startMoveTime: '', // 移动开始的时间
      endMovetime: '', // 移动结束的时间
      tipsBackColor: '', // 提示词的背景颜色
      tipWords: '',
      text: '',
      finishText: '',
      setSize: {
        imgHeight: 0,
        imgWidth: 0,
        barHeight: 0,
        barWidth: 0,
      },
      top: 0,
      left: 0,
      moveBlockLeft: undefined,
      leftBarWidth: undefined,
      // 移动中样式
      moveBlockBackgroundColor: undefined,
      leftBarBorderColor: '#ddd',
      iconColor: undefined,
      iconClass: 'icon-right',
      status: false, // 鼠标状态
      isEnd: false, // 是够验证完成
      showRefresh: true,
      transitionLeft: '',
      transitionWidth: '',
      loading: false //加载效果
    }
  },
  computed: {
    barArea() {
      return this.$el.querySelector('.verify-bar-area')
    },
    resetSize() {
      return resetSize
    },
  },
  watch: {
    // type变化则全面刷新
    type: {
      immediate: true,
      handler() {
        this.init()
      },
    },
  },
  mounted() {
    // 禁止拖拽
    this.$el.onselectstart = function () {
      return false
    }
  },
  methods: {
    init() {
      this.text = this.explain
      this.getPictrue()
      this.$nextTick(() => {
        const setSize = this.resetSize(this) // 重新设置宽度高度
        this.setSize.imgWidth = setSize.imgWidth
        this.setSize.imgHeight = setSize.imgHeight
        this.setSize.barHeight = setSize.barHeight
        this.setSize.barWidth = setSize.barWidth
        this.$parent.$emit('ready', this)
      })
      var _this = this
      window.removeEventListener('touchmove', function (e) {
        _this.move(e)
      })
      window.removeEventListener('mousemove', function (e) {
        _this.move(e)
      })

      // 鼠标松开
      window.removeEventListener('touchend', function () {
        _this.end()
      })
      window.removeEventListener('mouseup', function () {
        _this.end()
      })

      window.addEventListener('touchmove', function (e) {
        _this.move(e)
      })
      window.addEventListener('mousemove', function (e) {
        _this.move(e)
      })

      // 鼠标松开
      window.addEventListener('touchend', function () {
        _this.end()
      })
      window.addEventListener('mouseup', function () {
        _this.end()
      })
    },

    // 鼠标按下
    start: function (e) {
      e = e || window.event
      if (!e.touches) {
        // 兼容PC端
        var x = e.clientX
      } else {
        // 兼容移动端
        var x = e.touches[0].pageX
      }
      this.startLeft = Math.floor(x - this.barArea.getBoundingClientRect().left)
      this.startMoveTime = +new Date() // 开始滑动的时间
      if (this.isEnd == false) {
        this.text = ''
        this.moveBlockBackgroundColor = '#337ab7'
        this.leftBarBorderColor = '#337AB7'
        this.iconColor = '#fff'
        e.stopPropagation()
        this.status = true
      }
    },
    // 鼠标移动
    move: function (e) {
      e = e || window.event
      if (this.status && this.isEnd == false) {
        if (!e.touches) {
          // 兼容PC端
          var x = e.clientX
        } else {
          // 兼容移动端
          var x = e.touches[0].pageX
        }
        var bar_area_left = this.barArea.getBoundingClientRect().left
        var move_block_left = x - bar_area_left // 小方块相对于父元素的left值
        if (move_block_left >= this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2) {
          move_block_left = this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2
        }
        if (move_block_left <= 0) {
          move_block_left = parseInt(parseInt(this.blockSize.width) / 2)
        }
        // 拖动后小方块的left值
        this.moveBlockLeft = move_block_left - this.startLeft + 'px'
        this.leftBarWidth = move_block_left - this.startLeft + 'px'
      }
    },

    // 鼠标松开
    end() {
      this.endMovetime = +new Date()
      var _this = this
      // 判断是否重合
      if (this.status && this.isEnd == false) {
        var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''))
        moveLeftDistance = (moveLeftDistance * 310) / parseInt(this.setSize.imgWidth)
        const params = {
          captchaType: this.captchaType,
          pointJson: this.secretKey
              ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.secretKey)
              : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
          token: this.backToken,
        }

        knowUserSmsCaptchaApi(params).then((res) => {
              if (res.repCode == '0000') {
                this.moveBlockBackgroundColor = '#5cb85c';
                this.leftBarBorderColor = '#5cb85c';
                this.iconColor = '#fff';
                this.iconClass = 'icon-check';
                this.showRefresh = false;
                this.isEnd = true;
                if (this.mode == 'pop') {
                  setTimeout(() => {
                    this.$parent.clickShow = false;
                    this.refresh();
                  }, 1500);
                }
                this.passFlag = true;
                this.tipWords = `${((this.endMovetime - this.startMoveTime) / 1000).toFixed(2)}s验证成功`;
                var captchaVerification = this.secretKey
                    ? aesEncrypt(this.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.secretKey)
                    : this.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 });
                setTimeout(() => {
                  this.tipWords = '';
                  this.$emit('success', { captchaVerification });
                }, 1000);
              } else {
                this.moveBlockBackgroundColor = '#d9534f';
                this.leftBarBorderColor = '#d9534f';
                this.iconColor = '#fff';
                this.iconClass = 'icon-close';
                this.passFlag = false;
                setTimeout(function () {
                  _this.refresh();
                }, 1000);
                this.$emit('error', this);
                this.tipWords = '验证失败';
                setTimeout(() => {
                  this.tipWords = '';
                }, 1000);
              }
            })
      }
    },

    refresh: function () {
      this.showRefresh = true
      this.finishText = ''
      this.transitionLeft = 'left .3s'
      this.moveBlockLeft = undefined
      this.leftBarWidth = undefined
      this.transitionWidth = 'width .3s'
      this.leftBarBorderColor = '#ddd'
      this.moveBlockBackgroundColor = '#fff'
      this.iconColor = '#000'
      this.iconClass = 'icon-right'
      this.isEnd = false

      this.getPictrue()
      setTimeout(() => {
        this.status = false
        this.transitionWidth = ''
        this.transitionLeft = ''
        this.text = this.explain
      }, 300)
    },

    // 请求背景图片和验证图片
    async getPictrue() {
      const params = {
        captchaType: this.captchaType,
        clientUid: localStorage.getItem('slider'),
        ts: Date.now(), // 现在的时间戳
      }
      this.loading = true
      const res = await knowUserCaptchaApi(params)
      if (res.repCode == '0000') {
        this.backImgBase = res.repData.originalImageBase64;
        this.blockBackImgBase = res.repData.jigsawImageBase64
        this.backToken = res.repData.token;
        this.secretKey = res.repData.secretKey;
      } else {
        this.text = res.repMsg;
      }
      this.loading = false
    },
  },
}
</script>