zenghuapei
/
cyywl_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 格式化代码

pull/2/head
xingyu4j 2022-08-06 00:59:24 +08:00
parent baf5d87d32
commit 48427994d4
5 changed files with 1308 additions and 1292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
yudao-ui-admin-uniapp/components/verifition/Verify.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view :class="mode=='pop'?'mask':''" v-show="showBox"> <view :class="mode=='pop'?'mask':''" v-show="showBox">
<view :class="mode=='pop'?'verifybox':''" :style="{'max-width':parseInt(imgSize.width)+30+'px'}"> <view :class="mode=='pop'?'verifybox':''" :style="{'max-width':parseInt(imgSize.width)+30+'px'}">
<view class="verifybox-top" v-if="mode=='pop'"> <view class="verifybox-top" v-if="mode=='pop'">
请完成安全验证 请完成安全验证
@ -11,42 +11,19 @@
<!-- 验证码容器 --> <!-- 验证码容器 -->
<!-- 滑动 --> <!-- 滑动 -->
<view v-if="componentType=='VerifySlide'"> <view v-if="componentType=='VerifySlide'">
<VerifySlide <VerifySlide @success="success" :captchaType="captchaType" :type="verifyType" :figure="figure"
@success="success" :arith="arith" :mode="mode" :vSpace="vSpace" :explain="explain" :imgSize="imgSize"
:captchaType="captchaType" :blockSize="blockSize" :barSize="barSize" :defaultImg="defaultImg" ref="instance"></VerifySlide>
: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>
<!-- 点选 --> <!-- 点选 -->
<view v-if="componentType=='VerifyPoints'"> <view v-if="componentType=='VerifyPoints'">
<VerifyPoint <VerifyPoint :captchaType="captchaType" :type="verifyType" :figure="figure" :arith="arith"
:captchaType="captchaType" :mode="mode" :vSpace="vSpace" :explain="explain" :imgSize="imgSize" :blockSize="blockSize"
:type="verifyType" :barSize="barSize" :defaultImg="defaultImg" ref="instance"></VerifyPoint>
:figure="figure" </view>
:arith="arith"
:mode="mode"
:vSpace="vSpace"
:explain="explain"
:imgSize="imgSize"
:blockSize="blockSize"
:barSize="barSize"
:defaultImg = "defaultImg"
ref="instance"
></VerifyPoint>
</view> </view>
</view> </view>
</view> </view>
</view>
</template> </template>
<script> <script>
/** /**
@ -59,9 +36,9 @@
export default { export default {
name: 'Vue2Verify', name: 'Vue2Verify',
props: { props: {
captchaType:{ captchaType: {
type:String, type: String,
required:true required: true
}, },
figure: { figure: {
type: Number type: Number
@ -71,11 +48,11 @@
}, },
mode: { mode: {
type: String, type: String,
default:'pop' default: 'pop'
}, },
vSpace: { vSpace: {
type: Number, type: Number,
default:5 default: 5
}, },
explain: { explain: {
type: String, type: String,
@ -83,7 +60,7 @@
}, },
imgSize: { imgSize: {
type: Object, type: Object,
default() { default () {
return { return {
width: '310px', width: '310px',
height: '155px' height: '155px'
@ -92,7 +69,7 @@
}, },
blockSize: { blockSize: {
type: Object, type: Object,
default() { default () {
return { return {
width: '50px', width: '50px',
height: '50px' height: '50px'
@ -106,7 +83,7 @@
data() { data() {
return { return {
// showBox:true, // showBox:true,
clickShow:false, clickShow: false,
// 内部类型 // 内部类型
verifyType: undefined, verifyType: undefined,
// 所用组件类型 // 所用组件类型
@ -129,14 +106,14 @@
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01 s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-"; s[8] = s[13] = s[18] = s[23] = "-";
var slider = 'slider'+ '-'+s.join(""); var slider = 'slider' + '-' + s.join("");
var point = 'point'+ '-'+s.join(""); var point = 'point' + '-' + s.join("");
// 判断下是否存在 slider // 判断下是否存在 slider
if(!uni.getStorageSync('slider')) { if (!uni.getStorageSync('slider')) {
uni.setStorageSync('slider', slider) uni.setStorageSync('slider', slider)
} }
if(!uni.getStorageSync('point')) { if (!uni.getStorageSync('point')) {
uni.setStorageSync("point",point); uni.setStorageSync("point", point);
} }
}, },
success(e) { success(e) {
@ -151,8 +128,8 @@
this.instance.refresh() this.instance.refresh()
} }
}, },
show(){ show() {
if (this.mode=="pop") { if (this.mode == "pop") {
this.clickShow = true; this.clickShow = true;
} }
} }
@ -161,16 +138,16 @@
instance() { instance() {
return this.$refs.instance || {} return this.$refs.instance || {}
}, },
showBox(){ showBox() {
if (this.mode=='pop') { if (this.mode == 'pop') {
return this.clickShow return this.clickShow
}else{ } else {
return true; return true;
} }
} }
}, },
watch: { watch: {
captchaType:{ captchaType: {
immediate: true, immediate: true,
handler(captchaType) { handler(captchaType) {
switch (captchaType.toString()) { switch (captchaType.toString()) {
@ -193,18 +170,19 @@
} }
</script> </script>
<style> <style>
.verifybox{ .verifybox {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border-radius: 2px; border-radius: 2px;
border: 1px solid #e4e7eb; border: 1px solid #e4e7eb;
background-color: #fff; background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0, 0, 0, .3);
left: 50%; left: 50%;
top:50%; top: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
.verifybox-top{
.verifybox-top {
padding: 0 15px; padding: 0 15px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
@ -214,11 +192,13 @@
border-bottom: 1px solid #e4e7eb; border-bottom: 1px solid #e4e7eb;
box-sizing: border-box; box-sizing: border-box;
} }
.verifybox-bottom{
.verifybox-bottom {
/* padding: 15px; */ /* padding: 15px; */
box-sizing: border-box; box-sizing: border-box;
} }
.verifybox-close{
.verifybox-close {
position: absolute; position: absolute;
top: 13px; top: 13px;
right: 9px; right: 9px;
@ -227,33 +207,40 @@
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.mask{
.mask {
position: fixed; position: fixed;
top: 0; top: 0;
left:0; left: 0;
z-index: 1001; z-index: 1001;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background: rgba(0,0,0,.3); background: rgba(0, 0, 0, .3);
/* display: none; */ /* display: none; */
transition: all .5s; transition: all .5s;
} }
.verify-tips{
.verify-tips {
position: absolute; position: absolute;
left: 0px; left: 0px;
bottom:0px; bottom: 0px;
width: 100%; width: 100%;
height: 30px; height: 30px;
background-color:rgb(231, 27, 27,.5); background-color: rgb(231, 27, 27, .5);
line-height:30px; line-height: 30px;
color: #fff; color: #fff;
} }
.tips-enter,.tips-leave-to{
.tips-enter,
.tips-leave-to {
bottom: -30px; bottom: -30px;
} }
.tips-enter-active,.tips-leave-active{
.tips-enter-active,
.tips-leave-active {
transition: bottom .5s; transition: bottom .5s;
} }
/* ---------------------------- */ /* ---------------------------- */
/*常规验证码*/ /*常规验证码*/
.verify-code { .verify-code {

7
yudao-ui-admin-uniapp/components/verifition/utils/ase.js
View File

@ -3,9 +3,12 @@ import CryptoJS from 'crypto-js'
* @word 要加密的内容 * @word 要加密的内容
* @keyWord String 服务器随机返回的关键字 * @keyWord String 服务器随机返回的关键字
* */ * */
export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){ export function aesEncrypt(word, keyWord = "XwKsGlMcdPMEhR1B") {
var key = CryptoJS.enc.Utf8.parse(keyWord); var key = CryptoJS.enc.Utf8.parse(keyWord);
var srcs = CryptoJS.enc.Utf8.parse(word); 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(); return encrypted.toString();
} }

10
yudao-ui-admin-uniapp/components/verifition/utils/request.js
View File

@ -1,15 +1,15 @@
import config from '@/config' import config from '@/config'
const baseUrl = config.baseUrl const baseUrl = config.baseUrl
export const myRequest = (option={})=>{ export const myRequest = (option = {}) => {
return new Promise((reslove,reject)=>{ return new Promise((reslove, reject) => {
uni.request({ uni.request({
url: baseUrl + option.url, url: baseUrl + option.url,
data :option.data, data: option.data,
method:option.method || "GET", method: option.method || "GET",
success: (result) => { success: (result) => {
reslove(result) reslove(result)
}, },
fail:(error)=>{ fail: (error) => {
reject(error) reject(error)
} }
}) })

67
yudao-ui-admin-uniapp/components/verifition/verifyPoint/verifyPoint.vue
View File

@ -1,24 +1,16 @@
<template> <template>
<view style="position: relative" <view style="position: relative">
> <view class="verify-image-out" v-show="showImage">
<view class="verify-image-out"
v-show="showImage"
>
<view class="verify-image-panel" :style="{'width': imgSize.width, <view class="verify-image-panel" :style="{'width': imgSize.width,
'height': imgSize.height, 'height': imgSize.height,
'margin-bottom': vSpace + 'px'}" 'margin-bottom': vSpace + 'px'}">
>
<view class="verify-refresh" style="z-index:3" @click="refresh" v-show="showRefresh"> <view class="verify-refresh" style="z-index:3" @click="refresh" v-show="showRefresh">
<text class="iconfont icon-refresh"></text> <text class="iconfont icon-refresh"></text>
</view> </view>
<image :src="pointBackImgBase?('data:image/png;base64,'+pointBackImgBase):defaultImg" <image :src="pointBackImgBase?('data:image/png;base64,'+pointBackImgBase):defaultImg" id="image"
id="image" ref="canvas" style="width:100%;height:100%;display:block"
ref="canvas" @click=" bindingClick? canvasClick($event): undefined"></image>
style="width:100%;height:100%;display:block" <view v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area" :style="{
@click=" bindingClick? canvasClick($event): undefined"
></image>
<view v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area"
:style="{
'background-color':'#1abd6c', 'background-color':'#1abd6c',
color:'#fff', color:'#fff',
'z-index':9999, 'z-index':9999,
@ -36,8 +28,7 @@
</view> </view>
</view> </view>
<!-- 'height': this.barSize.height, --> <!-- 'height': this.barSize.height, -->
<view class="verify-bar-area" <view class="verify-bar-area" :style="{'width': imgSize.width,
:style="{'width': imgSize.width,
'color': barAreaColor, 'color': barAreaColor,
'border-color': barAreaBorderColor, 'border-color': barAreaBorderColor,
'line-height':'40px'}"> 'line-height':'40px'}">
@ -265,18 +256,19 @@
</script> </script>
<style scoped> <style scoped>
.verifybox{ .verifybox {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border-radius: 2px; border-radius: 2px;
border: 1px solid #e4e7eb; border: 1px solid #e4e7eb;
background-color: #fff; background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0, 0, 0, .3);
left: 50%; left: 50%;
top:50%; top: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
.verifybox-top{
.verifybox-top {
padding: 0 15px; padding: 0 15px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
@ -286,11 +278,13 @@
border-bottom: 1px solid #e4e7eb; border-bottom: 1px solid #e4e7eb;
box-sizing: border-box; box-sizing: border-box;
} }
.verifybox-bottom{
.verifybox-bottom {
/* padding: 15px; */ /* padding: 15px; */
box-sizing: border-box; box-sizing: border-box;
} }
.verifybox-close{
.verifybox-close {
position: absolute; position: absolute;
top: 13px; top: 13px;
right: 9px; right: 9px;
@ -299,33 +293,40 @@
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.mask{
.mask {
position: fixed; position: fixed;
top: 0; top: 0;
left:0; left: 0;
z-index: 1001; z-index: 1001;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background: rgba(0,0,0,.3); background: rgba(0, 0, 0, .3);
/* display: none; */ /* display: none; */
transition: all .5s; transition: all .5s;
} }
.verify-tips{
.verify-tips {
position: absolute; position: absolute;
left: 0px; left: 0px;
bottom:0px; bottom: 0px;
width: 100%; width: 100%;
height: 30px; height: 30px;
background-color:rgb(231, 27, 27,.5); background-color: rgb(231, 27, 27, .5);
line-height:30px; line-height: 30px;
color: #fff; color: #fff;
} }
.tips-enter,.tips-leave-to{
.tips-enter,
.tips-leave-to {
bottom: -30px; bottom: -30px;
} }
.tips-enter-active,.tips-leave-active{
.tips-enter-active,
.tips-leave-active {
transition: bottom .5s; transition: bottom .5s;
} }
/* ---------------------------- */ /* ---------------------------- */
/*常规验证码*/ /*常规验证码*/
.verify-code { .verify-code {

211
yudao-ui-admin-uniapp/components/verifition/verifySlider/verifySlider.vue
View File

@ -1,17 +1,16 @@
<template> <template>
<view style="position: relative;"> <view style="position: relative;">
<view v-if="type === '2'" class="verify-img-out" <view v-if="type === '2'" class="verify-img-out" :style="{height: (parseInt(imgSize.height) + vSpace) + 'px'}">
:style="{height: (parseInt(imgSize.height) + vSpace) + 'px'}"
>
<view class="verify-img-panel" :style="{width: imgSize.width, <view class="verify-img-panel" :style="{width: imgSize.width,
height: imgSize.height,}"> 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"> <view class="verify-refresh" @click="refresh" v-show="showRefresh">
<text class="iconfont icon-refresh"></text> <text class="iconfont icon-refresh"></text>
</view> </view>
<transition name="tips"> <transition name="tips">
<text class="verify-tips" v-if="tipWords" :class="passFalg ? 'suc-bg':'err-bg'" >{{tipWords}}</text> <text class="verify-tips" v-if="tipWords" :class="passFalg ? 'suc-bg':'err-bg'">{{tipWords}}</text>
</transition> </transition>
</view> </view>
</view> </view>
@ -24,21 +23,15 @@
<view class="verify-left-bar" <view class="verify-left-bar"
:style="{width: leftBarWidth?leftBarWidth:'40px', height: '40px', 'border-color': leftBarBorderColor, transaction: transitionWidth}"> :style="{width: leftBarWidth?leftBarWidth:'40px', height: '40px', 'border-color': leftBarBorderColor, transaction: transitionWidth}">
<text class="verify-msg" v-text="finishText"></text> <text class="verify-msg" v-text="finishText"></text>
<view class="verify-move-block" <view class="verify-move-block" @touchstart="start" @touchend="end" @touchmove="move"
@touchstart="start"
@touchend ="end"
@touchmove ="move"
:style="{width:'40px', height: '40px', 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}"> :style="{width:'40px', height: '40px', 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}">
<text :class="['verify-icon iconfont', iconClass]" <text :class="['verify-icon iconfont', iconClass]" :style="{color: iconColor}"></text>
:style="{color: iconColor}"></text> <view v-if="type === '2'" class="verify-sub-block" :style="{'width':Math.floor(parseInt(imgSize.width)*47/310)+ 'px' ,
<view v-if="type === '2'"
class="verify-sub-block"
:style="{'width':Math.floor(parseInt(imgSize.width)*47/310)+ 'px' ,
'height': imgSize.height, 'height': imgSize.height,
'top':'-' + (parseInt(imgSize.height) + vSpace) + 'px', 'top':'-' + (parseInt(imgSize.height) + vSpace) + 'px',
}" }">
> <image :src="'data:image/png;base64,'+blockBackImgBase" alt=""
<image :src="'data:image/png;base64,'+blockBackImgBase" alt="" style="width:100%;height:100%;display:block"></image> style="width:100%;height:100%;display:block"></image>
</view> </view>
</view> </view>
</view> </view>
@ -50,13 +43,17 @@
* VerifySlide * VerifySlide
* @description 滑块 * @description 滑块
* */ * */
import {aesEncrypt} from "./../utils/ase.js" import {
import {myRequest} from "../utils/request.js" aesEncrypt
} from "./../utils/ase.js"
import {
myRequest
} from "../utils/request.js"
export default { export default {
name: 'VerifySlide', name: 'VerifySlide',
props: { props: {
captchaType:{ captchaType: {
type:String, type: String,
}, },
type: { type: {
type: String, type: String,
@ -77,7 +74,7 @@
}, },
imgSize: { imgSize: {
type: Object, type: Object,
default() { default () {
return { return {
width: '310px', width: '310px',
height: '155px' height: '155px'
@ -86,7 +83,7 @@
}, },
blockSize: { blockSize: {
type: Object, type: Object,
default() { default () {
return { return {
width: '50px', width: '50px',
height: '50px' height: '50px'
@ -95,7 +92,7 @@
}, },
barSize: { barSize: {
type: Object, type: Object,
default() { default () {
return { return {
width: '100%', width: '100%',
height: '40px' height: '40px'
@ -109,17 +106,17 @@
}, },
data() { data() {
return { return {
secretKey:'', //后端返回的加密秘钥 字段 secretKey: '', //后端返回的加密秘钥 字段
passFalg:false, //请求通过与否 passFalg: false, //请求通过与否
backImgBase:'', //验证码背景图片 backImgBase: '', //验证码背景图片
blockBackImgBase:'', //验证滑块的背景图片 blockBackImgBase: '', //验证滑块的背景图片
backToken:"", //后端返回的唯一token值 backToken: "", //后端返回的唯一token值
startMoveTime:"", //移动开始的时间 startMoveTime: "", //移动开始的时间
endMovetime:'', //移动结束的时间 endMovetime: '', //移动结束的时间
tipsBackColor:'', //提示词的北京颜色 tipsBackColor: '', //提示词的北京颜色
tipWords:'', tipWords: '',
text: '', text: '',
finishText:'', finishText: '',
setSize: { setSize: {
imgHeight: 0, imgHeight: 0,
imgWidth: 0, imgWidth: 0,
@ -152,7 +149,7 @@
}, },
//鼠标按下 //鼠标按下
start: function (e) { start: function(e) {
this.startMoveTime = new Date().getTime(); //开始滑动的时间 this.startMoveTime = new Date().getTime(); //开始滑动的时间
if (this.isEnd == false) { if (this.isEnd == false) {
this.text = '' this.text = ''
@ -164,26 +161,28 @@
} }
}, },
//鼠标移动 //鼠标移动
move: function (e) { move: function(e) {
var query = uni.createSelectorQuery().in(this); var query = uni.createSelectorQuery().in(this);
this.barArea = query.select('.verify-bar-area') this.barArea = query.select('.verify-bar-area')
var bar_area_left,barArea_offsetWidth; var bar_area_left, barArea_offsetWidth;
this.barArea.boundingClientRect(data => { this.barArea.boundingClientRect(data => {
bar_area_left = Math.ceil(data.left) bar_area_left = Math.ceil(data.left)
barArea_offsetWidth =Math.ceil(data.width) barArea_offsetWidth = Math.ceil(data.width)
if (this.status && this.isEnd == false) { if (this.status && this.isEnd == false) {
if (!e.touches) { //兼容移动端 if (!e.touches) { //兼容移动端
var x =Math.ceil(e.clientX); var x = Math.ceil(e.clientX);
} else { //兼容PC端 } else { //兼容PC端
var x =Math.ceil(e.touches[0].pageX) ; var x = Math.ceil(e.touches[0].pageX);
} }
// var bar_area_left = this.getLeft(this.barArea); // var bar_area_left = this.getLeft(this.barArea);
var move_block_left = x - bar_area_left //小方块相对于父元素的left值 var move_block_left = x - bar_area_left //小方块相对于父元素的left值
if (this.type !== '1') { //图片滑动 if (this.type !== '1') { //图片滑动
if (move_block_left >= barArea_offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2) { if (move_block_left >= barArea_offsetWidth - parseInt(parseInt(this.blockSize
move_block_left = barArea_offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2; .width) / 2) - 2) {
move_block_left = barArea_offsetWidth - parseInt(parseInt(this.blockSize
.width) / 2) - 2;
} }
} }
@ -192,34 +191,48 @@
} }
//拖动后小方块的left值 //拖动后小方块的left值
this.moveBlockLeft = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2) ) + "px" this.moveBlockLeft = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
this.leftBarWidth = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) + "px" "px"
this.leftBarWidth = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
"px"
} }
}).exec(); }).exec();
}, },
//鼠标松开 //鼠标松开
end: function () { end: function() {
this.endMovetime =new Date().getTime(); this.endMovetime = new Date().getTime();
var _this = this; var _this = this;
// 判断是否重合 // 判断是否重合
if (this.status && this.isEnd == false) { if (this.status && this.isEnd == false) {
if (this.type !== '1') { //图片滑动 if (this.type !== '1') { //图片滑动
var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', '')); var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''));
moveLeftDistance = moveLeftDistance * 310/ parseInt(this.imgSize.width) 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 = { let data = {
captchaType:this.captchaType, 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({
"token":this.backToken x: moveLeftDistance,
y: 5.0
}), this.secretKey) : JSON.stringify({
x: moveLeftDistance,
y: 5.0
}),
"token": this.backToken
} }
myRequest({ myRequest({
url: `/captcha/check`, url: `/captcha/check`,
data, data,
method:"POST", method: "POST",
}).then((result) => { }).then((result) => {
let res = result.data let res = result.data
if (res.repCode == "0000") { if (res.repCode == "0000") {
@ -229,40 +242,43 @@
this.iconClass = 'icon-check' this.iconClass = 'icon-check'
this.showRefresh = true this.showRefresh = true
this.isEnd = true; this.isEnd = true;
setTimeout(()=>{ setTimeout(() => {
if (this.mode=='pop') { if (this.mode == 'pop') {
this.$parent.clickShow = false; this.$parent.clickShow = false;
} }
this.refresh(); this.refresh();
},1500) }, 1500)
this.passFalg = true this.passFalg = true
this.tipWords = `${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功` this.tipWords =
setTimeout(()=>{ `${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
setTimeout(() => {
this.tipWords = "" this.tipWords = ""
this.$emit('success', {captchaVerification}) this.$emit('success', {
captchaVerification
})
// this.$parent.$emit('success', {captchaVerification}) // this.$parent.$emit('success', {captchaVerification})
},1000) }, 1000)
}else{ } else {
this.moveBlockBackgroundColor = '#d9534f' this.moveBlockBackgroundColor = '#d9534f'
this.leftBarBorderColor = '#d9534f' this.leftBarBorderColor = '#d9534f'
this.iconColor = '#fff' this.iconColor = '#fff'
this.iconClass = 'icon-close' this.iconClass = 'icon-close'
this.passFalg = false this.passFalg = false
setTimeout(()=>{ setTimeout(() => {
this.refresh(); this.refresh();
}, 1000); }, 1000);
this.$parent.$emit('error',this) this.$parent.$emit('error', this)
this.tipWords = "验证失败" this.tipWords = "验证失败"
setTimeout(()=>{ setTimeout(() => {
this.tipWords = "" this.tipWords = ""
},1000) }, 1000)
} }
}) })
} }
this.status = false; this.status = false;
} }
}, },
refresh: function () { refresh: function() {
this.showRefresh = true this.showRefresh = true
this.finishText = '' this.finishText = ''
this.transitionLeft = 'left .3s' this.transitionLeft = 'left .3s'
@ -283,7 +299,7 @@
}, },
//获取left值 //获取left值
getLeft: function (node) { getLeft: function(node) {
let leftValue = 0; let leftValue = 0;
while (node) { while (node) {
leftValue += node.offsetLeft; leftValue += node.offsetLeft;
@ -294,16 +310,16 @@
}, },
// 请求背景图片和验证图片 // 请求背景图片和验证图片
getPictrue(){ getPictrue() {
let data = { let data = {
captchaType:this.captchaType, captchaType: this.captchaType,
clientUid: uni.getStorageSync('slider'), clientUid: uni.getStorageSync('slider'),
ts: Date.now(), // 现在的时间戳 ts: Date.now(), // 现在的时间戳
} }
myRequest({ myRequest({
url: '/captcha/get', //仅为示例，并非真实接口地址。 url: '/captcha/get', //仅为示例，并非真实接口地址。
data, data,
method:"POST", method: "POST",
}).then((result) => { }).then((result) => {
let res = result.data let res = result.data
if (res.repCode == "0000") { if (res.repCode == "0000") {
@ -313,7 +329,7 @@
this.secretKey = res.repData.secretKey this.secretKey = res.repData.secretKey
} }
// 判断接口请求次数是否失效 // 判断接口请求次数是否失效
if(res.repCode == '6201') { if (res.repCode == '6201') {
this.backImgBase = null this.backImgBase = null
this.blockBackImgBase = null this.blockBackImgBase = null
} }
@ -329,23 +345,23 @@
} }
} }
}, },
mounted() { mounted() {},
},
} }
</script> </script>
<style scoped> <style scoped>
.verifybox{ .verifybox {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border-radius: 2px; border-radius: 2px;
border: 1px solid #e4e7eb; border: 1px solid #e4e7eb;
background-color: #fff; background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0, 0, 0, .3);
left: 50%; left: 50%;
top:50%; top: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
.verifybox-top{
.verifybox-top {
padding: 0 15px; padding: 0 15px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
@ -355,11 +371,13 @@
border-bottom: 1px solid #e4e7eb; border-bottom: 1px solid #e4e7eb;
box-sizing: border-box; box-sizing: border-box;
} }
.verifybox-bottom{
.verifybox-bottom {
/* padding: 15px; */ /* padding: 15px; */
box-sizing: border-box; box-sizing: border-box;
} }
.verifybox-close{
.verifybox-close {
position: absolute; position: absolute;
top: 13px; top: 13px;
right: 9px; right: 9px;
@ -368,44 +386,51 @@
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.mask{
.mask {
position: fixed; position: fixed;
top: 0; top: 0;
left:0; left: 0;
z-index: 1001; z-index: 1001;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background: rgba(0,0,0,.3); background: rgba(0, 0, 0, .3);
/* display: none; */ /* display: none; */
transition: all .5s; transition: all .5s;
} }
.verify-tips{
.verify-tips {
position: absolute; position: absolute;
left: 0px; left: 0px;
bottom:0px; bottom: 0px;
width: 100%; width: 100%;
height: 30px; height: 30px;
background-color:rgb(231, 27, 27,.5); background-color: rgb(231, 27, 27, .5);
line-height:30px; line-height: 30px;
color: #fff; color: #fff;
} }
.suc-bg{
background-color:rgba(92, 184, 92,.5); .suc-bg {
background-color: rgba(92, 184, 92, .5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
} }
.err-bg{ .err-bg {
background-color:rgba(217, 83, 79,.5); background-color: rgba(217, 83, 79, .5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
} }
.tips-enter,.tips-leave-to{ .tips-enter,
.tips-leave-to {
bottom: -30px; bottom: -30px;
} }
.tips-enter-active,.tips-leave-active{
.tips-enter-active,
.tips-leave-active {
transition: bottom .5s; transition: bottom .5s;
} }
/* ---------------------------- */ /* ---------------------------- */
/*常规验证码*/ /*常规验证码*/
.verify-code { .verify-code {