RISE/school-developer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
吴红兵
2025-12-02 10:37:49 +08:00
commit 1f645dad3e
1183 changed files with 147673 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

524
src/components/Verifition/Verify.vue Normal file
View File

@@ -0,0 +1,524 @@
<template>
<div v-show="showBox" :class="mode == 'pop' ? 'mask' : ''" @click="handleMaskClick">
<div :class="mode == 'pop' ? 'verifybox' : ''" :style="{ 'max-width': parseInt(imgSize.width) + 30 + 'px' }" @click.stop>
<div v-if="mode == 'pop'" class="verifybox-top">
{{ t('verify.complete') }}
<span class="verifybox-close" @click="closeBox">
<i class="iconfont icon-close"></i>
</span>
</div>
<div :style="{ padding: mode == 'pop' ? '15px' : '0' }" class="verifybox-bottom">
<!-- 验证码容器 -->
<component
:is="componentType"
v-if="componentType"
ref="instance"
:arith="arith"
:barSize="barSize"
:blockSize="blockSize"
:captchaType="captchaType"
:explain="explain"
:figure="figure"
:imgSize="imgSize"
:mode="mode"
:type="verifyType"
:vSpace="vSpace"
></component>
</div>
</div>
</div>
</template>
<script>
/**
* Verify 验证码组件
* @description 分发验证码使用
* */
import { computed, ref, toRefs, watchEffect, defineAsyncComponent } from 'vue';
import { useI18n } from 'vue-i18n';
const VerifySlide = defineAsyncComponent(() => import('/@/components/Verifition/Verify/VerifySlide.vue'));
const VerifyPoints = defineAsyncComponent(() => import('/@/components/Verifition/Verify/VerifyPoints.vue'));
export default {
name: 'Vue2Verify',
components: {
VerifySlide,
VerifyPoints,
},
props: {
captchaType: {
type: String,
required: true,
},
figure: {
type: Number,
},
arith: {
type: Number,
},
mode: {
type: String,
default: 'pop',
},
vSpace: {
type: Number,
},
explain: {
type: String,
},
imgSize: {
type: Object,
default() {
return {
width: '310px',
height: '155px',
};
},
},
blockSize: {
type: Object,
},
barSize: {
type: Object,
},
},
setup(props) {
const { t } = useI18n();
const { captchaType, mode } = toRefs(props);
const clickShow = ref(false);
const verifyType = ref(undefined);
const componentType = ref(undefined);
const instance = ref({});
const showBox = computed(() => {
if (mode.value == 'pop') {
return clickShow.value;
} else {
return true;
}
});
/**
* refresh
* @description 刷新
* */
const refresh = () => {
if (instance.value.refresh) {
instance.value.refresh();
}
};
const closeBox = () => {
clickShow.value = false;
refresh();
};
const show = () => {
if (mode.value == 'pop') {
clickShow.value = true;
}
};
watchEffect(() => {
switch (captchaType.value) {
case 'blockPuzzle':
verifyType.value = '2';
componentType.value = 'VerifySlide';
break;
case 'clickWord':
verifyType.value = '';
componentType.value = 'VerifyPoints';
break;
}
});
const handleMaskClick = (e) => {
if (e.target.classList.contains('mask')) {
closeBox();
}
};
return {
t,
clickShow,
verifyType,
componentType,
instance,
showBox,
closeBox,
show,
handleMaskClick,
};
},
};
</script>
<style>
.verifybox {
position: fixed;
box-sizing: border-box;
border-radius: 2px;
border: 1px solid #e4e7eb;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: auto;
height: 280px;
overflow: hidden;
min-width: 320px;
z-index: 1002;
}
.verifybox-top {
padding: 0 15px;
height: 50px;
line-height: 50px;
text-align: left;
font-size: 16px;
color: #45494c;
border-bottom: 1px solid #e4e7eb;
box-sizing: border-box;
}
.verifybox-bottom {
padding: 15px;
box-sizing: border-box;
height: calc(100% - 50px);
overflow: hidden;
}
.verifybox-close {
position: absolute;
top: 13px;
right: 9px;
width: 24px;
height: 24px;
text-align: center;
cursor: pointer;
}
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 1001;
width: 100%;
height: 100vh;
background: transparent;
pointer-events: auto;
}
.verify-tips {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 30px;
line-height: 30px;
color: #fff;
}
.suc-bg {
background-color: rgba(92, 184, 92, 0.5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
}
.err-bg {
background-color: rgba(217, 83, 79, 0.5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
}
/* ---------------------------- */
/*常规验证码*/
.verify-code {
font-size: 20px;
text-align: center;
cursor: pointer;
margin-bottom: 5px;
border: 1px solid #ddd;
}
.cerify-code-panel {
height: 100%;
overflow: hidden;
}
.verify-code-area {
float: left;
}
.verify-input-area {
float: left;
width: 60%;
padding-right: 10px;
}
.verify-change-area {
line-height: 30px;
float: left;
}
.varify-input-code {
display: inline-block;
width: 100%;
height: 25px;
}
.verify-change-code {
color: #337ab7;
cursor: pointer;
}
.verify-btn {
width: 200px;
height: 30px;
background-color: #337ab7;
color: #ffffff;
border: none;
margin-top: 10px;
}
/*滑动验证码*/
.verify-bar-area {
position: relative;
background: #ffffff;
text-align: center;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
}
.verify-bar-area .verify-move-block {
position: absolute;
top: 0px;
left: 0;
background: #fff;
cursor: pointer;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
box-shadow: 0 0 2px #888888;
-webkit-border-radius: 1px;
transition: none;
}
.verify-bar-area .verify-move-block:hover {
background-color: #337ab7;
color: #ffffff;
}
.verify-bar-area .verify-left-bar {
position: absolute;
top: -1px;
left: -1px;
background: #f0fff0;
cursor: pointer;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #ddd;
transition: none;
}
.verify-img-panel {
margin: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-radius: 3px;
position: relative;
}
.verify-img-panel .verify-refresh {
width: 25px;
height: 25px;
text-align: center;
padding: 5px;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
.verify-img-panel .icon-refresh {
font-size: 20px;
color: #fff;
}
.verify-img-panel .verify-gap {
background-color: #fff;
position: relative;
z-index: 2;
border: 1px solid #fff;
}
.verify-bar-area .verify-move-block .verify-sub-block {
position: absolute;
text-align: center;
z-index: 3;
/* border: 1px solid #fff; */
}
.verify-bar-area .verify-move-block .verify-icon {
font-size: 18px;
}
.verify-bar-area .verify-msg {
z-index: 3;
}
.iconfont {
font-family: 'iconfont' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-check:before {
content: ' ';
display: block;
width: 16px;
height: 16px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
background-size: contain;
}
.icon-close:before {
content: ' ';
display: block;
width: 16px;
height: 16px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
background-size: contain;
}
.icon-right:before {
content: ' ';
display: block;
width: 16px;
height: 16px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-size: cover;
z-index: 9999;
background-size: contain;
}
.icon-refresh:before {
content: ' ';
display: block;
width: 16px;
height: 16px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
background-size: contain;
}
/* 在 <style> 标签内添加暗黑模式样式 */
html.dark {
.verifybox {
background-color: var(--el-bg-color);
border: none;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.verifybox-top {
color: var(--el-text-color-primary);
border-bottom: 1px solid var(--el-border-color-darker);
background-color: var(--el-bg-color-darker);
}
.verify-bar-area {
background: var(--el-bg-color-darker);
border: none;
}
.verify-bar-area .verify-move-block {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}
.verify-bar-area .verify-left-bar {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
border: none;
opacity: 1;
}
.verify-img-panel {
border: none;
background-color: var(--el-bg-color-darker);
}
.verify-img-panel .verify-gap {
background-color: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}
/* 暗黑模式下的图标颜色 */
.icon-refresh:before,
.icon-right:before,
.icon-close:before,
.verify-bar-area .verify-move-block:after {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ffffff" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>');
opacity: 0.8;
}
.mask {
background: transparent;
}
}
/* 修改图标样式 */
.icon-refresh:before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23666" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>');
}
.icon-right:before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23666" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>');
}
.icon-close:before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23666" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
}
.verify-bar-area .verify-move-block {
display: flex;
align-items: center;
justify-content: center;
}
.verify-bar-area .verify-move-block:after {
content: '';
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23666" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>');
background-size: contain;
background-repeat: no-repeat;
}
</style>

274
src/components/Verifition/Verify/VerifyPoints.vue Normal file
View File

@@ -0,0 +1,274 @@
<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 } from '../utils/util';
import { aesEncrypt } from '../utils/ase';
import { reqGet, reqCheck } from '../api/index';
import { onMounted, reactive, ref, nextTick, toRefs, getCurrentInstance } from 'vue';
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',
};
},
},
},
setup(props) {
const { mode, captchaType } = toRefs(props);
const { proxy } = getCurrentInstance();
let secretKey = ref(''), //后端返回的ase加密秘钥
checkNum = ref(3), //默认需要点击的字数
fontPos = reactive([]), //选中的坐标信息
checkPosArr = reactive([]), //用户点击的坐标
num = ref(1), //点击的记数
pointBackImgBase = ref(''), //后端获取到的背景图片
poinTextList = reactive([]), //后端返回的点击字体顺序
backToken = ref(''), //后端返回的token值
setSize = reactive({
imgHeight: 0,
imgWidth: 0,
barHeight: 0,
barWidth: 0,
}),
tempPoints = reactive([]),
text = ref(''),
barAreaColor = ref(undefined),
barAreaBorderColor = ref(undefined),
showRefresh = ref(true),
bindingClick = ref(true);
const init = () => {
//加载页面
fontPos.splice(0, fontPos.length);
checkPosArr.splice(0, checkPosArr.length);
num.value = 1;
getPictrue();
nextTick(() => {
let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy);
setSize.imgHeight = imgHeight;
setSize.imgWidth = imgWidth;
setSize.barHeight = barHeight;
setSize.barWidth = barWidth;
proxy.$parent.$emit('ready', proxy);
});
};
onMounted(() => {
// 禁止拖拽
init();
proxy.$el.onselectstart = function () {
return false;
};
});
const canvas = ref(null);
const canvasClick = (e) => {
checkPosArr.push(getMousePos(canvas, e));
if (num.value == checkNum.value) {
num.value = createPoint(getMousePos(canvas, e));
//按比例转换坐标值
let arr = pointTransfrom(checkPosArr, setSize);
checkPosArr.length = 0;
checkPosArr.push(...arr);
//等创建坐标执行完
setTimeout(() => {
// var flag = this.comparePos(this.fontPos, this.checkPosArr);
//发送后端请求
var captchaVerification = secretKey.value
? aesEncrypt(backToken.value + '---' + JSON.stringify(checkPosArr), secretKey.value)
: backToken.value + '---' + JSON.stringify(checkPosArr);
let data = {
captchaType: captchaType.value,
pointJson: secretKey.value ? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value) : JSON.stringify(checkPosArr),
token: backToken.value,
};
reqCheck(data).then((response) => {
let res = response.data;
if (res.repCode == '0000') {
barAreaColor.value = '#4cae4c';
barAreaBorderColor.value = '#5cb85c';
text.value = '验证成功';
bindingClick.value = false;
if (mode.value == 'pop') {
setTimeout(() => {
proxy.$parent.clickShow = false;
refresh();
}, 1500);
}
proxy.$parent.$emit('success', { captchaVerification });
} else {
proxy.$parent.$emit('error', proxy);
barAreaColor.value = '#d9534f';
barAreaBorderColor.value = '#d9534f';
text.value = '验证失败';
setTimeout(() => {
refresh();
}, 700);
}
});
}, 400);
}
if (num.value < checkNum.value) {
num.value = createPoint(getMousePos(canvas, e));
}
};
//获取坐标
const getMousePos = function (obj, e) {
var x = e.offsetX;
var y = e.offsetY;
return { x, y };
};
//创建坐标点
const createPoint = function (pos) {
tempPoints.push(Object.assign({}, pos));
return num.value + 1;
};
const refresh = function () {
tempPoints.splice(0, tempPoints.length);
barAreaColor.value = '#000';
barAreaBorderColor.value = '#ddd';
bindingClick.value = true;
fontPos.splice(0, fontPos.length);
checkPosArr.splice(0, checkPosArr.length);
num.value = 1;
getPictrue();
text.value = '验证失败';
showRefresh.value = true;
};
// 请求背景图片和验证图片
function getPictrue() {
let data = {
captchaType: captchaType.value,
};
reqGet(data).then((response) => {
let res = response.data;
if (res.repCode == '0000') {
pointBackImgBase.value = res.repData.originalImageBase64;
backToken.value = res.repData.token;
secretKey.value = res.repData.secretKey;
poinTextList.value = res.repData.wordList;
text.value = '请依次点击【' + poinTextList.value.join(',') + '】';
} else {
text.value = res.repMsg;
}
});
}
//坐标转换函数
const pointTransfrom = function (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 };
});
return newPointArr;
};
return {
secretKey,
checkNum,
fontPos,
checkPosArr,
num,
pointBackImgBase,
poinTextList,
backToken,
setSize,
tempPoints,
text,
barAreaColor,
barAreaBorderColor,
showRefresh,
bindingClick,
init,
canvas,
canvasClick,
getMousePos,
createPoint,
refresh,
getPictrue,
pointTransfrom,
};
},
};
</script>

