@pubinfo/module-captcha 2.1.1

package/src/components/VerifySlide/PubinfoFixedSlide.vue

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { CheckOutlined, CloseOutlined, RightOutlined } from '@ant-design/icons-vue';
+import { useElementSize } from '@vueuse/core';
+import { computed, defineEmits, getCurrentInstance, onMounted, ref } from 'vue';
+import { getPictrue, refresh } from './common/init.ts';
+import useMounseOpertae from './common/mouse.ts';
+import { variable } from './common/variable.ts';
+
+const emit = defineEmits(['success', 'menter', 'mleave']);
+
+const slideRef = ref();
+
+const { width: slideWidth } = useElementSize(slideRef);
+
+const VA = variable();
+const { start, move, end } = useMounseOpertae(VA);
+const { proxy } = getCurrentInstance()!;
+
+// 滑动小方块
+const barArea = computed(() => {
+  return proxy?.$el.querySelector('.verify-bar-area');
+});
+
+onMounted(() => {
+  getPictrue(VA);
+  VA.setSize.value.imgHeight = `${slideWidth.value / 2}px`;
+  VA.realImgSize.value = {
+    width: slideWidth.value,
+    height: slideWidth.value / 2,
+  };
+
+  window.removeEventListener('touchmove', (e) => {
+    move(e, { barArea: barArea.value });
+  });
+  window.removeEventListener('mousemove', (e) => {
+    move(e, { barArea: barArea.value });
+  });
+
+  // 鼠标松开
+  window.removeEventListener('touchend', () => {
+    end(emit);
+  });
+  window.removeEventListener('mouseup', () => {
+    end(emit);
+  });
+
+  window.addEventListener('touchmove', (e) => {
+    move(e, { barArea: barArea.value });
+  });
+  window.addEventListener('mousemove', (e) => {
+    move(e, { barArea: barArea.value });
+  });
+
+  // 鼠标松开
+  window.addEventListener('touchend', () => {
+    end(emit);
+  });
+  window.addEventListener('mouseup', () => {
+    end(emit);
+  });
+  // 禁止拖拽
+  proxy!.$el.onselectstart = function () {
+    // console.log('onselectstart');
+    return false;
+  };
+});
+
+function pushMouseEnter() {
+  emit('menter');
+}
+
+function pushMouseLeave() {
+  emit('mleave');
+}
+
+defineExpose({
+  refresh: () => {
+    refresh(VA);
+  },
+});
+</script>
+
+<template>
+  <div ref="slideRef" style="position: relative;">
+    <div
+      class="verify-img-out"
+      :style="{ height: `${parseInt(VA.setSize.value.imgHeight) + 10}px` }"
+    >
+      <div
+        class="verify-img-panel" :style="{ width: VA.setSize.value.width,
+                                           height: VA.setSize.value.imgHeight }"
+      >
+        <img v-if="VA.backImgBase.value" :src="`data:image/png;base64,${VA.backImgBase.value}`" alt="" style="display: block;width: 100%;height: 100%;">
+        <div v-show="VA.showRefresh.value" class="verify-refresh" @click="refresh(VA)">
+          <RedoOutlined :style="{ fontSize: '20px', color: 'white', transform: 'rotate(-90deg)' }" />
+        </div>
+        <transition name="tips">
+          <span v-if="VA.tipWords.value" class="verify-tips" :class="VA.passFlag.value ? 'suc-bg' : 'err-bg'">{{ VA.tipWords.value }}</span>
+        </transition>
+      </div>
+      <div
+        class="verify-sub-block"
+        :style="{ 'width': `${Math.floor(VA.realImgSize.value.width * 47 / 310)}px`,
+                  'height': VA.setSize.value.imgHeight,
+                  'background-size': `${VA.setSize.value.width} ${VA.setSize.value.imgHeight}`,
+                  'left': VA.moveBlockLeft.value,
+                  'transition': VA.transitionLeft.value,
+        }"
+      >
+        <img v-if="VA.blockBackImgBase.value" :src="`data:image/png;base64,${VA.blockBackImgBase.value}`" alt="" style="display: block;width: 100%;height: 100%;-webkit-user-drag: none;">
+      </div>
+    </div>
+    <div
+      class="verify-bar-area"
+      :style="{
+        'width': '100%',
+        'height': VA.setSize.value.barHeight,
+        'line-height': VA.setSize.value.barHeight,
+      }"
+      @mouseenter="pushMouseEnter"
+      @mouseleave="pushMouseLeave"
+    >
+      <span class="verify-msg" v-text="VA.text.value" />
+      <div
+        class="verify-left-bar"
+        :style="{ 'width': (VA.leftBarWidth.value !== undefined) ? VA.leftBarWidth.value : VA.setSize.value.barHeight, 'height': VA.setSize.value.barHeight, 'border-color': VA.leftBarBorderColor.value, 'background': VA.verifyLeftBarBackgroundColor.value }"
+      >
+        <div
+          class="verify-move-block"
+          :style="{ 'width': VA.setSize.value.barHeight, 'height': VA.setSize.value.barHeight, 'background-color': VA.moveBlockBackgroundColor.value, 'left': VA.moveBlockLeft.value, 'transition': VA.transitionLeft.value }"
+          @touchstart="start"
+          @mousedown="start"
+          @mouseenter="() => VA.iconColor.value = 'white'"
+          @mouseleave="() => VA.iconColor.value = 'rgba(0,0,0,0.88)'"
+        >
+          <RightOutlined v-if="VA.iconName.value === 'normal'" :style="{ fontSize: '18px', color: VA.iconColor.value }" />
+          <CheckOutlined v-if="VA.iconName.value === 'right'" :style="{ fontSize: '18px', color: 'white' }" />
+          <CloseOutlined v-if="VA.iconName.value === 'wrong'" :style="{ fontSize: '18px', color: 'white' }" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.verify-tips {
+  position: absolute;
+  bottom:0;
+  left:0;
+  right:0;
+  z-index:7;
+  height: 30px;
+  line-height:30px;
+  color: #fff;
+  padding-left:8px;
+  opacity: 1;
+}
+.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);
+}
+/* .tips-enter,
+.tips-leave-to {
+  opacity: 0;
+}
+.tips-enter-active,
+.tips-leave-active {
+  transition: opacity 0.5s;
+} */
+/* ---------------------------- */
+
+/*滑动验证码*/
+.verify-bar-area {
+  position: relative;
+  box-sizing: border-box;
+  text-align: center;
+  border: 1px solid #e4e7eb;
+  background-color: #f7f9fa;
+  border-radius: 2px;
+}
+
+.verify-bar-area .verify-move-block {
+  position: absolute;
+  top: -1px;
+  left: 0px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 0 3px rgba(0,0,0,.3);
+  transition: background .2s linear;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.verify-bar-area .verify-move-block:hover {
+  background-color: #1991fa;
+}
+
+.verify-bar-area .verify-move-block:hover .verify-icon {
+  color: #fff;
+}
+
+.verify-bar-area .verify-left-bar {
+  position: absolute;
+  top: -1px;
+  left: 0px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: pointer;
+  background-color: #7bbaf1;
+  border: 1px solid #1991fa;
+  border-right-width: 0px;
+}
+
+.verify-img-panel {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  border-radius: 3px;
+}
+
+.verify-img-panel .verify-refresh {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  cursor: pointer;
+  background-color: rgba(0,0,0,0.12);
+  line-height: 30px;
+}
+
+.verify-img-panel .icon-refresh {
+  font-size: 20px;
+  color: #fff;
+}
+
+.verify-img-out{
+  position: relative;
+}
+.verify-sub-block {
+  position: absolute;
+  z-index: 3;
+  text-align: center;
+  left:0px;
+  top: 0px;
+}
+
+.verify-bar-area .verify-move-block .verify-icon {
+  font-size: 18px;
+}
+
+.verify-bar-area .verify-msg {
+  z-index: 3;
+}
+
+.pubinfo-m-normal .verify-img-out {
+  position: absolute;
+  bottom: 20px;
+  opacity: 0;
+  transition: opacity 0.5s, bottom 0.5s, visibility 0.5s;
+  visibility: hidden;
+  z-index:999;
+}
+
+.pubinfo-m-touch .verify-img-out {
+  bottom: 40px;
+  opacity: 1;
+  transition: opacity 0.5s, bottom 0.5s, visibility 0.5s;
+  visibility:visible;
+}
+</style>

package/src/components/VerifySlide/PubinfoPopSlide.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { RESULT } from './common/mouse.ts';
+import { useToggle } from '@vueuse/core';
+import { useAttrs } from 'vue';
+import Fixed from './PubinfoFixedSlide.vue';
+
+export interface PubinfoPopSlideProps {
+  onSuccess?: (data: RESULT) => void
+}
+
+defineOptions({
+  name: 'PubinfoPopSlide',
+});
+
+const props = withDefaults(defineProps<PubinfoPopSlideProps>(), {});
+
+const attrs = useAttrs();
+
+// 双向绑定
+const open = defineModel<boolean>('open');
+
+const setOpen = useToggle(open);
+
+function onOpen() {
+  setOpen(true);
+}
+
+function onSuccess(data: RESULT) {
+  props.onSuccess?.(data);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <div>
+    <a-modal
+      v-bind="attrs"
+      v-model:open="open"
+      title="请完成安全验证"
+      :width="370"
+      :z-index="1101"
+      :destroy-on-close="true"
+      :footer="false"
+      centered
+      :mask-closable="false"
+    >
+      <Fixed @success="onSuccess" />
+    </a-modal>
+  </div>
+</template>

package/src/components/VerifySlide/PubinfoTouchSlide.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useTouchService } from './common/touchService.ts';
+import Fixed from './PubinfoFixedSlide.vue';
+
+const emit = defineEmits(['success']);
+const { onAreaMouseLeave, onMouseEnter, onMouseLeave, handleSubmit, showButton, isSuccess, inArea } = useTouchService();
+
+const pubinfoMMFixedSlideRef = ref<any>(null);
+onMounted(() => {
+  showButton.value = true;
+  isSuccess.value = false;
+  inArea.value = false;
+});
+
+function onSubmit(data: any) {
+  handleSubmit(data, emit);
+}
+
+defineExpose({
+  refresh: () => {
+    showButton.value = true;
+    isSuccess.value = false;
+    inArea.value = false;
+    pubinfoMMFixedSlideRef.value.refresh();
+  },
+});
+</script>
+
+<template>
+  <div relative h-40px class="w-100%">
+    <div absolute bottom-0 left-0 right-0 class="pubinfo-m-normal" :class="{ 'pubinfo-m-touch': !showButton }" @mouseleave="onMouseLeave">
+      <div absolute bottom-0 w-full>
+        <Fixed ref="pubinfoMMFixedSlideRef" @success="onSubmit" @menter="onMouseEnter" @mleave="onAreaMouseLeave" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.button_touch {
+  width: 320px;
+  height: 40px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, #fff 0, #ebedf0 87%);
+  border: 1px solid #e4e7eb;
+  cursor: pointer;
+  font-size: 14px;
+  color: #45494c;
+}
+</style>

package/src/components/VerifySlide/common/init.ts

@@ -0,0 +1,41 @@
+import { postAuthCaptchaGet } from '@/api/modules/auth/renzhengfuwu';
+
+export function refresh(VA: any) {
+  VA.showRefresh.value = true;
+  VA.transitionLeft.value = 'left .3s';
+  VA.moveBlockLeft.value = '';
+  VA.leftBarWidth.value = undefined;
+  VA.verifyLeftBarBackgroundColor.value = '#d1e9fe';
+  VA.moveBlockBackgroundColor.value = '';
+  VA.leftBarBorderColor.value = '#ddd';
+  VA.iconColor.value = 'rgba(0,0,0,0.88)';
+  VA.iconName.value = 'normal';
+  VA.isEnd.value = false;
+  getPictrue(VA);
+  VA.tipWords.value = '';
+  setTimeout(() => {
+    VA.transitionLeft.value = '';
+    VA.text.value = '向右滑动完成验证';
+  }, 300);
+}
+
+// 请求背景图片和验证图片
+export function getPictrue(VA: any) {
+  const data = {
+    captchaType: 'blockPuzzle',
+    size: '320*160',
+  };
+
+  postAuthCaptchaGet(data).then((res: any) => {
+    if (res.success) {
+      const captchaMessage = JSON.parse(res.data.plaintext);
+      VA.backImgBase.value = captchaMessage.originalImageBase64;
+      VA.blockBackImgBase.value = captchaMessage.jigsawImageBase64;
+      VA.backToken.value = captchaMessage.token;
+      VA.secretKey.value = captchaMessage.secretKey;
+    }
+    else {
+      VA.tipWords.value = res.msg;
+    }
+  });
+}

package/src/components/VerifySlide/common/mouse.ts

@@ -0,0 +1,124 @@
+import { postAuthCaptchaCheck } from '@/api/modules/auth/renzhengfuwu';
+import { aesEncrypt } from '../../aes.ts';
+import { refresh } from './init.ts';
+
+export interface RESULT {
+  captchaVerification: string
+  captchaType: string
+}
+
+export default function useMounseOpertae(VA: any) {
+  // 鼠标按下
+  function start(e: any) {
+    e = e || window.event;
+
+    VA.verifyLeftBarBackgroundColor.value = '#d1e9fe';
+
+    VA.moveBlockBackgroundColor.value = '#1991fa';
+
+    VA.leftBarBorderColor.value = '#1991fa';
+
+    VA.iconColor.value = '#fff';
+
+    VA.startMoveTime.value = +new Date(); // 开始滑动的时间
+
+    if (VA.isEnd.value === false) {
+      VA.text.value = '';
+      e.stopPropagation();
+      VA.status.value = true;
+    }
+  }
+
+  // 鼠标移动
+  function move(e: any, options?: any) {
+    e = e || window.event;
+    if (VA.status.value && VA.isEnd.value === false) {
+      const x = e.clientX;
+      const bar_area_left = options.barArea.getBoundingClientRect().left;
+      let move_block_left = x - bar_area_left; // 小方块相对于父元素的left值
+      if (move_block_left >= options.barArea.offsetWidth - Number.parseInt((Number.parseInt((VA.blockSize.value.width) as any) / 2) as any) - 2) {
+        move_block_left = options.barArea.offsetWidth - Number.parseInt((Number.parseInt((VA.blockSize.value.width) as any) / 2) as any) - 2;
+      }
+      if (move_block_left <= 0) {
+        move_block_left = Number.parseInt((Number.parseInt((VA.blockSize.value.width) as any) / 2) as any);
+      }
+      // 拖动后小方块的left值
+      VA.moveBlockLeft.value = `${(move_block_left - VA.startLeft.value) < 0 ? '0px' : (move_block_left - VA.startLeft.value)}px`;
+
+      VA.leftBarWidth.value = `${move_block_left - VA.startLeft.value}px`;
+    }
+  }
+
+  function end(emit: any) {
+    VA.endMovetime.value = +new Date();
+    // 判断是否重合
+    if (VA.status.value && VA.isEnd.value === false) {
+      let moveLeftDistance = Number.parseInt((VA.moveBlockLeft.value || '').replace('px', ''));
+      moveLeftDistance = moveLeftDistance * 310 / Number.parseInt(VA.realImgSize.value.width as any);
+      const data = {
+        captchaType: 'blockPuzzle',
+        pointJson: VA.secretKey.value ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), VA.secretKey.value) : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
+        token: VA.backToken.value,
+      };
+
+      postAuthCaptchaCheck(data).then((res: any) => {
+        if (res.success) {
+          VA.verifyLeftBarBackgroundColor.value = '#d2f4ef';
+
+          VA.moveBlockBackgroundColor.value = '#52ccba';
+
+          VA.leftBarBorderColor.value = '#52ccba';
+
+          VA.iconColor.value = '#fff';
+
+          VA.iconName.value = 'right';
+
+          VA.showRefresh.value = false;
+
+          VA.isEnd.value = true;
+
+          VA.passFlag.value = true;
+
+          VA.tipWords.value = `${((VA.endMovetime.value - VA.startMoveTime.value) / 1000).toFixed(2)}s验证成功`;
+
+          const captchaVerification = VA.secretKey.value ? aesEncrypt(`${VA.backToken.value}---${JSON.stringify({ x: moveLeftDistance, y: 5.0 })}`, VA.secretKey.value) : `${VA.backToken.value}---${JSON.stringify({ x: moveLeftDistance, y: 5.0 })}`;
+          const params: RESULT = {
+            captchaVerification,
+            captchaType: 'blockPuzzle',
+          };
+
+          setTimeout(() => {
+            emit('success', params);
+          }, 200);
+        }
+      }).catch(() => {
+        VA.verifyLeftBarBackgroundColor.value = '#fce1e1';
+
+        VA.moveBlockBackgroundColor.value = '#f57a7a';
+
+        VA.leftBarBorderColor.value = '#f57a7a';
+
+        VA.iconColor.value = '#fff';
+
+        VA.iconName.value = 'wrong';
+
+        VA.passFlag.value = false;
+
+        VA.tipWords.value = '验证失败';
+
+        setTimeout(() => {
+          VA.tipWords.value = '';
+          refresh(VA);
+        }, 300);
+      });
+
+      VA.status.value = false;
+    }
+  }
+
+  return {
+    start,
+    move,
+    end,
+  };
+}

