demo-web-ui

demo-web-ui/src/components/imgCodeRole/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <div class="big-box" id="BigBox"
+     v-loading="loading"
+    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>
+    <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 = []
+        let 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++
+
+        let BigBox = document.getElementById("BigBox");
+        let 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>