148 lines
3.9 KiB
Vue
148 lines
3.9 KiB
Vue
<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>
|