perf: verify
parent
c05c3281db
commit
d29c71414e
|
@ -1,3 +0,0 @@
|
||||||
export { default as VerifyPoints } from './VerifyPoints.vue';
|
|
||||||
|
|
||||||
export { default as VerifySlide } from './VerifySlide.vue';
|
|
|
@ -3,11 +3,11 @@
|
||||||
* Verify 验证码组件
|
* Verify 验证码组件
|
||||||
* @description 分发验证码使用
|
* @description 分发验证码使用
|
||||||
*/
|
*/
|
||||||
import type { VerificationProps } from './types';
|
import type { VerificationProps } from './typing';
|
||||||
|
|
||||||
import { defineAsyncComponent, markRaw, ref, toRefs, watchEffect } from 'vue';
|
import { defineAsyncComponent, markRaw, ref, toRefs, watchEffect } from 'vue';
|
||||||
|
|
||||||
import './style/verify.css';
|
import './verify.css';
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'Verification',
|
name: 'Verification',
|
||||||
|
@ -36,12 +36,8 @@ const props = withDefaults(defineProps<VerificationProps>(), {
|
||||||
|
|
||||||
const emit = defineEmits(['onSuccess', 'onError', 'onClose', 'onReady']);
|
const emit = defineEmits(['onSuccess', 'onError', 'onClose', 'onReady']);
|
||||||
|
|
||||||
const VerifyPoints = defineAsyncComponent(
|
const VerifyPoints = defineAsyncComponent(() => import('./verify-points.vue'));
|
||||||
() => import('./Verify/VerifyPoints.vue'),
|
const VerifySlide = defineAsyncComponent(() => import('./verify-slide.vue'));
|
||||||
);
|
|
||||||
const VerifySlide = defineAsyncComponent(
|
|
||||||
() => import('./Verify/VerifySlide.vue'),
|
|
||||||
);
|
|
||||||
|
|
||||||
const { captchaType, mode, checkCaptchaApi, getCaptchaApi } = toRefs(props);
|
const { captchaType, mode, checkCaptchaApi, getCaptchaApi } = toRefs(props);
|
||||||
const verifyType = ref();
|
const verifyType = ref();
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { ComponentInternalInstance } from 'vue';
|
import type { ComponentInternalInstance } from 'vue';
|
||||||
|
|
||||||
import type { VerificationProps } from '../types';
|
import type { VerificationProps } from './typing';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
getCurrentInstance,
|
getCurrentInstance,
|
||||||
|
@ -14,51 +14,14 @@ import {
|
||||||
|
|
||||||
import { $t } from '@vben/locales';
|
import { $t } from '@vben/locales';
|
||||||
|
|
||||||
import { aesEncrypt } from '../utils/ase';
|
import { aesEncrypt } from './utils/ase';
|
||||||
import { resetSize } from '../utils/util';
|
import { resetSize } from './utils/util';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* VerifyPoints
|
* VerifyPoints
|
||||||
* @description 点选
|
* @description 点选
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// const props = defineProps({
|
|
||||||
// barSize: {
|
|
||||||
// default() {
|
|
||||||
// return {
|
|
||||||
// height: '40px',
|
|
||||||
// width: '310px',
|
|
||||||
// };
|
|
||||||
// },
|
|
||||||
// type: Object,
|
|
||||||
// },
|
|
||||||
// captchaType: {
|
|
||||||
// default() {
|
|
||||||
// return 'VerifyPoints';
|
|
||||||
// },
|
|
||||||
// type: String,
|
|
||||||
// },
|
|
||||||
// imgSize: {
|
|
||||||
// default() {
|
|
||||||
// return {
|
|
||||||
// height: '155px',
|
|
||||||
// width: '310px',
|
|
||||||
// };
|
|
||||||
// },
|
|
||||||
// type: Object,
|
|
||||||
// },
|
|
||||||
// // 弹出式pop,固定fixed
|
|
||||||
// mode: {
|
|
||||||
// default: 'fixed',
|
|
||||||
// type: String,
|
|
||||||
// },
|
|
||||||
// // 间隔
|
|
||||||
// vSpace: {
|
|
||||||
// default: 5,
|
|
||||||
// type: Number,
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'VerifyPoints',
|
name: 'VerifyPoints',
|
||||||
});
|
});
|
||||||
|
@ -104,8 +67,8 @@ const bindingClick = ref(true);
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
// 加载页面
|
// 加载页面
|
||||||
fontPos.splice(0, fontPos.length);
|
fontPos.splice(0);
|
||||||
checkPosArr.splice(0, checkPosArr.length);
|
checkPosArr.splice(0);
|
||||||
num.value = 1;
|
num.value = 1;
|
||||||
getPictrue();
|
getPictrue();
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
|
@ -150,12 +113,12 @@ const pointTransfrom = function (pointArr: any, imgSize: any) {
|
||||||
};
|
};
|
||||||
|
|
||||||
const refresh = async function () {
|
const refresh = async function () {
|
||||||
tempPoints.splice(0, tempPoints.length);
|
tempPoints.splice(0);
|
||||||
barAreaColor.value = '#000';
|
barAreaColor.value = '#000';
|
||||||
barAreaBorderColor.value = '#ddd';
|
barAreaBorderColor.value = '#ddd';
|
||||||
bindingClick.value = true;
|
bindingClick.value = true;
|
||||||
fontPos.splice(0, fontPos.length);
|
fontPos.splice(0);
|
||||||
checkPosArr.splice(0, checkPosArr.length);
|
checkPosArr.splice(0);
|
||||||
num.value = 1;
|
num.value = 1;
|
||||||
await getPictrue();
|
await getPictrue();
|
||||||
showRefresh.value = true;
|
showRefresh.value = true;
|
||||||
|
@ -191,7 +154,7 @@ function canvasClick(e: any) {
|
||||||
if (res.repCode === '0000') {
|
if (res.repCode === '0000') {
|
||||||
barAreaColor.value = '#4cae4c';
|
barAreaColor.value = '#4cae4c';
|
||||||
barAreaBorderColor.value = '#5cb85c';
|
barAreaBorderColor.value = '#5cb85c';
|
||||||
text.value = $t('ui.captcha.success');
|
text.value = $t('ui.captcha.sliderSuccessText');
|
||||||
bindingClick.value = false;
|
bindingClick.value = false;
|
||||||
if (mode.value === 'pop') {
|
if (mode.value === 'pop') {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
@ -228,7 +191,7 @@ async function getPictrue() {
|
||||||
backToken.value = res.data.repData.token;
|
backToken.value = res.data.repData.token;
|
||||||
secretKey.value = res.data.repData.secretKey;
|
secretKey.value = res.data.repData.secretKey;
|
||||||
poinTextList.value = res.data.repData.wordList;
|
poinTextList.value = res.data.repData.wordList;
|
||||||
text.value = `${$t('ui.captcha.point')}【${poinTextList.value.join(',')}】`;
|
text.value = `${$t('ui.captcha.clickInOrder')}【${poinTextList.value.join(',')}】`;
|
||||||
} else {
|
} else {
|
||||||
text.value = res?.data?.repMsg;
|
text.value = res?.data?.repMsg;
|
||||||
}
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { VerificationProps } from '../types';
|
import type { VerificationProps } from './typing';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* VerifySlide
|
* VerifySlide
|
||||||
|
@ -17,8 +17,8 @@ import {
|
||||||
|
|
||||||
import { $t } from '@vben/locales';
|
import { $t } from '@vben/locales';
|
||||||
|
|
||||||
import { aesEncrypt } from './../utils/ase';
|
import { aesEncrypt } from './utils/ase';
|
||||||
import { resetSize } from './../utils/util';
|
import { resetSize } from './utils/util';
|
||||||
|
|
||||||
const props = withDefaults(defineProps<VerificationProps>(), {
|
const props = withDefaults(defineProps<VerificationProps>(), {
|
||||||
barSize: () => ({
|
barSize: () => ({
|
Loading…
Reference in New Issue