package/src/components/VerifySlide/common/touchService.ts

@@ -0,0 +1,52 @@
+import { ref } from 'vue';
+// 定义提交处理函数的类型
+export type EmitFunction = (event: 'success', data: any) => void;
+
+export function useTouchService() {
+  const showButton = ref<boolean>(true);
+  const isSuccess = ref<boolean>(false);
+  const inArea = ref<boolean>(false);
+
+  function handleSubmit(data: any, emit: EmitFunction) {
+    showButton.value = true;
+    isSuccess.value = true;
+    emit('success', data);
+  }
+
+  function onMouseEnter() {
+    inArea.value = true;
+    setTimeout(() => {
+      if (!isSuccess.value && inArea.value) {
+        showButton.value = false;
+      }
+    }, 300);
+  }
+
+  function onMouseLeave() {
+    // 当已经校验成功时，不做任何操作（也看不到验证码图片）
+    if (!isSuccess.value) {
+      showButton.value = true;
+    }
+  }
+
+  function onAreaMouseLeave() {
+    inArea.value = false;
+  }
+
+  return {
+    showButton,
+    isSuccess,
+    inArea,
+    handleSubmit,
+    onMouseEnter,
+    onMouseLeave,
+    onAreaMouseLeave,
+  };
+}
+
+// export function refreshTouchSlide() {
+//   showButton.value = true;
+//   isSuccess.value = false;
+//   inArea.value = false;
+//   refreshFixedSlide();
+// }

