wangqing
5 years ago
41 changed files with 1531 additions and 625 deletions
|
Before Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 116 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
@ -1,191 +0,0 @@ |
|||||
#app { |
|
||||
.main-container { |
|
||||
min-height: 100%; |
|
||||
transition: margin-left 0.28s; |
|
||||
margin-left: $sideBarWidth; |
|
||||
position: relative; |
|
||||
} |
|
||||
.sidebar-container { |
|
||||
transition: width 0.28s; |
|
||||
width: $sideBarWidth !important; |
|
||||
background-color: $menuBg; |
|
||||
height: 100%; |
|
||||
position: fixed; |
|
||||
font-size: 0; |
|
||||
top: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
z-index: 1001; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
// reset element-ui css |
|
||||
.horizontal-collapse-transition { |
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; |
|
||||
} |
|
||||
.scrollbar-wrapper { |
|
||||
overflow-x: hidden !important; |
|
||||
} |
|
||||
.el-scrollbar__bar.is-vertical { |
|
||||
right: 0; |
|
||||
} |
|
||||
.el-scrollbar { |
|
||||
height: 100%; |
|
||||
} |
|
||||
&.has-logo { |
|
||||
.el-scrollbar { |
|
||||
height: calc(100% - 50px); |
|
||||
} |
|
||||
} |
|
||||
.is-horizontal { |
|
||||
display: none; |
|
||||
} |
|
||||
a { |
|
||||
display: inline-block; |
|
||||
width: 100%; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.svg-icon { |
|
||||
margin-right: 16px; |
|
||||
} |
|
||||
.sub-el-icon { |
|
||||
margin-right: 12px; |
|
||||
margin-left: -2px; |
|
||||
} |
|
||||
.el-menu { |
|
||||
border: none; |
|
||||
height: 100%; |
|
||||
width: 100% !important; |
|
||||
} |
|
||||
|
|
||||
// menu hover |
|
||||
.submenu-title-noDropdown, |
|
||||
.el-submenu__title { |
|
||||
&:hover { |
|
||||
background-color: $menuHover !important; |
|
||||
} |
|
||||
} |
|
||||
.is-active > .el-submenu__title { |
|
||||
color: $subMenuActiveText !important; |
|
||||
} |
|
||||
& .nest-menu .el-submenu > .el-submenu__title, |
|
||||
& .el-submenu .el-menu-item { |
|
||||
min-width: $sideBarWidth !important; |
|
||||
background-color: $subMenuBg !important; |
|
||||
&:hover { |
|
||||
background-color: $subMenuHover !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.hideSidebar { |
|
||||
.sidebar-container { |
|
||||
width: 54px !important; |
|
||||
} |
|
||||
.main-container { |
|
||||
margin-left: 54px; |
|
||||
} |
|
||||
.submenu-title-noDropdown { |
|
||||
padding: 0 !important; |
|
||||
position: relative; |
|
||||
.el-tooltip { |
|
||||
padding: 0 !important; |
|
||||
.svg-icon { |
|
||||
margin-left: 20px; |
|
||||
} |
|
||||
.sub-el-icon { |
|
||||
margin-left: 19px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-submenu { |
|
||||
overflow: hidden; |
|
||||
& > .el-submenu__title { |
|
||||
padding: 0 !important; |
|
||||
.svg-icon { |
|
||||
margin-left: 20px; |
|
||||
} |
|
||||
.sub-el-icon { |
|
||||
margin-left: 19px; |
|
||||
} |
|
||||
.el-submenu__icon-arrow { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-menu--collapse { |
|
||||
.el-submenu { |
|
||||
& > .el-submenu__title { |
|
||||
& > span { |
|
||||
height: 0; |
|
||||
width: 0; |
|
||||
overflow: hidden; |
|
||||
visibility: hidden; |
|
||||
display: inline-block; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-menu--collapse .el-menu .el-submenu { |
|
||||
min-width: $sideBarWidth !important; |
|
||||
} |
|
||||
|
|
||||
// mobile responsive |
|
||||
.mobile { |
|
||||
.main-container { |
|
||||
margin-left: 0; |
|
||||
} |
|
||||
.sidebar-container { |
|
||||
transition: transform 0.28s; |
|
||||
width: $sideBarWidth !important; |
|
||||
} |
|
||||
&.hideSidebar { |
|
||||
.sidebar-container { |
|
||||
pointer-events: none; |
|
||||
transition-duration: 0.3s; |
|
||||
transform: translate3d(-$sideBarWidth, 0, 0); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.withoutAnimation { |
|
||||
.main-container, |
|
||||
.sidebar-container { |
|
||||
transition: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// when menu collapsed |
|
||||
.el-menu--vertical { |
|
||||
& > .el-menu { |
|
||||
.svg-icon { |
|
||||
margin-right: 16px; |
|
||||
} |
|
||||
.sub-el-icon { |
|
||||
margin-right: 12px; |
|
||||
margin-left: -2px; |
|
||||
} |
|
||||
} |
|
||||
.nest-menu .el-submenu > .el-submenu__title, |
|
||||
.el-menu-item { |
|
||||
&:hover { |
|
||||
// you can use $subMenuHover |
|
||||
background-color: $menuHover !important; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// the scroll bar appears when the subMenu is too long |
|
||||
>.el-menu--popup { |
|
||||
max-height: 100vh; |
|
||||
overflow-y: auto; |
|
||||
&::-webkit-scrollbar-track-piece { |
|
||||
background: #d3dce6; |
|
||||
} |
|
||||
&::-webkit-scrollbar { |
|
||||
width: 6px; |
|
||||
} |
|
||||
&::-webkit-scrollbar-thumb { |
|
||||
background: #99a9bf; |
|
||||
border-radius: 20px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,21 +0,0 @@ |
|||||
import Vue from 'vue' |
|
||||
|
|
||||
const component = require('./main.vue').default |
|
||||
const constructor = Vue.extend(component) |
|
||||
|
|
||||
const exampleNotice = options => { |
|
||||
options = options || {} |
|
||||
let instance = new constructor({ |
|
||||
data: options |
|
||||
}) |
|
||||
instance.vm = instance.$mount() |
|
||||
instance.dom = instance.vm.$el |
|
||||
document.body.appendChild(instance.dom) |
|
||||
return instance.vm |
|
||||
} |
|
||||
|
|
||||
export default { |
|
||||
install: Vue => { |
|
||||
Vue.prototype[`$${component.name}`] = exampleNotice |
|
||||
} |
|
||||
} |
|
||||
@ -1,42 +0,0 @@ |
|||||
<template> |
|
||||
<transition name="notice"> |
|
||||
<div v-if="show" class="notice"> |
|
||||
{{ content }} |
|
||||
</div> |
|
||||
</transition> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'ExampleNotice', |
|
||||
data() { |
|
||||
return { |
|
||||
show: false, |
|
||||
content: '' |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.show = true |
|
||||
setTimeout(() => { |
|
||||
this.show = false |
|
||||
}, 2000) |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.notice { |
|
||||
padding: 10px; |
|
||||
background-color: #eee; |
|
||||
border-radius: 10px; |
|
||||
@include position-center(xy); |
|
||||
} |
|
||||
.notice-leave-active, |
|
||||
.notice-enter-active { |
|
||||
transition: all 0.3s; |
|
||||
} |
|
||||
.notice-enter, |
|
||||
.notice-leave-to { |
|
||||
opacity: 0; |
|
||||
} |
|
||||
</style> |
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,245 @@ |
|||||
|
<template> |
||||
|
<div style="position: relative" |
||||
|
> |
||||
|
<div class="verify-img-out"> |
||||
|
<div class="verify-img-panel" :style="{'width': setSize.imgWidth, |
||||
|
'height': setSize.imgHeight, |
||||
|
'background-size' : setSize.imgWidth + ' '+ setSize.imgHeight, |
||||
|
'margin-bottom': vSpace + 'px'}" |
||||
|
> |
||||
|
<div class="verify-refresh" style="z-index:3" @click="refresh" v-show="showRefresh"> |
||||
|
<i class="iconfont icon-refresh"></i> |
||||
|
</div> |
||||
|
<img :src="'data:image/png;base64,'+pointBackImgBase" |
||||
|
ref="canvas" |
||||
|
alt="" style="width:100%;height:100%;display:block" |
||||
|
@click="bindingClick?canvasClick($event):undefined"> |
||||
|
|
||||
|
<div v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area" |
||||
|
:style="{ |
||||
|
'background-color':'#1abd6c', |
||||
|
color:'#fff', |
||||
|
'z-index':9999, |
||||
|
width:'20px', |
||||
|
height:'20px', |
||||
|
'text-align':'center', |
||||
|
'line-height':'20px', |
||||
|
'border-radius': '50%', |
||||
|
position:'absolute', |
||||
|
top:parseInt(tempPoint.y-10) + 'px', |
||||
|
left:parseInt(tempPoint.x-10) + 'px' |
||||
|
}"> |
||||
|
{{index + 1}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 'height': this.barSize.height, --> |
||||
|
<div class="verify-bar-area" |
||||
|
:style="{'width': setSize.imgWidth, |
||||
|
'color': this.barAreaColor, |
||||
|
'border-color': this.barAreaBorderColor, |
||||
|
'line-height':this.barSize.height}"> |
||||
|
<span class="verify-msg">{{text}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script type="text/babel"> |
||||
|
/** |
||||
|
* VerifyPoints |
||||
|
* @description 点选 |
||||
|
* */ |
||||
|
import {resetSize, _code_chars, _code_color1, _code_color2} from './../utils/util' |
||||
|
import {aesEncrypt} from "./../utils/ase" |
||||
|
import {reqGet,reqCheck} from "../api/verifition-api" |
||||
|
|
||||
|
export default { |
||||
|
name: 'VerifyPoints', |
||||
|
props: { |
||||
|
//弹出式pop，固定fixed |
||||
|
mode: { |
||||
|
type: String, |
||||
|
default: 'fixed' |
||||
|
}, |
||||
|
captchaType:{ |
||||
|
type:String, |
||||
|
}, |
||||
|
//间隔 |
||||
|
vSpace: { |
||||
|
type: Number, |
||||
|
default: 5 |
||||
|
}, |
||||
|
imgSize: { |
||||
|
type: Object, |
||||
|
default() { |
||||
|
return { |
||||
|
width: '310px', |
||||
|
height: '155px' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
barSize: { |
||||
|
type: Object, |
||||
|
default() { |
||||
|
return { |
||||
|
width: '310px', |
||||
|
height: '40px' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
secretKey:'', //后端返回的ase加密秘钥 |
||||
|
checkNum:3, //默认需要点击的字数 |
||||
|
fontPos: [], //选中的坐标信息 |
||||
|
checkPosArr: [], //用户点击的坐标 |
||||
|
num: 1, //点击的记数 |
||||
|
pointBackImgBase:'', //后端获取到的背景图片 |
||||
|
poinTextList:[], //后端返回的点击字体顺序 |
||||
|
backToken:'', //后端返回的token值 |
||||
|
setSize: { |
||||
|
imgHeight: 0, |
||||
|
imgWidth: 0, |
||||
|
barHeight: 0, |
||||
|
barWidth: 0 |
||||
|
}, |
||||
|
tempPoints: [], |
||||
|
text: '', |
||||
|
barAreaColor: undefined, |
||||
|
barAreaBorderColor: undefined, |
||||
|
showRefresh: true, |
||||
|
bindingClick: true |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
resetSize() { |
||||
|
return resetSize |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
init() { |
||||
|
//加载页面 |
||||
|
this.fontPos.splice(0, this.fontPos.length) |
||||
|
this.checkPosArr.splice(0, this.checkPosArr.length) |
||||
|
this.num = 1 |
||||
|
this.getPictrue(); |
||||
|
this.$nextTick(() => { |
||||
|
this.setSize = this.resetSize(this) //重新设置宽度高度 |
||||
|
this.$parent.$emit('ready', this) |
||||
|
}) |
||||
|
}, |
||||
|
canvasClick(e) { |
||||
|
this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e)); |
||||
|
if (this.num == this.checkNum) { |
||||
|
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e)); |
||||
|
//按比例转换坐标值 |
||||
|
this.checkPosArr = this.pointTransfrom(this.checkPosArr,this.setSize); |
||||
|
//等创建坐标执行完 |
||||
|
setTimeout(() => { |
||||
|
// var flag = this.comparePos(this.fontPos, this.checkPosArr); |
||||
|
//发送后端请求 |
||||
|
var captchaVerification = this.secretKey? aesEncrypt(this.backToken+'---'+JSON.stringify(this.checkPosArr),this.secretKey):this.backToken+'---'+JSON.stringify(this.checkPosArr) |
||||
|
let data = { |
||||
|
captchaType:this.captchaType, |
||||
|
"pointJson":this.secretKey? aesEncrypt(JSON.stringify(this.checkPosArr),this.secretKey):JSON.stringify(this.checkPosArr), |
||||
|
"token":this.backToken |
||||
|
} |
||||
|
reqCheck(data).then(res=>{ |
||||
|
if (res.repCode == "0000") { |
||||
|
this.barAreaColor = '#4cae4c' |
||||
|
this.barAreaBorderColor = '#5cb85c' |
||||
|
this.text = '验证成功' |
||||
|
this.bindingClick = false |
||||
|
if (this.mode=='pop') { |
||||
|
setTimeout(()=>{ |
||||
|
this.$parent.clickShow = false; |
||||
|
this.refresh(); |
||||
|
},1500) |
||||
|
} |
||||
|
this.$parent.$emit('success', {captchaVerification}) |
||||
|
}else{ |
||||
|
this.$parent.$emit('error', this) |
||||
|
this.barAreaColor = '#d9534f' |
||||
|
this.barAreaBorderColor = '#d9534f' |
||||
|
this.text = '验证失败' |
||||
|
setTimeout(() => { |
||||
|
this.refresh(); |
||||
|
}, 700); |
||||
|
} |
||||
|
}) |
||||
|
}, 400); |
||||
|
} |
||||
|
if (this.num < this.checkNum) { |
||||
|
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e)); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//获取坐标 |
||||
|
getMousePos: function (obj, e) { |
||||
|
var x = e.offsetX |
||||
|
var y = e.offsetY |
||||
|
return {x, y} |
||||
|
}, |
||||
|
//创建坐标点 |
||||
|
createPoint: function (pos) { |
||||
|
this.tempPoints.push(Object.assign({}, pos)) |
||||
|
return ++this.num; |
||||
|
}, |
||||
|
refresh: function () { |
||||
|
this.tempPoints.splice(0, this.tempPoints.length) |
||||
|
this.barAreaColor = '#000' |
||||
|
this.barAreaBorderColor = '#ddd' |
||||
|
this.bindingClick = true |
||||
|
this.fontPos.splice(0, this.fontPos.length) |
||||
|
this.checkPosArr.splice(0, this.checkPosArr.length) |
||||
|
this.num = 1 |
||||
|
this.getPictrue(); |
||||
|
this.text = '验证失败' |
||||
|
this.showRefresh = true |
||||
|
}, |
||||
|
|
||||
|
// 请求背景图片和验证图片 |
||||
|
getPictrue(){ |
||||
|
let data = { |
||||
|
captchaType:this.captchaType |
||||
|
} |
||||
|
reqGet(data).then(res=>{ |
||||
|
if (res.repCode == "0000") { |
||||
|
this.pointBackImgBase = res.repData.originalImageBase64 |
||||
|
this.backToken = res.repData.token |
||||
|
this.secretKey = res.repData.secretKey |
||||
|
this.poinTextList = res.repData.wordList |
||||
|
this.text = '请依次点击【' + this.poinTextList.join(",") + '】' |
||||
|
}else{ |
||||
|
this.text = res.repMsg; |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
//坐标转换函数 |
||||
|
pointTransfrom(pointArr,imgSize){ |
||||
|
var newPointArr = pointArr.map(p=>{ |
||||
|
let x = Math.round(310 * p.x/parseInt(imgSize.imgWidth)) |
||||
|
let y =Math.round(155 * p.y/parseInt(imgSize.imgHeight)) |
||||
|
return {x,y} |
||||
|
}) |
||||
|
// console.log(newPointArr,"newPointArr"); |
||||
|
return newPointArr |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
// type变化则全面刷新 |
||||
|
type: { |
||||
|
immediate: true, |
||||
|
handler() { |
||||
|
this.init() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 禁止拖拽 |
||||
|
this.$el.onselectstart = function () { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,347 @@ |
|||||
|
<template> |
||||
|
<div style="position: relative;"> |
||||
|
<div v-if="type === '2'" class="verify-img-out" |
||||
|
:style="{height: (parseInt(setSize.imgHeight) + vSpace) + 'px'}" |
||||
|
> |
||||
|
<div class="verify-img-panel" :style="{width: setSize.imgWidth, |
||||
|
height: setSize.imgHeight,}"> |
||||
|
<img :src="'data:image/png;base64,'+backImgBase" alt="" style="width:100%;height:100%;display:block"> |
||||
|
<div class="verify-refresh" @click="refresh" v-show="showRefresh"><i class="iconfont icon-refresh"></i> |
||||
|
</div> |
||||
|
<transition name="tips"> |
||||
|
<span class="verify-tips" v-if="tipWords" :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"></span> |
||||
|
<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"></span> |
||||
|
<div class="verify-move-block" |
||||
|
@touchstart="start" |
||||
|
@mousedown="start" |
||||
|
:style="{width: barSize.height, height: barSize.height, 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}"> |
||||
|
<i :class="['verify-icon iconfont', iconClass]" |
||||
|
:style="{color: iconColor}"></i> |
||||
|
<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 {reqGet,reqCheck} from "../api/verifition-api" |
||||
|
|
||||
|
// "captchaType":"blockPuzzle", |
||||
|
export default { |
||||
|
name: 'VerifySlide', |
||||
|
props: { |
||||
|
captchaType:{ |
||||
|
type:String, |
||||
|
}, |
||||
|
type: { |
||||
|
type: String, |
||||
|
default: '1' |
||||
|
}, |
||||
|
//弹出式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' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
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: '' |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
barArea() { |
||||
|
return this.$el.querySelector('.verify-bar-area') |
||||
|
}, |
||||
|
resetSize() { |
||||
|
return resetSize |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
init() { |
||||
|
this.text = this.explain |
||||
|
this.getPictrue(); |
||||
|
this.$nextTick(() => { |
||||
|
let setSize = this.resetSize(this) //重新设置宽度高度 |
||||
|
for (let key in setSize) { |
||||
|
this.$set(this.setSize, key, setSize[key]) |
||||
|
} |
||||
|
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: function () { |
||||
|
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) |
||||
|
let data = { |
||||
|
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 |
||||
|
} |
||||
|
reqCheck(data).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.$parent.closeBox(); |
||||
|
this.$parent.$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.$parent.$emit('error',this) |
||||
|
this.tipWords = "验证失败" |
||||
|
setTimeout(()=>{ |
||||
|
this.tipWords = "" |
||||
|
},1000) |
||||
|
} |
||||
|
}) |
||||
|
this.status = false; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
refresh: function () { |
||||
|
this.showRefresh = true |
||||
|
this.finishText = '' |
||||
|
|
||||
|
this.transitionLeft = 'left .3s' |
||||
|
this.moveBlockLeft = 0 |
||||
|
|
||||
|
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.transitionWidth = '' |
||||
|
this.transitionLeft = '' |
||||
|
this.text = this.explain |
||||
|
}, 300) |
||||
|
}, |
||||
|
|
||||
|
// 请求背景图片和验证图片 |
||||
|
getPictrue(){ |
||||
|
let data = { |
||||
|
captchaType:this.captchaType |
||||
|
} |
||||
|
reqGet(data).then(res=>{ |
||||
|
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.tipWords = res.repMsg; |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
watch: { |
||||
|
// type变化则全面刷新 |
||||
|
type: { |
||||
|
immediate: true, |
||||
|
handler() { |
||||
|
this.init() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 禁止拖拽 |
||||
|
this.$el.onselectstart = function () { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
@ -0,0 +1,25 @@ |
|||||
|
/** |
||||
|
* 此处可直接引用自己项目封装好的 axios 配合后端联调 |
||||
|
*/ |
||||
|
|
||||
|
import request from "@/api/index.js" //调用项目封装的axios
|
||||
|
|
||||
|
//获取验证图片 以及token
|
||||
|
export function reqGet(data) { |
||||
|
return request({ |
||||
|
url: '/captcha/get', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//滑动或者点选验证
|
||||
|
export function reqCheck(data) { |
||||
|
return request({ |
||||
|
url: '/captcha/check', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
|
||||
@ -0,0 +1,11 @@ |
|||||
|
import CryptoJS from 'crypto-js' |
||||
|
/** |
||||
|
* @word 要加密的内容 |
||||
|
* @keyWord String 服务器随机返回的关键字 |
||||
|
* */ |
||||
|
export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){ |
||||
|
var key = CryptoJS.enc.Utf8.parse(keyWord); |
||||
|
var srcs = CryptoJS.enc.Utf8.parse(word); |
||||
|
var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7}); |
||||
|
return encrypted.toString(); |
||||
|
} |
||||
@ -0,0 +1,36 @@ |
|||||
|
export function resetSize(vm) { |
||||
|
var img_width, img_height, bar_width, bar_height; //图片的宽度、高度，移动条的宽度、高度
|
||||
|
|
||||
|
var parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth |
||||
|
var parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight |
||||
|
|
||||
|
if (vm.imgSize.width.indexOf('%') != -1) { |
||||
|
img_width = parseInt(this.imgSize.width) / 100 * parentWidth + 'px' |
||||
|
} else { |
||||
|
img_width = this.imgSize.width; |
||||
|
} |
||||
|
|
||||
|
if (vm.imgSize.height.indexOf('%') != -1) { |
||||
|
img_height = parseInt(this.imgSize.height) / 100 * parentHeight + 'px' |
||||
|
} else { |
||||
|
img_height = this.imgSize.height |
||||
|
} |
||||
|
|
||||
|
if (vm.barSize.width.indexOf('%') != -1) { |
||||
|
bar_width = parseInt(this.barSize.width) / 100 * parentWidth + 'px' |
||||
|
} else { |
||||
|
bar_width = this.barSize.width |
||||
|
} |
||||
|
|
||||
|
if (vm.barSize.height.indexOf('%') != -1) { |
||||
|
bar_height = parseInt(this.barSize.height) / 100 * parentHeight + 'px' |
||||
|
} else { |
||||
|
bar_height = this.barSize.height |
||||
|
} |
||||
|
|
||||
|
return {imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height} |
||||
|
} |
||||
|
|
||||
|
export const _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'] |
||||
|
export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0'] |
||||
|
export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC'] |
||||
@ -0,0 +1,101 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="pwd-container"> |
||||
|
<label>找回密码</label> |
||||
|
<el-tabs |
||||
|
v-model="retrieveType" class="login-form" style="width: 300px;" |
||||
|
> |
||||
|
<el-tab-pane label="手机号找回" name="phone"> |
||||
|
<el-form ref="form" :model="retrieveAccountForm" label-width="0px"> |
||||
|
<el-form-item label=""> |
||||
|
<el-input v-model="retrieveAccountForm.username" placeholder="请输入手机号" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label=""> |
||||
|
<el-input v-model="retrieveAccountForm.password" show-password placeholder="请输入密码" |
||||
|
autocomplete="off" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label=""> |
||||
|
<el-input v-model="retrieveAccountForm.code" style="width: 150px;" placeholder="请输入验证码" |
||||
|
autocomplete="off" |
||||
|
/> |
||||
|
<el-button style="margin-left: 20px;" type="primary">发送验证码</el-button> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" style="width: 100%;">登录</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="邮箱注册" name="email"> |
||||
|
<el-form ref="emailRegForm" status-icon :rules="emailRetrieveRules" :model="retrieveAccountForm" |
||||
|
label-width="0px" |
||||
|
> |
||||
|
<el-form-item label="" prop="email"> |
||||
|
<el-input v-model="retrieveAccountForm.email" placeholder="请输入邮箱" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="" prop="password"> |
||||
|
<el-input v-model="retrieveAccountForm.password" show-password placeholder="请输入密码" |
||||
|
autocomplete="off" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="" prop="code"> |
||||
|
<el-input v-model="retrieveAccountForm.code" oninput="value=value.replace(/[^\d]/g,'')" |
||||
|
style="width: 150px;" maxlength="4" placeholder="请输入验证码" |
||||
|
autocomplete="off" |
||||
|
/> |
||||
|
<el-button style="margin-left: 20px;" :disabled="validateCodeBtn" type="primary" |
||||
|
@click="sendEmailCodeHandle" |
||||
|
> |
||||
|
{{ validateCodeBtnText }} |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" style="width: 100%;" @click="emailRegHandle">确定</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'RetrievePwd', |
||||
|
data() { |
||||
|
return { |
||||
|
retrieveType: 'phone', |
||||
|
retrieveAccountForm: { |
||||
|
email: '', |
||||
|
password: '' |
||||
|
}, |
||||
|
emailRetrieveRules: { |
||||
|
email: [ |
||||
|
{required: true, trigger: 'blur', message: '请输入邮箱'}, |
||||
|
{ |
||||
|
pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, |
||||
|
message: '请输入正确的邮箱,多个使用;分隔' |
||||
|
} |
||||
|
], |
||||
|
// password: [{required: true, trigger: 'blur', validator: validatePassword}], |
||||
|
code: {required: true, trigger: 'blur', message: '请输入验证码'} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.app-container { |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-content: center; |
||||
|
} |
||||
|
.pwd-container { |
||||
|
width: 20%; |
||||
|
height: 50%; |
||||
|
border: 1px red solid; |
||||
|
} |
||||
|
</style> |
||||
@ -1,139 +0,0 @@ |
|||||
<template> |
|
||||
<div class="preview-form"> |
|
||||
<div class="" v-if="!formState"> |
|
||||
<el-row type="flex" justify="center" align="middle"> |
|
||||
<el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center"> |
|
||||
<h4 class="form-name-text"> |
|
||||
{{formConf.title}}</h4> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row type="flex" justify="center" align="middle"> |
|
||||
<el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center"> |
|
||||
<p class="form-name-text"> |
|
||||
{{formConf.description}} |
|
||||
</p> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-divider></el-divider> |
|
||||
<parser v-if="formConf.fields.length" :form-conf="formConf" @submit="submitForm"/> |
|
||||
</div> |
|
||||
<div v-if="formState"> |
|
||||
<p style="text-align: center"> |
|
||||
<i class="el-icon-check"/>您已完成本次问卷，感谢您的帮助与支持</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import Parser from '@/components/parser/Parser' |
|
||||
import {dbDataConvertForItemJson} from '@/utils/convert' |
|
||||
// 若parser是通过安装npm方式集成到项目中的，使用此行引入 |
|
||||
// import Parser from 'form-gen-parser' |
|
||||
window.onload = function() { |
|
||||
document.addEventListener('touchstart', function(event) { |
|
||||
if (event.touches.length > 1) { |
|
||||
event.preventDefault() |
|
||||
} |
|
||||
}) |
|
||||
document.addEventListener('gesturestart', function(event) { |
|
||||
event.preventDefault() |
|
||||
}) |
|
||||
} |
|
||||
export default { |
|
||||
components: { |
|
||||
Parser |
|
||||
}, |
|
||||
props: { |
|
||||
projectKey: '' |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
key2: +new Date(), |
|
||||
projectKey: '', |
|
||||
formState: false,//是否填写 |
|
||||
formConf: { |
|
||||
fields: [], |
|
||||
__methods__: { |
|
||||
clickTestButton1() { |
|
||||
console.log( |
|
||||
`%c【测试按钮1】点击事件里可以访问当前表单： |
|
||||
1) formModel='formData', 所以this.formData可以拿到当前表单的model |
|
||||
2) formRef='elForm', 所以this.$refs.elForm可以拿到当前表单的ref(vue组件) |
|
||||
`, |
|
||||
'color:#409EFF;font-size: 15px' |
|
||||
) |
|
||||
console.log('表单的Model：', this.formData) |
|
||||
console.log('表单的ref：', this.$refs.elForm) |
|
||||
} |
|
||||
}, |
|
||||
formRef: 'elForm', |
|
||||
formModel: 'formData', |
|
||||
size: 'small', |
|
||||
labelPosition: 'top', |
|
||||
labelWidth: 100, |
|
||||
formRules: 'rules', |
|
||||
gutter: 15, |
|
||||
disabled: false, |
|
||||
span: 24, |
|
||||
formBtns: true, |
|
||||
resetBtn: true, |
|
||||
unFocusedComponentBorder: true |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
computed: {}, |
|
||||
watch: {}, |
|
||||
created() { |
|
||||
this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small' |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.$api.get(`/user/project/details/${this.$route.query.key}`).then(res => { |
|
||||
if (res.data) { |
|
||||
let fields = res.data.projectItems.map(item => { |
|
||||
return dbDataConvertForItemJson(item) |
|
||||
}) |
|
||||
this.formConf.fields = fields |
|
||||
this.formConf.title = res.data.project.name |
|
||||
this.formConf.description = res.data.project.describe |
|
||||
} |
|
||||
}) |
|
||||
this.projectKey = this.$route.query.key |
|
||||
}, |
|
||||
methods: { |
|
||||
fillFormData(form, data) { |
|
||||
form.fields.forEach(item => { |
|
||||
const val = data[item.__vModel__] |
|
||||
if (val) { |
|
||||
item.__config__.defaultValue = val |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
submitForm(data) { |
|
||||
this.$api.post('/user/project/result/create', { |
|
||||
'projectKey': this.projectKey, |
|
||||
'collectData': data |
|
||||
}).then(res => { |
|
||||
this.formState = true |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.preview-form { |
|
||||
margin: 15px auto; |
|
||||
width: 800px; |
|
||||
padding: 15px; |
|
||||
background-repeat: repeat; |
|
||||
background-color: rgba(229, 239, 247, 0.87); |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: 750px) { |
|
||||
.preview-form { |
|
||||
margin: 0px; |
|
||||
width: 93% !important; |
|
||||
background-color: white; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,33 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<Verify |
||||
|
ref="verify" |
||||
|
:mode="'pop'" |
||||
|
:captcha-type="'blockPuzzle'" |
||||
|
:img-size="{ width: '330px', height: '155px' }" |
||||
|
@success="'success'" |
||||
|
/> |
||||
|
<button @click="useVerify">调用验证组件</button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 引入组件 |
||||
|
import Verify from '@/components/verifition/Verify' |
||||
|
|
||||
|
export default { |
||||
|
name: 'App', |
||||
|
components: { |
||||
|
Verify |
||||
|
}, |
||||
|
methods: { |
||||
|
success(params) { |
||||
|
// params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证 |
||||
|
console.log(params) |
||||
|
}, |
||||
|
useVerify() { |
||||
|
this.$refs.verify.show() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue