mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-23 05:40:20 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

♻️ 使用 eslint 格式化

Browse Source
This commit is contained in:
lbw 2023-02-14 11:29:29 +08:00
parent 54525fd29d
commit 883026ce28
3 changed files with 312 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Upload/Excel.vue
View File

@ -38,7 +38,7 @@
</template>
<script setup lang="ts" name="upload-excel">
import { Local } from "@/utils/storage";
import { Local } from "/@/utils/storage";
import { useMessage } from "/@/hooks/message";
import other from '/@/utils/other'
import { Session } from '/@/utils/storage';

483
src/components/verifition/Verify/VerifyPoints.vue
View File

@ -1,261 +1,262 @@
<template>
<div style="position: relative">
<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-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">
<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 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 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
/**
* 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'
}
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)
}
},
barSize: {
type: Object,
default() {
return {
width: '310px',
height: '40px'
}
}
}
},
setup(props,context){
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
}
proxy.$parent.$emit('success', { captchaVerification })
} else {
proxy.$parent.$emit('error', proxy)
barAreaColor.value = '#d9534f'
barAreaBorderColor.value = '#d9534f'
text.value = '验证失败'
setTimeout(() => {
refresh();
}, 700);
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;
}
})
}, 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
}
},
}
//坐标转换函数
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>

139
src/components/verifition/Verify/VerifySlide.vue
View File

@ -1,41 +1,40 @@
<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">
<img :src="'data:image/png;base64,' + backImgBase" alt="" style="width:100%;height:100%;display:block">
<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">
<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>
<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">
<div :style="{width: setSize.imgWidth,
height: barSize.height,
'line-height':barSize.height}" class="verify-bar-area">
<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">
<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 :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>
@ -47,10 +46,10 @@
* 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 {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';
export default {
name: 'VerifySlide',
props: {
@ -102,41 +101,41 @@ export default {
}
}
},
setup(props) {
const { mode, captchaType, type, blockSize, explain } = toRefs(props)
setup(props, context) {
const {mode, captchaType, vSpace, imgSize, barSize, type, blockSize, explain} = 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)
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')
@ -146,7 +145,7 @@ export default {
text.value = explain.value
getPictrue();
nextTick(() => {
let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
let {imgHeight, imgWidth, barHeight, barWidth} = resetSize(proxy)
setSize.imgHeight = imgHeight
setSize.imgWidth = imgWidth
setSize.barHeight = barHeight
@ -200,9 +199,9 @@ export default {
function start(e) {
e = e || window.event
if (!e.touches) { //兼容PC端
x = e.clientX;
var x = e.clientX;
} else { //兼容移动端
x = e.touches[0].pageX;
var x = e.touches[0].pageX;
}
startLeft.value = Math.floor(x - barArea.value.getBoundingClientRect().left);
startMoveTime.value = +new Date(); //开始滑动的时间
@ -252,7 +251,7 @@ export default {
"pointJson": secretKey.value ? aesEncrypt(JSON.stringify({
x: moveLeftDistance,
y: 5.0
}), secretKey.value) : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
}), secretKey.value) : JSON.stringify({x: moveLeftDistance, y: 5.0}),
"token": backToken.value
}
reqCheck(data).then(response => {
@ -275,11 +274,11 @@ export default {
var captchaVerification = secretKey.value ? aesEncrypt(backToken.value + '---' + JSON.stringify({
x: moveLeftDistance,
y: 5.0
}), secretKey.value) : backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 })
}), secretKey.value) : backToken.value + '---' + JSON.stringify({x: moveLeftDistance, y: 5.0})
setTimeout(() => {
tipWords.value = ""
proxy.$parent.$parent.closeBox();
proxy.$parent.$parent.$emit('success', { captchaVerification })
proxy.$parent.$parent.$emit('success', {captchaVerification})
}, 1000)
} else {
moveBlockBackgroundColor.value = '#d9534f'