516
src/components/Verifition/Verify/VerifySlide.vue Normal file
View File

@@ -0,0 +1,516 @@
<template>
<div style="position: relative">
<div v-if="type === '2'" :style="{ height: parseInt(setSize.imgHeight) + vSpace + 'px' }" class="verify-img-out">
<div :style="{ width: setSize.imgWidth, height: setSize.imgHeight }" class="verify-img-panel modern-shadow">
<img :src="'data:image/png;base64,' + backImgBase" alt="" style="width: 100%; height: 100%; display: block" />
<div v-show="showRefresh" class="verify-refresh" @click="refresh"><i class="iconfont icon-refresh"></i></div>
<transition name="tips">
<span v-if="tipWords" :class="passFlag ? 'suc-bg' : 'err-bg'" class="verify-tips">{{ tipWords }}</span>
</transition>
</div>
</div>
<!-- 公共部分 -->
<div :style="{ width: setSize.imgWidth, height: barSize.height, 'line-height': barSize.height }" class="verify-bar-area modern-bar">
<span class="verify-msg" v-text="text"></span>
<div
:style="{
width: leftBarWidth !== undefined ? leftBarWidth : barSize.height,
height: barSize.height,
'border-color': leftBarBorderColor,
transaction: transitionWidth,
}"
class="verify-left-bar"
>
<span class="verify-msg" v-text="finishText"></span>
<div
:style="{
width: barSize.height,
height: barSize.height,
'background-color': moveBlockBackgroundColor,
left: moveBlockLeft,
transition: transitionLeft,
}"
class="verify-move-block"
@mousedown="start"
@touchstart="start"
>
<i :class="['verify-icon iconfont', iconClass]" :style="{ color: iconColor }"></i>
<div
v-if="type === '2'"
: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,
}"
class="verify-sub-block"
>
<img
:src="'data:image/png;base64,' + blockBackImgBase"
alt=""
style="width: 100%; height: 100%; display: block; -webkit-user-drag: none"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/babel">
/**
* VerifySlide
* @description 滑块
* */
import { aesEncrypt } from '../utils/ase';
import { resetSize } from '../utils/util';
import { reqCheck, reqGet } from '../api/index';
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue';
import { useI18n } from 'vue-i18n';
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: '向右滑动完成验证',
/** @deprecated 使用 i18n 国际化替代 */
},
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',
};
},
},
},
setup(props) {
const { t } = useI18n();
const { mode, captchaType, type, blockSize } = toRefs(props);
const { proxy } = getCurrentInstance();
let secretKey = ref(''), //后端返回的ase加密秘钥
passFlag = ref(''), //是否通过的标识
backImgBase = ref(''), //验证码背景图片
blockBackImgBase = ref(''), //验证滑块的背景图片
backToken = ref(''), //后端返回的唯一token值
startMoveTime = ref(''), //移动开始的时间
endMovetime = ref(''), //移动结束的时间
tipsBackColor = ref(''), //提示词的背景颜色
tipWords = ref(''),
text = ref(''),
finishText = ref(''),
setSize = reactive({
imgHeight: 0,
imgWidth: 0,
barHeight: 0,
barWidth: 0,
}),
top = ref(0),
left = ref(0),
moveBlockLeft = ref(undefined),
leftBarWidth = ref(undefined),
// 移动中样式
moveBlockBackgroundColor = ref(undefined),
leftBarBorderColor = ref('#ddd'),
iconColor = ref(undefined),
iconClass = ref('icon-right'),
status = ref(false), //鼠标状态
isEnd = ref(false), //是够验证完成
showRefresh = ref(true),
transitionLeft = ref(''),
transitionWidth = ref(''),
startLeft = ref(0);
const barArea = computed(() => {
return proxy.$el.querySelector('.verify-bar-area');
});
function init() {
text.value = t('verify.slide.explain');
getPictrue();
nextTick(() => {
let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy);
setSize.imgHeight = imgHeight;
setSize.imgWidth = imgWidth;
setSize.barHeight = barHeight;
setSize.barWidth = barWidth;
proxy.$parent.$emit('ready', proxy);
});
window.removeEventListener('touchmove', function (e) {
move(e);
});
window.removeEventListener('mousemove', function (e) {
move(e);
});
//鼠标松开
window.removeEventListener('touchend', function () {
end();
});
window.removeEventListener('mouseup', function () {
end();
});
window.addEventListener('touchmove', function (e) {
move(e);
});
window.addEventListener('mousemove', function (e) {
move(e);
});
//鼠标松开
window.addEventListener('touchend', function () {
end();
});
window.addEventListener('mouseup', function () {
end();
});
}
watch(type, () => {
init();
});
onMounted(() => {
// 禁止拖拽
init();
proxy.$el.onselectstart = function () {
return false;
};
});
//鼠标按下
function start(e) {
e = e || window.event;
let x = null;
if (!e.touches) {
//兼容PC端
x = e.clientX;
} else {
//兼容移动端
x = e.touches[0].pageX;
}
startLeft.value = Math.floor(x - barArea.value.getBoundingClientRect().left);
startMoveTime.value = +new Date(); //开始滑动的时间
if (isEnd.value == false) {
text.value = '';
moveBlockBackgroundColor.value = '#337ab7';
leftBarBorderColor.value = '#337AB7';
iconColor.value = '#fff';
e.stopPropagation();
status.value = true;
}
}
//鼠标移动
function move(e) {
e = e || window.event;
if (status.value && isEnd.value == false) {
let x = null;
if (!e.touches) {
//兼容PC端
x = e.clientX;
} else {
//兼容移动端
x = e.touches[0].pageX;
}
var bar_area_left = barArea.value.getBoundingClientRect().left;
var move_block_left = x - bar_area_left; //小方块相对于父元素的left值
if (move_block_left >= barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2) {
move_block_left = barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2;
}
if (move_block_left <= 0) {
move_block_left = parseInt(parseInt(blockSize.value.width) / 2);
}
//拖动后小方块的left值
moveBlockLeft.value = move_block_left - startLeft.value + 'px';
leftBarWidth.value = move_block_left - startLeft.value + 'px';
}
}
//鼠标松开
function end() {
endMovetime.value = +new Date();
//判断是否重合
if (status.value && isEnd.value == false) {
var moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', ''));
moveLeftDistance = (moveLeftDistance * 310) / parseInt(setSize.imgWidth);
let data = {
captchaType: captchaType.value,
pointJson: secretKey.value
? aesEncrypt(
JSON.stringify({
x: moveLeftDistance,
y: 5.0,
}),
secretKey.value
// eslint-disable-next-line no-mixed-spaces-and-tabs
)
: JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
token: backToken.value,
};
reqCheck(data).then((response) => {
let res = response.data;
if (res.repCode == '0000') {
moveBlockBackgroundColor.value = '#5cb85c';
leftBarBorderColor.value = '#5cb85c';
iconColor.value = '#fff';
iconClass.value = 'icon-check';
showRefresh.value = false;
isEnd.value = true;
if (mode.value == 'pop') {
setTimeout(() => {
proxy.$parent.clickShow = false;
refresh();
}, 1500);
}
passFlag.value = true;
const time = ((endMovetime.value - startMoveTime.value) / 1000).toFixed(2);
tipWords.value = t('verify.slide.time', { time });
var captchaVerification = secretKey.value
? aesEncrypt(
backToken.value +
'---' +
JSON.stringify({
x: moveLeftDistance,
y: 5.0,
}),
secretKey.value
// eslint-disable-next-line no-mixed-spaces-and-tabs
)
: backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 });
setTimeout(() => {
tipWords.value = '';
proxy.$parent.$parent.closeBox();
proxy.$parent.$parent.$emit('success', { captchaVerification });
}, 1000);
} else {
moveBlockBackgroundColor.value = '#d9534f';
leftBarBorderColor.value = '#d9534f';
iconColor.value = '#fff';
iconClass.value = 'icon-close';
passFlag.value = false;
setTimeout(function () {
refresh();
}, 1000);
proxy.$parent.$emit('error', proxy);
tipWords.value = t('verify.slide.fail');
setTimeout(() => {
tipWords.value = '';
}, 1000);
}
});
status.value = false;
}
}
const refresh = () => {
showRefresh.value = true;
finishText.value = '';
transitionLeft.value = 'left .3s';
moveBlockLeft.value = 0;
leftBarWidth.value = undefined;
transitionWidth.value = 'width .3s';
leftBarBorderColor.value = '#ddd';
moveBlockBackgroundColor.value = '#fff';
iconColor.value = '#000';
iconClass.value = 'icon-right';
isEnd.value = false;
getPictrue();
setTimeout(() => {
transitionWidth.value = '';
transitionLeft.value = '';
text.value = t('verify.slide.explain');
}, 300);
};
// 请求背景图片和验证图片
function getPictrue() {
let data = {
captchaType: captchaType.value,
};
reqGet(data).then((response) => {
let res = response.data;
if (res.repCode == '0000') {
backImgBase.value = res.repData.originalImageBase64;
blockBackImgBase.value = res.repData.jigsawImageBase64;
backToken.value = res.repData.token;
secretKey.value = res.repData.secretKey;
} else {
tipWords.value = res.repMsg;
}
});
}
return {
secretKey, //后端返回的ase加密秘钥
passFlag, //是否通过的标识
backImgBase, //验证码背景图片
blockBackImgBase, //验证滑块的背景图片
backToken, //后端返回的唯一token值
startMoveTime, //移动开始的时间
endMovetime, //移动结束的时间
tipsBackColor, //提示词的背景颜色
tipWords,
text,
finishText,
setSize,
top,
left,
moveBlockLeft,
leftBarWidth,
// 移动中样式
moveBlockBackgroundColor,
leftBarBorderColor,
iconColor,
iconClass,
status, //鼠标状态
isEnd, //是够验证完成
showRefresh,
transitionLeft,
transitionWidth,
barArea,
refresh,
start,
t,
};
},
};
</script>
<style>
/* 现代化阴影效果 */
.modern-shadow {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
border-radius: 8px;
overflow: hidden;
border: none;
}
/* 现代化滑动条样式 */
.modern-bar {
border-radius: 20px !important;
background: #f7f9fc !important;
border: 1px solid #edf2f7 !important;
}
.modern-bar:hover {
border-color: #e2e8f0 !important;
background: #f1f5f9 !important;
}
.verify-bar-area {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.verify-bar-area .verify-move-block {
border-radius: 50% !important;
background: linear-gradient(145deg, #ffffff, #f5f7fa) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}
.verify-bar-area .verify-move-block:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.verify-bar-area .verify-left-bar {
border-radius: 0 20px 20px 0 !important;
background: linear-gradient(90deg, #60a5fa20, #60a5fa40) !important;
border: none !important;
}
.verify-img-panel .verify-refresh {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(4px);
border-radius: 50%;
width: 32px !important;
height: 32px !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 8px;
}
.verify-img-panel .verify-refresh:hover {
background: rgba(255, 255, 255, 1);
}
.verify-tips {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 4px;
padding: 4px 12px;
font-size: 14px;
font-weight: 500;
}
.suc-bg {
background: rgba(34, 197, 94, 0.9) !important;
}
.err-bg {
background: rgba(239, 68, 68, 0.9) !important;
}
/* 暗黑模式适配 */
html.dark {
.modern-bar {
background: rgba(30, 41, 59, 0.5) !important;
border-color: rgba(51, 65, 85, 0.5) !important;
}
.verify-move-block {
background: linear-gradient(145deg, #1e293b, #0f172a) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.verify-left-bar {
background: linear-gradient(90deg, rgba(96, 165, 250, 0.1), rgba(96, 165, 250, 0.2)) !important;
}
.verify-refresh {
background: rgba(30, 41, 59, 0.9) !important;
}
}
</style>

23
src/components/Verifition/api/index.ts Normal file
View File

@@ -0,0 +1,23 @@
/**
* 此处可直接引用自己项目封装好的 axios 配合后端联调
*/
import request from '/@/utils/request';
//获取验证图片 以及token
export function reqGet(data: Object) {
return request({
url: '/auth/code/create',
method: 'get',
data,
});
}
//滑动或者点选验证
export function reqCheck(data: Object) {
return request({
url: '/auth/code/check',
method: 'post',
params: data,
});
}

11
src/components/Verifition/i18n/en.ts Normal file
View File

@@ -0,0 +1,11 @@
export default {
verify: {
complete: 'Please complete security verification',
slide: {
explain: 'Slide right to verify',
success: 'Verification successful',
fail: 'Verification failed',
time: 'Verified in {time}s'
}
}
};

11
src/components/Verifition/i18n/zh-cn.ts Normal file
View File

@@ -0,0 +1,11 @@
export default {
verify: {
complete: '请完成安全验证',
slide: {
explain: '向右滑动完成验证',
success: '验证成功',
fail: '验证失败',
time: '{time}s验证成功'
}
}
}

11
src/components/Verifition/utils/ase.js Normal file
View File

@@ -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();
}

97
src/components/Verifition/utils/util.js Normal file
View File

@@ -0,0 +1,97 @@
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(vm.imgSize.width) / 100) * parentWidth + 'px';
} else {
img_width = vm.imgSize.width;
}
if (vm.imgSize.height.indexOf('%') != -1) {
img_height = (parseInt(vm.imgSize.height) / 100) * parentHeight + 'px';
} else {
img_height = vm.imgSize.height;
}
if (vm.barSize.width.indexOf('%') != -1) {
bar_width = (parseInt(vm.barSize.width) / 100) * parentWidth + 'px';
} else {
bar_width = vm.barSize.width;
}
if (vm.barSize.height.indexOf('%') != -1) {
bar_height = (parseInt(vm.barSize.height) / 100) * parentHeight + 'px';
} else {
bar_height = vm.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'];