huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-30 03:01:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: 格式化代码

Browse Source
This commit is contained in:
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

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

@ -11,38 +11,15 @@
<!-- 验证码容器 --> <!-- 验证码容器 -->
<!-- 滑动 --> <!-- 滑动 -->
<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"
: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>
@ -204,6 +181,7 @@
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;
@ -214,10 +192,12 @@
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;
@ -227,6 +207,7 @@
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.mask { .mask {
position: fixed; position: fixed;
top: 0; top: 0;
@ -238,6 +219,7 @@
/* display: none; */ /* display: none; */
transition: all .5s; transition: all .5s;
} }
.verify-tips { .verify-tips {
position: absolute; position: absolute;
left: 0px; left: 0px;
@ -248,12 +230,17 @@
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 {

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

@ -6,6 +6,9 @@ import CryptoJS from 'crypto-js'
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();
} }

39
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'}">
@ -276,6 +267,7 @@
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;
@ -286,10 +278,12 @@
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;
@ -299,6 +293,7 @@
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.mask { .mask {
position: fixed; position: fixed;
top: 0; top: 0;
@ -310,6 +305,7 @@
/* display: none; */ /* display: none; */
transition: all .5s; transition: all .5s;
} }
.verify-tips { .verify-tips {
position: absolute; position: absolute;
left: 0px; left: 0px;
@ -320,12 +316,17 @@
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 {

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

@ -1,12 +1,11 @@
<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>
@ -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,8 +43,12 @@
* 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: {
@ -182,8 +179,10 @@
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,8 +191,10 @@
} }
//拖动后小方块的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();
@ -210,10 +211,22 @@
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({
x: moveLeftDistance,
y: 5.0
}), this.secretKey) : JSON.stringify({
x: moveLeftDistance,
y: 5.0
}),
"token": this.backToken "token": this.backToken
} }
myRequest({ myRequest({
@ -236,10 +249,13 @@
this.refresh(); this.refresh();
}, 1500) }, 1500)
this.passFalg = true this.passFalg = true
this.tipWords = `${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功` this.tipWords =
`${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
setTimeout(() => { 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 {
@ -329,8 +345,7 @@
} }
} }
}, },
mounted() { mounted() {},
},
} }
</script> </script>
<style scoped> <style scoped>
@ -345,6 +360,7 @@
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;
@ -355,10 +371,12 @@
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;
@ -368,6 +386,7 @@
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.mask { .mask {
position: fixed; position: fixed;
top: 0; top: 0;
@ -379,6 +398,7 @@
/* display: none; */ /* display: none; */
transition: all .5s; transition: all .5s;
} }
.verify-tips { .verify-tips {
position: absolute; position: absolute;
left: 0px; left: 0px;
@ -389,6 +409,7 @@
line-height: 30px; line-height: 30px;
color: #fff; color: #fff;
} }
.suc-bg { .suc-bg {
background-color: rgba(92, 184, 92, .5); 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);
@ -400,12 +421,16 @@
} }
.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 {