package/src/components/VerifySlide/common/variable.ts

@@ -0,0 +1,90 @@
+import { ref } from 'vue';
+
+export function variable() {
+  const blockSize = ref({
+    width: '50px',
+    height: '50px',
+  });
+
+  // 是否通过的标识
+  const passFlag = ref<boolean>(false);
+  // 移动开始的时间
+  const startMoveTime = ref<number>(0);
+  // 移动结束的时间
+  const endMovetime = ref<number>(0);
+  // ??s验证成功/验证失败
+  const tipWords = ref('');
+  // 下方滑动区域的文字
+  const text = ref('向右滑动完成验证');
+  // 图片与滑动区域的宽高
+  const setSize = ref({
+    imgHeight: '160px',
+    width: '100%',
+    barHeight: '40px',
+    barWidth: '310px',
+  });
+  // 图片实际大小
+  const realImgSize = ref({
+    width: 0,
+    height: 0,
+  });
+  // 滑动块的左侧位置（距离左侧的宽度）
+  const moveBlockLeft = ref<string>('');
+  // 滑动区域的左侧宽度
+  const leftBarWidth = ref<any>();
+  // 滑动区域左侧的颜色
+  const verifyLeftBarBackgroundColor = ref<string>('#d1e9fe');
+  // 滑块背景色
+  const moveBlockBackgroundColor = ref<string>('');
+  // 滑动过程中左侧区域的边框颜色
+  const leftBarBorderColor = ref<string>('#ddd');
+  // 滑块图标颜色
+  const iconColor = ref<string>('rgba(0,0,0,0.88)');
+  // 滑块中的图标样式
+  const iconName = ref('normal');
+  // 鼠标状态
+  const status = ref(false);
+  // 是够验证完成
+  const isEnd = ref(false);
+  // 是否显示刷新按钮
+  const showRefresh = ref(true);
+  // left过渡
+  const transitionLeft = ref('');
+  // 用于滑动过程中左侧的计算
+  const startLeft = ref(25);
+  // 背景图
+  const backImgBase = ref<any>();
+  // 拼图背景图
+  const blockBackImgBase = ref<any>();
+  // token
+  const backToken = ref<any>();
+  // 加密key
+  const secretKey = ref<any>();
+
+  return {
+    backImgBase,
+    backToken,
+    blockBackImgBase,
+    blockSize,
+    endMovetime,
+    iconColor,
+    iconName,
+    isEnd,
+    leftBarBorderColor,
+    leftBarWidth,
+    moveBlockBackgroundColor,
+    moveBlockLeft,
+    passFlag,
+    secretKey,
+    setSize,
+    realImgSize,
+    showRefresh,
+    startLeft,
+    startMoveTime,
+    status,
+    text,
+    tipWords,
+    transitionLeft,
+    verifyLeftBarBackgroundColor,
+  };
+};