anrui/anrui-base/anrui-base-ui/src/components/imgCodeRole/index.vue

<template>
  <div>
    <div
      id="BigBox"
      v-loading="loading"
      class="big-box"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <img class="codeimg" :src="imgCodeUrl" alt="">
      <div class="click-box" @click="clickBox" />
    </div>
    <div class="wordList">
      请在上图依次点击:
      <i>{{ wordList[0] }}</i>
      <i>{{ wordList[1] }}</i>
      <i>{{ wordList[2] }}</i>
      <span class="restcode" @click="getCodeImage">换一换</span>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  export default {
    data() {
      return {
        rndNum: '', // 随机数
        imgCodeUrl: '', // 图片地址
        cssCode: '', // 验证码样式
        isSubmit: true, // 提交开关
        zuobiaoNum: 0, // 点击数
        zuobiaoArr: [], // 坐标数组
        tempElement: [], // 记录追加标签，删除时使用
        wordList: [], // 要选择的文字
        uuid: '',
        loading: true
      }
    },
    created() {
//       this.getCodeImage() //获取验证码
    },
    methods: {
      // 获取图片验证码
      getCodeImage() {
        // this.zuobiaoNum = 0
        // this.zuobiaoArr = []
        // const BigBox = document.getElementById('BigBox')
        // for (let i = 0; i < this.tempElement.length; i++) {
        //   BigBox.removeChild(this.tempElement[i])
        // }
        // this.tempElement = []
        // axios.get('api/portal/v1/captcha/clickWord', { params: { _t: Date.parse(new Date()) / 1000 }}).then(res => {
        //   console.log(res)
        //   this.loading = false
        //   this.imgCodeUrl = 'data:image/gif;base64,' + res.data.data.dataVO.originalImageBase64
        //   this.wordList = res.data.data.dataVO.wordList
        //   this.uuid = res.data.data.uuid
        // })
        // this.rndNum = this.getRndNum()
      },
      // 获取随机数,
      getRndNum() {
        return Math.random()
          .toString()
          .split('.')[1]
      },
      clickBox(event) {
        this.zuobiaoArr[this.zuobiaoNum] = event.offsetX + ',' + event.offsetY
        this.zuobiaoArr[this.zuobiaoNum] = { 'x': parseInt(event.offsetX) - 20, 'y': parseInt(event.offsetY) - 20 }
        this.zuobiaoNum++

        const BigBox = document.getElementById('BigBox')
        const addSpan = document.createElement('span')
        addSpan.innerText = this.zuobiaoNum
        addSpan.setAttribute('style', 'left: ' + event.offsetX + 'px; top:' + event.offsetY + 'px;')

        BigBox.appendChild(addSpan)
        this.tempElement.push(addSpan)

        if (this.zuobiaoNum == 3) {
          let data = {
            uuid: this.uuid,
            verifyCode: '['
          }
          for (var i = 0; i < this.zuobiaoArr.length; i++) {
            data.verifyCode += "{'x':" + this.zuobiaoArr[i].x + ",'y':" + this.zuobiaoArr[i].y + '}'
          }
          data.verifyCode = data.verifyCode + ']'
          console.log(this.zuobiaoArr, data)
          this.$emit('login', data)
          data = qs.stringify(data)
        }
      }
    }
  }
</script>

<style lang="scss">
  .big-box {
    position: relative;
    width: 100%;
    height: 200px;
    background-size: 100% 100%;

    .codeimg{
      width: 100%;
      height: 100%;
    }

    .click-box {
      width: 100%;
      height: 200px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 92;
    }

    span {
      position: absolute;
      width: 40px;
      height: 40px;
      line-height: 40px;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      text-align: center;
      font-size: 20px;
      border-radius: 50%;
      z-index: 1;
      transform: translateX(-50%) translateY(-50%);
    }
  }
  .wordList{
    font-size: 18px;
    padding-top: 5px;
    i{
      padding: 0 8px;
      color: #018ad2;
    }
    .restcode{
      float: right;
      color: #018ad2;
      cursor: pointer;
    }
  }
</style>