mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-26 09:11:52 +08:00
style: 格式化代码
This commit is contained in:
xingyu4j
parent
baf5d87d32
commit
48427994d4
@ -11,38 +11,15 @@
|
||||
<!-- 验证码容器 -->
|
||||
<!-- 滑动 -->
|
||||
<view v-if="componentType=='VerifySlide'">
|
||||
<VerifySlide
|
||||
@success="success"
|
||||
:captchaType="captchaType"
|
||||
:type="verifyType"
|
||||
:figure="figure"
|
||||
:arith="arith"
|
||||
:mode="mode"
|
||||
:vSpace="vSpace"
|
||||
:explain="explain"
|
||||
:imgSize="imgSize"
|
||||
:blockSize="blockSize"
|
||||
:barSize="barSize"
|
||||
:defaultImg = "defaultImg"
|
||||
ref="instance"
|
||||
></VerifySlide>
|
||||
<VerifySlide @success="success" :captchaType="captchaType" :type="verifyType" :figure="figure"
|
||||
:arith="arith" :mode="mode" :vSpace="vSpace" :explain="explain" :imgSize="imgSize"
|
||||
:blockSize="blockSize" :barSize="barSize" :defaultImg="defaultImg" ref="instance"></VerifySlide>
|
||||
</view>
|
||||
<!-- 点选 -->
|
||||
<view v-if="componentType=='VerifyPoints'">
|
||||
<VerifyPoint
|
||||
:captchaType="captchaType"
|
||||
:type="verifyType"
|
||||
:figure="figure"
|
||||
:arith="arith"
|
||||
:mode="mode"
|
||||
:vSpace="vSpace"
|
||||
:explain="explain"
|
||||
:imgSize="imgSize"
|
||||
:blockSize="blockSize"
|
||||
:barSize="barSize"
|
||||
:defaultImg = "defaultImg"
|
||||
ref="instance"
|
||||
></VerifyPoint>
|
||||
<VerifyPoint :captchaType="captchaType" :type="verifyType" :figure="figure" :arith="arith"
|
||||
:mode="mode" :vSpace="vSpace" :explain="explain" :imgSize="imgSize" :blockSize="blockSize"
|
||||
:barSize="barSize" :defaultImg="defaultImg" ref="instance"></VerifyPoint>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -204,6 +181,7 @@
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.verifybox-top {
|
||||
padding: 0 15px;
|
||||
height: 50px;
|
||||
@ -214,10 +192,12 @@
|
||||
border-bottom: 1px solid #e4e7eb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.verifybox-bottom {
|
||||
/* padding: 15px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.verifybox-close {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
@ -227,6 +207,7 @@
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -238,6 +219,7 @@
|
||||
/* display: none; */
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.verify-tips {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
@ -248,12 +230,17 @@
|
||||
line-height: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
.tips-enter,.tips-leave-to{
|
||||
|
||||
.tips-enter,
|
||||
.tips-leave-to {
|
||||
bottom: -30px;
|
||||
}
|
||||
.tips-enter-active,.tips-leave-active{
|
||||
|
||||
.tips-enter-active,
|
||||
.tips-leave-active {
|
||||
transition: bottom .5s;
|
||||
}
|
||||
|
||||
/* ---------------------------- */
|
||||
/*常规验证码*/
|
||||
.verify-code {
|
||||
|
||||
@ -6,6 +6,9 @@ import CryptoJS from 'crypto-js'
|
||||
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});
|
||||
var encrypted = CryptoJS.AES.encrypt(srcs, key, {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
});
|
||||
return encrypted.toString();
|
||||
}
|
||||
|
||||
@ -1,24 +1,16 @@
|
||||
<template>
|
||||
<view style="position: relative"
|
||||
>
|
||||
<view class="verify-image-out"
|
||||
v-show="showImage"
|
||||
>
|
||||
<view style="position: relative">
|
||||
<view class="verify-image-out" v-show="showImage">
|
||||
<view class="verify-image-panel" :style="{'width': imgSize.width,
|
||||
'height': imgSize.height,
|
||||
'margin-bottom': vSpace + 'px'}"
|
||||
>
|
||||
'margin-bottom': vSpace + 'px'}">
|
||||
<view class="verify-refresh" style="z-index:3" @click="refresh" v-show="showRefresh">
|
||||
<text class="iconfont icon-refresh"></text>
|
||||
</view>
|
||||
<image :src="pointBackImgBase?('data:image/png;base64,'+pointBackImgBase):defaultImg"
|
||||
id="image"
|
||||
ref="canvas"
|
||||
style="width:100%;height:100%;display:block"
|
||||
@click=" bindingClick? canvasClick($event): undefined"
|
||||
></image>
|
||||
<view v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area"
|
||||
:style="{
|
||||
<image :src="pointBackImgBase?('data:image/png;base64,'+pointBackImgBase):defaultImg" id="image"
|
||||
ref="canvas" style="width:100%;height:100%;display:block"
|
||||
@click=" bindingClick? canvasClick($event): undefined"></image>
|
||||
<view v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area" :style="{
|
||||
'background-color':'#1abd6c',
|
||||
color:'#fff',
|
||||
'z-index':9999,
|
||||
@ -36,8 +28,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 'height': this.barSize.height, -->
|
||||
<view class="verify-bar-area"
|
||||
:style="{'width': imgSize.width,
|
||||
<view class="verify-bar-area" :style="{'width': imgSize.width,
|
||||
'color': barAreaColor,
|
||||
'border-color': barAreaBorderColor,
|
||||
'line-height':'40px'}">
|
||||
@ -276,6 +267,7 @@
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.verifybox-top {
|
||||
padding: 0 15px;
|
||||
height: 50px;
|
||||
@ -286,10 +278,12 @@
|
||||
border-bottom: 1px solid #e4e7eb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.verifybox-bottom {
|
||||
/* padding: 15px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.verifybox-close {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
@ -299,6 +293,7 @@
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -310,6 +305,7 @@
|
||||
/* display: none; */
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.verify-tips {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
@ -320,12 +316,17 @@
|
||||
line-height: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
.tips-enter,.tips-leave-to{
|
||||
|
||||
.tips-enter,
|
||||
.tips-leave-to {
|
||||
bottom: -30px;
|
||||
}
|
||||
.tips-enter-active,.tips-leave-active{
|
||||
|
||||
.tips-enter-active,
|
||||
.tips-leave-active {
|
||||
transition: bottom .5s;
|
||||
}
|
||||
|
||||
/* ---------------------------- */
|
||||
/*常规验证码*/
|
||||
.verify-code {
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<view style="position: relative;">
|
||||
<view v-if="type === '2'" class="verify-img-out"
|
||||
:style="{height: (parseInt(imgSize.height) + vSpace) + 'px'}"
|
||||
>
|
||||
<view v-if="type === '2'" class="verify-img-out" :style="{height: (parseInt(imgSize.height) + vSpace) + 'px'}">
|
||||
<view class="verify-img-panel" :style="{width: imgSize.width,
|
||||
height: imgSize.height,}">
|
||||
|
||||
<image :src="backImgBase?('data:image/png;base64,'+backImgBase):defaultImg" alt="" style="width:100%;height:100%;display:block"></image>
|
||||
<image :src="backImgBase?('data:image/png;base64,'+backImgBase):defaultImg" alt=""
|
||||
style="width:100%;height:100%;display:block"></image>
|
||||
<view class="verify-refresh" @click="refresh" v-show="showRefresh">
|
||||
<text class="iconfont icon-refresh"></text>
|
||||
</view>
|
||||
@ -24,21 +23,15 @@
|
||||
<view class="verify-left-bar"
|
||||
:style="{width: leftBarWidth?leftBarWidth:'40px', height: '40px', 'border-color': leftBarBorderColor, transaction: transitionWidth}">
|
||||
<text class="verify-msg" v-text="finishText"></text>
|
||||
<view class="verify-move-block"
|
||||
@touchstart="start"
|
||||
@touchend ="end"
|
||||
@touchmove ="move"
|
||||
<view class="verify-move-block" @touchstart="start" @touchend="end" @touchmove="move"
|
||||
:style="{width:'40px', height: '40px', 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}">
|
||||
<text :class="['verify-icon iconfont', iconClass]"
|
||||
:style="{color: iconColor}"></text>
|
||||
<view v-if="type === '2'"
|
||||
class="verify-sub-block"
|
||||
:style="{'width':Math.floor(parseInt(imgSize.width)*47/310)+ 'px' ,
|
||||
<text :class="['verify-icon iconfont', iconClass]" :style="{color: iconColor}"></text>
|
||||
<view v-if="type === '2'" class="verify-sub-block" :style="{'width':Math.floor(parseInt(imgSize.width)*47/310)+ 'px' ,
|
||||
'height': imgSize.height,
|
||||
'top':'-' + (parseInt(imgSize.height) + vSpace) + 'px',
|
||||
}"
|
||||
>
|
||||
<image :src="'data:image/png;base64,'+blockBackImgBase" alt="" style="width:100%;height:100%;display:block"></image>
|
||||
}">
|
||||
<image :src="'data:image/png;base64,'+blockBackImgBase" alt=""
|
||||
style="width:100%;height:100%;display:block"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -50,8 +43,12 @@
|
||||
* VerifySlide
|
||||
* @description 滑块
|
||||
* */
|
||||
import {aesEncrypt} from "./../utils/ase.js"
|
||||
import {myRequest} from "../utils/request.js"
|
||||
import {
|
||||
aesEncrypt
|
||||
} from "./../utils/ase.js"
|
||||
import {
|
||||
myRequest
|
||||
} from "../utils/request.js"
|
||||
export default {
|
||||
name: 'VerifySlide',
|
||||
props: {
|
||||
@ -182,8 +179,10 @@
|
||||
|
||||
var move_block_left = x - bar_area_left //小方块相对于父元素的left值
|
||||
if (this.type !== '1') { //图片滑动
|
||||
if (move_block_left >= barArea_offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2) {
|
||||
move_block_left = barArea_offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2;
|
||||
if (move_block_left >= barArea_offsetWidth - parseInt(parseInt(this.blockSize
|
||||
.width) / 2) - 2) {
|
||||
move_block_left = barArea_offsetWidth - parseInt(parseInt(this.blockSize
|
||||
.width) / 2) - 2;
|
||||
}
|
||||
}
|
||||
|
||||
@ -192,8 +191,10 @@
|
||||
}
|
||||
|
||||
//拖动后小方块的left值
|
||||
this.moveBlockLeft = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2) ) + "px"
|
||||
this.leftBarWidth = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) + "px"
|
||||
this.moveBlockLeft = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
|
||||
"px"
|
||||
this.leftBarWidth = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
|
||||
"px"
|
||||
|
||||
}
|
||||
}).exec();
|
||||
@ -210,10 +211,22 @@
|
||||
|
||||
moveLeftDistance = moveLeftDistance * 310 / parseInt(this.imgSize.width)
|
||||
|
||||
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})
|
||||
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
|
||||
})
|
||||
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}),
|
||||
"pointJson": this.secretKey ? aesEncrypt(JSON.stringify({
|
||||
x: moveLeftDistance,
|
||||
y: 5.0
|
||||
}), this.secretKey) : JSON.stringify({
|
||||
x: moveLeftDistance,
|
||||
y: 5.0
|
||||
}),
|
||||
"token": this.backToken
|
||||
}
|
||||
myRequest({
|
||||
@ -236,10 +249,13 @@
|
||||
this.refresh();
|
||||
}, 1500)
|
||||
this.passFalg = true
|
||||
this.tipWords = `${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
|
||||
this.tipWords =
|
||||
`${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
|
||||
setTimeout(() => {
|
||||
this.tipWords = ""
|
||||
this.$emit('success', {captchaVerification})
|
||||
this.$emit('success', {
|
||||
captchaVerification
|
||||
})
|
||||
// this.$parent.$emit('success', {captchaVerification})
|
||||
}, 1000)
|
||||
} else {
|
||||
@ -329,8 +345,7 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
mounted() {},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@ -345,6 +360,7 @@
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.verifybox-top {
|
||||
padding: 0 15px;
|
||||
height: 50px;
|
||||
@ -355,10 +371,12 @@
|
||||
border-bottom: 1px solid #e4e7eb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.verifybox-bottom {
|
||||
/* padding: 15px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.verifybox-close {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
@ -368,6 +386,7 @@
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -379,6 +398,7 @@
|
||||
/* display: none; */
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.verify-tips {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
@ -389,6 +409,7 @@
|
||||
line-height: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.suc-bg {
|
||||
background-color: rgba(92, 184, 92, .5);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
|
||||
@ -400,12 +421,16 @@
|
||||
}
|
||||
|
||||
|
||||
.tips-enter,.tips-leave-to{
|
||||
.tips-enter,
|
||||
.tips-leave-to {
|
||||
bottom: -30px;
|
||||
}
|
||||
.tips-enter-active,.tips-leave-active{
|
||||
|
||||
.tips-enter-active,
|
||||
.tips-leave-active {
|
||||
transition: bottom .5s;
|
||||
}
|
||||
|
||||
/* ---------------------------- */
|
||||
/*常规验证码*/
|
||||
.verify-code {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user